K01 — PRINCIPLES
Ambitious in vision.
Sober in proof.
Fifteen rules in three sets. When two rules conflict, the one lower on this page wins: accessibility over conversion, conversion over spectacle.
10⁰ — Design
Design principles
How FLUX looks and why. The visual language is borrowed from the instruments that make frontier tech possible.
-
01Controlled forceEvery visual shows a force being held in check. Field lines stay orderly, energy stays contained.DOLet the field-line canvas frame the headline and settle when the user reads.DON’TFill the viewport with particles, glow and lens flares.
-
02Instrument-gradeNumbers look like readouts: value, SI unit, uncertainty, source, timestamp.DO20.1 T ± 0.2 · Mar 2026 · Helix Test LabsDON’T“Record-breaking magnetic field!”
-
03Readiness is visibleEvery technology and claim carries TRL and a Demonstrated / In testing / Target chip.DOShow the Target chip with its year and a forward-looking link.DON’TMix demonstrated results and targets in one unlabeled stat band.
-
04Engineered geometryRadius 0 / 2 / 6 only, 1 px hairlines, containment brackets. Depth through luminance steps, not shadows.DOSeparate surfaces by stepping ink-950 → 850 → 800.DON’TUse soft drop shadows and 16 px rounded cards.
-
05Cinematic pacingMonumental type, generous space, one idea per viewport on marketing pages.DOGive the hero headline 10–12 vw and let it breathe.DON’TPack four messages and three CTAs into the first screen.
10¹ — Conversion
Conversion principles
The kit is judged on qualified pilots, capacity requests and offtake registrations, not on page views.
-
01Spectacle never blocks the path to actionThe primary CTA renders before and independent of WebGL, video or scroll effects.DOPut the CTA in HTML above the fold; the canvas is decoration.DON’THide the CTA until a scroll-driven animation finishes.
-
02One primary per viewportA single filled amber action per screen. Everything else is outlined or text.DOOutline the division CTAs when the hero primary is visible.DON’TShow three amber buttons side by side.
-
03No dead endsEvery section and page ends with a contextual next step.DOEnd the safety explainer with “Read the safety case”.DON’TFinish a case study with only a share button.
-
04Proof beside every askA credibility stack sits next to each primary CTA: dated milestones, verifier, standards, response time.DO“Response within 2 business days” under the form submit.DON’TA bare “Contact sales” button with no context.
-
05Ethical by designNo fake urgency, no pre-checked consent, no confirmshaming. Honest scarcity only.DO“Cohort 3 opens 14 Jan 2027 · 12 slots”.DON’T“Only 2 left!” counters or “No thanks, I don’t like savings”.
10² — Accessibility
Accessibility principles
WCAG 2.2 AA is the floor. These rules win every conflict.
-
01Contrast verifiedAA minimum for all text, AAA for body where possible. Ratios are documented in K02.DOUse Amber Deep #8A5A00 for amber text on Cleanroom.DON’TSet amber #FFB020 text on a light surface (1.9:1).
-
02Motion is optionalFull prefers-reduced-motion fallback; a visible pause control for anything running over 5 s.DOReplace the live field with a static streamline poster.DON’TAutoplay an infinite marquee with no pause.
-
03Never color aloneStatus pairs color with shape, icon and text. Warning always carries the hazard stripe.DOFilled dot + “Demonstrated”, half dot + “In testing”, ring + “Target”.DON’TRed and green dots with no label.
-
04Keyboard completeMega menu, 3D viewer, sliders and calculators all work with keys; focus is always visible.DOArrow keys rotate the viewer; Esc closes overlays and returns focus.DON’TRemove outlines or trap focus in a canvas.
-
05Built for real hands and languages44 px touch targets and +35% text expansion without breaking.DOTest every component with German copy.DON’TFix button widths to fit the English label.
10¹ — Before you ship