Molecules
Molecules here are small reusable structures with one clear job: frame the page, hold supporting context, present metadata, or link into another reading path.
This page stays selective. Only the clearest reusable mid-level structures are shown.
Page lead
The page lead frames a reading experience before the main organism begins.
Preview
Molecule Page Lead
Molecule Page Lead
Orientation
It combines eyebrow, title, and intro text before the main reading structure begins.
Support field block
This molecule holds one short labelled note inside a reading support rail.
Preview
Molecule Support Field
Molecule Support Field
Principle
Design that is useful and marketable to people with diverse abilities. The same means of use for all users: identical whenever possible; equivalent when not.
Fact list
Case studies group project information as definition-list rows.
Preview
Molecule Fact List
Molecule Fact List
- Project type
- Campaign optimisation
- Role
- Senior UX Researcher
- Scope
- Holiday landing pages, decision journeys, and campaign validation
- Methods
- Usability testing, five-second tests, behavioural analytics, heatmaps, journey mapping
Docs overview card
The docs overview card combines section number, title, and excerpt into one navigation card.
Preview
Molecule Docs Card
Molecule Docs Card
01
Foundations
Current shell and component ownership, layout conventions, typography signals, and system constraints evidenced in code.
Current limits
Other family-specific substructures exist, but they are not all broad enough to promote into the compact molecule inventory.
- Case-study related cards and facilitation paired cells are real, but more family-specific.
- This page focuses on the clearest reusable molecules that help the system build upward.