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.
Tipografie
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--step-6Clarity over output.
- Page title--step-5Slow, honest diagnosis.
- Section--step-4Judgment over process.
- Title--step-3The cost of unclear decisions
- Lede--step-2Understanding before screens, decisions before pixels.
- Body--step-0Calm, plain and senior — written for people making product decisions.
- Label--step--2Structural label · index · metadata
Culoare
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
--paper
The ground
Paper 2
--paper-2
Quiet fields
Ink
--ink
Text, rules, the wipe
Ink 3
--ink-3
Secondary text (4.5:1+)
Accent
--accent
The focus mark
Accent ink
--accent-ink
Small orange text
Field
--accent-field
The conversation
Invert
--invert
Navy fields
Spațiere
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.
- 1
- 2
- 4
- 6
- 10
- gutter
- section
Mișcare
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ă.
- dur-1 · 160msColour and state changes
- dur-2 · 320msArrows, toggles, small moves
- dur-3 · 640msWipes, reveals, the panel
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ă.