Design System

Orassy Health style guide

The visual vocabulary of the Orassy Health website: colours, typography and every reusable component, shown in one place so parts can be reviewed and refined independently.

01 · Colour

Colour palette

Forest Green — primary#2E4A3F
Deep Forest — footer, hover#22382F
Orassy Crimson — accent, max 5%#90001F
Warm Cream — page ground#F5F2ED
Charcoal — headings#1E1E1E
Mid Green — illustration, borders#4E7061
Soft Green — tags, tints#DCE6DE
Sage — alt section ground#EEF2EC
Ink — body text#2A2A2A
Muted — secondary text#6B6B6B
Line — borders, dividers#E4E0D8
Rose — crimson tint#F3E3E6
02 · Type

Typography

Playfair Display carries every heading; Inter does everything else.

Heading 1 · Playfair Display 600
Calmer Mind. Stronger You.
Heading 2 · Playfair Display 600
Where neuroscience meets holistic care
Heading 3 · Playfair Display 600
Stress, Anxiety & Trauma
Lead · Inter 400 · muted
Science-led, drug-free therapies for stress, anxiety, burnout and trauma recovery.
Body · Inter 400 · ink
Kinesiology uses light pressure on a muscle as a form of biofeedback, reading how your nervous system responds to a stressor.
Small · Inter 400 · muted
We'll only use your details to reply. See our privacy statement.
03 · Actions

Buttons, eyebrows & tags

Mind Health, Canary Wharf Energy Healing
04 · Cards

Card styles

Default card

White ground, hairline border, lifts three pixels with the brand shadow on hover.

Green card — emphasis

Forest green fill for the one card per row that deserves the spotlight.

Sage card — sub-services

Soft sage fill for secondary or nested items within a family.

05 · Lists & flow

Checklist & process flow

  • Checklist itemBold lead line with a muted supporting sentence beneath.
  • Second itemGreen disc, white check, hairline divider between rows.
StressorAssessmentTargeted correction
06 · Forms

Form elements

07 · FAQ

FAQ accordion

How does the accordion behave?

Native details/summary — no JavaScript required, keyboard accessible, with a green plus/minus toggle.

A collapsed question?

Answers use the muted text colour on white cards with the standard hairline border.