Typography

Sistem cu 3 fonturi și 11 niveluri (T60–T12) plus speciale. Inter pentru UI și headings, Fraunces italic exclusiv pentru accent T-em și T-actor, Source Serif 4 exclusiv pentru body editorial blog (T20).

Clasele scurte .t60–.t12 sunt sursa de adevăr. Alias-urile vechi (.t-display, .t-h1, etc.) coexistă pentru compatibilitate dar mapează exact pe scala T.

Markup canonic · components/foundation-typography.json

sursa = JSON · generat de scripts/build-catalog.py

Hero titlu

Section heading

Body baseline 14px.

12 480 Lei

Fonturi & roluri

Aa
INTER

UI, headings, toate elementele de interfață. Fontul de bază — nu se înlocuiește.

400 · 500 · 600 · 700
Aa
FRAUNCES

Exclusiv: accent italic T-em în headings + numele agenților AI (T-actor).

italic 500 · 600
Aa
SOURCE SERIF 4

Exclusiv pe T20 — body text articole blog. Niciodată în UI.

400 · 600

Heading-uri — Inter 700, tracking negativ

T60 · DisplayInter 700
clamp(36→60px) · line 1.10
tracking -0.04em

Hero landing

Contabilitate pe pilot automat.

T48 · H1Inter 700
clamp(32→48px) · line 1.08
tracking -0.03em

Capitol landing
+ Greeting Dublin

Salut, Eduard. Totul e ok azi.

T40 · H2Inter 700
clamp(28→40px) · line 1.15
tracking -0.03em

Titlu pagină internă

Cum alegi codul CAEN potrivit când îți deschizi SRL-ul.

T32 · H3Inter 700
clamp(24→32px) · line 1.19
tracking -0.02em

Subtitlu secțiune
landing / blog

Codul principal vs. codurile secundare

T28 · H4Inter 700
clamp(22→28px) · line 1.21
tracking -0.02em

Titlu card mare,
titlu modal

Plan activ · Documente în așteptare

Editorial & body

T24 · LeadInter 400 · 24px
line 30px · tracking -0.01em

Lead editorial (prim paragraf blog sau descriere mare landing)

Codurile CAEN sunt acele patru cifre care decid, mai mult decât crezi, ce poate să factureze firma ta.

T20 · EditorialSource Serif 4 · 20px
weight 400 · line 32px

EXCLUSIV body blog. Niciodată în UI.

Vestea bună: nu trebuie să devii expert. Trebuie să înțelegi ce e un cod principal, cum funcționează cele secundare și de ce e bună ideea să adaugi mai multe încă din prima.

T18 · SubheadInter 600 · 18px
line 24px · tracking -0.01em

Subhead card, titlu subsecțiune UI.
EXCLUSIV heading.

Detalii factură

UI & interface

T16 · Body UIInter 400 · 16px
line 24px

Texte de bază,
descrieri în carduri

Alina M. · pregătit pentru declarație. Trage o poză sau un PDF pentru factură nouă.

T14 · Texte mici UIInter 500 · 14px
line 20px

Tabel, input, buton,
link, list-item
OMV Petrom · Combustibil · Dacia Spring Emite factura →
T12 · EyebrowInter 600 · 12px
line 16px · +0.10em uppercase

Label KPI, cap tabel.
NU pe touch targets.
Venituri Furnizor TVA · scadent 25 aprilie

Cifre financiare — toate cu tabular-nums

Tn40Inter 700 · clamp(28→40px)
line 1 · tracking -0.04em
tabular-nums

KPI principale (dashboard)
387.420Lei 142.880Lei
Tn28Inter 700 · clamp(22→28px)
line 1 · tracking -0.02em
tabular-nums

Cifre secundare în carduri
2.184Lei
T-suffix-lgInter 400 · 13px
line 1

Sufix după Tn40 („Lei")
387.420Lei
T-suffix-mdInter 400 · 14px
line 1

Sufix după Tn28
2.184Lei
T-num-inlineInter 500 · 14px
line 1 · tabular-nums

Cifre mici inline:
timestamps, %, coduri

Încasare la 14:23 — creștere de +2.4% față de luna trecută. CUI: RO12345678.

Speciale

T-badgeInter 600 · 10px
line 1 · +0.06em uppercase

Badge micro:
tip document, status
BON FISCAL E-FACTURĂ FACTURĂ AI EXTRAGE 100%
T-actorFraunces italic 500 · 13px
line 1 · tracking -0.01em
color: pink

Numele agenților AI în
ticker și listă De Făcut
Iris Vox Mihai Alina
T-monoJetBrains Mono · 12px
line 1

Coduri tehnice (non-financiare)
CUI 47281930 · J40/2148/2019

DON'T

  • Niciodată gradient pe text.
  • Niciodată pink pe text body. Pink = fills, borders, accents. Excepție: .t-actor și T-em pe headings.
  • Niciun token deprecat: --c-graphite, --c-bg, --c-bg-deep, --c-paper, --c-night. Folosește tokens canonice.

T-em — accent editorial în T60/T48/T40

Pe 1–3 cuvinte per heading, cuvintele cu încărcătură emoțională sau temporală se scriu în Fraunces italic 700, culoare --c-pink. Letter-spacing identic cu heading-ul (Fraunces italic are tracking natural strâns — nu se reduce suplimentar).

Corect

Salut, Eduard. Totul e ok azi.

Contabilitate pe pilot automat, ținută de oameni reali.

3 facturi de decis.

Facturi de noiembrie.

Greșit

Salut, Eduard. Totul e ok azi.

Tot heading-ul în italic — t-em e accent, nu corp.

Aprobă D394 înainte de depunere

Italic în UI / list-item — doar headings.

387.420 Lei

Italic pe cifre financiare — niciodată.

T-actor — ✓ corect vs ✗ greșit

Fraunces italic 500 / 13px / pink

Mihai a clasificat 37 documente. Vox monitorizează.

Weight 400 (subțire) — dispare pe non-Retina

Mihai a clasificat 37 documente. Vox monitorizează.

Fraunces — caracterul iconic al UI-ului Bono

Fraunces apare exclusiv prin 2 clase din bono-ds.css. Niciodată inline font-family: 'Fraunces'. Niciodată altundeva.

ClasăSpecificațiiFolosireExemplu
.t-em italic 700
color pink
letter-spacing inherit		 Accent emoțional / temporal pe heading.
Exclusiv .t60 / .t48 / .t40.
Max 3 cuvinte per heading.

Salut, Eduard.

<em class="t-em">
.t-actor italic 500
13px / color pink
tracking -0.01em		 Numele agenților AI (Iris, Vox, Mihai, Alina).
NU pe weight 400 — italic subțire dispare pe non-Retina.

Vox a clasificat 37 documente.

<span class="t-actor">

De ce o singură convenție

Fraunces e caracterul iconic al brandului — pink + italic, în 2 contexte, atât. Orice altă utilizare îl diluează.

Înainte aveam font-family: 'Fraunces' inline în zeci de locuri, fiecare cu weight ales după memoria autorului. Rezultat: T-em cu 500 unde trebuia 700, T-actor cu 400 unde dispărea pe non-Retina, Fraunces pe contexte sub T40 unde nu trebuia să apară deloc.

Clasele .t-em și .t-actor elimină alegerea: e imposibil să greșești greutatea sau să folosești pe context greșit. Pre-push: grep -rn "font-family:.*Fraunces" *.html | grep -v "t-em\|t-actor" trebuie să fie gol.

Scala mobilă

T60–T28 și Tn40/Tn28 se reduc via clamp(). T24–T18 se reduc sub breakpoint-ul unic al DS-ului, @media (max-width: 1023.98px) (banda mobile). T16–T12 și toate specialele rămân identice.

ClasăDesktopMobilLine mobilMetodă
T6060px36px40px (1.11)clamp
T4848px32px36px (1.13)clamp
T4040px28px32px (1.14)clamp
T3232px24px28px (1.17)clamp
T2828px22px26px (1.18)clamp
T2424px20px26px (1.30)breakpoint
T2020px18px30px (1.67)breakpoint
T1818px16px22px (1.38)breakpoint
T1616px16px24px—
T1414px14px20px—
T1212px12px16px—
Tn4040px28px1clamp
Tn2828px22px1clamp

Notă T20 mobil: line-height 30px (1.67) în loc de 28px — serif la 18px necesită mai mult spațiu pentru lectură lungă pe mobil.

Letter-spacing — tabel referință

Tracking negativ obligatoriu pe orice text peste 24px. Fără el, textul bold arată „desfăcut" și generic.

SizeTracking
≥ 48px-0.04em
32–47px-0.03em
20–31px-0.02em
16–19px-0.01em
≤ 14px0
Eyebrow ≤ 12px+0.10em
Badge ≤ 10px+0.06em

11 reguli de utilizare

  1. Tracking negativ obligatoriu pe orice text peste 24px.
  2. Source Serif 4 exclusiv pe T20 (body blog) — niciodată în UI.
  3. Fraunces exclusiv pe T-em și T-actor — niciodată altundeva.
  4. tabular-nums obligatoriu pe toate cifrele financiare și T-num-inline.
  5. T-em — maxim 3 cuvinte per heading, exclusiv T60/T48/T40, culoare pink, weight 700.
  6. T-em letter-spacing — identic cu heading-ul de bază, nu se reduce suplimentar.
  7. T12 eyebrow — exclusiv label static, nu pe touch targets interactive.
  8. T-actor weight 500 — nu 400, italic subțire la 13px dispare pe non-Retina.
  9. Tn40 și Tn28 ambele weight 700 — diferența de size e suficientă pentru ierarhie.
  10. Nu folosim zecimale în dimensiuni de font (13.5px, 14.5px etc.).
  11. T60.tight — exclusiv pentru titluri single-line garantate, nu ca default.

Changelog v1.0 → v1.1

  • T60 line-height: 1.07 → 1.10 (default), + .t60.tight pentru single-line
  • T-actor weight: 400 → 500
  • Tn28 weight: 600 → 700
  • T-em weight: 600 → 700
  • T-em letter-spacing: eliminat -0.005em suplimentar
  • T20 mobil line-height: 28px → 30px
  • Adăugat T-num-inline (14px / 500 / tabular-nums)
  • Adăugat notă T12 — nu pe touch targets
  • Adăugat notă T18 — exclusiv heading, nu emfază de paragraf