Tipogrāfija un krāsas

Inter tipogrāfijas skalas, semantiskie krāsu tokeni, kontrasta pāri un 200% tālummaiņas paraugs.

Inter VariableWCAG 2.2 AA

Tipogrāfijas skala

Virsraksti lieto sentence case. Pamatteksts ir 16 px; 14 px tikai blīvos datos un palīgtekstā.

DHAFXLE

Display · 36/44 · 700

Skaidra informācijas hierarhija

H1 · 30/38 · 700

Pārskats un analītika

H2 · 24/32 · 600

Pēdējās aktivitātes

H3 · 20/28 · 600

Datu tabulas kopsavilkums

Body · 16/24 · 400

Administrācijas saskarne prioritizē datu skenējamību, skaidru navigāciju un paredzamu mijiedarbību.

Body small · 14/22

Palīgteksts un tabulas šūnas lieto 14 px, saglabājot 22 px rindas augstumu.

Code · 13/20

usr_10482 · status=active

Semantiskie krāsu tokeni

Komponentes lieto tikai nozīmes tokenus; primitīvās krāsas paliek tokens.css.

DHAFXLE
Primārais--app-primary
Akcents--app-accent
Veiksme--app-success
Brīdinājums--app-warning
Kļūda--app-danger
Informācija--app-info
Virsma--app-surface
Sānjosla--app-sidebar

Kontrasta un lasāmības paraugi

Krāsa nav vienīgais signāls. Statusiem vienmēr ir teksts vai ikona. Fokusa gredzens ir 2 px ar 2 px nobīdi.

DHAFXLE

Gaišā virsma

Parasts teksts uz --app-surface atbilst AA līmenim. Sekundārais teksts saglabā 4,5:1 kontrastu.

Veiksmīgi Kļūda

Tumšā virsma

Tokenu vērtības mainās zem [data-bs-theme="dark"], komponentu CSS paliek nemainīgs.

Veiksmīgi Gaida
Tab taustiņš pārvieto fokusu uz pogu.

Gara teksta un 200% tālummaiņas paraugs

Rindas garums nepārsniedz 72–80 rakstzīmes. 200% tālummaiņā saturs pārplūst vienā kolonnā bez horizontālas lapas ritināšanas.

DHAFXLE

Kāpēc mēs izvēlamies robežas pirms ēnām

Administrācijas sistēmās informācijas blīvums ir augsts. Smalka 1 px robeža skaidri atdala virsmas, nemaldinot lietotāju par elementa nozīmi. Ēna tiek izmantota tikai tad, kad elements patiešām atrodas virs pārējā satura: dropdown, popover, modālis un toast. Šāda disciplīna samazina vizuālo troksni, uzlabo kontrastu un padara fokusu vieglāk pamanāmu.

Teksta izplešanās rezerve ir 30%. Pogu etiķetes drīkst iet divās rindās, bet ne vairāk. Datumi tiek attēloti formātā dd.MM.yyyy, bet naudas vērtības — EUR ar nedalāmu atstarpi tūkstošiem.

200% tests

Pārbaudiet 360 px platumu ar pārlūka tālummaiņu 200%. Navigācija kļūst par off-canvas, tabulas ritina horizontāli vai pārvēršas kartītēs.