Physiothérapie du Censuy — Styleguide

A well-equipped physiotherapy practice in Renens (VD) with a 5.0★ Google record, azure

treatment rooms and a real rehab gym — active, precise, and unmistakably Swiss.

Greenfield brand build — no existing website or logo. Every token below is derived from

the Google place photos of the premises (brand/inspiration/photo-1..6.jpg); rationale is

given per token. To be validated with the practice at first contact (T9).

Brand DNA

• Atmosphere: active, precise, reassuring, hands-on, Swiss-modern.
• Audience: people in pain or post-op (often referred by a physician), sport-injured

locals from Renens/Lausanne Ouest, mobile-first, want to know "can you help me and how

fast can I get an appointment".

• Inspirations: the premises themselves — vivid azure treatment tables (sampled

#096e97–#14a6d3), the practice's own poster with a blue header band, red Vitra .05

waiting-room chairs (sampled #972827–#a2261f in indoor light), USM Haller cabinets,

warm wood Sprossenwand, greige walls (#a8a997), a serious Matrix-equipped rehab gym.

• Differentiators: genuine gym-based active rehab (not just a table practice); evening

hours Mon/Wed until 20:00; 5.0/5 across 74 Google reviews.

• Anti-references: not spa/wellness pastel; not SaaS-startup Inter-on-white; not the

sage-green AI-builder look; not a dark "performance sport" brand.

Voice

• Register: vous (fr-CH). English secondary locale, professional "you".
• Tone: direct, competent, encouraging — a therapist explaining clearly, not a

marketing department. Evidence-aware, no miracle language.

• Do say: "reprendre le mouvement", "sur prescription médicale", "bilan initial",

"un programme d'exercices adapté", "à deux pas de la gare de Renens".

• Don't say: "guérison garantie", "douleur envolée", "expérience holistique",

"découvrez", "unique" as filler, cure claims, recovery-timeline promises.

• Good/bad pair: ✅ "Séances sur rendez-vous, du lundi au vendredi — appelez le

021 635 88 48." / ❌ "Découvrez une expérience de soin unique et holistique !"

• Reading level: 8th–10th grade.

Color

| Token | Hex | Use |

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

| primary | #0b78a6 | Primary CTA, links, brand blocks (table azure) |

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

| primary-deep | #096e97 | Hover/darken step, footer band |

| accent | #8e1b16 | Small pops only — like the chairs in the room |

| azure-bright | #14a6d3 | Decorative highlights, icon strokes |

| bg | #f7f6f2 | Page background (warm greige-white from walls) |

| surface | #ffffff | Cards, raised surfaces |

| ink | #20262b | Body text |

| muted | #5d6461 | Secondary text (greige-influenced) |

| line | #dfddd4 | Hairlines, dividers (warm) |

Contrast: #0b78a6 on white = 4.9:1 (AA at body size); #20262b on #f7f6f2 ≈ 14:1.

azure-bright is decorative only — never text on light backgrounds.

Typography

• Headings: Chivo 700 (Google Fonts) — a grotesque with Swiss-poster energy; slight

negative tracking; sentence case. Rationale: the space is furnished in Swiss design

classics (Vitra, USM); a neo-grotesque headline face echoes that without being sterile.

• Body: Source Sans 3, 17px base, line-height 1.6 — humanist, highly legible, free.
• Webfont source: Google Fonts, self-hosted via the starter's font pipeline if possible.

Scale

| Token | Size | Line | Use |

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

| display | 3.25rem | 1.08 | hero h1 |

| h1 | 2.375rem | 1.12 | page titles |

| h2 | 1.75rem | 1.2 | section headings |

| h3 | 1.25rem | 1.3 | sub-sections |

| body | 1.0625rem | 1.6 | paragraphs |

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

Spacing & layout

• Base unit: 8px. Scale 4→128 as tokens.
• Container: 1140px max, 24px gutter, single column on mobile.
• Rhythm: confident sections (64–96px vertical), Swiss-grid alignment, left-aligned

headings; azure full-bleed bands for hero/CTA sections to echo the table color.

Shape & surface

• Radii: buttons md (8px); cards lg (12px); photos sm (4px). No pill CTAs.
• Borders: 1px line hairlines on cards and tables; a 4px primary left rule as the

signature accent on callouts (echoes the poster header band).

• Shadows: sm on cards, md only for the mobile sticky bar. Mostly flat.
• Imagery: real practice photography (full-color, honest, no filters). Draft uses the

Google photos as placeholders only — flagged, never production.

Motion

• Subtle, ≤180ms ease-out on hover/focus. No entrance animations, no parallax.

Components

• Button (primary): bg primary, ink white, radius md, 12px 22px, weight 600; hover

primary-deep; focus 2px primary outline offset 2px.

• Button (secondary): transparent, ink primary, 1.5px primary border.
• Card: surface, 1px line, radius lg, 24px padding, shadow sm.
• Hero: left-aligned text block on bg, azure solid band behind (no photo dependence

while rights are unclear); phone CTA + hours chip; mobile sticky call bar.

• Nav: white, hairline bottom, sticky; wordmark = "Physiothérapie du Censuy" in Chivo

700 with an azure square bullet; FR/EN switch right.

• Section: 64px (sm) / 96px (lg) vertical padding.

Accessibility

• Body 17px; visible focus states; interactive contrast ≥4.5:1; alt text on informative

images; decorative images empty alt.

Anti-patterns specific to this site

• No stock-photo spines/joints clichés, no anatomical hologram imagery.
• Red is a pop, never a large surface (it reads as error/danger at scale).
• Don't drift toward wellness-spa softness — this is an active, clinical-adjacent practice.