Design SystemBrand Book v1.0 · Tokeny i komponenty interfejsu
Brand Book v1.0, s. 5–10: wersja podstawowa z dopiskiem NIERUCHOMOŚCI; granat na jasnym tle, biel na ciemnym. Zachowuj proporcje, pełne krycie i pole ochronne X z każdej strony.
Pole X odczytujemy z rysunku na s. 8. Brandbook nie podaje minimalnego rozmiaru w px/mm. Odstępy tej demonstracji są uzupełnieniem UI, nie nową definicją X. Nie obracaj, nie rozciągaj, nie obrysowuj ani nie dodawaj efektów do logo.
Granat jest podstawą, grafit i biel bazą neutralną. Chaber i błękit to akcenty graficzne, nie kolory tekstu. Golos Text dla nagłówków, treści i danych. Trirong pozostaje krojem referencyjnym brandbooka.
Nawiasy z litery O występują zwykle w parze, w tym samym kolorze i rozmiarze; obejmują do ok. pięciu słów (s. 18). Przykłady pokazują wnętrza, architekturę i ludzi (s. 20–23). Nie dostarczono osobnych plików nawiasów ani fotografii.
Responsywna skala, kolory statusów, radius, odstępy i ruch są decyzjami implementacyjnymi. Brak zestawu ikon marki — proste symbole pozostają tymczasowe. Szczegóły i źródła: DESIGN.md.
Pierwsze sześć kolorów pochodzi bezpośrednio z s. 12 brandbooka (HEX/RGB). Pozostałe są uzupełnieniami interfejsu. Jasne akcenty zachowujemy w palecie; tekst i akcje wykorzystują granat.
#1e3562--primitive-navy
#6f9df7--primitive-cornflower
#c3d7fe--primitive-sky
#fff1cd--primitive-butter
#ffffff--primitive-white
#212121--primitive-graphite
Granat
--primitive-navy · #1e3562Brandbook · s. 12
Chaber
--primitive-cornflower · #6f9df7Brandbook · s. 12
Błękit
--primitive-sky · #c3d7feBrandbook · s. 12
Masło
--primitive-butter · #fff1cdBrandbook · s. 12
Biel
--primitive-white · #ffffffBrandbook · s. 12
Grafit
--primitive-graphite · #212121Brandbook · s. 12
navy-hover
--primitive-navy-hover · #16294eUzupełnienie UI
navy-active
--primitive-navy-active · #0e1d38Uzupełnienie UI
butter-hover
--primitive-butter-hover · #f3dfadUzupełnienie UI
butter-active
--primitive-butter-active · #e8cc8bUzupełnienie UI
mist
--primitive-mist · #f4f6faUzupełnienie UI
muted
--primitive-muted · #536079Uzupełnienie UI
line
--primitive-line · #d3dae5Uzupełnienie UI
line-strong
--primitive-line-strong · #647087Uzupełnienie UI
disabled
--primitive-disabled · #e5e9efUzupełnienie UI
success
--primitive-success · #146c43Uzupełnienie UI
warning
--primitive-warning · #805400Uzupełnienie UI
danger
--primitive-danger · #b42332Uzupełnienie UI
danger-hover
--primitive-danger-hover · #8e1825Uzupełnienie UI
danger-active
--primitive-danger-active · #70121cUzupełnienie UI
white · #ffffff
white · #ffffff
mist · #f4f6fa
navy · #1e3562
butter · #fff1cd
graphite · #212121
muted · #536079
white · #ffffff
navy · #1e3562
navy-hover · #16294e
navy-active · #0e1d38
white · #ffffff
butter · #fff1cd
butter-hover · #f3dfad
butter-active · #e8cc8b
navy · #1e3562
cornflower · #6f9df7
sky · #c3d7fe
line · #d3dae5
line-strong · #647087
navy · #1e3562
success · #146c43
warning · #805400
danger · #b42332
danger-hover · #8e1825
danger-active · #70121c
white · #ffffff
navy · #1e3562
disabled · #e5e9ef
muted · #536079
foreground / surface
foreground-muted / surface-muted
foreground-inverse / surface-inverse
primary-foreground / primary
danger-foreground / danger
Aa
Trirong Medium · 500
Krój referencyjny brandbooka; w bieżącym UI zastąpiony przez Golos Text.
Aa
Golos Text · 400–700
Opisy, dane i elementy interfejsu.
Aktualna decyzja UI: Golos Text 500 — wszystkie nagłówki; 400/500/600/700 — treść i interfejs. Trirong to wzorzec z brandbooka, a nie aktywny font nagłówków portalu. Oficjalne Google Fonts, hostowane przez next/font. Rodziny: s. 14–15; inspiracja hierarchii: s. 16. Rozmiary web, interlinie i tracking 0em to uzupełnienia UI; wartości pt w brandbooku są przykładami, nie wymiarami CSS.
display · Trirong 500 · 40–72px · 1.15
Zażółć gęślą jaźń — Łódź, Śródmieście
h1 · Trirong 500 · 36–64px · 1.2
Zażółć gęślą jaźń — Łódź, Śródmieście
h2 · Trirong 500 · 30–48px · 1.25
Zażółć gęślą jaźń — Łódź, Śródmieście
h3 · Golos Text 500 · 24–32px · 1.3
Zażółć gęślą jaźń — Łódź, Śródmieście
h4 · Golos Text 500 · 20–24px · 1.35
Zażółć gęślą jaźń — Łódź, Śródmieście
h5 · Golos Text 500 · 18px · 1.4
Zażółć gęślą jaźń — Łódź, Śródmieście
h6 · Golos Text 500 · 16px · 1.5
Zażółć gęślą jaźń — Łódź, Śródmieście
body-lg · Golos Text 400 · 18–20px · 1.5
Zażółć gęślą jaźń — Łódź, Śródmieście
body · Golos Text 400 · 16px · 1.5
Zażółć gęślą jaźń — Łódź, Śródmieście
body-sm · Golos Text 400 · 14px · 1.5
Zażółć gęślą jaźń — Łódź, Śródmieście
label · Golos Text 500 · 16px · 1.5
Zażółć gęślą jaźń — Łódź, Śródmieście
caption · Golos Text 400 · 13px · 1.54
Zażółć gęślą jaźń — Łódź, Śródmieście
To próba zawijania polskiego tekstu na małym ekranie. Golos Text Bold 700 wyróżnia treść, a SemiBold 600 statusy.
Hugeicons · bezpłatny Stroke Rounded · linia --icon-stroke: 1.5. Kolor currentColor dziedziczy semantyczną rolę tekstu lub przycisku.
Search01IconLocation01IconHeartIconMail01IconMenu01Iconxs · 14px
sm · 16px
md · 20px
lg · 24px
xl · 32px
display · 48px
Ikony są dekoracyjne (aria-hidden). Przycisk bez tekstu wymaga aria-label; błąd lub status zawsze ma opis tekstowy. Tab pokazuje rzeczywisty focus. Nie używaj emoji jako ikon interfejsu.
space-8 · 8px
space-16 · 16px
space-24 · 24px
space-32 · 32px
space-48 · 48px
space-64 · 64px
space-80 · 80px
Uzupełnienia UI (brandbook ich nie określa): gutters 16px, od 768px 32px. Cienie kart: none; dla logo efekty są zabronione (s. 10). Border: 1px; focus: 3px + 4px odstępu. Przejścia: 160ms, cubic-bezier(.2, 0, 0, 1); wyłączone przy reduced motion.
Hover: najedź na aktywny przycisk lub pole. Active: przytrzymaj przycisk. Focus: użyj Tab i Shift+Tab — obrys pojawia się przy rzeczywistym fokusie klawiatury. Disabled i loading blokują aktywację.
Opis pozostaje widoczny.
Nie udało się rozpoznać wpisanej wartości. Sprawdź jej poprawność i spróbuj ponownie.
Uzupełnij opis.
Wybierz jedną opcję.
Kliknij etykietę lub użyj spacji.
Zaznacz pole.
Nagłówek, opis, treść i stopka są osobnymi komponentami.
Wysokość karty dopasowuje się do treści. CardTitle pozwala wybrać poziom nagłówka przez prop as.
Karta nieruchomości
Miejsce na fotografię
Placeholder · nie jest ofertą
Przykładowa lokalizacja · Warszawa
Fikcyjne mieszkanie służy wyłącznie prezentacji typografii, statusów i układu danych. Brak rzeczywistej oferty sprzedaży.
Wyszukiwarka
Formularz pokazuje wybrane kryteria lokalnie, bez pobierania ofert.
FieldDisplay to nieedytowalne podsumowanie pola z prototypu, bez roli select i bez sugerowania obsługi nieopisanych opcji. ButtonLink zachowuje natywną nawigację linku i wygląd przycisku. Wariant inverse zapewnia jasną granicę i tekst na surface-inverse.
Pola controlled i uncontrolled, walidacja, loading i komunikat wyniku. Dane nie są wysyłane.
Pola z * są wymagane. Formularz działa wyłącznie lokalnie; przetestuj błędy, klawiaturę i stan oczekiwania.