Colors
Paleta de culori pentru brand-ul farme.ro - verde natural, terracotta cald, și tonuri neutre
Paletă de Culori
Paleta noastră de culori reflectă natura, prospeța și autenticitatea produselor locale. Verde emerald pentru creștere și sustenabilitate, complementat de tonuri calde pentru încredere și pasiune.
Culori Primare
#059669
Emerald 600
Primary brand color, CTAs
#047857
Emerald 700
Hover states, accents
#ECFDF5
Emerald 50
Backgrounds, subtle highlights
Culori Secundare
#F59E0B
Amber 500
Warmth, artisan products
#EA580C
Orange 600
Alerts, special offers
#0EA5E9
Sky 500
Trust, information
Culori Neutre
Neutral 900
Headings, primary text
Neutral 600
Body text, descriptions
Neutral 400
Secondary text, placeholders
Neutral 100
Borders, dividers
Neutral 50
Backgrounds, cards
Exemple de Utilizare
Buton Primar
Emerald 600 background
Buton Secundar
Amber 500 background
Semantic Color Tokens
Sistemul de culori folosește tokens semantic care se adaptează automat la tema selectată (Light/Dark). Toate componentele folosesc aceste tokens pentru consistență și compatibilitate cu dark mode.
Tema curentă: Light Mode
Tokenii de mai jos reflectă valorile pentru tema selectată
Background & Foreground
background
#FDFCF9
Fundal principal
bg-backgroundforeground
#1B1B1B
Text principal
bg-foregroundcard
#FFFFFF
Fundal card
bg-cardcardForeground
#1B1B1B
Text pe card
text-card-foregroundpopover
#FFFFFF
Fundal popover
bg-popoverpopoverForeground
#1B1B1B
Text pe popover
text-popover-foregroundCulori Principale
primary
#1F7A45
Culoare primară
bg-primaryprimaryForeground
#FFFFFF
Text pe primary
text-primary-foregroundsecondary
#B25A3C
Culoare secundară
bg-secondarysecondaryForeground
#FFFFFF
Text pe secondary
text-secondary-foregroundaccent
#F4C447
Culoare accent
bg-accentaccentForeground
#1B1B1B
Text pe accent
text-accent-foregroundCulori Neutre
muted
#F3F0E9
Fundal muted
bg-mutedmutedForeground
#6B6B6B
Text muted
text-muted-foregroundborder
#E0DDD6
Culoare border
bg-borderinput
#E0DDD6
Culoare input
bg-inputring
#1F7A45
Culoare focus ring
bg-ringCulori Funcționale
success
#3BA56A
Stare succes
bg-successsuccessForeground
#FFFFFF
Text pe success
text-success-foregroundwarning
#E2A434
Stare warning
bg-warningwarningForeground
#1B1B1B
Text pe warning
text-warning-foregrounderror
#D64545
Stare eroare
bg-errorerrorForeground
#FFFFFF
Text pe error
text-error-foregroundinfo
#3b82f6
Stare info
bg-infoinfoForeground
#FFFFFF
Text pe info
text-info-foregrounddestructive
#D64545
Acțiune distructivă
bg-destructivedestructiveForeground
#FFFFFF
Text pe destructive
text-destructive-foregroundCulori Principale
Primary Green
Primary#1F7A45
Acțiuni principale, link-uri, elemente de accent
Secondary Terracotta
Secondary#B25A3C
Elemente secundare, fundaluri calde
Accent Mustard
Accent#F4C447
Elemente de evidențiere, highlights
Culori Neutre
Background
#FDFCF9
Background
Foreground
#1B1B1B
Text
Muted
#F3F0E9
Muted Background
Border
#E0DDD6
Borders
Culori Funcționale
Success
#3BA56A
Success States
Warning
#E2A434
Warning States
Error
#D64545
Error States
Info
#3b82f6
Info States
Exemple de Utilizare
Butoane
Alerts
Comandă confirmată cu succes!
Produsele vor fi livrate în 2-3 zile.
Eroare la procesarea comenzii
Te rugăm să încerci din nou.
Stoc limitat
Mai sunt doar 3 bucăți disponibile.
Card pe Background Neutru
Produs Tradițional
Exemplu de card cu text pe fundal neutru, evidențiat cu shadow soft.
Design Tokens - Clase Tailwind
Culorile sunt disponibile prin clase Tailwind predefinite. Folosește aceste clase pentru a menține consistența în întregul proiect.
Culori Principale
bg-primaryBackground verdetext-primaryText verdebg-secondaryBackground terracottabg-accentBackground muștarCulori Neutre
bg-backgroundBackground principaltext-foregroundText principalbg-mutedBackground mutedtext-muted-foregroundText mutedborder-borderBorder colorCulori Funcționale
bg-successSuccess statesbg-warningWarning statesbg-errorError statesbg-infoInfo statesExemple de Utilizare
className="bg-primary text-primary-foreground"className="text-muted-foreground"className="border border-border"Ghiduri de Utilizare
Primary Green
Folosit pentru acțiuni principale, link-uri, și elemente de accent. Reprezintă natura și creșterea. Asigură-te că contrastul este suficient pentru lizibilitate.
Secondary Terracotta
Folosit pentru elemente secundare și fundaluri calde. Evocă autenticitatea și tradiția. Combină bine cu culorile neutre.
Neutral Colors
Folosite pentru text, borduri și fundaluri. Asigură contrast și lizibilitate în toate contexturile. Sunt fundamentale pentru structura vizuală.