Brand Guidelines

Theme System

Cum funcționează temele Light și Dark în farme.ro

Principii Teme

Light Mode

  • • Natural, airy, calm
  • • Paper-like feel
  • • Warm, inviting
  • • High readability

Dark Mode

  • • Emerald, deep, organic
  • • High contrast
  • • Glassy cards
  • • Natural, earthy

Theme Tokens

Light Mode

background

#FDFCF9

foreground

#1B1B1B

primary

#1F7A45

primaryForeground

#FFFFFF

secondary

#B25A3C

secondaryForeground

#FFFFFF

accent

#F4C447

accentForeground

#1B1B1B

Dark Mode

background

#02110E

foreground

#E8F6EC

primary

#3BD58A

primaryForeground

#02110E

secondary

#D27B54

secondaryForeground

#0B0B0B

accent

#F2D15C

accentForeground

#111111

Component Behavior

Buttons

Cards

Solid Card

Light: white background. Dark: emerald glassy

Glass Card

Light: subtle transparency. Dark: glassy effect

Alerts

Success

Error

Color Contrast

Good Contrast

Text on background meets WCAG AA standards

Poor Contrast

Text too light on light background - avoid this

DO / DON'T

DO

  • • Use semantic tokens (bg-primary, text-foreground)
  • • Test contrast in both themes
  • • Use glassy cards in dark mode
  • • Maintain consistent spacing

DON'T

  • • Don't use brown backgrounds in dark mode
  • • Don't hardcode HEX colors
  • • Don't mix light/dark styles inconsistently
  • • Don't ignore contrast requirements