Brand Guidelines

Design Tokens

Tokeni de design pentru sistemul farme.ro - culori, spacing, shadows, typography

Spațiere & Layout

Sistemul nostru de spațiere bazat pe multipli de 4px asigură consecvență și armonie vizuală. Folosim o scală predictibilă pentru a crea ritm și ierarhie în design.

Scara de Spațiere

4px

Spațiere foarte mică între elemente apropiate

8px

Spațiere mică între elemente înrudite

12px

Spațiere medie între componente

16px

Spațiere standard între secțiuni mici

24px

Spațiere largă între secțiuni

32px

Spațiere extra largă între grupuri majore

48px

Spațiere pentru separarea secțiunilor principale

64px

Spațiere maximă pentru layout-uri ample

Rotunjire Colțuri

Mic

4px

Inputs, mici elemente

Mediu

8px

Butoane, carduri mici

Mare

12px

Carduri standard

Extra Mare

16px

Carduri featured, containere

Rotund

999px

Badge-uri, pills, butoane circulare

Sistem de Grid

Folosim un grid de 12 coloane cu gutter de 24px pentru layout-uri responsive și flexibile.

1

2

3

4

5

6

7

8

9

10

11

12

12 Coloane (Full Width)

6 Coloane

6 Coloane

4 Coloane

4 Coloane

4 Coloane

Exemplu de Layout Complet

AgriMarket

Produs Premium

Descriere scurtă a produsului

Produs Premium

Descriere scurtă a produsului

Produs Premium

Descriere scurtă a produsului

Spațiere consistentă: 24px între secțiuni

Colors

Primary

bg-primarytext-primary

#22c55e

bg-primary-500

Shade 500

bg-primary-600

Shade 600

Secondary

bg-secondarytext-secondary

#d97706

Neutral & System

bg-background
bg-foreground
bg-muted
border-border

Spacing

p-10.25rem (4px)
p-20.5rem (8px)
p-30.75rem (12px)
p-41rem (16px)
p-61.5rem (24px)
p-82rem (32px)

Border Radius

rounded-xs

0.25rem

rounded-sm

0.5rem

rounded

0.75rem

rounded-lg

1.5rem

Shadows

shadow-soft
shadow-soft-md
shadow-soft-lg
shadow-soft-xl

Typography Scale

text-xs0.75rem (12px)
text-sm0.875rem (14px)
text-base1rem (16px)
text-lg1.125rem (18px)
text-xl1.25rem (20px)
text-2xl1.5rem (24px)

Best Practices

✓Folosește mereu tokens în componente

În loc de culori hardcodate, folosește tokenii Tailwind:

✅ bg-primary✅ text-foreground✅ border-border❌ bg-[#22c55e]❌ color: #1c1917

✓Nu folosim culori hardcodate în CSS

Toate culorile trebuie să vină din design tokens pentru consistență și ușurință de mentenanță. Dacă ai nevoie de o culoare nouă, adaugă-o în tailwind.config.ts.

✓Respectă spacing-ul consistent

Folosește scale-ul de spacing definit (p-1, p-2, p-4, p-6, p-8) pentru a menține consistența vizuală în toate componentele.