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

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

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