LUMEN
01FOUNDATIONS

Wow never blocks the path.

Fifteen principles in three groups. Craft earns attention, conversion turns attention into a next step, and accessibility means everyone can take that step. When two principles conflict, the order below decides.

01.1

Design

How LUMEN looks and feels. Surgical precision meets editorial calm.
01 Precision, made visible
Show the measurement, not an adjective. Calibration marks, units and annotated drawings make exactness tangible. K03 · K05
02 Calm is a feature
Luminous whitespace, hairlines instead of shadows, one accent. Clinicians work under pressure, so the interface shouldn’t add any. K04 · K02
03 Proof you can touch
Every claim carries a citation chip that opens its study. Credibility comes from what visitors can check. K08 · Evidence Layer
04 Human at the right moments
The serif and warm photography are for patients and people. Data stays in grotesk and mono. K03 · K05
05 Motion at resting pulse
Timing is derived from 60–72 bpm. Nothing bounces, nothing loops except live indicators. K06
01.2

Conversion

How pages move visitors from evidence to decision, ethically.
06 Wow never blocks the path to action
Signature moments run in parallel with content. The value proposition and primary CTA are readable and clickable from the first frame. K06 · K11
07 One primary action per viewport
Scrub marks the single next step. Secondary actions are always lower-commitment. The header CTA is outlined so it never competes. K11 · CTA hierarchy
08 No dead ends
Every section and every page ends in a contextual next step, including 404, empty and error states. K09 · States
09 Right proof, right person
The audience router swaps stats, proof and CTAs per role and remembers the choice. Patients never see HCP-only content. K09 · Personalization
10 Ethical by design
No fake urgency, no pre-checked consent, no confirmshaming. "Reject all" has the same weight as "Accept all". K11 · K12
01.3

Accessibility

WCAG 2.2 AA minimum everywhere. AAA for body text where possible.
11 Never color alone
Status pairs a shape, a label and a color. Charts pair color with markers or direct labels. WCAG 1.4.1
12 Keyboard first
Mega menu, sliders, calculator, drawers and the router all work with Tab, arrows, Enter and Escape. Focus is always visible. WCAG 2.1.1 · 2.4.7 · 2.4.11
13 Targets for gloved hands
44 × 44 px minimum touch targets, with generous spacing between destructive and primary actions. WCAG 2.5.8 (AAA 2.5.5)
14 Motion is optional
Every animation has a prefers-reduced-motion fallback that shows the final state immediately. WCAG 2.3.3
15 Plain language by default
Patient content targets grade 6–8. Video ships with captions and a transcript. Charts include a text alternative. WCAG 1.2.2 · 3.1.5
01.4

The principle, applied

Precision, made visible.
Request a demo → Talk to a specialist
Do The aperture opens in parallel with the content. CTAs are clickable from the first frame, and the motion finishes in under 1.4 s.
LOADING EXPERIENCE… 42% Scroll to continue ↓
Don't Intro loaders, scroll-jacked sequences or pinned sections that hide the value proposition and CTA behind a spectacle.
01.5

Pre-ship checklist

0 / 12 CHECKED