Sistem de design complet · Tokens · Componente · Layout-uri · Device frames · Inventar pagini
3
Palete
18+
Componente
7
Breakpoints
14+
Pagini
Paleta de culori
Trei familii principale de culori: Primary (încredere, profesional), Accent (acțiune, energie), AI (inovație, tehnologie). Fiecare cu 9 nuanțe pe scală de 50–900.
Primary — Deep Slate Blue
900
#0F1F3D
800 ★
#1E3557
700
#243F6A
600 ★
#2B4C7E
500
#3D6494
400
#5F83B4
300
#8AADD0
200
#C0D4E8
100
#EEF2F8
Accent — Warm Amber (CTA)
900
#7A3A08
700
#C46E0F
500 ★
#E8871A
400
#F09D3E
300
#F5B96A
100
#FEF3E2
AI — Teal Cyan (Darrin AI)
700
#0B8580
600 ★
#0EA5A0
400
#1DBDB8
200
#A7E8E6
100
#E6F7F7
Semantic & Neutru
Success
#22C55E
Warning
#F59E0B
Error
#EF4444
Ink 800
#1A2640
Ink 400
#6B7A99
Surface
#F5F6FA
Border
#E4E8F0
Tipografie
Două fonturi: Syne (display, titluri, logo) și Inter (corp text, UI). Scala tipografică urmează un raport de 1.25.
display-2xl
My Darrin
Syne 800 · 48px · lh 1.1
display-xl
Servicii la cerere
Syne 800 · 36px · lh 1.15
heading-lg
Deviz Inteligent AI
Syne 700 · 28px
heading-md
Catalog Servicii
Syne 700 · 20px
heading-sm
Instalații sanitare
Syne 600 · 16px
body-lg
Platformă hibrid clasic & AI pentru servicii integrate la cerere.
Inter 400 · 16px · lh 1.65
body-md
Conectăm clienți cu parteneri verificați prin deviz AI.
Inter 400 · 14px
body-sm
Termeni și condiții · Politică confidențialitate
Inter 400 · 12px · ink-400
label
Catalog platformă
Inter 700 · 11px · uppercase
mono
#2B4C7E · --primary-600
JetBrains Mono · 12px
Spațiere & Grid
Sistem bazat pe 8px. Grid 12 coloane pe desktop, 6 pe tabletă, 4 pe mobil. Gap standard: 16px (sm), 20px (md), 24px (lg).
Scala de spațiere (8px grid)
sp-1 4px
sp-2 8px
sp-3 12px
sp-4 16px
sp-5 20px
sp-6 24px
sp-8 32px
sp-10 40px
sp-12 48px
sp-16 64px
sp-20 80px
sp-24 96px
Grid — Desktop 4 coloane (standard catalog)
col 1/4
col 2/4
col 3/4
col 4/4
Grid — Tabletă 2 coloane
col 1/2
col 2/2
Grid — Mobile 1 coloană
col 1/1
Breakpoints
7 puncte de rupere acoperind toate device-urile de la telefoane mici la monitoare 4K. Abordare mobile-first.
xs · 0–375px Mobile S
sm · 376–640px Mobile L
md · 641–768px Tabletă ↕
lg · 769–1024px Tabletă ↔
xl · 1025–1280px Desktop S
2xl · 1281–1440px Desktop M
3xl · 1441px+ Desktop L
Breakpoint
Lățime
Device
Grid cols
Nav
Sidebar
xs
0–375px
Mobile S (iPhone SE)
1
Burger
Overlay
sm
376–640px
Mobile L (iPhone 14)
2
Burger
Overlay
md
641–768px
Tabletă portret
2–3
Parțial
Overlay
lg
769–1024px
Tabletă landscape
3–4
Full
Icon only
xl
1025–1280px
Desktop S (laptop)
4
Full
Full 240px
2xl
1281–1440px
Desktop M (monitor)
4–5
Full
Full 240px
3xl
1441px+
Desktop L (4K)
5–6
Full
Full 280px
Butoane
6 variante principale + 3 mărimi. Toate cu hover, focus, disabled state și shadow adaptat culorii.
Variante
Mărimi
Stări
Formulare
Email-ul nu este valid.
Introdu unitatea de măsură.
Carduri
Card Rich (Catalog)
🔥 Popular
Instalații sanitare
Montaj, reparații și modernizare instalații apă-canal.
★★★★★4.9 (340)
🧠
Darrin AI
Nu găsești serviciul?
Descrie lucrarea — AI generează deviz automat în 60 secunde.
