Medella Style Guide
← Site

Component Library & Design Tokens

A visual reference of all reusable components, colour tokens, and design patterns used across the Medella Home Physio & OT website.

Development reference – not linked from the public site

Colour Palette

Brand colours defined in tailwind.config.mjs

Physio

physio

#1a5568

physio-light

#e6f3f7

physio-hover

#154554

Occupational Therapy

ot

#2d6a4f

ot-light

#e6f4ed

ot-hover

#245740

Foundation

dark

#1e3a4f

body

#333333

muted

#64748b

background

#f7f9fa

footer-bg

#1e3a4f

Typography

Inter typeface. Headings use font-heading, body uses font-sans.

h1 · text-4xl / text-5xl

Expert Home Physiotherapy


h2 · text-3xl

Our Services


h3 · text-xl

Post-Surgical Rehabilitation


h4 · text-lg

Treatment Approach


Body text · text-base

We provide expert physiotherapy and occupational therapy services in the comfort of your own home. Our qualified therapists travel across Hampshire and Dorset to deliver personalised treatment plans.


Muted text · text-muted

Appointments available 7 days a week, 8am to 8pm. No referral needed.


Small text · text-sm

All our physiotherapists are HCPC registered and CSP chartered.


Link

View our physiotherapy services →

Buttons

All variant and size combinations of Button.astro

variant="physio"

variant="physio-outline"

variant="ot"

variant="ot-outline"

variant="dark"

As links (with href)

Icons

All icons available in Icon.astro. Sizes: xs, sm, md, lg, xl.

chevronDown
chevronRight
chevronLeft
arrowRight
checkMark
checkCircle
search
close
phone
envelope
home
clock
heart
people
user
star
mapPin
shield
play
menu
tag

Size scale

xs
sm
md
lg
xl

Cards

Reusable card patterns used across the site.

CaseStudyCard

StaffCard

StaffCard (compact)

Generic Content Card

Home Visit Physiotherapy

Expert physiotherapy delivered in the comfort of your own home, across Hampshire and Dorset.

Occupational Therapy

Helping you maintain independence at home with practical adaptations and therapeutic interventions.

Carer Training

Supporting carers with the skills and confidence to assist loved ones safely at home.

Blog Callout Styles

Styled HTML blocks for blog posts. Requires prose and blog-content wrapper classes.

Key Takeaways (teal)

Key Takeaways

  • Home physiotherapy is as effective as clinic-based treatment for most conditions
  • Sessions typically last 45-60 minutes and include a full assessment
  • No GP referral is needed to start private physiotherapy

Tip Box (green)

Therapist Tip

Try to do your prescribed exercises at the same time each day to build a consistent routine. Even 10 minutes of daily practice is more beneficial than an hour once a week.

Info Box (blue)

Did You Know?

The NHS recommends that adults aged 65 and over should aim for at least 150 minutes of moderate-intensity activity per week, including activities that improve strength, balance and flexibility on at least two days a week.

Warning Box (orange)

When to Seek Help

If you experience sudden severe pain, loss of sensation, or inability to bear weight after a fall, seek medical attention immediately. Call 999 in an emergency.

Stat Highlight (dark teal card)

73%

of patients report significant improvement in mobility within the first 6 weeks of home physiotherapy treatment.

Pull Quote

The physiotherapist was wonderful. She made me feel so comfortable in my own home and explained everything clearly.

— Margaret, 78, Ringwood

Medical Disclaimer (yellow)

Medical Disclaimer

The information in this article is intended for general educational purposes only. It does not constitute medical advice, diagnosis, or treatment. Always seek the advice of your GP, physiotherapist, or other qualified healthcare provider.

FAQ Section (collapsible)

How long does a home physiotherapy session last?

Initial assessments typically last 60-90 minutes. Follow-up sessions are usually 30, 45, or 60 minutes depending on your treatment needs.

Do I need a GP referral?

No, you do not need a GP referral to book private physiotherapy.

What areas do you cover?

We cover Hampshire, Dorset, and parts of Wiltshire including Bournemouth, Southampton, Salisbury, and Ringwood.

Shadows

Custom soft shadow scale defined in tailwind.config.mjs

soft

shadow-soft

0 2px 8px -2px rgba(0,0,0,0.08)

soft-md

shadow-soft-md

0 4px 12px -4px rgba(0,0,0,0.10)

soft-lg

shadow-soft-lg

0 8px 24px -8px rgba(0,0,0,0.12)

soft-xl

shadow-soft-xl

0 12px 32px -12px rgba(0,0,0,0.15)

Spacing / Container

The Container.astro component applies max-w-7xl mx-auto px-4 sm:px-6 lg:px-8.

Default Container (max-w-7xl)

Container: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8

Narrow Container (max-w-3xl override)

Container: max-w-3xl (overridden)

Full-width Container (max-w-full override)

Container: max-w-full (overridden)

Common Spacing Values

px-4 Container mobile padding 16px
px-6 / sm:px-6 Container tablet padding 24px
px-8 / lg:px-8 Container desktop padding 32px
gap-4 Tight grid gap 16px
gap-6 Standard grid gap 24px
gap-8 Wide grid gap 32px
py-16 / py-20 Section vertical padding 64px / 80px
mb-4 Tight bottom margin 16px
mb-8 Standard bottom margin 32px
mb-12 / mb-16 Section bottom margin 48px / 64px