LUMEN
07LIBRARY

Elements

The smallest parts of the interface. Each is shown in every state and both themes, with its anatomy and spacing. Switch the theme to check every element in OR Dark.

07.1

Buttons

DEFAULT HOVER FOCUS-VISIBLE ACTIVE DISABLED LOADING
Primary
Request a demo
Request a demo
Request a demo
Request a demo
Request a demo
Sending…
Secondary
Talk to a specialist
Talk to a specialist
Talk to a specialist
Talk to a specialist
Talk to a specialist
Loading…
Tertiary
Download PDF
Download PDF
Download PDF
Download PDF
Download PDF
Loading…
Ghost
Cancel
Cancel
Cancel
Cancel
Cancel
Loading…
Link
View study
View study
View study
View study
View study
Icon
→
→
→
→
→
Destructive
Delete case
Delete case
Delete case
Delete case
Delete case
Deleting…
SIZES · WITH ICON · LOADING
Small Medium Large
Loading keeps the button's width, swaps the label for a progress verb, sets aria-busy and blocks double submits.
ANATOMY · M
Request a demo 22 48 GAP 10 · 16/500 · PILL · MIN 44 TARGET
✓ DoUse one primary per viewport, with a verb-first label.
✕ Don'tDon't put two Scrub buttons side by side, or use Scrub for a destructive action.
07.2

Text input · states

DEFAULT Work email name@hospital.org
HOVER Work email name@hospital.org
FOCUS-VISIBLE Work email j.meyer@| We reply within 1 business day
FILLED Work email j.meyer@aurel.de
ERROR Work email j.meyer@aurel▲ ▲ Add a domain ending, like .de or .org
SUCCESS Work email j.meyer@aurel.de✓ ✓ Looks good
DISABLED Work email Managed by your admin
07.3

Specialized fields

SELECT · NATIVE
COMBOBOX
SEARCH
NUMBER WITH UNITS Cost per OR minute
€ / min
SLIDER WITH VALUE LABEL
Annual robotic cases640
1001,0002,000
DATE PICKER
October 2026Wed, Oct 14
MTWTFSS
07.4

Selection controls

CHECKBOX
RADIO
SWITCH
SEGMENTED CONTROL
For 2–4 mutually exclusive views. The selected segment uses ink, not Scrub.
07.5

Chips, badges & status

FILTER CHIPS · TAGS
Orthopedics Veyra ARC 2025–2026
REGULATORY BADGES · PLACEHOLDERS
CE 0000 FDA 510(k) CLEARED Rx ONLY MDR CLASS IIb ◆ INVESTIGATIONAL DEVICE
Outlined, never filled with brand color. "Investigational device" always pairs with the limitation statement (K12).
STATUS PILLS · SHAPE + LABEL + COLOR
Fault Calibration due Update available Self-test passed Offline In use
AVATARS · TOOLTIP
AO LB CM AOLBCM+4
07.6

Rules, indices & citations

DIVIDERS · CALIBRATION RULES 0102030 mm Corner mark · registration crosshair
SECTION INDEX LABEL
01EVIDENCE
02.3INTEGRATION AND SERVICE
Mono 12/500, +0.08em tracking, uppercase, with a 32 px rule at 40% opacity. It always sits above a heading, never alone.
CITATION MARKER · STATES
2DEFAULT 2HOVER 2FOCUS 2OPEN

18% shorter OR time per case.

07.7

Progress, loaders & skeletons

PROGRESS BAR
Uploading case log62%
01 ROLE 02 DETAILS 03 SLOT
LUMEN RING LOADER
One revolution per 1000 ms (60 bpm). Use it for waits longer than 400 ms and pair it with a status line. With reduced motion it becomes a static ring with a text label.
SKELETON · STUDY CARD