Cross-Rehab — Joffrey Smeets — Styleguide

Sports physiotherapy practice inside the JSC CrossFit gym in Lausanne, run solo by

Joffrey Smeets: rehab that happens on the gym floor, not on a waiting-room chair.

Greenfield brand build. No existing website. Every token below is derived from real

source material: the business's own logo (found on its Google profile — orange athlete

lifting a barbell, tagline "Physiothérapie du Sport") and photos of the premises (light

wood floor, white walls, black steel rigs, red structural beams). Rationale per token in

design-tokens.json meta and build/decisions.md D4.

Brand DNA

• Atmosphere: energetic, competent, direct, encouraging, hands-on.
• Audience: athletes and active people in Lausanne — CrossFitters, runners, Hyrox

racers, post-op patients who want back to sport; notable expat/English-speaking share;

mobile-first, often browsing after a Google-Maps find.

• Inspirations: the logo (orange + taupe, barbell figure); the gym floor itself;

premium sports-rehab brands' energy — held back by clinical credibility.

• Differentiators: rehab *through* training inside a real CrossFit box; one dedicated

therapist end-to-end; FR/EN/NL; 5.0★ on 67 Google ratings.

• Anti-references: not a pastel wellness spa; not a sterile hospital site; not

SaaS-startup Inter-on-white; no stock photos of white-coated models pointing at spines.

Voice

• Register: fr-CH, vouvoiement. EN secondary locale, plain and direct.
• Tone: first-person singular (Joffrey speaks), practical, encouraging,

evidence-aware. Movement and outcomes, not pathology-speak.

• Do say: "reprendre le sport", "un bilan pour comprendre d'où vient la douleur",

"on s'entraîne, on ne subit pas", "retour au niveau d'avant — ou au-delà".

• Don't say: miracle/cure language, invented diplomas, pain-relief timelines,

"holistique", "seamless", "unlock", exclamation-mark enthusiasm.

• Good vs bad: ✅ "Après une opération du LCA, la rééducation se fait avec une barre et

des mouvements que vous connaissez déjà." ❌ "Découvrez une expérience de guérison

unique et holistique !"

• Reading level: ~9th grade.

Color

| Token | Hex | Use |

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

| primary | #ff7a00 | CTA fills, brand accents, energy strips |

| primary-ink | #211507 | Text/icons on primary (AA ✓, ~6:1) |

| accent | #a84a00 | Orange at text size on light bg (links, eyebrows — AA ✓, ~5:1) |

| bg | #faf8f5 | Page background (warm off-white — white walls + wood warmth) |

| surface | #ffffff | Cards |

| charcoal | #26211d | Dark sections: hero band, footer (from logo taupe deepened) |

| charcoal-ink | #f5f1ec | Text on charcoal |

| ink | #2a2521 | Body text (AA ✓ on bg) |

| muted | #6d655d | Secondary text |

| line | #e7e1d8 | Hairlines, dividers |

Never set #ff7a00 text on white — use accent for orange at text sizes.

Typography

• Headings: Barlow Semi Condensed 600/700 — athletic condensed without gym-poster

shouting. Uppercase only for eyebrows/labels (with 0.12em tracking), sentence case for

headings.

• Body: Barlow 400/500, 17px base, line-height 1.6.
• Webfont source: Google Fonts (self-hosted at build via astro starter pattern).

Scale

| Token | Size | Line | Use |

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

| display | 3.5rem | 1.05 | hero h1 (desktop; ~2.25rem mobile) |

| h1 | 2.5rem | 1.1 | page titles |

| h2 | 1.75rem | 1.2 | section headings |

| h3 | 1.25rem | 1.3 | sub-sections, card titles |

| eyebrow | 0.8125rem | 1.2 | uppercase labels above headings |

| body | 1.0625rem | 1.6 | paragraphs |

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

Spacing & layout

• Base unit: 8px; scale 4→128.
• Container: 1120px max, 24px gutter, single column on mobile.
• Rhythm: sections breathe (64–96px vertical on desktop); inside cards stay compact.

Left-aligned text; asymmetric layouts welcome (the logo itself is asymmetric).

Shape & surface

• Radii: 3px buttons/inputs, 6px cards, 12px large media. Athletic = crisp, not bubbly.
• Borders: hairline line on cards; 3px primary left-rule as the signature accent on

highlighted blocks (echoes the barbell).

• Shadows: sm on cards, md on sticky elements only.
• Imagery treatment: full-color, environment-first (gym floor, equipment, movement).

Draft uses placeholder gradients + equipment iconography until owner photos arrive (T5).

Motion

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

Components

• Button (primary): bg primary, ink primary-ink, radius sm, padding 12px 22px,

weight 600; hover darkens ~8%; visible 2px focus ring offset 2px.

• Button (secondary): transparent, 1px charcoal border, ink; on charcoal: 1px

charcoal-ink border.

• Card: surface, 1px line, radius md, 24px padding, shadow sm.
• Hero: charcoal band, left-aligned display text with orange accent word, primary CTA

+ phone CTA; mobile sticky call bar.

• Nav: sticky, bg/95 blur, logo left, links right, phone number as persistent CTA.
• Section: 64px (sm) / 96px (lg) vertical padding.

Accessibility

• 17px body minimum; visible focus states everywhere; all interactive contrast ≥4.5:1

(orange only as fill with dark ink, or as accent at text size); descriptive alt on

informative imagery.

Anti-patterns specific to this site

• No sage green / cream wellness drift — this brand is orange/charcoal or it isn't itself.
• No aggregateRating markup from Google reviews.
• No unverified credential or reimbursement claims (see cautions.md).
• No CrossFit® trademark overreach: describe the method ("functional training",

"entraînement fonctionnel"), name JSC CrossFit only as the location.