§ — FH Design System v1.0
Operacyjnie edytorialnie.
Skalibrowany system dla zarządzanego marketplace'u. Kremowy papier, głęboki atrament, jeden akcent zieleń. Grotesk dla struktury, mono dla stanu, szeryf jako punktuacja. Zaprojektowany, aby sprawiać wrażenie wiarygodne, operacyjne i niskoszumowe.
§01
Zasady
P01
Spokój, nie cisza
Powierzchnia powinna się osadzić, nie krzyczeć. Rezerwuj emfazę dla stanu i akcji.
P02
Ekspertyza czytelna
Tożsamość, zakres i cykl życia widoczne w każdym widoku. Stan przed stylem.
P03
Dyscyplina rejestru
Daty, ID i zdarzenia w mono. System czyta się jak rejestr, nie feed.
P04
Jeden akcent
Zieleń niesie ciężar. Używaj do kierowania uwagi, nie do dekoracji.
§02
Typografia
Parowanie krojów
Inter Tight · Display i tekst
Feedback, uporządkowany.
Instrument Serif · Akcenty edytorialne
na papierze.
JetBrains Mono · Etykiety i stany
REQUEST №0482
Skala krojów
Display XL Aa 72px / 500
Display Aa 44px / 500
H1 Aa 32px / 500
H2 Aa 22px / 500
Body LG Aa 17px / 400
Body Aa 14px / 400
Small Aa 12.5px / 400
Label (mono) Aa 10.5px / 500
§03
Kolor
Papier i atrament
paper
#F5F1EA
paper-2
#EEE8DD
paper-3
#E6DFD1
rule
#D9D1BE
ink-3
#6B6559
ink
#14120F
Akcent — zieleń
accent-wash
oklch(92% 0.03 155)
accent-hi
oklch(64% 0.10 155)
accent
oklch(58% 0.10 155)
accent-lo
oklch(48% 0.085 155)
Paleta stanów — cykl życia
oczekuje
zaakcept.
w toku
odrzuc.
zakończ.
zarchiw.
§04
Komponenty
Status pills
Oczekuje Zaakcept. W toku Odrzucony Zakończony Zarchiwizowany
Przyciski
Inputy
Paragon requestu
REQUEST №0482 Zaakcept.
Recenzja landing page
Maren Hollis · SLA 3 dni
§05
Odstępy, zaokrąglenia, elewacja
Skala odstępów (baza 4px)
s-1 · 4px
s-2 · 8px
s-3 · 12px
s-4 · 16px
s-5 · 24px
s-6 · 32px
s-7 · 48px
s-8 · 64px
Zaokrąglenia
xs
sm
md
lg
xl
Elewacja
Cień xs --shadow-xs
Cień sm --shadow-sm
Cień md --shadow-md
Cień lg --shadow-lg