Sistemul pe care e construit acest site.
Studio e locul unde țin meșteșugul onest: tipografia, culoarea, spațierea și mișcarea pe care chiar rulează site-ul — documentate la vedere. Constrângeri pe care le pot arăta, în loc să redecid lucrurile de bază de fiecare dată.
Câteva convingeri de lucru
Designul e în mare parte structură. Dacă grila, ierarhia și spațierea sunt corecte, cele mai multe decizii de stil se rezolvă singure.
Sobrietatea e calitatea principală. Partea grea rareori e să adaugi — e să decizi ce scoți, ca puținul rămas să poată conta.
Claritatea bate inteligența de dragul ei. Dacă o alegere trebuie explicată de două ori, de obicei nu e gata.
O singură familie, o scară calmă.
Un singur sans pe o scară de 1.25, mai ales greutăți light — mare și calm pentru titluri, mic și cu spațiere amplă pentru etichete.
Display
39px
Clarity over cleverness
Heading 1
31px
Designed and made with restraint
Heading 2
25px
The shape of how I think
Heading 3
20px
Decisions before pixels
Body
16px
The interface follows the decision underneath it.
Small
13px
Quiet labels, captions, and metadata.
Hârtie, cerneală, un singur accent.
Hârtie caldă, cerneală adâncă, un singur accent portocaliu. Aceleași token-uri se inversează curat pentru modul întunecat — schimbă tema și aceste mostre o urmează.
Paper
L #FAFAF7
D #0C1024
Paper raised
L #FFFFFF
D #11162E
Paper deep
L #F2F1ED
D #080B1B
Ink
L #0C1024
D #F2F1ED
Ink muted
L rgba(12, 16, 36, 0.65)
D rgba(242, 241, 237, 0.72)
Ink subtle
L rgba(12, 16, 36, 0.4)
D rgba(242, 241, 237, 0.48)
Accent
L #E8631A
D #F58A4B
Accent strong
L #BE4F0C
D #F58A4B
Invert
L #0C1024
D #1A2147
Rule
L rgba(12, 16, 36, 0.12)
D rgba(242, 241, 237, 0.14)
Totul pe o unitate de 4px.
O singură unitate de bază. Fiecare spațiu și margine e un multiplu al ei, așa că ritmul rămâne uniform fără să măsori.
O curbă, trei viteze.
O singură curbă de easing și trei durate. Mișcarea adaugă; nu poartă niciodată sens — și e oprită complet în modul cu mișcare redusă.
cubic-bezier(0.33, 1, 0.68, 1)
- Fast150ms
- Base300ms
- Slow600ms
Cum păstrez consecvența
Aliniere la grilă. Totul stă pe aceeași structură de bază, cu colțuri drepte care păstrează layout-ul arhitectural, nu moale.
Plat în repaus. Suprafețele rămân plate până când trebuie să semnaleze adâncime sau interacțiune — umbra e informație, nu decor.
Două registre tipografice. Text de display mare și light, față de etichete mici și cu spațiere amplă. Contrastul dintre ele duce greul.
Uneltele
Un set mic și ascuțit — suficient cât să duci o idee de la tablă la producție fără ceremonie. E același stack cu care e construit acest site.
- Figma — design de interfață, sisteme de componente și prototipare.
- React / Next.js — front-end-uri de producție; ceea ce citești rulează pe el.
- GSAP / Framer Motion — mișcare sobră, conștientă de fizică.
- React Native — când munca trebuie să iasă din browser.
“Constrângerea e o ușurare, nu o cușcă. Pânza goală e paralizantă; grila e permisiunea de a te mișca.”
Vrei ceva construit cu aceeași grijă?
Spune-mi la ce lucrezi — o notă scurtă e suficientă.