Sari la conținut
De Obște

Document de construcție

Galeria de brand

Pagina asta nu descrie sistemul de design, îl consumă. Paleta e citită din blocul :root al fișierului main.css pe care îl servesc toate serviciile, rapoartele de contrast sunt calculate la randare, iar fiecare specimen de mai jos e chiar macroul din macros.html, nu o copie a lui. Dacă un token se schimbă, pagina se schimbă odată cu el.

Se adresează celor care construiesc platforma, nu cetățeanului: e un document de lucru, marcat noindex. Versiunea de activ servită acum: 20260804d.

Cuprins

Paletă

Toți tokenii de culoare declarați pe :root, citiți din activul livrat. Rolul fiecăruia e în docs/brand/tokens.md; aici stau numele și valoarea, adică exact ce se poate verifica.

--bg
#EEF2F8

--bg-2
#E3E9F2

--surface
#FFFFFF

--line
#D5DEEA

--control-line
#7285A1

--ink
#131C2B

--ink-2
#3D4C63

--ink-3
#546279

--brand
#1F4FD8

--brand-600
#183FB0

--brand-50
#E8EEFF

--brand-300
#5A7EE2

--teal
#0C6C74

--teal-50
#DBF1F2

--succ
#0B7A47

--succ-50
#E1F4EA

--fail
#C43314

--fail-50
#FCE9E4

--deny
#6A3FC0

--deny-50
#EEE8FA

--neut
#47566E

--neut-50
#E9EEF5

--wait
#7A5410

--wait-50
#F5E4BD

--on-brand
#fff

--ctx
#1B3E9E

--ctx-line
#C9D6FF

--demo
#F5C451

--demo-ink
#5A3D00

--demo-50
#FFF6E6

--fail-line
#F3C9BF

--fail-wash
#FEF7F5

--subsol-bg
#0F1B3A

--subsol-ink
#B9C7E6

--subsol-ink-2
#8FB4FF

--subsol-ink-3
#7E8FB8

Fără mod întunecat, decizie de founder. Culorile fixe ale subsolului nu sunt tokeni și de aceea nu apar mai sus: trăiesc într-un bloc propriu din main.css și sunt documentate în docs/brand/tokens.md. Nicio valoare nu se transcrie în pagina asta, tocmai ca să nu existe o a doua paletă.

Contrast

Rapoarte calculate la randare cu formula WCAG 2.1, pe perechile pe care fiecare token le are cu adevărat în produs. Prag: 4,5 pentru text normal, 3 pentru limite de componentă și elemente non-text.

Text Fond Probă Raport Prag Unde se folosește
--ink--bgAa15,214,5corpul paginii
--ink--surfaceAa17,094,5text în carduri, tabele, câmpuri
--ink--bg-2Aa14,004,5identificatori inline în code
--ink-2--surfaceAa8,714,5proză de card, etichete de filtru
--ink-2--bg-2Aa7,134,5pastila de versiune, insigna de administrare
--ink-3--surfaceAa6,184,5text estompat, celula fără valoare
--ink-3--bgAa5,504,5antetele de coloană, nota de panou
--ink-3--bg-2Aa5,064,5amprenta din consemnarea în jurnal, cifra pasului neatins, eticheta cardului „în curând”
--brand--surfaceAa6,634,5linkuri, buton secundar, acțiune-iconiță
--brand--bgAa5,904,5supratitlu, cod de eroare
--brand--bgAa5,903inelul de focus, bifa activă
--surface--brandAa6,634,5butonul primar, pasul curent
--surface--brand-600Aa8,844,5butonul primar la survol
--brand--brand-50Aa5,714,5pastila Punții, eticheta de metodă, rând la survol
--brand-600--brand-50Aa7,624,5insigna de rol, poziția în lanțul de audit
--teal--surfaceAa6,154,5eticheta de domeniu din card
--teal--teal-50Aa5,244,5pastila Cronicii, pastila implicită de serviciu
--succ--succ-50Aa4,714,5pastila de succes
--succ--surfaceAa5,404,5pasul deja făcut
--wait--wait-50Aa5,394,5pastila de așteptare, banda de mediu demonstrativ
--deny--deny-50Aa5,694,5pastila de refuz, pastila Cheii
--fail--fail-50Aa4,684,5pastila de eșec, sumarul de erori
--fail--surfaceAa5,484,5eroarea de câmp, avertismentul, butonul de pericol
--neut--neut-50Aa6,384,5pastila neutră, eticheta tehnică fără încărcătură
--line--surfaceAa1,364,5separatoare de rând, borduri de card, fieldset: STRUCTURĂ, deci 1.4.11 nu cere 3
--control-line--surfaceAa3,763conturul unui câmp în care se scrie, pe card
--control-line--bgAa3,353conturul unui câmp, pe fundalul paginii
--control-line--bg-2Aa3,083conturul unui câmp, pe zonă secundară
--brand-300--surfaceAa3,813conturul butonului secundar și al cardului de alegere
--brand-300--bgAa3,393același contur, pe fundalul paginii
--brand-300--bg-2Aa3,123același contur, pe zonă secundară
--on-brand--brandAa6,634,5text pe butonul primar și pe caseta accentuată din diagrame
--ctx--brand-50Aa8,124,5textul benzii de context
--ctx-line--brand-50Aa1,243bordura benzii de context
--demo-ink--demoAa6,144,5iconița de mediu demonstrativ
--wait--demo-50Aa6,314,5textul benzii de mediu demonstrativ
--fail-line--fail-50Aa1,293bordura sumarului de erori
--fail--fail-washAa5,184,5mesajul de eroare pe câmpul greșit
--subsol-ink--subsol-bgAa9,994,5textul subsolului
--subsol-ink-2--subsol-bgAa8,194,5avertismentul din subsol
--subsol-ink-3--subsol-bgAa5,264,5amprenta din subsol

Conturul controalelor a fost reparat pe 1 august (--control-line și --brand-300): înainte era desenat cu --line, la 1,36, adică sub pragul de 3 pe care 1.4.11 îl cere limitei unei componente. Nu s-a înnegrit --line, fiindcă el desenează structura în alte douăzeci și patru de locuri, unde criteriul nu cere nimic: un separator de rând de tabel nu identifică niciun control. Regula încape într-o propoziție: gri unde scrii, albastru unde apeși, --line unde nu operezi nimic.

Rămâne sub prag --ink-3 pe --bg-2, la 4,24, și atinge conținut real: amprenta din consemnarea în jurnal, adică singurul lucru pe care cetățeanul îl copiază ca să verifice. Raportul e calculat la fiecare rulare în crates/ui/tests/contrast.rs, deci nu se poate pierde din vedere.

Două valori scapă din sistemul de tokeni și de aceea sunt măsurate prin echivalentul lor: butonul primar își scrie albul literal, deși e chiar --surface; iar banda de mediu demonstrativ își ia fundalul dintr-o spălare mai deschisă decât --wait-50, tot literală. Amândouă sunt candidate la promovare în :root, altfel rămân în afara oricărei verificări.

Scări

Spațierea și razele, desenate cu chiar tokenul pe care îl numesc. Nicio componentă nu decide singură spațierea față de vecini: ritmul vertical vine din tiparul de secțiune, nu din margini ad-hoc.

--s1 4px

--s2 8px

--s3 12px

--s4 16px

--s5 24px

--s6 32px

--s7 48px

--s8 72px

--r-sm 8px

--r-md 12px

--r-lg 18px

--r-xl 24px

TokenValoare
--sh-10 1px 2px rgba(19,28,43,.06),0 1px 3px rgba(19,28,43,.05)
--sh-20 2px 6px rgba(19,28,43,.07),0 8px 24px rgba(19,28,43,.06)
--sh-brand0 6px 18px rgba(31,79,216,.28)
--sans"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif
--maxw1120px

Tipografie

O singură familie, Public Sans, self-hosted în trei greutăți. Scara e fluidă pe titlurile mari, deci reflowul de la 320 la desktop e lin. Ce vezi mai jos e randat cu clasele reale: dimensiunile nu sunt transcrise, sunt arătate.

Scara

Supratitlu, clasa .supratitlu, greutate 800

Titlu hero

Introducere hero, clasa .lead: cel mult 54 de caractere pe rând, culoarea cernelii secundare.

Titlu de secțiune

Corp de text, 16px, înălțime de rând 1,55. Cetățeanului i se scrie ca unui om de 15 ani, funcționarului i se scrie precis. Fără englezisme, fără em-dash.

Notă și text estompat, clasa .nota.

1 234 567 cifre tabulare, clasa .num, ca să se citească pe coloană.

Când NU: nu se adaugă o a doua familie de literă și nu se introduce o mărime nouă direct în pagină. O mărime care nu e în scară e o excepție care se cere argumentată, nu un atribut de stil.

Componente

Toate macrourile din crates/ui/templates/macros.html, randate aici, nu descrise. Un macro nou fără specimen pică testul brand_galerie. Textele scurte de mai jos sunt reguli; raționamentul lung stă în docs/brand/componente.md.

badge punctuală

Când: starea unei entități, niciodată singura purtătoare de sens. Culoarea vine din cheia semantică engleză din depozit, nu din textul afișat.

Când NU: ca decor, ca etichetă de categorie, sau ca singur mijloc prin care se înțelege rezultatul. O familie nu e o nuanță, e un răspuns: două stări care răspund altfel la aceeași întrebare nu au ce căuta în aceeași culoare.

Succes, „e în vigoare sau a ieșit bine?”

reușit publicat activ

Așteptare, „cine e la rând?”

ciornă propus validat tehnic avizat solicitat autorizat în curs

Refuz, „s-a spus nu?”

refuzat respins

Eșec, „s-a stricat?”

eșuat fără răspuns

Neutru, „mai e în joc?”

ieșit din uz expirat revocat suspendat retras din uz

Stare necunoscută: text simplu, fără pastilă. Deliberat, nu scăpare: o stare pe care nu o cunoaștem nu primește o culoare inventată.

ceva nou

step_bar universală

Când: orice flux secvențial cu mai mult de doi pași. Orientarea e universală, deci nu e opțiunea paginii. Etichetele se pasează, ca bara să poată servi și alt flux decât cel al funcționarului.

Când NU: la o coborâre într-un arbore, unde întrebarea e „ce am ales până acum”, nu „cât mai am de mers”. Pastilele nu devin linkuri: ar avea circa 36px, sub ținta tactilă, și un salt înapoi ar invalida tăcut jetonul de pregătire.

Pasul 2 din 4

  1. Instituție
  2. Serviciu
  3. Operațiune
  4. Politică

pasi universală

Când: în cele cinci pagini ale fluxului de interogare al funcționarului. Există ca să nu se repete lista de etichete în cinci template-uri.

Când NU: în orice alt flux. Acolo se cheamă step_bar cu etichetele proprii. Bara legată de un singur set de etichete e chiar defectul din care a ieșit separarea celor două macrouri.

Pasul 3 din 5

  1. Proces
  2. Scop
  3. Operațiune
  4. Formular
  5. Rezumat

Când: în butoanele doar-iconiță ale slotului personal din antet. Un simbol per destinație, ales pentru ce face acțiunea. Traseu, nu umplere; currentColor, deci culoarea vine din buton.

Când NU: ca ilustrație în conținut, și niciodată două destinații cu același glif. Două butoane identice care fac lucruri diferite sunt un defect, nu o economie de spațiu.

Compoziția reală din antet, cu tot pachetul obligatoriu: nume accesibil din catalog, iconiță aria-hidden, balon vizibil și la tastatură, țintă de 44 pe 44. În antet balonul e forțat dedesubt, fiindcă acolo nu există pagină deasupra. Fără nume accesibil, un buton fără text nu are voie să existe: se poate vedea, dar nu se poate identifica.

card punctuală

Când: card-link editorial din vitrină, cu fir de accent și săgeată animată. Grila pornește de la o coloană și se oprește la trei; exact patru carduri se așază 2 pe 2, ca al patrulea să nu rămână orfan.

Când NU: ca pas de flux în care omul alege. Acolo cardul trebuie să fie el însuși ținta, deci e choice.

broker

Puntea

Brokerul de acces interinstituțional: cere, verifică, consemnează.

Deschide
audit

Cronica

Jurnalul de audit, public: cine ți-a cerut datele și de ce.

Deschide

cheia

Fără eticheta de domeniu și fără text de link: parametrii opționali lipsesc, cardul nu randează locuri goale.

Deschide

insigna punctuală

Când: rol sau calitate a unei persoane, pe cardurile de identitate. Două forme: rol (tentă de brand) și admin (neutră, cu bordură).

Când NU: pentru starea unei entități. Aceea e badge, și are cinci familii semantice pe care insigna nu le are.

Inspector Administrator de servicii

Etichetele de mai sus, ale taxonomiei, folosesc chiar acest macro.

banner_context universală

Când: pe orice pagină cu sesiune de funcționar. Răspunde la „unde ești, pentru cine, în ce rol”. Sistemul decide, pagina se supune.

Când NU: pe pagini publice, unde nu există context de mandat. Nu e aria-hidden: e singura indicație de context, deci se aude.

banner_status universală

Când: rezultatul unei acțiuni de administrare, sau un fapt despre pagină spus o dată, sus. Tot text simplu.

Când NU: cu marcaj în mesaj. Dacă ai nevoie de accent, e altă componentă: aici HTML-ul ar cere să lași date din context să treacă nefiltrate.

banner_citizen universală

Când: contextul cetățeanului în Cronica. Nu are instituție și nici rol instituțional: identitatea lui nu ține de vreun mandat.

Când NU: pentru un funcționar. Trei compoziții distincte, trei macrouri; unul generic ar fi cerut conținut ca marcaj prin parametru.

choice punctuală

Când: un pas de flux în care omul alege, iar opțiunea are nume plus cel puțin o fațetă. Cardul e alegerea, deci toată suprafața e ținta, nu titlul.

Când NU: când opțiunea are doar nume (atunci e rând de listă), și niciodată pentru date tehnice: acelea sunt referință, nu alegere. Numele accesibil al linkului rămâne doar titlul, deci meta nu intră în el.

actions_back universală

Când: întoarcerea, care e navigare, nu acțiune. Un singur loc: primul element din rândul de acțiuni de sub suprafață, ca buton secundar. Macroul chiar ăsta e felul în care sistemul decide.

Când NU: la primul pas (nu există pas anterior) și pe pagina de rezultat (interogarea s-a consumat, iar „înapoi” ar sugera că poate fi anulată). Niciodată deasupra titlului, niciodată link liber într-un paragraf. O destinație personală nu folosește macroul, chiar dacă stă în același rând.

Înapoi la procese

empty_state punctuală

Când: orice listă fără conținut. Anatomia, în ordinea în care omul are nevoie de informație: ce lipsește, de ce și cine rezolvă, ce face acum.

Când NU: ca element de listă. O stare goală nu e o alegere, deci nu moștenește cadrul de card clicabil. Acțiunea se omite doar când cel care vede starea nu o poate rezolva, iar atunci textul spune cine o rezolvă: o acțiune redundantă e mai rea decât niciuna.

Niciun proces disponibil

Procesele se definesc de administratorul de procese al instituției tale.

Vezi activitatea mea

Niciun proces disponibil

Procesele se definesc de administratorul de procese al instituției tale. Până atunci nu ai ce alege de aici.

pagination punctuală

Când: sub orice tabel paginat, ca subsol intern al panoului. Vocabularul e temporal, „mai noi” și „mai vechi”, fiindcă tabelele sunt descrescătoare în timp. Componenta nu calculează cursoare, le primește gata.

Când NU: pe o listă care încape pe o pagină; fără nicio adresă, nu randează nimic. Nu există „pagina 7”, număr total sau sortare pe coloane, și nu se mimează: cursorul e o cheie, nu un decalaj.

Prima pagină: nu există „mai noi”.

Pagină din mijloc: toate trei.

Capătul listei: în locul butonului lipsă stă explicația, fiindcă un control care dispare fără motiv se citește ca defecțiune.

page_size punctuală

Când: în subsolul unui tabel paginat, lângă navigare. Formular de tip GET, fără JavaScript: alegere plus buton de aplicare.

Când NU: cu trimitere automată la schimbare, care ar cere JavaScript și ar declanșa o încărcare la fiecare săgeată apăsată. Filtrele active se repetă ca valori ascunse, dar cursorul se aruncă: o pagină atinsă cu pași de 25 nu are înțeles cu pași de 100.

filters punctuală

Când: înaintea panoului și în afara lui, pe jurnalele de audit. Componenta primește filtrele ca date, nu le știe pe ale nimănui: cele trei jurnale au seturi diferite.

Când NU: ca antet interior al tabelului. Când un filtru nu întoarce nimic, tabelul e înlocuit de starea goală, iar o bară din interior ar dispărea odată cu el, lăsând omul fără controlul cu care să își retragă filtrul. Un filtru se livrează doar dacă fațeta lui e indexată.

Șterge filtrele

og_locale universală

Când: în <head>, pentru eticheta de limbă Open Graph a paginii curente și a alternativelor ei. Codul necunoscut cade pe ro_RO, ca implicitul catalogului.

Când NU: oriunde vede utilizatorul. Nu e copy, e etichetă de protocol: nu trece prin catalog și nu se traduce.

ro ro_RO

hu hu_HU

de de_DE

xx ro_RO

Componentele fără macro sunt tot atâtea decizii: tabelul e un contract, nu un macro; .form-actiuni și .tabel-subsol rămân clase utilitare. Nu extragem ce nu are anatomie proprie.