1. Brand Colors
Our core colors are #C1553B for highlights and #2E3B2F for primary text and structural green, paired with soft cream backgrounds.
Rust / Signage Red
#C1553B
Forest Green / Text
#2E3B2F
Cream Background
#FDFBF7
Card Background
#F5F2EA
Border / Separator
#E2DDD5
2. Typography Scale
We use a custom bold serif stack (Cooper Black, Fraunces) for headings, and Karla for readable body copy.
Heading 1 - Cooper Black (Fluid)
font-size: clamp(2.5rem, 6vw, 4rem)
Heading 2 - Cooper Black
font-size: clamp(1.8rem, 4vw, 2.5rem)
Heading 3 - Cooper Black
font-size: clamp(1.4rem, 3vw, 1.8rem)
Body Text - Karla. A clean, geometric sans-serif that fits local bakery menus and interface descriptions perfectly.
font-size: 1.1rem; line-height: 1.6; font-family: Karla;
3. Interactive Buttons
Button components feature subtle micro-animations (transitions, lifts) on hover.
4. Form Controls
Form controls feature mature, clean focus states highlighted with Rust Red.
5. Alerts & Badges
Warning Alert Box Component
This component is used for allergen statements, timing warnings, and general dry disclaimers.
6. Component Cards
Used to represent items on our menu boards or snippets in galleries.
This is a standard card component containing an SVG illustration wrapper, dynamic headers, description, and allergen list.