Clinique Auto — Styleguide

Garage mécanique de quartier à Renens (Lausanne Ouest), 5.0/5 sur Google, tenu par M. Sousa —

honnête, rapide, direct. Greenfield brand build: no existing website; every visual decision below

derives from the physical premises (signage + workshop + showroom photos in brand/inspiration/).

Brand DNA

• Atmosphere: *direct, fiable, sans chichis, chaleureux, précis* — a garage that

fixes your car fast at an honest price, with a surprisingly beautiful showroom.

• Audience: drivers around Renens / Lausanne Ouest with a breakdown, a service due, or a tyre

problem; worried about cost and trust; mostly mobile; often calling within minutes.

• Inspirations (source, not vibes):
• The backlit sign: bold vermilion uppercase letters on an olive-khaki *checkered* lightbox

with a charcoal frame (photo1.jpg) → primary color, headline style, checker motif.

• The workshop: concrete floor, charcoal/white walls, blue lifts, red tool chests (photo4.jpg).
• The showroom: marble-white tile, glass, wood-panel wall, exotic cars (photo2.jpg, photo8.jpg).
• Differentiators: 5.0/5 over 87 Google ratings; ~10 years in Renens (review-sourced —

confirm); handles old-school mechanics *and* modern diagnostics; showroom with exceptional cars;

everything from superminis to vans to Porsches passes through.

• Anti-references: not a slick dealership site; not US-franchise body-shop blue-and-chrome;

not SaaS-startup Inter-on-white; no stock photos of models in overalls.

Voice

• Register: vouvoiement. Language: fr-CH (site v1 French only — languages TODO T6).
• Tone: direct, concret, rassurant. The reviews give the register: "honnête", "transparent",

"soigné", "rapide". Short sentences. Lead with the visitor's problem, not the garage's history.

• Do say: "Appelez-nous", "devis clair avant toute intervention", "toutes marques",

"expliqué avec transparence", "Renens / Lausanne Ouest".

• Don't say: invented certifications, warranty terms, prices, "leader", "excellence

automobile", "passion de l'automobile" as filler.

• Banned AI-fluff: "n'hésitez pas", "au cœur de", "unique en son genre", "découvrez",

rule-of-three adjective chains, exclamation-mark enthusiasm.

• Good/bad pair:
• ☑"Un problème de pneu ? Passez — souvent réglé dans la journée."
• ❌ "Découvrez une expérience automobile unique alliant passion, expertise et excellence !"
• Reading level: 8th–10th grade.

Color

| Token | Hex | Use |

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

| primary | #d93a26 | CTAs, tap-to-call, brand accents (sign vermilion) |

| primary-ink | #ffffff | Text/icons on primary |

| primary-glow | #ff6a4d | Hover/glow on dark surfaces (backlit-sign effect) |

| accent | #847b5a | Olive-khaki details, checker motif (sign panel) |

| accent-soft | #e9e6da | Tinted section backgrounds |

| bg | #f6f5f1 | Page background (showroom marble off-white) |

| surface | #ffffff | Cards |

| bg-dark | #1c1e22 | Dark sections: hero band, footer (sign frame charcoal) |

| surface-dark | #2a2d33 | Cards on dark |

| ink | #1e2024 | Body text |

| ink-inverse | #f6f5f1 | Text on dark |

| muted | #5c5e63 | Secondary text |

| line | #e2e0d8 | Borders on light |

| line-dark | #3b3f47 | Borders on dark |

Contrast: primary on white ≈ 4.6:1, white on primary same — AA at body size; ink/bg ≈ 15:1;

ink-inverse/bg-dark ≈ 14:1. Never set primary text on accent or accent-soft.

Signature motif — the checker strip. A low-contrast checkered band (accent olive on

transparent, CSS repeating-conic-gradient, ~12px cells) used as a thin divider under section

headings and along the hero edge. It quotes the actual sign panel; it is the swap-test anchor.

Use sparingly: never as a full-section background.

Typography

• Headings: Archivo Black, uppercase, slight positive tracking (0.005–0.01em) — closest

Google-font match to the heavy grotesque sign lettering (match, not confirmation).

• Body: Archivo (400/600/700), 17px base, line-height 1.55.
• Webfont source: Google Fonts, self-hosted via @fontsource (no runtime Google requests).

Scale

| Token | Size | Line | Use |

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

| display | 3.25rem | 1.05 | hero h1 |

| h1 | 2.375rem | 1.1 | page titles |

| h2 | 1.75rem | 1.15 | section headings |

| h3 | 1.1875rem | 1.3 | card titles |

| body | 1.0625rem | 1.55 | paragraphs |

| small | 0.875rem | 1.45 | captions, footer |

Mobile: display drops to ~2.25rem, h1 to ~1.875rem.

Spacing & layout

• Base unit: 8px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
• Container: 1120px max, 24px gutter, single column on mobile.
• Rhythm: sections 64–96px vertical on desktop, 48–64px mobile. Dense, workshop-like — this

site should feel efficient, not airy-wellness.

• Layout DNA: left-aligned headings and copy; asymmetric hero (text left, photo right);

hard section breaks, some on bg-dark. No centered-everything.

Shape & surface

• Radii: sm 2px (chips, checker cells), md 6px (buttons, inputs), lg 10px (cards, photos).

Industrial — nothing pill-shaped except the mobile call button.

• Borders: 1px line on cards; 3px primary left-rule on highlighted items (review quotes).
• Shadows: sm on cards, md only on the sticky mobile call bar. Mostly flat.
• Imagery: real premises photos only — workshop, showroom, sign. Full-color, generous crops.

Google photos are placeholders (rights! see cautions.md); real shoot on the shot list T5.

Motion

• Subtle, ≤200ms ease-out: hover states, focus, accordion. No entrance animations, no parallax.
• Primary button hover on dark surfaces may glow (primary-glow ring) — the backlit sign, again.

Components

Button (primary — "Appeler")

• bg primary, ink primary-ink, radius md, padding 12px 20px, weight 700, uppercase small tracking.
• hover: darken 8% (light bg) / glow ring primary-glow (dark bg); focus: 2px outline offset 2px.

Button (secondary — "Demander un devis")

• transparent bg, ink primary (ink-inverse on dark), 1.5px border currentColor, same geometry.

Card (service)

• bg surface, 1px line border, radius lg, padding 24px, shadow sm; h3 + one concrete sentence.

Review quote

• 3px primary left border, italic off, attribution line in muted; short excerpts only.

Hero

• Split: left — uppercase display headline, one-sentence value prop, phone number large,

two CTAs (Appeler primary / Devis secondary); right — premises photo. Charcoal bg-dark band,

checker strip along the bottom edge. On mobile: photo below text, sticky call bar appears.

Nav

• Sticky, bg-dark, wordmark in Archivo Black uppercase (white + vermilion "AUTO"),

right-aligned links + phone number as primary CTA. Mobile: hamburger + persistent call icon.

Section

• Vertical padding 64/96px; alternating bg / accent-soft / bg-dark keeps scroll rhythm.

Accessibility

• Body 17px; phone numbers ≥1.25rem and tap-to-call everywhere.
• Focus visible on everything; sticky call bar ≥48px tap target.
• ≥4.5:1 on all text including on primary and bg-dark; checker motif is decorative (empty alt / CSS).

Anti-patterns specific to this site

• No invented facts: certifications, warranty, prices, insurance partners are all [TBD:] until

the client confirms (draft-first mode).

• Don't lead with the exotic showroom — it's seasoning, not the pitch; the pitch is honest

everyday repair (reviews: Juke, X3, vans — plus the Porsches).

• No checker overload — one strip per screen max.
• No blue: the workshop lifts are blue but the brand is vermilion/charcoal/olive; adding blue

reintroduces the generic garage palette.