Specimen v4

v4 · Boje 2

Token specimen & test

Ova sekcija čita žive token-e iz tokens.css. Uzorci prikazuju stvarnu izračunatu heks vrednost u trenutnom modu — prebaci temu u zaglavlju i vrednosti se osvežavaju. Ako neka boja ne odgovara v4 specifikaciji, to je nalaz.

Surface

–nf-surface-page

Glavna pozadina. Preuzima staru pure-white / input.

–nf-surface-warm

Bež sekcije, footer, inline CTA.

Text

–nf-color-text-heading

Naslovi i ekscerpti/opisi (razlika je tipografska).

–nf-color-text-quote

Citati, autori, meta, naslovi kolona.

–nf-color-text-on-color

Tekst/ikone na brand/accent pozadinama.

Ne flipuje

Border

–nf-border-default

Sve linije i divajderi (spojen medium).

Brand

–nf-color-brand-primary

Brand crvena.

–nf-color-brand-blue-soft

Analiza, dugmići, Stav/Mišljenje.

–nf-color-brand-blue-deep

Jarka plava CTA. = blue-soft u dark.

Accent

–nf-accent-red-strong

Crveni tekst O nama / Kontakt.

–nf-accent-red-soft

Roze pozadina istaknutog bloka.

–nf-accent-red-border

Roze border istaknutog bloka.

Tipografija — fluid skala

DisplayZilla · 40→72

Đubre, čađ i žica

H1 LiveZilla · 34→52

Uživo: šta se dešava

H1 ArticleZilla · 28→37

Naslov članka o čvorištu

H2Zilla · 26→32

Podnaslov u tekstu

H3Zilla · 21→24

Manji podnaslov

Body LargeZilla · 18→20

Osnovni tekst članka — čita se udobno na svim širinama, sa čistim đ ć č ž š.

Body BaseZilla · 16

Bazna veličina za sekundarni sadržaj.

QuoteZilla · 18→20

„Slobodni mediji nisu luksuz.“

NavZilla · 17→18

Vesti · Analiza · Društvo

CaptionZilla · 14

Foto: arhiva Mašine

ButtonRethink · 16

Donirajte

Label BaseRethink · 12

Izdvojeno

Label CategoryRethink · 11

Ekologija

Komponente — žive klase iz tokens.css

Dugmad (.masina-donate + predlog CTA):

Donirajte Pretplati se

Naslov kolone + kategorije (.masina-dropdown__coltitle / __cat):

Rubrike

Tagovi / labele

Analiza Vesti Stav Uživo Društvo

Prvi tag je živa klasa .masina-dropdown__tag (invertujući čip — pozadina text-heading, tekst surface-page, menja se sa temom). Ostala četiri su predlozi sastavljeni od postojećih token-a — za dizajnera da odabere pravac. Konvencija tagova još nije zaključana.

Naša misija — on-color dokaz (.masina-dropdown__mission)

Novinarstvo koje čitaoci finansiraju

Bez paywalla i bez oglašivača koji diktiraju sadržaj. Naslov, opis i dugme ostaju svetli u oba režima.

Podrži Mašinu

Prebaci na tamni režim: tekst i dugme moraju ostati svetli (on-color). Ako dugme pozeleni/poplavi u dark-u, znači da dark rebind (html.dark-mode .masina-dropdown__missionbtn) još nije deployovan.

Osnovni sloj — test jezgra (core blocks)

Ispod su jezgro-blokovi da se proveri osnovni sloj tokens.css u realnom kontekstu teme (nije skrolovano kroz .nf-spec). Ovde je inline link u sadržaju — proverava .entry-content a (boja + crveni hover). Napomena: konvencija linkova još stiže od dizajnera, pa je trenutna boja privremena.

Citat blok — razmak, leva ivica i boja u oba moda. „Forma prati sadržaj, token prati formu."
Probni citat

Preformatted blok — u tamnom modu nosi privremenu akcentnu površinu (D2).
Finalni „accent box" stiže u D5. Za sada proveri čitljivost u oba moda.

Core dugme

Kada se sve preliva čisto u oba moda i žive heks vrednosti gore odgovaraju v4 specifikaciji, token pass je potvrđen.