Brand Overview
The Lifestyle Physiologist is a specialist UK medical wellness brand focused on phase 4 cardiac rehabilitation and long-term heart health. The brand is built around Richard as the central authority — an ACSM C-EP Certified Exercise Physiologist with over 30 years of clinical experience.
Positioning
Specialist cardiac rehab, not generic fitness or physio
Audience
Cardiac patients, carers, and referring clinicians
Feeling
Warm, authoritative, reassuring — never clinical or cold
Logo
Usage Rules
- The logo is a prominent, large-scale visual element — it reinforces specialist authority.
- Logo uses deep teal (#0B5654) text with warm coral (#E77D68) icon.
- Maintain generous clear space around the logo — minimum equal to the height of the icon element.
- Never stretch, rotate, recolour, or add effects to the logo.
- On dark backgrounds, use an inverted white version.
Colour Palette
All colours are defined as HSL CSS custom properties in index.css and mapped through tailwind.config.ts. Never use raw colour values in components — always reference semantic tokens.
Primary
Primary (Deep Teal)
#0B5654 · 179 82% 19%
Headings, navigation, trust cues, footer background
Primary Foreground
#FFFFFF · 0 0% 100%
Text on primary backgrounds
Accent
Accent (Warm Coral)
#E77D68 · 14 72% 65%
CTA buttons, highlights, sparingly for energy
Accent Foreground
#FFFFFF · 0 0% 100%
Text on accent buttons
Neutrals
Background (Warm Cream)
#F5F0EA · 34 30% 95%
Page background — warm, not clinical
Foreground
#0F172A · 222 47% 11%
Body text, dark UI elements
Muted
#EDE8E0 · 34 22% 91%
Card backgrounds, badges, subtle fills
Muted Foreground
#64748B · 215 16% 47%
Secondary text, descriptions, captions
Card
#FAF7F3 · 34 30% 97%
Card surfaces, elevated containers
Secondary
#EFE9E0 · 34 25% 92%
Secondary buttons, subtle backgrounds
Colour Ratios
Deep teal dominates (headings, nav, footer). Warm cream provides breathing room. Coral appears sparingly on CTAs and highlights only.
Typography
The entire site uses Manrope — a modern geometric sans-serif with excellent readability for health-conscious audiences. Weight hierarchy creates clear visual ranking.
Font Stack
"Manrope", system-ui, sans-serifPersonalised cardiac rehabilitation
Leading [1.1], text-balance, text-primary
How we support your recovery
text-primary
Private 1-to-1 Cardiac Rehabilitation
text-primary
From private one-to-one support and assessments to ongoing education.
text-muted-foreground, leading-relaxed, max-w-[52ch]
Tailored exercise programme designed for your recovery journey.
text-foreground/80, leading-relaxed
WHY CHOOSE RICHARD
uppercase, tracking-wider, text-accent
MSc Exercise & Behavioural Medicine
Trust badges, small labels
Weight Usage
Aa
400
Body text
Aa
500
Body emphasis
Aa
600
Buttons, nav, links
Aa
700–800
Headings H1–H3
Spacing & Layout
Generous whitespace reinforces the premium, non-clinical feel. Sections use substantial vertical padding and content is constrained within a centred container.
| Token | Tailwind | Value |
|---|---|---|
| Section Padding | py-20 lg:py-28 | 80px / 112px |
| Container Padding | px-4 lg:px-8 | 16px / 32px |
| Card Padding | p-7 | 28px |
| Component Gap (grid) | gap-6 | 24px |
| Section Inner Gap | gap-12 lg:gap-20 | 48px / 80px |
| Content Stack | space-y-8 | 32px |
| Border Radius | rounded-2xl | 16px (--radius: 1rem) |
Layout Rules
- Max container width: 1400px (container class with 2rem padding)
- Grid layouts use lg:grid-cols-5 for hero (3+2 split) and md:grid-cols-3 for cards
- Alternating background colours between sections (background ↔ muted) to create visual rhythm
- Cards use rounded-2xl with shadow-card and hover:shadow-card-hover with -translate-y-1 lift
Shadows & Elevation
Card Default
--shadow-card
Card Hover
--shadow-card-hover
Navigation
--shadow-nav
Component Patterns
Buttons
- Primary CTA: bg-accent (coral) — used sparingly for the single most important action
- Secondary: outline with border-primary/20 — for alternative actions alongside a CTA
- Default: bg-primary (teal) — for standard interactive elements and card actions
- All buttons include active:scale-95 press feedback and hover:shadow-lg elevation
Trust Badges
Rounded-full pills with bg-muted, text-xs font-medium. Shield icon in text-primary/60.
Cards
Card Title
Description text with leading-relaxed for comfortable reading.
- Feature bullet point
bg-card, rounded-2xl, shadow-card → shadow-card-hover on hover with -translate-y-1 lift. Internal padding: p-7.
Section Overlines
Section Label
text-sm, font-semibold, text-accent, uppercase, tracking-wider. Used above section headings to categorise content.
Imagery & Photography
Photography should reinforce Richard's specialist authority and the warm, reassuring nature of the brand. Images are not decorative — they build trust.
Do
- Authority-led portraits of Richard in professional settings
- Consultation scenes showing one-to-one support
- Natural lighting, warm tones aligned with the cream palette
- Aspect ratios: 4:5 for hero portraits, 4:3 for consultation images, full-width for card headers
Don't
- Generic stock photography of gyms or fitness
- Clinical hospital settings that feel cold
- Overly posed or artificial group shots
- Low-quality, compressed, or pixelated images
All images use rounded-2xl shadow-card object-cover.
Voice & Tone
The brand speaks with quiet confidence — expert but approachable, reassuring but never patronising. The tone bridges clinical credibility with human warmth.
We are
- Authoritative — backed by 30+ years of evidence
- Warm — empathetic, patient-first language
- Clear — no jargon unless clinically necessary
- Reassuring — acknowledging concerns, building confidence
We are not
- Salesy — no urgency tactics or hard sells
- Clinical — not cold or detached medical language
- Generic — never 'transform your life' wellness clichés
- Casual — professional, not chatty or informal
Example Copy
✗ "Smash your fitness goals with our amazing programme!"
✓ "Personalised cardiac rehabilitation and expert support for long-term heart health."