System identyfikacji wizualnej

Widzieć całość.
Decydować precyzyjnie.

Pierwszy fundament Argosa: jeden geometryczny znak, wyrazisty logotyp i spokojny system ekspozycji dla produktu opartego na danych.

01 — Znaki podstawowe

Jedna forma, dwa zastosowania.

Logo pracuje w małych, kwadratowych polach. Logotyp jest podpisem marki i pierwszym wyborem wszędzie tam, gdzie jest na niego miejsce.

Logo

Sygnatura / format 1:1
SVG

Logotyp

Podstawowy podpis / format 253:48
SVG

Kontra

Biel na graficie
Inverse

Kontra

Biel na graficie
Inverse

02 — Zasady użycia

Przestrzeń jest częścią znaku.

Pole ochronne pozwala zachować optyczną precyzję. Jednostka X odpowiada średnicy centralnego punktu logo — jednej czwartej jego szerokości.

Pole ochronneX = 12 units
48 × 48 znak2 × 12 odstęp72 × 72 minimum
Skala cyfrowaPX
16
24
32
48
72

Minimum: 16 px dla logo i 18 px wysokości dla logotypu.

Tak Używaj jednego, jednolitego koloru.

Nie Nie rozciągaj ani nie ściskaj znaku.

Nie Nie obracaj i nie dodawaj efektów.

03 — Typografia

Cal Sans UI.

Jedna skala dla produktu i komunikacji. Cal Sans UI zawsze pracuje z GEOM 32 — charakter pisma jest stały, a hierarchię budują rozmiar, interlinia i dwie wagi.

Obserwuj.
Analizuj.
Decyduj.

Stała markiGEOM 32

Ustawiana globalnie przez --font-variation-argos. Nie nadpisujemy jej lokalnie w komponentach.

Text

400 Regular

Emphasis

500 Medium

Family / Cal Sans UI

Scale / 10–80 px

License / SIL OFL 1.1

Token / utilityPróbkaSizeLineWeightTracking
Display XLtext-display-xl

Widzieć całość

Size
80
Line
72
Weight
500
Tracking
−5.5%
Display LGtext-display-lg

Decydować precyzyjnie

Size
64
Line
60
Weight
500
Tracking
−5%
Display MDtext-display-md

Obraz sytuacji

Size
52
Line
52
Weight
500
Tracking
−4.2%
Title XLtext-title-xl

Portfel inwestycji

Size
36
Line
40
Weight
500
Tracking
−3.5%
Title LGtext-title-lg

Decyzje inwestycyjne

Size
28
Line
32
Weight
500
Tracking
−2.8%
Title MDtext-title-md

Sygnały rynkowe

Size
22
Line
28
Weight
500
Tracking
−2%
Title SMtext-title-sm

Status realizacji

Size
18
Line
24
Weight
500
Tracking
−1.2%
Body LGtext-body-lg

Analiza najważniejszych zmian w portfelu.

Size
16
Line
24
Weight
400
Tracking
−0.5%
Body MDtext-body-md

Dane zostały zaktualizowane przed chwilą.

Size
14
Line
20
Weight
400
Tracking
0
Body SMtext-body-sm

Ostatnia synchronizacja: dzisiaj, 14:32

Size
12
Line
16
Weight
400
Tracking
+0.5%
Label LGtext-label-lg

Zobacz analizę

Size
14
Line
18
Weight
500
Tracking
+0.5%
Label MDtext-label-md

Rynek pierwotny

Size
12
Line
16
Weight
500
Tracking
+2.5%
Label SMtext-label-sm

Aktualny sygnał

Size
10
Line
14
Weight
500
Tracking
+10%

04 — Kolor i światło

Czerń jest kolorem. Światło jest akcentem.

Argos nie używa płaskiego koloru akcentowego. Podstawowe akcje są czarne, a ważniejsza wersja tej samej akcji dostaje stałą refrakcję, która delikatnie reaguje na kursor — jak światło rozszczepione na krawędzi soczewki. Osobny wariant pozwala zachować ciągły ruch wyłącznie na spektralnym obrysie.

Primary / Ink#090A09

Czerń prowadzi.

Tekst o wysokim kontraście, główne akcje, znak i powierzchnie wymagające skupienia.

Canvas / Mineral#F7F7F3

Neutralne tło oddycha.

Ciepłe minerały budują hierarchię powierzchni, ale nie konkurują z danymi ani znakiem.

Refrakcja

Widmo występuje tylko jako światło.

Kanały spektrum zawsze pojawiają się razem, na czerni. Nie używamy pojedynczego różu, błękitu ani fioletu jako koloru marki, statusu czy tła.

Red · Amber · White · Cyan · Blue · Violet

Ta sama akcja / trzy warianty światła

Primary
Primary + lens accent
Primary + animated border

Akcent stosujemy oszczędnie: jedna refrakcyjna akcja w danym kontekście. Lens podąża za precyzyjnym kursorem, a wariant border zachowuje ciągły ruch wyłącznie na krawędzi.

01

Czarny najpierw

Domyślny wybór dla akcji i wysokiego kontrastu.

02

Jedna soczewka

Tylko jeden refrakcyjny akcent w jednym kontekście decyzyjnym.

03

Ruch przypisany

Tło reaguje na kursor. Autonomiczna pętla działa tylko na obrysie.

05 — Ikonografia

Ikona jest sygnałem, nie dekoracją.

Jedna rodzina Lucide na siatce 24 × 24 daje Argosowi spójny, techniczny język. Ikony dziedziczą kolor tekstu, zachowują obrys 2 px i nie animują się bez znaczenia.

System / Lucide12 / Core set

Jeden język dla produktu.

Zestaw bazowy pokrywa obserwację, analizę, lokalizację i nawigację. Nowe symbole wybieramy z tej samej rodziny.

Wyszukiwanie
Obserwacja
Nieruchomość
Lokalizacja
Analiza
Warstwy
Trasa
Filtry
Przejście
Uwaga
Rynek
Sygnał
Anatomia24 × 24
Grid
24 × 24
Live area
20 × 20
Stroke
2 px
Caps
Round

Skala semantyczna

Cztery role zamiast przypadkowych rozmiarów.

W produkcie wybieramy rolę ikony. Nie składamy osobno szerokości i wysokości.

Microicon-argos-micro
Size
16 px
Use
Metadane i status
Controlicon-argos-control
Size
20 px
Use
Przyciski i inputy
Defaulticon-argos-default
Size
24 px
Use
Nawigacja i listy
Featureicon-argos-feature
Size
32 px
Use
Punkty wejścia

Ikona w interfejsie

Najpierw znaczenie, potem symbol.

Etykieta pozostaje przy niejednoznacznych akcjach. Sam symbol może działać tylko wtedy, gdy wzorzec jest powszechny i ma dostępną nazwę.

Ikona bez widocznej etykiety zawsze otrzymuje nazwę dostępną.

Zasady

01

Lucide onlyNie mieszamy rodzin i charakterów obrysu.

02

currentColorZnaczenie koloru pochodzi z kontekstu komponentu.

03

Static by defaultRuch wyjaśnia stan, nigdy nie jest ozdobą.

06 — Materiał cyfrowy

Szkło jako warstwa informacji.

Liquid Glass służy do nawigacji i kontekstowych paneli nad danymi. Nie zastępuje powierzchni treści i zawsze musi zachować kontrast.

Context layer

Sygnał rynkowy

Aktualny

Popyt rośnie szybciej niż podaż.

+18% zapytań3,2 mies. podażyWarszawa

Zasada materiału

Szkło niesie kontekst. Dane pozostają ostre.

07 — Zdjęcia

Dokumentuj rzeczywistość. Nie dekoruj jej.

Fotografia Argosa pokazuje miejsce jako dowód: z czytelną geometrią, naturalnym światłem i skalą, którą można zrozumieć bez dodatkowego opisu.

Materiały przykładowe: Antrans Invest
Zrealizowana inwestycja Dworska Enklawa z widoczną architekturą budynków i dziedzińcem
01 / KontekstNajpierw miejsce, potem detal.

Szeroki kadr pokazuje relację budynku, otoczenia i skali.

Jasne wnętrze salonu i jadalni z drewnianymi elementami
02 / ŚwiatłoNaturalny balans.
Detal wykończenia łazienki z drewnem, kamieniem i czarnymi elementami
03 / MateriałDetal ma strukturę.

System kadrowania

Format wynika z roli zdjęcia.

Punkt zainteresowania pozostaje czytelny po zmianie proporcji. Nie rozciągamy obrazu i nie kadrujemy przez ważne elementy architektury.

Zrealizowany budynek mieszkalny Dolina Krasowa widziany od strony dziedzińca16:9
PanoramaHero, lokalizacja i pełny kontekst
Jasne wnętrze mieszkania z drewnianym stołem i naturalnym światłem4:5
PionDetal, wnętrze i kanały mobilne
Wnętrze salonu z zieloną ścianą dekoracyjną i ciemnymi meblami1:1
ModułKarta, lista i szybkie porównanie
01

Światło bez efektu

Neutralna ekspozycja i naturalny kontrast. Filtr nie może zmieniać charakteru miejsca.

02

Geometria prowadzi

Piony pozostają pionowe, a perspektywa pomaga czytać bryłę i układ przestrzeni.

03

Jeden punkt uwagi

Kadr ma jeden czytelny temat. Interfejs nie konkuruje z przypadkowym tłem.

08 — Layout

Siatka porządkuje. Przestrzeń ustala hierarchię.

Argos układa treść na responsywnej siatce i rytmie bazowym 4 px. Moduły zmieniają relacje na kolejnych szerokościach — nie są po prostu pomniejszane.

Rama / WorkspaceMax / 1440 px

Stałe krawędzie, elastyczny środek.

Kontener ma wspólną oś dla nawigacji, danych i kontekstu. Zewnętrzny margines chroni treść tak samo, jak pole ochronne chroni znak.

Container
1440 px
Reading
760 px
Portfolio / WarsawUpdated now
Rail / 3
Main / 6Rynek przyspiesza.
Context / 3

3 sygnały wymagają uwagi.

Outer gutter / 20 → 32 pxColumn gap / 16 → 24 pxColumns / 4 → 8 → 12
Mobile< 768 px
4 COL
Gap
16 px
Margin
20 px
Tablet768–1023 px
8 COL
Gap
24 px
Margin
32 px
Desktop≥ 1024 px
12 COL
Gap
24 px
Margin
32 px
SpacingBase / 4 px

Odstępy są składnią.

Małe wartości łączą elementy, większe oddzielają moduły i sekcje znaczeniowe.

1
4
2
8
3
12
4
16
6
24
8
32
12
48
16
64
22
88
32
128
Inline / 4–12Control / 12–16Module / 24–48Section / 88–128
Composition patterns3 presets

Proporcja mówi, co jest ważne.

Dominujący moduł dostaje większy udział siatki, a nie dodatkowy kolor czy efekt.

FocusPriorytet i kontekst
8 + 4
CompareRówne warianty
6 + 6
ScanModuły do skanowania
4 + 4 + 4

Responsive reflow / Priority first

Na małym ekranie zmienia się relacja, nie skala.

Poniżej 768 px moduły przechodzą w jedną kolumnę. Kolejność wynika z ważności treści i pozostaje zgodna z kolejnością dokumentu.

01

Jedna dominanta

Każdy widok ma jeden obszar, który prowadzi decyzję.

02

Wspólne krawędzie

Moduły wyrównują się do kolumn i do osi sąsiedniej treści.

03

Priorytet przed skalą

Responsywność zmienia kolejność i relację, nie tylko rozmiar.

09 — Mapa

Mapa pokazuje relacje. Akcent wskazuje decyzję.

Podkład pozostaje mineralny i wyciszony. Czarna geometria prowadzi przez dane, a widmo nie koduje kategorii ani statusu.

Mapa portfela / Warszawa

Mapbox Standard · ładowanie warstwy danych
Marker states4 roles

Stan zmienia formę, nie barwę.

Czerń pozostaje wspólnym językiem danych. Rozmiar, obrys i skupienie budują hierarchię.

DefaultDane w kontekście
ActiveJedna kotwica
8ClusterGęsty widok
AreaZakres analizy
Surface rolesSemantic only

Podkład ma ustąpić danym.

Role mapy są powiązane z grafitem i minerałami Argos, więc widok zachowuje kontrast w jasnym i ciemnym trybie.

Canvas--map-argos-canvas
Land--map-argos-land
Water--map-argos-water
Road--map-argos-road
Label--map-argos-label
Data--map-argos-data
01

Dane nad podkładem

Drogi i etykiety są kontekstem. Geometria produktu ma pierwszy plan.

02

Jedna aktywna kotwica

Wzmocniony punkt wskazuje bieżącą decyzję, bez mnożenia akcentów.

03

Ruch tylko po decyzji

Kamera odpowiada na wybór użytkownika i respektuje ograniczenie ruchu.

10 — Komponenty

Jeden język dla całego narzędzia.

Biblioteka pokrywa pełny przepływ produktu SaaS: od pierwszej akcji i wprowadzania danych, przez nawigację i analizę, aż po informację zwrotną, widoki inwestycji, zdjęcia, mapy i warstwy kontekstowe.

Core library / SaaS workspace

42 komponenty. Sześć grup. Jeden sposób działania.

Dobre domyślne stany ograniczają liczbę decyzji w produkcie i utrzymują spójność między analizą, konfiguracją i raportowaniem.
07Akcje
09Formularze
06Nawigacja
06Dane
07Feedback
07Wzorce
01 / Actions

Akcja ma czytelną hierarchię.

Jedna akcja główna prowadzi zadanie. Pozostałe pozostają spokojne, a destrukcja zawsze nazywa konsekwencję.

Buttons / hierarchy7 variants
Active / scale 0.97Focus / 2 px ringDisabled / 42% opacityIcon gap / 8 px
02 / Forms

Formularz prowadzi, nie przesłuchuje.

Etykieta pozostaje widoczna, pomoc wyjaśnia format, a błąd mówi dokładnie, jak wrócić do poprawnego stanu.

Fields / input5 states
Controls / selection4 patterns
Zakres planu
Powiadomienia o zmianachWłączone dla istotnych zdarzeń.
03 / Navigation

Pozycja i następny krok są zawsze widoczne.

Nawigacja pokazuje hierarchię bez przejmowania uwagi od danych. Aktywny stan zmienia powierzchnię i kontrast, nie tylko kolor tekstu.

Tabs / filters3 states

Pełny portfel: 24 projekty we wszystkich statusach.

04 / Data display

Dane można zeskanować przed przeczytaniem.

Wartość, zmiana i status mają stałe pozycje. Tabela zachowuje wyrównanie liczb, a kolor nigdy nie jest jedynym nośnikiem znaczenia.

Wartość portfela124,8 mln zł 8,6% kw/kw
Aktywne projekty18z 24 wszystkich
Sygnały wymagające uwagi3 2 nowe dzisiaj
Portfolio / Warszawa24 projekty
WybórProjektStatusWartośćAkcje
Wola HorizonWarszawa · Wola Aktywny48,2 mln zł+12,4%
Mokotów AxisWarszawa · Mokotów Analiza31,8 mln zł+8,1%
Praga YardWarszawa · Praga-Północ Wstrzymany19,6 mln zł−2,7%
1 zaznaczone
Aktywny Wymaga uwagi Błąd SzkicRynek pierwotny Warszawa
05 / Feedback & layers

System mówi, co się stało i co dalej.

Komunikat opisuje rezultat, nie tylko stan. Warstwy są używane oszczędnie i zamykają się przez wyraźną akcję lub klawisz Escape.

Analiza jest aktualna

Dane zsynchronizowano 8 minut temu.

Raport jest gotowy

Plik PDF można pobrać lub udostępnić.

Brakuje dwóch źródeł

Uzupełnij dane przed publikacją raportu.

Import nie powiódł się

Sprawdź format kolumn i spróbuj ponownie.

LoadingProgress + skeleton
Generowanie raportu68%
68%Analiza dokumentów · krok 3 z 5
Empty stateFirst action
Nie ma jeszcze projektów

Dodaj pierwszy projekt lub zaimportuj dane z arkusza.

Overlay triggersMenu + modal
Wyjaśnia funkcję bez zastępowania etykiety.
Toast / live region
Zmiany zapisane

Projekt Wola Horizon został zaktualizowany.

06 / Product patterns

Złożone zadania mają gotowe punkty wyjścia.

Zdjęcia inwestycji, mapa, dane finansowe i praca zespołu łączą się w kompletne wzorce, z których można budować właściwe ekrany produktu.

Zabudowa mieszkaniowa Dolina Krasowa z zielonym dziedzińcem
Project overview / Etap II W sprzedaży
Rzeszów · Krasne

Dolina Krasowa

Jeden widok łączy tożsamość inwestycji, najważniejsze wskaźniki i akcje prowadzące do analizy.

Wartość
42,6 mln zł
Lokale
21 / 84
Zmiana
+8,4%
IRR prognoza
7,8%
Investment cards

Obraz prowadzi, dane potwierdzają.

Wybór karty aktualizuje nadrzędny widok projektu bez utraty kontekstu.

Zabudowa mieszkaniowa Dolina Krasowa z zielonym dziedzińcem
W sprzedażyEtap II
Rzeszów · Krasne
Dolina Krasowa
Wartość
42,6 mln zł
Dostępne
21
Nowoczesna zabudowa inwestycji Dworska Enklawa
RealizacjaEtap I
Rzeszów · Dworska
Dworska Enklawa
Wartość
35,1 mln zł
Dostępne
14
Jasne wnętrze pokazowe z drewnianym stołem
GotoweShowroom
Kolekcja wnętrz
Antrans Design
Wartość
8,9 mln zł
Dostępne
4
Map + asset inspector

Mapa jest narzędziem selekcji, nie dekoracją.

Warstwa przestrzenna, aktywny obiekt i metryki pozostają w jednym komponencie gotowym do pracy z portfelem.

Przygotowuję mapę portfela
Media browserGaleria inwestycji
Dziedziniec inwestycji Dolina Krasowa
Dziedziniec1 / 4
ComparisonPorównanie inwestycji
Detal inwestycji Dolina Krasowa
Dolina Krasowa
Architektura inwestycji Dworska Enklawa
Dworska Enklawa
Wartość projektu
42,6 mln zł
35,1 mln zł
Lokale dostępne
21 / 84
14 / 62
Średnia cena m²
10 850 zł
11 240 zł
Tempo sprzedaży
6,2 / mies.
4,8 / mies.
MilestonesPostęp realizacji
68%
Fragment zrealizowanej zabudowy Dolina Krasowa
Aktualny etapInstalacje wewnętrzne
  1. Pozwolenie12.02.2025
  2. Stan surowy28.10.2025
  3. Instalacje18.05.2026
  4. OdbioryQ4 2026
Project workspaceDokumenty i aktywność
AKMSJP+4

7 osób pracuje nad projektem

AK

Anna Kowalska zaktualizowała model finansowy. 18 minut temu

Argos Identity System · 0.1

Logo, typografia, kolor, ikonografia, materiał cyfrowy, zdjęcia, layout, mapa i komponenty.