Structura și mecanica componentelor vin din Edge-33, culorile și fonturile din calificata.ro, iar ierarhia textului din Notion. Totul stă într-un singur fișier: bgn-33.css.
Din Edge-33
Cum e construită o componentă: numele claselor, variantele, mărimile, stările, ținta de atins pe telefon.
Din calificata.ro
Albastrul, neutrele reci, colțurile rotunde, sistemul plat. Inter, Fraunces drept și JetBrains Mono.
Din Notion
Puține mărimi de text, diferența o fac grosimea și cele trei nuanțe. Tema de noapte, liste dense, pagini de citit.
Cum îl folosești într-un proiect
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400..700&family=JetBrains+Mono:wght@400;500;600&display=swap">
<link rel="stylesheet" href="bgn-33.css"> <!-- o singură copie, în rădăcina proiectului -->
<link rel="stylesheet" href="brand.css"> <!-- opțional: doar culoarea principală a proiectului -->
Culori
Paleta calificata. Fiecare culoare are un rol, iar valorile se schimbă singure în tema de noapte. Codurile de mai jos se citesc din pagină, deci arată tema curentă.
Culoarea principală — singurul strat pe care un proiect îl schimbă
Suprafețe
Text — trei nuanțe, ca la Notion
Borduri
Stări — fill pentru puncte și iconițe, text pentru ce se citește
Etichete de categorie (paleta Notion) — pentru proiecte și tipuri, nu pentru stări
Trei fonturi, fiecare cu un singur rol. O singură scară, iar numele clasei e mărimea în pixeli. Site-urile folosesc treptele mari, aplicațiile se opresc la 28.
Doar cardul principal dintr-un hero (de exemplu, încărcarea documentului pe landing).
Iconițe
Lucide, contur, SVG pus direct în pagină, cu class="ic". Culoarea vine din text, mărimea din clasă. Fișierele sunt în assets/icons/. Fără emoji și fără simboluri ca ✓ sau ✕ în interfață.
.ic.sm 14
.ic 16
.ic.lg 20
.ic.xl 24
.ic-box
Butoane
.btn plus o variantă și, dacă e cazul, o mărime. Un singur buton principal pe ecran: acțiunea pe care o așteptăm de la om.
Patru feluri, fiecare cu rolul lui. Badge-ul are fundal propriu, deci nu se pune în interiorul unui card (fără cutii în cutii); acolo se folosește starea, care e doar text cu punct.
CiornăNouSemnatExpiră curândRespinssm
.badge — stare scurtă, de sine stătătoare
SemnatÎn semnareAșteaptă plataEșuatCiornă
.status — starea într-un rând de listă sau de tabel
1 document · 5 lei3 semnatari
.chip — context scurt
.pill — filtru pornit / oprit (apasă)
Carduri și suprafețe
Albe, cu bordură fină și colțuri de 16. În aplicație stau pe fundalul gri deschis, pe site pe alb.
.card
Suprafața de bază
Activ
Padding 24, colț 16, bordură --c-rule.
.card.tonal
Grupare discretă, fără bordură. Pe alb e gri deschis.
Sumar plată
Semnătură calificată × 15,00 lei
TVA inclus0,80 lei
Total5,00 lei
.inset · .sum-row(.total)
Pasul 1 din 3
Creează un cont
Durează un minut.
sau
.card.xl — formular de sine stătător (cont, plată)
Liste și tabele
Rânduri dense, separate de linii fine, ca la Notion. Metadatele sunt text simplu pe un rând, nu bule colorate.
.tbl · .name · .date · .num · .right — antet pe --c-inset, sume aliniate la dreapta, mono
Navigare
Taburile segmentate comută între vederi ale aceluiași conținut; cele subliniate împart o pagină în secțiuni. Pașii arată unde e omul într-un flux.
.tabs — segmentat (apasă)
.tabs.line — secțiunile unei pagini
.crumbs
Document încărcat
Identitate verificată
3Semnăm documentul
4Trimitem copia pe email
.steps · .step(.done .active)
Încarcă
2Verifică
3Semnează
.steps.row — pe orizontală, deasupra unui formular
Feedback
Alerta rămâne până se rezolvă cauza. Mesajul de colț (toast) dispare singur, deci se folosește doar când omul nu trebuie să facă nimic. O eroare nu e aproape niciodată toast.
Documentul are 2 pagini
Semnătura se pune pe ultima pagină.
Prima semnătură e gratuită. După aceea, 5 lei pe document.
Document semnat
Ți-am trimis copia pe email.
Buletinul expiră în 12 zile. După aceea nu mai poți semna până nu îl reînnoiești.
Plata n-a trecut
Banca a refuzat cardul. Încearcă alt card sau scrie-ne.
Zona de încărcare, din calificata, și rândul fiecărui fișier adăugat.
contract-inchiriere.pdf
2 pagini · 240 KB
anexa-1.pdf
.upload-zone (.drag) · .file-row
Carcasa aplicației
Meniu lateral alb de 240px și conținutul pe fundalul gri deschis. Sub 1024px meniul dispare, iar navigarea trece în bara de jos. Pagina pe care o citești acum e chiar carcasa asta.
Sub 640px textul de bază crește la 16px (iOS nu mai face zoom pe câmpuri), tot ce se apasă are cel puțin 44px, iar nimic nu stă sub notch sau sub bara de jos.
Sincronizat
De validat
Afirmațiile din profilul tău, pe rând.
Progres4 din 20
Decizii·3 dovezi
Prefer să vadă clientul un prototip înainte de orice plan tehnic.
„Al doilea livrabil e prototipul pe care îl atinge."