Design system pentru un brand mic — de ce nu e lux, ci economie

Prima obiecție vine mereu la fel: design system-ul e pentru Google, Airbnb sau Shopify, nu pentru un cabinet de avocatură cu opt pagini. E o confuzie de scară, nu de principiu. Ce fac companiile mari este o bibliotecă cu sute de componente, guvernanță, versionare pe npm și o echipă dedicată. Ce îi trebuie unui brand mic este altceva: un set de decizii luate o singură dată, în scris, în loc de aceleași decizii luate de zece ori, prost, la ore diferite.

Diferența dintre un site care arată scump și unul care arată improvizat vine rareori din talentul designerului. Vine din consecvență. Trei nuanțe de gri în loc de una, patru dimensiuni de font pentru același nivel de text, butoane cu raze de colț diferite de la o secțiune la alta — vizitatorul nu identifică problema, dar o simte și o traduce instantaneu în neîncredere. Este exact mecanismul discutat în ce înseamnă un brand dincolo de logo.

Un design system nu e un livrabil de design. E o decizie de arhitectură care se amortizează la fiecare pagină nouă.

Un sistem cu adevărat util pentru un brand mic încape într-un singur fișier CSS și are șase familii de token-uri. Nimic mai mult, la început.

• Culoare. Trei-patru culori de brand, fiecare cu două-trei trepte, plus o scară neutră de cinci-șapte pași. Dacă ai nevoie de a patra nuanță de gri, sistemul îți spune că ai o problemă de ierarhie, nu de paletă.
• Scară tipografică. Șase-șapte trepte, generate cu un raport fix, nu alese la ochi.
• Spațiere. O singură unitate de bază și multiplii ei. Restul e aritmetică, nu gust.
• Rază de colț. Trei valori: mic, mediu, complet rotunjit. Mai mult înseamnă zgomot.
• Umbre. Două-trei niveluri de elevație, toate cu aceeași direcție a luminii.
• Mișcare. Două durate și două curbe de accelerare. Atât e tot bugetul.

Componentele vin după: buton, câmp de formular, card, badge, navigație, footer. Dacă token-urile sunt corecte, componentele se scriu aproape singure, pentru că nu mai iei nicio decizie vizuală în timp ce le construiești — alegi dintr-o listă închisă.

Un cod hexazecimal scris direct într-o componentă este o decizie care nu mai poate fi renegociată. O variabilă este o decizie care poate fi renegociată o singură dată, în alt loc.

Testul practic: clientul mută accentul de brand din albastru în verde închis. Cu valori scrise pe loc cauți în tot proiectul, ratezi trei locuri, iar unul dintre ele e starea de hover a unui buton dintr-un formular pe care nu îl deschide nimeni — până în ziua în care îl deschide directorul. Cu token-uri editezi o linie. Aceeași mecanică face posibil modul întunecat fără a rescrie nimic: redefinești valorile token-urilor sub o interogare de preferință, iar componentele nu află niciodată că s-a schimbat ceva.

Aici se rup majoritatea sistemelor amatoare. Numele literale descriu pigmentul: --color-red, --color-blue-light, --font-24. Funcționează perfect până în ziua în care roșul devine burgundy și rămâi cu o variabilă numită red care produce vișiniu. Numele semantice descriu rolul: --color-primary, --color-danger, --color-surface, --color-text-muted, --text-lg.

Practica sănătoasă are două straturi. Un strat primitiv, literal, care ține pigmenții propriu-ziși, și un strat semantic care le dă roluri. Componentele consumă exclusiv stratul semantic. Rebrandingul atinge doar primitivele. Modul întunecat atinge doar maparea semantică.

• Rău: --gray-3 folosit direct pentru textul secundar.
• Bine: --color-text-muted, care trimite la --gray-3 azi și la altceva mâine.

Dacă ai timp pentru un singur lucru, fă-l pe acesta. Alegi o dimensiune de bază — 16px pe web — și un raport: 1.2 pentru interfețe dense, 1.25 sau 1.333 pentru site-uri editoriale. Generezi șase trepte în sus și una în jos, rotunjești la valori întregi și îți interzici orice altă dimensiune. Fixezi în aceeași trecere și înălțimile de rând: strânse pentru titluri, lejere pentru corpul de text.

Spațierea funcționează identic: o unitate de bază de 4px sau 8px și o scară de multipli. Regula pe care o aplic e că spațiul dinăuntrul unui element trebuie să fie întotdeauna mai mic decât spațiul dintre elemente, iar spațiul dintre secțiuni cel puțin dublu față de spațiul dintre blocuri. Proximitatea devine astfel semnal de grupare, nu accident. Un layout construit pe o scară coerentă arată calm chiar și când conținutul e mediocru.

O componentă nu e un buton. E un buton în șapte situații. Sistemele ieftine documentează prima stare și abandonează restul.

• Repaus — singura pe care o vezi vreodată în Figma.
• Hover — o diferență vizibilă, nu una cosmetică, și doar pe dispozitive cu cursor.
• Focus vizibil — obligatoriu, nu opțional, cu un contur care supraviețuiește fundalurilor colorate. Este și o cerință tratată pe larg în accesibilitatea ca avantaj competitiv.
• Activ — feedback imediat la apăsare, sub 100ms.
• Dezactivat — vizibil inert, dar tot peste pragul de contrast; gri deschis pe alb e o cursă.
• Încărcare — lățimea nu are voie să sară când eticheta devine indicator de progres; rezervă spațiul dinainte.
• Gol și eroare — lista fără rezultate și formularul respins sunt ecrane de produs, nu excepții. Scrie-le textele înainte de a scrie codul.

Documentate în sistem, stările astea sunt moștenite gratuit de a treia pagină. Fără sistem, fiecare pagină le reinventează parțial, iar pe unele le sare complet.

Prima pagină construită pe sistem e mai lentă decât una improvizată. A doua e la egalitate. De la a treia încolo sistemul plătește. Într-un proiect real de opt-zece pagini, câștigul cumulat ajunge la douăzeci-treizeci la sută din timpul de implementare, plus o reducere aproape totală a rundelor de corecturi vizuale — pentru că nu mai există decizii de renegociat, doar componente de asamblat.

Există și un dividend de performanță pe care puțini îl anticipează: un sistem restrâns produce CSS mai mic și mai puține variante de fonturi de încărcat, ceea ce se vede direct în metricile Core Web Vitals.

Nu construi un sistem pentru un landing page de campanie cu durată de trei săptămâni. Nu construi unul înainte de a ști cum arată brandul. Nu construi unul pentru un site de cinci pagini care nu va mai fi atins niciodată — acolo îți trebuie doar disciplină: aceleași cinci-șase valori, folosite consecvent. Un sistem prematur costă exact cât lipsa lui, doar că plătești în avans.

Pragul meu practic: dacă site-ul trece de opt pagini, sau dacă va crește în următoarele douăsprezece luni, sau dacă îl va atinge altcineva după mine, sistemul se justifică.

Argumentul de cost a expirat. Variabilele CSS native sunt suportate peste tot și se pot redefini pe orice selector, ceea ce transformă temele într-o chestiune de câteva linii. Tailwind v4 mută configurarea direct în CSS: token-urile se declară ca variabile într-un bloc de temă, iar clasele utilitare se generează din ele. Nu mai există un fișier de configurare în JavaScript care să se desincronizeze de foaia de stil reală. Practic, sistemul de design și implementarea lui devin același artefact.

Ultimul argument e comercial și e cel care închide discuția. Un site fără sistem e un site pe care doar autorul lui știe să îl modifice. Asta pare avantaj pentru furnizor și e dezastru pentru client.

O predare corectă conține un singur fișier de token-uri comentat, o pagină internă cu toate componentele în toate stările și trei-patru reguli scrise în română simplă: ce culoare pentru ce, ce dimensiuni de text există, cum se spațiază. Cu atât, orice dezvoltator competent poate prelua proiectul luni sau ani mai târziu. Cum arată livrabilele astea se vede în proiectele din portofoliu, iar dacă vrei o evaluare a ceea ce ai deja, scrie-mi.