# montecafe.com.au — Design System

## 1. Visual Theme & Atmosphere

Monte Cafe brings a **warm Mediterranean warmth** to the web through a palette of terracotta, cream, and deep red — colors that evoke sun-baked clay, espresso, and linen tablecloths. The typographic pairing of Riposte (a geometric display face) with Apercu Mono for details creates a studied contrast between editorial modernity and artisanal craft. H2 headings rendered in uppercase with subtle letter-spacing reinforce menu-board and signage traditions. The system communicates: handcrafted quality, unhurried hospitality, analog warmth.

## 2. Color Palette & Roles

| Role | Value | Usage |
|------|-------|-------|
| Cream Background | `#f8f4e9` | Page canvas, warm neutral |
| Terracotta | `#b84b30` | Navigation text, footer, CTAs, section accents |
| Deep Red | `#5f1d1a` | --color-red token; dark anchoring elements |
| Black | `#000000` | High-contrast text fallback |
| White | `#ffffff` | Form fields, inverted surfaces |

Terracotta anchors the identity. Cream provides warmth without harshness. The palette is entirely analogous — no cool or complementary tones interrupt the Mediterranean mood.

## 3. Typography Rules

- **Display font**: Riposte — geometric, confident; used at weight 400 across all heading levels
- **Detail / accent font**: Apercu Mono — used for paragraph body text at 15px; unexpected but effective for menus and detail text
- **H2**: 36px / 43.2px, weight 400, UPPERCASE, letter-spacing 0.9px — strong menu-board presence
- **H3**: 16px, UPPERCASE — consistent labeling language
- **Body (h1/body)**: 16px / 21.6px, weight 400 — understated, letting the palette carry
- **No italic or bold variants** in extracted tokens — Riposte at regular weight only

| Level | Font | Size | Weight | Transform |
|-------|------|------|--------|-----------|
| H2 | Riposte | 36px | 400 | UPPERCASE |
| H3 | Riposte | 16px | 400 | UPPERCASE |
| Body | Riposte | 16px | 400 | none |
| Detail / P | Apercu Mono | 15px | 400 | none |

## 4. Component Stylings

- **Footer**: Full terracotta block (#b84b30) with cream text — warm inversion
- **Buttons**: Terracotta fill or cream-on-terracotta — no blue or neutral CTAs
- **Cards / slider items**: Terracotta accents, likely cream surfaces (Swiper-based carousel)
- **Border radius**: 9999px (pill), 3px, 4px, 50% — full range; pills for tags, small radii for cards
- **Forms**: White input on cream background — clear functional contrast

## 5. Layout Principles

- **Stack**: Tailwind CSS + WordPress (Site Kit detected)
- **Breakpoints**: 480, 640, 768, 800, 1024, 1280px
- **Swiper carousel**: Full-width image sliders (Swiper library) — hospitality visual storytelling
- **Spacing**: Tailwind 4px base unit scale
- **Content hierarchy**: Editorial headlines > imagery > supporting text > CTAs

## 6. Depth & Elevation

- No box shadow tokens extracted
- Depth via color field contrast: cream page background / terracotta sections
- Pill borders and full-bleed terracotta footers create clear layer separation
- Flat component aesthetic consistent with hospitality brand restraint

## 7. Do's and Don'ts

**Do:**
- Keep the terracotta/cream pairing tight — these two colors carry the entire identity
- Use UPPERCASE on headings — it anchors the signage/menu-board aesthetic
- Use Apercu Mono sparingly for detail text to add typographic texture
- Lean into warmth — no blue or cool-gray tones anywhere

**Don't:**
- Introduce digital-feeling colors (electric blue, neon, cool gray)
- Use bold weights — Riposte at 400 regular has more presence than heavy weights here
- Add drop shadows — they break the Mediterranean warmth with a corporate layer

## 8. Responsive Behavior

- Breakpoints: 480, 640, 768, 800, 1024, 1280px
- Swiper carousels adapt to single-image on mobile
- UPPERCASE headings reduce in size but maintain transform
- Pill and card radii consistent across all breakpoints

## 9. Agent Prompt Guide

> "Design in the style of Monte Cafe: warm cream background (`#f8f4e9`), terracotta accent (`#b84b30`), deep red (`#5f1d1a`) as anchor, Riposte display typeface at weight 400 with UPPERCASE headings, Apercu Mono for detail text, Mediterranean warmth throughout, no cool tones."

**Quick reference:**
- Background: `#f8f4e9` (cream)
- Accent: `#b84b30` (terracotta)
- Dark: `#5f1d1a` (deep red)
- Display font: Riposte, 400
- Detail font: Apercu Mono, 400
- Border radius: 3–4px (standard), 9999px (pill)

*Generated by Sparkbites — extracted from live CSS analysis*