K07 — ELEMENTS

Elements.

Every element in every state, in both themes. Hover, focus and press the live rows; the matrices show states side by side.

E01 — Buttons

Buttons

Book a pilot 24 52 · M label 16/600 · wdth 112 · gap 12 · r 2
Anatomy. Container, label, optional trailing icon (→ for navigation, ↓ for downloads). No leading icons on primary.
Sizes. S 40 px (header, dense) · M 52 px (default) · L 56 px (hero, CTA band). All ≥ 44 px touch target; S gets a 44 px hit area.
Magnetic hover. Primary and hero secondary only. Attraction 0.22, inertia return 450 ms.
Loading. Keeps width, swaps the label for a field-line spinner, sets aria-busy.
VACUUM · STATE MATRIX
DEFAULT HOVER FOCUS-VISIBLE ACTIVE DISABLED LOADING Primary
Book a pilot
Book a pilot
Book a pilot
Book a pilot
Book a pilot
◌ Sending…
Secondary
Talk to an engineer
Talk to an engineer
Talk to an engineer
Talk to an engineer
Talk to an engineer
◌ Sending…
Tertiary
Add to calendar
Add to calendar
Add to calendar
Add to calendar
Add to calendar
◌ Sending…
Ghost
Cancel
Cancel
Cancel
Cancel
Cancel
◌ Sending…
Link
Read the paper →
Read the paper →
Read the paper →
Read the paper →
Read the paper →
◌ Sending…
Icon
↓
↓
↓
↓
↓
◌
Destructive
Withdraw request
Withdraw request
Withdraw request
Withdraw request
Withdraw request
◌ Sending…
CLEANROOM · STATE MATRIX
DEFAULT HOVER FOCUS-VISIBLE ACTIVE DISABLED LOADING Primary
Book a pilot
Book a pilot
Book a pilot
Book a pilot
Book a pilot
◌ Sending…
Secondary
Talk to an engineer
Talk to an engineer
Talk to an engineer
Talk to an engineer
Talk to an engineer
◌ Sending…
Tertiary
Add to calendar
Add to calendar
Add to calendar
Add to calendar
Add to calendar
◌ Sending…
Ghost
Cancel
Cancel
Cancel
Cancel
Cancel
◌ Sending…
Link
Read the paper →
Read the paper →
Read the paper →
Read the paper →
Read the paper →
◌ Sending…
Icon
↓
↓
↓
↓
↓
◌
Destructive
Withdraw request
Withdraw request
Withdraw request
Withdraw request
Withdraw request
◌ Sending…
LIVE · SIZES S / M / L · TRY HOVER, TAB, PRESS
Do — One amber primary per viewport; pair it with a lower-commitment secondary (“Talk to an engineer”).
Don’t — Use amber for destructive actions or put two primaries side by side.
E02 — Inputs

Form inputs

Labels always visible above the field. 52 px height, 1 px --line-strong border, 2 px radius. Errors say what happened and how to fix it.

Work emailDEFAULT
name@company.com
Work emailFOCUS
lena.vogt@nordwerk.de
Work emailERROR
lena.vogt@gmail!
Enter a complete email, like name@company.com.
Work emailSUCCESS
lena.vogt@nordwerk.de✓
Company domain verified.
CompanyDISABLED
Nordwerk Automotive AG
Set by your verified domain.
  • 2 nm-class · K2risk prod.
  • 3 nm · K3Pvolume
/
kg
Forma rated payload: 0–25 kg
20.1 T
5 T25 T
Line layout · file upload
E03 — Choices

Selection controls

CHECKBOX
RADIO
SWITCH
SEGMENTED CONTROL
TAGS & FILTER CHIPS
E04 — Readiness & telemetry

Signature elements

TELEMETRY READOUT · LIVE / STALE / SIMULATED
PICKS PER HOUR LIVE 612 pph 16:04:12 UTC
▲ 18 vs 1 h
FLEET UPTIME STALE 4 MIN 99.2 % 16:00:03 UTC
last good
ION TEMPERATURE SIMULATED 150 000 000 K model v3.2
illustrative
SCIENTIFIC VALUE
1.2 × 10²¹keV·s·m⁻³± 0.1
Value · unit (nbsp) · uncertainty. Source line below every scientific value: Solis-1 simulation, 2026 · illustrative
TRL METER · 9 SEGMENTS
READINESS CHIPS Demonstrated· Mar 2026 · Helix Test Labs In testing· since Jan 2026 Target· 2029 · forward-looking EXPORT CONTROL · STANDARDS
EAR 3E001 · CONTROLLED ISO 10218 IEC 62443 ISO 14644 ISO 9001
VIDEO AUTHENTICITY
AUTONOMOUS · 1× SPEED · UNEDITED TELEOPERATED
HAZARD NOTICE
Strong magnetic field. Visitors with implants stay behind the yellow line. Illustrative.
MILESTONE MARKER · TOOLTIP
2029 Target
SECTION INDEX · DIVIDER
10⁻⁹ m — The transistor
PROGRESS · LOADER · SKELETON
Uploading layout.pdf64 %
Field-line loader · 1200 ms/turn · static when reduced motion