K04 — LAYOUT & SURFACES

Engineered geometry.

A 12/8/4-column grid, a 4-pt spacing scale, three radii and 1 px hairlines. Depth comes from luminance steps, not shadows.

10⁰ — Grid

12 / 8 / 4 columns

1
2
3
4
5
6
7
8
9
10
11
12
VIEWPORT
≥ 1280 px
COLUMNS
12
GUTTER
24px
MARGIN
40 px
MAX CONTENT
1360 px

10¹ — Spacing

4-pt scale and section rhythm

  • --s-44 px
  • --s-88 px
  • --s-1212 px
  • --s-1616 px
  • --s-2020 px
  • --s-2424 px
  • --s-3232 px
  • --s-4040 px
  • --s-4848 px
  • --s-6464 px
  • --s-8080 px
  • --s-9696 px
  • --s-128128 px
  • --s-192192 px
  • --section-xl
    Marketing chapter breaks
    clamp(96, 12vw, 192)
  • --section-l
    Standard marketing section
    clamp(80, 9vw, 136)
  • --section-m
    Docs and utility pages
    clamp(56, 6vw, 96)
  • --section-s
    Portal and product UI
    32–48

10² — Surfaces

Luminance, radius, hairline, containment

--canvas
--surface-1 · cards, panels
--surface-2 · popovers, active rows, selected
--r-0 · 0
Panels, tables, instrument cells
--r-1 · 2px
Buttons, inputs
--r-2 · 6px
Overlays, popovers
--r-pill · 999px
Chips and toggles only
CONTAINMENT FRAME · HOVER ME
Corner brackets + safety envelope
12 px brackets, 1 px. On hover the dashed envelope expands 8 px with the inertia easing, like a robot’s safety field.
HAIRLINES
--line · dividers, table rows
--line-strong · section heads, inputs
dashed · envelopes, planned states

10³ — Instrument panel

Data-dense layout

Cells share 1 px gaps on a --line background, so the grid reads as one instrument. No card radius, no padding drift.

ON-COIL FIELD 20.1 T ± 0.2 Mar 2026 · Demonstrated
COIL CURRENT 40.3 kA steady
COIL TEMP. 19.8 K 16:04:12 UTC
QUENCH EVENTS 0 campaign to date
FIELD RAMP · 0–20 T Chart area · see K10
READINESS TRL 5 Target: TRL 6 · 2027

10⁴ — Breakpoints

Behavior by section type

SECTION 1440 · 12 COL 1024 · 8 COL 390 · 4 COL
Hero Headline 10 vw, telemetry panel right Panel hidden, stage line above headline Headline 13 vh cap, trust row hidden if < 700 px tall
Intent router 4 tabs inline, 4-cell stat band Tabs full width, 2×2 stats Tabs 2×2, stats stacked
Division cards 3 across 2 + 1 Stacked, image 16:10
Milestone table 6 columns Text spans 2, meta wraps Card rows, status first
Spec sheet 2 × key/value columns 1 column 1 column, sticky category heads
Forms / stepper Form 7 col + credibility 5 col Credibility below Single column, sticky submit
Mega menu 4-column panel Full-screen nav Full-screen nav
CTA band Headline left, actions right Stacked Stacked + sticky mobile CTA bar