Café Contemplation — Styleguide

Specialty coffee & matcha bar on the Ouchy lakefront, Lausanne. Run by Adéla (baker) &

Lloyd (barista) Arrigoni — with Joey the Boston Terrier as Mascot & Supervisor. 5.0/5 on

Google (127 ratings at 10.08.2026). ~10 seats, takeaway-led, cashless.

Greenfield brand build — no website exists, but a real visual identity does: the

branded takeaway cup (dusty-blue with cream "CAFÉ" caps + "Contemplation" script), the

room itself, and the hanging menu boards. Every token is derived from the photos in

brand/inspiration/ and content/assets/places-triage/ (visual estimates — no

colorimeter; refine with the owners at first contact).

Brand DNA

• Atmosphere: calme, doux, lumineux, soigné — "tirer sur le frein à main"; slow down,

one sip at a time. Pastel but precise, never childish.

• Audience: Ouchy neighbours + lakefront regulars first (the owners' stated priority),

commuters off the Ouchy métro/débarcadère, weekend + summer tourist wave, matcha crowd.

• Inspirations (the actual room): sky-blue metal café tables · dusty-blue La Marzocco ·

butter-cream walls · birch chairs and long bench with navy cushions · grey terrazzo

counter and floor · round glow sconces in a row · fresh flowers in bud vases · navy

espresso cups · script-headed menu boards with ♥ favourites.

• Differentiators: the couple + dog story (Geneva coffee-truck origin, 2024); house

matcha bar (lavande/rose/fraise/tonic); family-recipe pastries (Kola-Czech, cookie de la

Nonna); 5.0★ Google; the only specialty coffee directly on the Ouchy quays.

• Anti-references: NOT sage-green-and-cream AI-builder default; NOT Inter-on-white

SaaS; NOT dark-academia "third wave brutalist" coffee (concrete, black, mono fonts); NOT

a generic French bistro look.

Voice

• Register: FR primary (fr-CH, «vous»), EN secondary — mirrors their own bilingual

Instagram voice. The tagline "one sip at a time" stays in English in both locales

(that's how they write it).

• Tone: calm, warm, a little playful (a dog is a supervisor here). Specifics over

adjectives: name the drink, the grandmother, the roaster's country — never "expérience

unique".

• Do say: «matcha lavande», «cookie de la Nonna, la recette de la grand-mère de

Lloyd», «à deux pas du débarcadère d'Ouchy», «sur place ou à l'emporter», "one sip at a

time".

• Don't say: «voyage gustatif», «pause bien-être», «adresse incontournable», any

provenance claim the sources don't back («bio», «équitable»), invented kitchen claims.

• Good/bad pair: ✅ «Le cheesecake sort du four d'Adéla; les croissants arrivent

chaque matin d'une boulangerie de Pully.» / ❌ «Laissez-vous emporter par un voyage

sensoriel au cœur du café de spécialité.»

• Reading level: 8th–10th grade.

Color

Derived, not chosen from vibes:

| Token | Hex | Source | Use |

|---|---|---|---|

| primary | #3F6B86 | takeaway-cup blue (darkened ~8% for AA text) | CTAs, links, headings accents, footer |

| primary-ink | #F6EFDB | cream lettering on the cup | text on primary |

| accent | #8FB7D4 | sky-blue metal tables | "table" bands, hero panel, hover tints |

| accent-2 | #7A9B62 | matcha (drinks + cookie) | decorative only — fails AA on bg (2.8:1), never body text |

| bg | #F7F1DC | butter-cream walls | page background |

| surface | #FFFEF8 | white menu boards / plates | cards, menu boards |

| ink | #22344A | navy espresso cups & cushions | body text |

| muted | #5E6B77 | — | captions (4.8:1 on bg) |

| line | #E4DCC3 | — | hairlines |

| birch | #DFC69B | chairs, bench, shelves | gallery band, warm strips |

| terrazzo | #A9A9A4 | counter/floor terrazzo | speckle motif, image placeholders |

| berry | #7D5C8C | blueberry cheesecake top | rare garnish (tags), decorative only |

Contrast (checked): primary on bg 5.1:1 · primary-ink on primary 5.0:1 · ink on bg

11.2:1 · muted on bg 4.8:1 — AA+. accent/accent-2/berry are decorative-only.

Typography

• Headline: Fraunces (soft "wonk" serif; at 600+ weights it echoes the rounded

Cooper-style "CAFÉ" caps on the cup). Optical sizing on; weight 600–640, tight tracking.

• Script accent: Pacifico — matches the "Contemplation" script on the cup and the menu

boards' section headers ("Specialty coffee", "Matcha lovers"). Used ONLY for eyebrows /

section labels / the ♥-favourite tag — never for body, never for whole headlines,

never below 1.1rem.

• Body: Karla — friendly humanist sans, clearly not Inter.

Scale

| Level | Size / line | Weight | Use |

|---|---|---|---|

| display | 3.4rem / 1.08 | 640 | home hero only |

| h1 | 2.5rem / 1.12 | 620 | page titles |

| h2 | 1.8rem / 1.2 | 600 | section titles |

| h3 | 1.25rem / 1.3 | 600 | card titles, menu sections |

| script | 1.375rem / 1.4 | 400 | Pacifico eyebrows |

| body | 1.0625rem / 1.62 | 400 | text |

| small | 0.875rem / 1.45 | 400 | captions, hours table |

Spacing & layout

• 4px base scale; sections breathe (space-8/9 between bands) — the room is airy, the site

must be too.

• Container 1060px; generous white(=butter) space, no dense grids.
• Mobile-first; single column under 768px; sticky bottom bar (hours/call/directions) on

mobile.

Shape & surface

• Rounded and soft: cards radius-lg (20px), buttons pill, images radius-md with one

signature exception — the hero photo gets a half-round top (like the round tables

and glow sconces).

• Menu sections render as "boards": surface-white cards, script header, hairline rows

— a direct quote of the hanging menu boards.

• ♥ favourites: items the boards mark with a heart keep it — small berry-colored ♥

with aria-label="favori de la maison".

• Terrazzo speckle (tiny multi-grey dots on terrazzo token) may appear as a thin divider

band — subtle, max 1× per page.

Motion

• Calm: fades and 4px rises only, 200ms base, no parallax, no autoplay, no marquee.
• Respect prefers-reduced-motion.

Components

Button (primary)

Pill, primary bg, primary-ink text, Karla 600; hover: darken 6%, rise 1px.

Button (secondary)

Pill, transparent bg, primary text, 1.5px primary border; hover: accent-tinted bg.

Card

surface bg, radius-lg, shadow-sm, line hairline; padding space-5.

Hero

Split: left text on bg (script eyebrow → Fraunces display → one short line → CTA pair),

right photo with half-round top sitting on an accent "table band" that runs under both

columns. Open-today strip directly beneath.

Nav

bg, hairline bottom; wordmark as text: "CAFÉ" (Fraunces 640 caps) + "Contemplation"

(Pacifico) stacked tight; right: Carte · Nous trouver · FR/EN toggle (pill).

Section

Script eyebrow (Pacifico, primary) + Fraunces h2 + body; alternate bg/surface bands;

one birch band (gallery) and one primary band (story or footer CTA) per page max.

Accessibility

• All text tokens AA on their backgrounds (checked above); accent-2/berry decorative only.
• Focus: 2px primary outline, 2px offset, on every interactive element.
• Menu is semantic HTML (headings + lists/tables), never an image; prices in text.
• Tap targets ≥44px; sticky bar buttons full-height.
• lang per locale; hreflang pairs; alt text describes what the photo actually shows

(photo-triage names, not wishes).

Anti-patterns specific to this site

• No sage/olive + beige drift — the blue is the brand; if a section feels "AI-neutral",

add the table blue back.

• Pacifico creep: script in more than eyebrows/♥ tags = kill it.
• No stock lifestyle photos of "people laughing with coffee" — real photos or a terrazzo

placeholder block with a caption.

• No fake urgency, no newsletter popup, no cookie-wall theatrics (no third-party trackers

at all on the draft).

• Don't render Joey as a cartoon/emoji mascot — he appears only in real photos (with

owner-provided shots later) and in words.