LUMEN

Precision, made visible.

In medicine, the lumen is the open channel inside a vessel, the path everything essential flows through. This kit treats every page the same way: a clear channel from evidence to decision.

Browse the kit Start with tokens

LUMEN RING · CROSS-SECTION

Ø OPEN CHANNEL

13 KIT · 12 DEMO

SCOPE13 kit pages · 12 demo pages

THEMESClinical Light, OR Dark, brand layer

STANDARDWCAG 2.2 AA · AAA body text

STACKSemantic HTML · CSS tokens · vanilla JS

00.1

How to use this kit

01 Start from tokens

Link lumen-tokens.css and set data-theme on <html>. A brand re-skin needs only the 8 --brand-* overrides.

02 Compose from the library

Build pages from K07–K10 elements, components and patterns. Demo pages use no one-off styles.

03 Check against the system

Before shipping, confirm one primary CTA per viewport, a citation on every claim and a reduced-motion fallback (K11–K12).

00.2

Index

25 READY IN PRODUCTION

FOUNDATIONSPrinciples, tokens and the visual language every page is built from.

K01READY Principles Design, conversion and accessibility principles. Open → K02READY Color & Tokens Primitives → semantic → component, three themes, live contrast. Open → K03READY Typography Geist, Instrument Serif, Geist Mono and a fluid scale. Open → K04READY Layout & Surfaces 12/8/4 grid, 4-pt spacing, hairlines and elevation. Open → K05READY Iconography & Imagery 1.5 px icon set, device drawings, photo direction. Open → K06READY Motion Resting-pulse tempo, systole and diastole easings. Open →

LIBRARYEvery element and component in every state and both themes.

K07READY Elements Buttons, inputs, badges, citation marker, loaders. Open → K08READY Components Navigation, heroes, content blocks, forms, overlays. Open → K09READY Patterns Annotated flows from HCP gate to eIFU retrieval. Open → K10READY Data Visualization KPI tiles, forest plot, Kaplan–Meier, gauges. Open →

SYSTEMHow pages convert, and how they stay compliant.

K11READY Conversion System Hero formula, CTA hierarchy, trust stack, forms. Open → K12READY Content & Compliance Voice, claims, microcopy and regulatory templates. Open →

DEMO · VEYRA MEDICALFull-bleed pages for a fictional MedTech brand, built only from kit parts.

D01READY Home Lumen aperture hero with audience router. Open → D02READY Product · Veyra ARC Sticky exploded view with annotations. Open → D03READY Specialty · Orthopedics Procedures, outcomes and training path. Open → D04READY Evidence Hub Study library, forest plot, HCP gate. Open → D05READY Value Calculator Live ROI with editable assumptions. Open → D06READY Request a Demo 3-step flow with role cards and slots. Open → D07READY Customer Story St. Aurel Hospital, long-form. Open → D08READY Patient Hub Journey along a lumen line, center finder. Open → D09READY Academy Learning path, courses and webinars. Open → D10READY Support & Safety eIFU search, safety notices, security. Open → D11READY Connect Portal OR Dark dashboard with alarm semantics. Open → D12READY Veyra Pulse Brand theming via 8 tokens. Open →