01
Claritate
Informația importantă trebuie observată rapid, fără elemente decorative inutile.
Componente UI prezentate clar și coerent.
Un sistem vizual pentru interfețe complexe: roluri cromatice, tipografie, stări, layout și componente, prezentate prin exemple clare.
Introducere
Prezentare scurtă
Această pagină sintetizează elementele de bază ale unui sistem de design: culori, tipografie, iconografie și componente UI recurente. Accentul cade pe claritate, ierarhie vizuală și comportament coerent.
Principii
Repere de design
Componentele sunt construite în jurul acelorași reguli: structură previzibilă, semnale vizuale clare și o experiență ușor de parcurs.
02
Consistență
Stilurile, stările și proporțiile rămân unitare în toate zonele interfeței.
03
Utilizare rapidă
Acțiunile uzuale sunt ușor de recunoscut și de executat.
02 / Fundamente vizuale
Sistem cromatic
Paleta este organizată după rol: identitate, suprafețe neutre și culori semantice pentru stări și feedback. Fiecare culoare are o utilizare clară în interfață.
01 · Culori de brand
Culorile identitare și variantele folosite în acțiuni, hover și suprafețe discrete.
Brand
Primary
Accent
Hover
Soft
02 · Neutre & suprafețe
Fundaluri, delimitări și text. Griul #F3F3F3 este un neutru auxiliar, nu o culoare de brand.
00
50
100
200
500
900
03 · Culori semantice
Patru categorii de feedback: Info, Success, Warning și Error / Danger. Roșul folosește o singură paletă, atât pentru erori, cât și pentru acțiuni distructive.
Info
Informație contextuală, notificări neutre și explicații.
Principal
#147CA6Fundal
#EAF4F9Text / icon
#155B7BContur
#B8DEEFⓘAici găsești detalii utile.
Success
Operație finalizată, confirmare, stare pozitivă.
Principal
#218457Fundal
#E7F6EEText / icon
#17643FContur
#B7E4CB✓Modificările au fost salvate.
Warning
Atenționări și situații ce necesită verificare.
Principal
#B66D11Fundal
#FFF4DFText / icon
#8C530BContur
#F3D69B⚠Verifică informațiile introduse.
Error / Danger
O singură paletă roșie: erori de validare și acțiuni distructive, diferențiate prin mesaj și context.
Principal
#B42332Fundal
#FFF0F1Text / icon
#8F1D2BContur
#F0B5BB!Error: Introdu un cod de identificare valid.
!Danger: Ștergerea definitivă nu poate fi anulată.
04 · Aplicare în interfață
Aceeași paletă Error / Danger este folosită pentru câmpuri invalide și pentru butonul de ștergere, cu texte diferite.
05 · Contrast & accesibilitate
Culoarea nu trebuie să fie singurul indicator al unei stări. Folosește texte explicite, pictograme și contraste adecvate.
AaText navy pe alb9,95:1 · WCAG AAA
AaAlb pe navy9,95:1 · WCAG AAA
AaAlb pe teal4,70:1 · WCAG AA
Valorile sunt pentru combinațiile indicate. Contrastul trebuie verificat separat pentru celelalte culori și dimensiuni de text înainte de utilizare în producție.
Principiu · Semnificație înainte de decorCuloarea exprimă ierarhia, starea și contextul, nu doar identitatea vizuală.
Scări tonale
Fiecare familie cromatică include tonuri deschise, medii și închise. Sunt variante orientative pentru explorare, nu tokeni oficial aprobați.
Primary / Teal
99959080705040302010
#EDF7FA · #D0E9F2 · #A0D1E2 · #6EB8D0 · #3594B8 · #147CA6 · #126789 · #105670 · #0C4258 · #092B3A
Neutral
99959080705040302010
#FFFFFF · #F8FAFB · #F3F3F3 · #E6EBEE · #CFD9DF · #ADBCC6 · #8395A2 · #617789 · #405767 · #1E3547
Error / Danger
99959080705040302010
#FFF5F5 · #FFE6E7 · #FFC9CD · #F69EA5 · #E87078 · #C94B55 · #B42332 · #951D2A · #761923 · #4D1018
Success
99959080705040302010
#F0FBF4 · #DDF4E4 · #B7E8CB · #89D7A9 · #55BD86 · #218457 · #1D754E · #165E3E · #10482E · #0B3020
Warning
99959080705040302010
#FFFAEF · #FFF1D4 · #FFDFAB · #FFCB7F · #ECA34E · #B66D11 · #98590D · #7A480D · #57320B · #382009
Roluri cromatice
Un design system definește nu doar valori HEX, ci și roluri: suprafață, text, contur, container și conținut plasat deasupra culorii.
Primary#147CA6 · text #FFFFFF
On primary#FFFFFF · text #1E4569
Primary container#D0E9F2 · text #1E4569
Surface#FFFFFF · text #1E4569
Surface variant#F3F3F3 · text #1E4569
Outline#CFD9DF · text #1E4569
Success container#DDF4E4 · text #165E3E
Warning container#FFF1D4 · text #7A480D
Error container#FFE6E7 · text #761923
Tipografie
O singură familie tipografică și o scară clară a dimensiunilor asigură lizibilitate în formulare, tabele și pagini cu mult conținut.
Titlu principal
40 px / Bold
40 px / Bold
Informație bine organizată.
Titlu secțiune
26 px / Bold
26 px / Bold
O structură clară a conținutului
Text de bază
14 px / Regular
14 px / Regular
Interfețele eficiente pun accent pe claritate, ritm vizual și acces rapid la informație.
Etichetă
12 px / Medium
12 px / Medium
DENUMIRE CÂMP · INFORMAȚIE SUPLIMENTARĂ
Principiu · Ierarhie tipograficăGreutatea și dimensiunea comunică importanța, nu decorația.
Iconografie
Pictograme simple, cu grosime și proporții unitare. Completează etichetele text și fac acțiunile mai ușor de identificat.
Principiu · Recunoaștere rapidăIconurile susțin semnificația, fără să înlocuiască întotdeauna textul.
Stări interactive
Stările diferențiază interacțiunea normală de hover, focus, apăsare și indisponibilitate. Feedback-ul vizual este consecvent între componente.
State layers & feedback
Exemple vizuale pentru cele mai frecvente stări; focus-ul rămâne vizibil la navigarea cu tastatura.
Acțiune
DefaultAcțiune
HoverAcțiune
Focus visibleAcțiune
PressedAcțiune
DisabledSpațiere și densitate
O scară constantă de spațiere ordonează informația și ajută componentele să funcționeze în contexte dense sau aerisite.
Spacing scale
Scară propusă bazată pe multipli de 4 px, cu 8 px ca reper pentru organizarea layout-ului.
4 pxMicro spațiere
8 pxElemente apropiate
16 pxComponente
24 pxGrupuri
32 pxZone vizuale
48 pxSecțiuni
64 pxSeparare majoră
8 / 12Grilă adaptivă
Forme și elevație
Colțurile și profunzimea creează familii vizuale coerente. Umbrele sunt discrete și indică diferențe de nivel.
Shape scale
Raze consecvente, alese în funcție de densitatea și importanța elementului.
Extra small · 4
Small · 8
Medium · 12
Large · 20
Full · 999
Elevation
Profunzimea indică separarea de suprafața de bază, fără umbre excesive.
Nivel 0 · Flat
Nivel 1 · Raised
Nivel 2 · Overlay
03 / Componente UI
Butoane
Ierarhia acțiunilor separă ceea ce este important de ceea ce este secundar. Stările oferă feedback imediat.
Ierarhia acțiunilor
Dimensiuni și stări
Stări interactive
Principiu · O acțiune principalăUn singur buton dominant pe fiecare grup de acțiuni.
Bară de acțiuni
Acțiunile frecvente sunt grupate într-o bară compactă, cu priorități vizuale clare și acces rapid la funcții.
Principiu · Grupare funcționalăFuncții apropiate, distanțe constante și acțiuni prioritizate.
Câmpuri și formulare
Input, Select și Textarea păstrează aceeași structură, aceeași înălțime vizuală și etichete ușor de scanat.
Folosește denumirea completă.
Selectează opțiunea potrivită.
Introdu un cod valid.
Format zi / lună / an.
Opțional · Maximum 500 de caractere.
Principiu · Formulare previzibileEtichete permanente, ajutor contextual și erori explicite.
Tabele
Rânduri bine delimitate, antet discret și aliniere consecventă pentru informații dense, dar ușor de scanat.
| Document | Număr | Data | Responsabil | Valoare | Stare |
|---|---|---|---|---|---|
| Raport de activitate | 184/2026 | 12.10.2026 | Andrei Pop | 12.500 | Aprobat |
| Referat de aprobare | 183/2026 | 11.10.2026 | Maria Ionescu | 7.240 | În verificare |
| Notă internă | 182/2026 | 10.10.2026 | Ioana Marin | 3.180 | Aprobat |
| Situație centralizată | 181/2026 | 09.10.2026 | Mihai Ilie | 9.860 | În lucru |
Principiu · Densitate controlatăConținutul rămâne lizibil prin ritm constant, aliniere și separatoare discrete.
Alerte și feedback
Mesajele comunică rezultatul unei acțiuni prin text, culoare și context. Stările importante pot fi identificate imediat.
ⓘ
Informație
Documentul poate fi editat înainte de trimitere.
✓
Acțiune finalizată
Modificările au fost salvate cu succes.
⚠
Atenție
Unele câmpuri necesită verificare.
!
Eroare de validare
Verifică informațiile marcate în formular.
Principiu · Feedback inteligibilTextul comunică sensul chiar și fără culoare.
Chips și selecție
Filtrele și selecțiile rapide oferă o metodă compactă de organizare a conținutului, fără formulare greoaie.
Filter chips
Exemple de stări neactiv, selectat și focus; selecția poate fi schimbată prin clic.
Taburi
Taburile grupează conținut de același nivel și mențin contextul fără navigări suplimentare.
Navigare între perspective
Indicator activ, aceeași înălțime a țintelor și etichete scurte.
Prezentare generală: informațiile principale sunt accesibile într-un singur loc.
Carduri și indicatori
Cardurile oferă o structură flexibilă pentru conținut și acțiuni, iar progresul și stările sunt prezentate fără încărcare vizuală.
Elevated / Informational
Documente procesate
Activitate în luna curentă
248 +12%
Outlined / Progress
Completarea dosarului
17 dintre 25 de etape finalizate
Accesibilitate și adaptare
O interfață coerentă este și accesibilă: contrast suficient, etichete clare, focus vizibil și reducerea animației când este cerută.
Contrast și text
Pentru text obișnuit, urmărește minimum 4,5:1; pentru text mare, minimum 3:1.
Focus la tastatură
Un indicator clar permite parcurgerea componentelor fără mouse.
Nu doar culoare
Erorile și confirmările includ etichetă, icon și mesaj explicativ.
Mișcare redusă
Tranziții scurte, cu respectarea preferinței pentru animație redusă.
Încheiere
Un sistem coerent se simte mai ușor de folosit.
Când fundamentele vizuale și componentele sunt aliniate, interfața devine mai clară, mai previzibilă și mai ușor de extins.