Garage F. Auto Mazza — Styleguide

Owner-run all-brands garage in Renens with a 5.0★ Google reputation, a soft spot for

classic Italian cars, and a no-nonsense red-black-white identity already painted on its facade.

Brand DNA

• Atmosphere: honest, hands-on, precise, passionate, unpretentious.
• Audience: Renens/Lausanne-ouest drivers comparing 2–3 garages on their phone; worried

about cost and trust; classic-car owners looking for someone who cares.

• Inspirations: the shop's own signage — red car-silhouette swoosh, black angular

racing lettering on a white band, crossed-pistons motif, carbon-fiber services panel,

charcoal facade, blue workshop doors. Photos in content/sources/photos/.

• Differentiators: 5.0/5 from 104 Google reviews; owner-operated (M. Mazza works on the

cars himself and explains what he does); classic cars on the lift (Fiat 500s, Alfa 33,

Fiat 124 Spider); honest prices — a theme in three of five sampled reviews.

• Anti-references: not a slick dealership site; not SaaS-startup Inter-on-white; not

the generic sage-green AI template; no stock mechanics in overalls.

Voice

• Register: vouvoiement, fr-CH (canonical locale), EN secondary.
• Tone: direct, concrete, warm but professional. The garage's own words are short:

« Réparations toutes marques », « Service rapide ». Copy answers the visitor's question

before telling the story.

• Do say: « toutes marques », « préparation expertise », « devis sans engagement »,

« on vous explique ce qu'on fait », street + city (« Rue de Lausanne 47, à Renens »).

• Don't say: hype (« expérience unique », « excellence automobile »), invented

certifications/warranties/prices, "leader", superlative chains.

• Banned AI-fluff: « découvrez », « bienvenue dans l'univers de », « sans couture »,

seamless/elevate/unlock equivalents, rule-of-three adjective chains, exclamation marks.

• Good/bad pair:
• ✔ « Un problème de freins ? Appelez le 021 556 53 06 — on vous dit ce que ça implique avant de commencer. »
• ✘ « Découvrez une expérience automobile d'exception au cœur de Renens ! »
• Reading level: ~9th grade; short sentences.

Color

| Token | Hex | Use |

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

| primary | #c31d23 | CTAs, logo swoosh red, accents, tagline red |

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

| accent | #1f2933 | Dark headers/footer, secondary buttons |

| bg | #f7f7f5 | Page background (off-white, like the sign band) |

| surface | #ffffff | Cards |

| carbon | #15181c | Dark bands (services strip, footer) — echoes the carbon services panel |

| carbon-ink | #f2f3f4 | Text on carbon |

| steel | #4a5561 | Facade-gray supporting surfaces |

| door-blue | #2b5d8f | Sparse tertiary accent (workshop doors) — links/hover only, never CTAs |

| ink | #181b1e | Body text |

| muted | #5c646c | Captions, secondary text |

| line | #dfe1e2 | Borders |

Contrast: primary #c31d23 on white 5.9:1 ✔; carbon-ink on carbon 15.9:1 ✔; ink on bg 15.4:1 ✔.

Red is an accent and CTA color, never a text color on gray.

Typography

• Headings: Michroma (Google Fonts), single weight 400, uppercase, +0.02em tracking —

the closest webfont to the squared techno lettering on the facade. Used sparingly: display,

h1, h2 only. Sizes stay moderate because Michroma runs wide.

• Subheads/labels: Barlow Condensed 500–600, uppercase — industrial signage feel for

service labels, stat numbers, nav.

• Body: Barlow 400/600, 17px, line-height 1.55 — grotesque with a slight industrial

squareness, excellent FR diacritics.

• Webfont source: Google Fonts, self-hosted via astro capable pipeline (woff2 subset).

Scale

| Token | Size | Line | Use |

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

| display | 2.6rem | 1.12 | hero h1 |

| h1 | 2.1rem | 1.15 | page titles |

| h2 | 1.5rem | 1.2 | section headings |

| h3 | 1.25rem | 1.3 | card titles |

| body | 1.0625rem| 1.55 | paragraphs |

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

Spacing & layout

• Base unit: 4px; scale 4–128 per tokens.
• Container: 1120px max, 24px gutter, single column on mobile.
• Rhythm: sections separated by 64–96px; alternating light bg / white / one carbon band

per page (services strip or reviews) to echo the black services panel.

Shape & surface

• Radii: tight (2/4/8px) — technical, not friendly-rounded. Buttons md (4px).
• Borders: 1px line on cards; a signature 3px red left border on highlight cards

(evokes the red tagline stripe on the facade).

• Shadows: sm default, md on hover only.
• Imagery treatment: full-color real photos of the shop and cars; slight contrast lift;

never stock. Diagonal red swoosh divider motif (from the logo) may cut section edges as a

clip-path — the one decorative flourish, used max twice per page.

Motion

• Default: ≤180ms ease-out on hover/focus (buttons, cards).
• Use motion for: hover, focus, accordion.
• Don't use motion for: entrance animations, parallax, counters.

Components

• Primary button: primary red bg, white uppercase Barlow Condensed 600 label, 4px radius,

darkens ~8% on hover. One per viewport.

• Secondary button: transparent, 1.5px accent border, accent ink; on carbon bands:

carbon-ink border/label.

• Phone CTA: tap-to-call, phone number always visible in header; sticky bottom call bar

on mobile (red, full width, 56px).

• Card: white surface, 1px line border, 4px radius, h3 + short text; highlight variant

adds the 3px red left border.

• Nav: white bg, logo left, uppercase Barlow Condensed links, red underline on active;

phone number right with phone icon.

• Hero: real facade/workshop photo, dark gradient scrim, uppercase Michroma headline,

red tagline chip « Réparations toutes marques », two CTAs (call primary, quote secondary).

• Footer: carbon bg, three columns (NAP+hours, services, legal), red top rule.

Accessibility notes

• All text pairs pass AA at body size (checked above).
• Focus rings: 2px door-blue outline offset 2px — visible on white, red, and carbon.
• Michroma only for short uppercase lines (wide face hurts readability in paragraphs).