Colours

Brand palette — 3 colours

--color-bg
#F7F5F0

--color-accent
#B7775C

--color-sand
#D8C3A5

Derived tokens

--color-dark
#2C1A12

--color-border
rgba(216,195,165,0.5)

Typography

Heading font — Optima

--font-heading: 'Optima', 'Georgia', sans-serif

Body font — Manrope / Avenir Next

--font-body: 'Avenir Next', 'Manrope', 'Helvetica Neue', sans-serif

Heading scale

--text-hero MaxWell

--text-5xl (88px) MaxWell

--text-4xl (64px) MaxWell Performance

--text-3xl (44px) Clear thinking. Individualised care.

--text-2xl (32px) More than temporary relief.

--text-xl (24px) Recovery, health, and performance — connected.

Body scale

--text-lg (20px) A holistic approach to movement, recovery, and performance.

--text-base (16px) We treat by combining clinical reasoning with a clear plan. That starts with understanding the problem properly.

--text-sm (14px) Fill in your details and we'll be in touch within 24 hours.

Spacing

--space-xs
0.5rem / 8px

--space-sm
1rem / 16px

--space-md
1.5rem / 24px

--space-lg
2.5rem / 40px

--space-xl
4rem / 64px

--space-2xl
7rem / 112px

--space-3xl
10rem / 160px

Buttons

.btn .btn-dark

.btn .btn-outline

.btn .btn-primary

.btn .btn-outline-light

Labels & Links

Default Label

.label

Accent Label

.label .label--accent

Underline Link →

.link-underline

Divider

Forms

.form-field · .form-input · .form-row · .form-select · .form-submit

Page Heroes

Text Hero (light)

.page-text-hero · .page-text-hero__inner · .page-text-hero__title

Section Label

Page Title Goes Here

Dark Hero

.page-dark-hero · .page-dark-hero__inner · .page-dark-hero__title · .page-dark-hero__subtitle

Section Label

Dark Hero Title

A subtitle that describes this section with more detail.

Statement Section

.statement · .statement__container · .statement__text

Label Here

This is a centered statement block, used for mission statements, belief sections, and approach descriptions. It uses the heading font at a comfortable reading size.

Call to Action →

Image + Text Split

.imgtext · .imgtext__grid · .imgtext__img · .imgtext__content · .imgtext__top · .imgtext__heading · .imgtext__bottom · .imgtext__body

Use .imgtext__content--bordered-right to flip the border to the right side (text-left layout).

Image placeholder

Section Label

Heading text goes here.

Body paragraph one. This demonstrates the standard image-left, text-right layout with border-left on the content column.

Body paragraph two. Additional detail that supports the heading above.

Layout Tokens

Token	Value	Usage
`--container-max`	1440px	Max content width
`--container-pad`	clamp(1.25rem, 4vw, 3rem)	Edge padding, aligns all content
`--header-height`	5rem	Fixed header offset
`--radius-sm`	6px	Cards, small elements
`--radius-md`	12px	Larger elements

Transitions

Token	Value
`--transition-fast`	0.15s cubic-bezier(0.4, 0, 0.2, 1)
`--transition-base`	0.3s cubic-bezier(0.4, 0, 0.2, 1)
`--transition-slow`	0.6s cubic-bezier(0.4, 0, 0.2, 1)