Construcții și renovări, case la cheie
de la 100 lei/mp
Culori de brand
Albastrul e culoarea interacțiunii: butoane principale, linkuri, selecții, focus. Verdele e culoarea acțiunii de publicare și a banilor: „Publică anunț”, „Acceptă oferta”, plăți reușite. Nuanța 600 e cea folosită pe butoane, pentru contrast suficient cu textul alb.
Albastru · primary
Verde · accent
Neutre
Neutrele vin dintr-o hartă: ziua, hârtie deschisă cu o tentă ușoară de verde și carduri albe; noaptea, un albastru-verzui adânc. Verdele și albastrul de brand rămân pentru parcuri, apă și acțiuni.
Gri · tema luminoasă
Cerneală · tema întunecată
Culori de stare
Roșu pentru erori și acțiuni ireversibile, chihlimbar pentru atenționări și anunțuri promovate, auriu pentru stele. Succesul folosește verdele de brand.
Roluri și teme
Componentele nu folosesc niciodată „albastru 600” direct, ci un rol: --primary, --surface, --text-muted. Fiecare temă dă alte valori acelorași roluri. Așa se schimbă tema fără să atingem vreo componentă.
| Token | Folosit pentru | Luminos | Întunecat |
|---|---|---|---|
--bg |
Fundalul paginii | ||
--surface |
Carduri, panouri | ||
--surface-sunken |
Câmpuri de formular | ||
--surface-hover |
Rând la hover | ||
--border |
Contur implicit | ||
--text |
Text principal | ||
--text-muted |
Text secundar | ||
--text-subtle |
Etichete, placeholder | ||
--primary |
Acțiuni, selecție, linkuri (albastru) | ||
--primary-soft |
Fundal selecție | ||
--accent |
Publică, bani, succes (verde) | ||
--accent-soft |
Fundal verde discret | ||
--warning |
Atenționări | ||
--danger |
Erori, ștergere, raportare | ||
--star |
Stele rating | ||
--promoted |
Anunț promovat |
Luminos și întunecat, alăturate
Aceleași componente, aceleași clase. Doar tema diferă.
Tema luminoasă
Tipografie
Două familii gratuite, cu diacritice românești complete (ș și ț cu virgulă, nu cu sedilă). Bricolage Grotesque pentru titluri și prețuri: prietenos, cu personalitate. Figtree pentru text: foarte lizibil la dimensiuni mici, pe telefon.
Bricolage Grotesque
Titluri, prețuri, cifre mari · 500–800
Ă Â Î Ș Ț ă â î ș ț 0123456789 € lei
Figtree
Text, formulare, butoane · 400–800
Încă un șofer țâfnos își mănâncă știuca în Brăila, lângă câmpie.
Ai ceva de făcut?
Anunțuri Auto în București
Anunțuri promovate
Descriere
Detalii vânzător
Primește oferte de la oameni care pot face lucrarea, chiar în zona ta.
Mașina se prezintă într-o stare excelentă, fără accidente, revizii făcute la timp.
Membru din martie 2022 · răspunde de obicei în aproximativ o oră
Ultima actualizare acum 3 ore
Pentru casă
28.900 € · 2.400 lei
Spațiere
Totul e multiplu de 4 px. Distanțele mici (4–12) țin împreună elementele înrudite; cele mari (32–96) separă secțiunile.
--space-14 px
--space-28 px
--space-312 px
--space-416 px
--space-520 px
--space-624 px
--space-832 px
--space-1040 px
--space-1248 px
--space-1664 px
--space-2080 px
--space-2496 px
Colțuri
Colțuri generoase, rotunjite: cardurile au 20 px, butoanele sunt pastile, ca în machete.
xs6 px
--radius-xsInsigne mici
sm10 px
--radius-smMiniaturi, tooltip
md14 px
--radius-mdCâmpuri, notificări
lg20 px
--radius-lgCarduri
xl28 px
--radius-xlPanouri, dialoguri
2xl36 px
--radius-2xlHero
fullpastilă
--radius-fullButoane, chips
Umbre
Umbre moi, în două straturi, care cresc cu cât elementul e „mai sus”. În tema întunecată sunt mai adânci, ca să se vadă pe fundal închis. Treci cu mouse-ul peste ele.
xs
--shadow-xsButoane
sm
--shadow-smCarduri în repaus
md
--shadow-mdHover
lg
--shadow-lgMeniuri, card ridicat
xl
--shadow-xlDialoguri, toast
Mișcare
Animații scurte și discrete: 140 ms pentru hover, 220 ms pentru schimbări de stare, 360–520 ms pentru panouri care intră pe ecran. Dacă telefonul are activată „mișcare redusă”, toate se opresc. Treci cu mouse-ul peste pistă.
standard
schimbări de stare
schimbări de stare
out
intrări pe ecran
intrări pe ecran
in
ieșiri de pe ecran
ieșiri de pe ecran
spring
confirmări, inimioară
confirmări, inimioară
| Token | Valoare | Folosit pentru |
|---|---|---|
--duration-instant |
80 ms | Rând de meniu la hover |
--duration-fast |
140 ms | Hover pe butoane și linkuri, apăsare |
--duration-base |
220 ms | Comutatoare, file, carduri la hover |
--duration-slow |
360 ms | Panoul de filtre, dialoguri, toasturi |
--duration-slower |
520 ms | Intrarea secțiunilor la încărcarea paginii |
Iconițe
Setul Lucide (deja aprobat în proiect), cu linie de 2 px și colțuri rotunjite, ca să se potrivească cu fontul. Mărime implicită: 20 px.
Grilă și ecrane
Gândit întâi pentru telefon. Conținutul are maxim 1216 px lățime și margini de 16 px pe telefon, 24 px de la tabletă în sus.
| Ecran | De la | Anunțuri pe rând | Ce se schimbă |
|---|---|---|---|
| Telefon | 360 px | 2 | Navigare jos, filtre din panou de jos, buton „Publică” plutitor |
| Tabletă | 768 px | 3 | Căutarea apare în antet, filtrele se deschid din dreapta |
| Laptop | 1024 px | 3 | Coloană laterală pe pagina anunțului și în cont |
| Desktop | 1100 px | 4 | Grilă completă |