Three information architectures, each in two visual directions, across all six pages. Every design uses the practice's existing brand — the blue from the live logo, the navy and red from the approved v7-bento direction, and Reddit Sans.
The sitemap is fixed at six pages. All six design systems implement all six — 36 page compositions. Any cell opens that page in that design.
| Design | Home | Physiotherapy | HealthFit | FAQ | Testimonials | Contact |
|---|---|---|---|---|---|---|
| A1 ClinicalThe flat bar | Home | Physiotherapy | HealthFit | FAQ | Testimonials | Contact |
| A2 BentoThe flat bar | Home | Physiotherapy | HealthFit | FAQ | Testimonials | Contact |
| B1 Consulting RoomTwo practitioners | Home | Physiotherapy | HealthFit | FAQ | Testimonials | Contact |
| B2 NotesTwo practitioners | Home | Physiotherapy | HealthFit | FAQ | Testimonials | Contact |
| C1 The QuestionTriage-first | Home | Physiotherapy | HealthFit | FAQ | Testimonials | Contact |
| C2 ChartTriage-first | Home | Physiotherapy | HealthFit | FAQ | Testimonials | Contact |
Every page one click from every other. Six items, flat, no nesting at any width. Home routes rather than narrates.
Falsifiable by: Count the items in the header. Six, or the layout is not doing what it says.
The v1-clinical register of the approved direction: white ground, restrained 14px radii, soft shadows, and a short blue rule under every heading as the only ornament. Blue does the structural work and red is kept for the one action that matters.
How it differs from its sibling. Emphasis is carried by rule and shadow at a small scale. No section changes the ground colour, and nothing is tiled — the page reads as one continuous document.
The v7-bento register: the cool #EDF0F4 ground, white tiles at a 28px radius, and a hero tile with the photograph set behind a navy gradient. Each job on the page gets its own tile rather than a share of one scrolling column.
How it differs from its sibling. Emphasis is carried by the tile and by solid colour. Where Clinical separates two jobs with a hairline, Bento gives each one its own card and sometimes its own ground.
The unit of navigation is a person. Each name is paired with the service it does, because the people searching have never heard the names. Roles own the URLs, so a locum relabels a slot rather than breaking the site.
Falsifiable by: Can someone who has never heard the names find physiotherapy from the header?
Unhurried and warm inside the same brand: a wider measure, longer leading, portraits given real height rather than cropped into circles, and the accent carried in brand red — because in this layout you are choosing a person, not a service.
How it differs from its sibling. Asymmetric two-column with a wide text measure, red as the human accent throughout, and the most generous vertical rhythm of the six. The slowest-reading system in the set.
Flattened and annotated: a true margin column carries each section label as a practitioner's aside in a monospaced face, rules replace shadows, small radii replace pills, and nothing is tinted unless it is telling you something.
How it differs from its sibling. Structure is the only ornament. The opposite treatment of the same person-led architecture — where Consulting Room is soft and warm, Notes is flat, tight and annotated.
The site asks before it offers. The menu exists and is one interaction away on every page — what is deferred is being handed it before anyone knows what you need.
Falsifiable by: Can a visitor who ignores the triage reach Physiotherapy in one interaction, by keyboard?
One thing at a time: a single column at every width, the opening question at the largest type scale in the set, and chrome reduced almost to nothing so the question is the only thing on screen.
How it differs from its sibling. Scale and silence do the work. There is no multi-column grid anywhere in this system, at any width — the constraint is the design.
Information-first: squared-off panels on the cool ground, each announced by a monospaced label and a top rule whose colour says what the section is — urgent, not yet confirmed, or settled. Figures are set to line up.
How it differs from its sibling. Density and semantic colour. Where The Question gives one idea a whole screen, Chart puts the state of everything in front of you at once.