Skip to main content
Lumen
System primitivesobsidian

Foundations. Tuned.

Live
AaSatoshi · 300–900 · OpenType

One mood. One mark. Seven principles. Color, typography, spacing, motion — assembled from the same restraint Lumen asks of every consumer.

v0.15.0 · Obsidian8-point soft gridWCAG 2.2 AA
01 · Foundations

Color

Three families do the work — obsidian (canvas, neutral near-black at #0D0D0D), neutral (paper + cool grays), accent (Spring Green #00FA8A, the only loud color). Status hues stay polite. v0.12 retires the v0.11 mint undertone; the single-accent discipline is unchanged.

Obsidian · the canvas ramp
11 stops from paper to void. v0.12 — neutral near-black at #0D0D0D, no chromatic tilt at any stop on the dark portion (R = G = B). Replaces the v0.11 obsidian-mint canvas (which had a faint G+2 undertone reported as 'weird green'). The dark-mode silhouette and the deep-ink moments in light mode.
Neutral · paper + cool grays
Light-mode canvas and cool-neutral grays on dark. v0.11 retired the warm-cream ramp; the v0.11 alias `--lumen-neutral-N` resolves to the underlying `--lumen-cream-N` ramp until v1.0 retires the legacy name.
Accent · Spring Green — the only loud color
Reads as 'laser' against the neutral obsidian canvas — and even more so in v0.12 with the green undertone retired from the canvas (the accent now has the entire hue stage to itself). Used for action / live / success. Never decorative. Adding a second loud color is a brand violation. v0.11 retuned from Warp lime #4ade80 to Spring Green #00FA8A; the discipline is unchanged.
Status palettes
Used as bg/fg pairs on badges, banners, toasts. Always paired with a label or shape — never color alone.
lumen-red10 stops
lumen-amber10 stops
Surface roles
The semantic ladder consumers reach for. Theme-aware (these change between dark + light).
surface.canvas
page background
surface.raised
cards, panels
surface.sunken
inputs, hover
surface.popover
menus, popovers
surface.glass
floating shells
surface.tint-accent
accent hover bg
surface.tint-strong
accent emphasis bg
surface.inverse
contrast moments
Text & border roles
text.primary
body, titles
text.secondary
captions
text.tertiary
hints (≥18px)
text.accent
emphasis text
border.hairline
card edges
border.default
controls
border.strong
emphasis
border.frame
brutalist frames
border.accent
lime hairline
border.focus
focus ring
Accent in context
The green appears precisely where action happens — and nowhere else.
LiveOn timeAt riskLatePicked upDelivered
02 · Foundations

Typography

Satoshi does everything. UI, display, numerics, code, editorial — one typeface, one weight ladder, one set of OpenType features. v0.10 retired JetBrains Mono and Source Serif 4; numeric and code moments now ride Satoshi's tabular-nums + slashed-zero feature set. The display ceiling stays at 128 px so brutalist headlines breathe; italic accents stay reserved for one signature word.

display.xxl
Stop re-designing.
128 / 8remw700
display.xl
Operations as instruments.
84 / 5.25remw700
display.lg
The freight network for builders.
56 / 3.5remw700
display.md
Same routes. Lower cost per pallet.
39 / 2.44remw700
heading.h1
Shipments dashboard
31 / 1.94remw700
heading.h2
Active lanes
25 / 1.56remw600
heading.h3
Recent activity
20 / 1.25remw500
body.lg
One command quotes. One books. JSON out, pipes in.
18 / 1.13remw400
body.md
Stop logging into 10 carrier portals every morning.
16 / 1.00remw400
body.sm
Auto-save will retry every 12 seconds while offline.
14 / 0.88remw400
caption
Updated 4 minutes ago by Mercer
13 / 0.81remw400
mono.cap
@ DIGITAL HQ · GLOBAL ACCESS · SYSTEM V0.11 LIVE
11 · +0.16emw500
Numerics — Satoshi with tabular-nums + slashed-zero
money
$1,243.50
lane code
LAX→SFO
countdown
12.02.05
command
$ warp quote --from=LAX \
       --to=SFO --weight=520lb
payload
{ "lane": "LAX-SFO",
  "rate": 262,
  "carrier_count": 14,
  "transit_days": 1 }
One typeface, every job
v0.10 collapsed Lumen to a single typeface. Satoshi covers UI, display, numerics, code, and editorial — separated by weight, size, and OpenType feature flags rather than by family.
  • Satoshi+UI · display
    Body, headings, marketing display, controls. Weights 300–900 with italic VF. The default everywhere.
  • Satoshi+numerics + code
    .lumen-mono / .text-data-* / .text-code-* — Satoshi with calt off, tabular-nums + slashed-zero on. Reads as instrument-panel data without leaving the family.
  • Satoshi+editorial
    .prose-lumen / .text-prose-* — Satoshi at editorial scale with ligatures + proportional figures. Italic accents handle one-word display moments.
03 · Foundations

Spacing · 4-point base, 8-point soft

Lumen runs on a 4-point base, 8-point soft grid. Every structural pixel snaps to 4; most snap to 8. Section gaps, control heights, paddings, and gaps between siblings prefer multiples of 8 (8, 16, 24, 32, 40, 48, 64, 80, 96, 128). The 4-step is the standard fine-tune; 6 (--space-1_5) is the documented sub-grid stop for genuine optical work. Decorative pixels (border radius, focus ring, dot indicators) stay free of the grid.

Grid ladder · structural multiples of 8
8
G1
smallest gap · between icon and label
16
G2
default gap · card padding md
24
G3
card padding lg · sub-section gap
32
G4
section internal · column gap
40
G5
control height md · CTA padding
48
G6
control height lg · card padding xl
64
G8
between sections
80
G10
between major content groups
96
G12
page top · hero internal
128
G16
hero margin · marketing breathing room
True exceptions · off-grid pixels with a job to do
These are the only structural values that intentionally break the 4-point grid. Every one is documented at the token level (--space-1_5, --size-control-cozy, --radius-xs, --size-dot-md, --shadow-focus-ring). Don't add new exceptions without a token.
2
soft
radius.xs · hairline corner softening (--radius-xs)
3
soft
focus ring outset · WCAG 2.4.7 visible focus (--shadow-focus)
6
soft
sub-grid optical stop (--space-1_5) · used by lumen-kbd, tag-chip insets
19
soft
LiveDot pulse glow radius — odd to keep the dot optically centered
36
soft
size.control.cozy · settings-panel sweet spot, Switch track height (--size-control-cozy)
Grid overlay · what 'on grid' looks like
An 8 × 8 grid with major lines every 64 px. Use the visual to test whether a layout's spacing rhythm holds.
Card on grid
8 / 16 / 24 / 32 / 40 / 48 — every measurement is a multiple of 8
Control-height ladder · v0.8 expanded
Every interactive control snaps to one of six tokenized heights. v0.8 fills out the ladder: sm, cozy, md, touch, lg, xl all carry --size-control-* tokens. cozy (36) is the settings-panel sweet spot; touch (44) is the Apple HIG floor for fingertip targets.
32
sm · 32
--size-control-sm
36
cozy · 36
--size-control-cozy · v0.8
40
md · 40
--size-control-md · default
44
touch · 44
--size-control-touch · iOS HIG
48
lg · 48
--size-control-lg
56
xl · 56
--size-control-xl · hero
04 · Foundations

Radius

The radius scale reads as 'modern' against the neutral obsidian canvas. Inputs at 8, cards at 12–16, hero surfaces at 20–28. Pills (radius.full) reserved for nav and primary CTAs. v0.12 keeps the v0.4 ratio intact.

xs
3px
sm
6px
md
8px
lg
12px
xl
16px
2xl
20px
3xl
28px
4xl
36px
full
∞
05 · Foundations

Elevation

Hairline borders do most of the surface separation work. Shadows are multi-layer, reserved for genuine lift — popovers, drawers, modals, toasts. v0.14 R11 retired chromatic-tinted shadows wholesale: every shadow token now resolves to a neutral cream/ink alpha, and primary CTAs ride their green BG fill — not a halo. See ADR 0030.

xs
shadow.xs
sm
shadow.sm
md
shadow.md
lg
shadow.lg
xl
shadow.xl
2xl
shadow.2xl
shadow.glassFloating shellbackdrop-blur 20 · saturate 140 · hairline
shadow.accent-glowHero CTA liftv0.14 R11 — neutral elevation (aliases shadow.xl). Primary CTAs ride their green BG fill; no green shadow.
shadow.focusFocus ringv0.14 R11 — 3 px neutral halo (was lime alpha-32). Outline + halo compose per :focus-visible.
06 · Foundations

Surfaces

Canvas, raised, glass, glow. Cards stay flat with a hairline by default; reach for glass when something genuinely floats; reach for glow when something is the brand's voice.

Canvas + architectural grid
The page background. A whisper-faint 64px lattice gives the obsidian an instrument-panel texture without screaming.
canvas · grid 64px hairline
Glass surface — the floating shell
backdrop-filter blur 20px + saturate 140% + hairline border. Reserved for nav, popovers, sheets, hero device shells. Never used as a fashion statement.
surface.glass
Floating shell
Hairline border. Soft inner highlight. Sits ON canvas.
surface.glass-strong
Modal / sheet
blur 28 · saturate 160. For overlays that must read.
Brand voice on canvas — flat surface
The hero panel: flat neutral obsidian, hairline border, hero-scale typography. Lumen prefers calm restraint over decorative gradients on surfaces — per principle 3 (less, but better) and the Premium-Psychology halo contract.
SYSTEM V0.15 · LIVE

Calm and lit from within.

Surfaces stay flat. Lime carries the energy on its own.

Card variants
Hairline by default. Hover lifts a notch; popover surfaces carry the soft multi-layer shadow.
Flat
Border only — content blocks

Used for content that sits IN the page, not on top of it.

Card
Default · hairline + shadow.sm

Workhorse surface. KPI tiles, list rows, panels.

Lifted
Hover state on interactive cards

Reach when the card needs to feel like it left the plane.

Popover
Floating menus, dropdowns, tooltips

Multi-layer shadow + border-subtle for off-canvas surfaces.

07 · Foundations

Motion

Decelerate, don't bounce. Hover the play button to fire each duration; click to replay. Standard easing carries 95% of UI motion. The pulse on LiveDot, the marquee on RateTicker, and the radial aurora fade-in are the only signature loops.

motion.micro80ms
motion.fast140ms
motion.base200ms
motion.slow320ms
motion.slower480ms
08 · Foundations

Iconography

Single 1.5 px stroke, 24 px grid, rounded ends, no fills. Custom logistics set sits inside the same drawing language.

09 · Foundations

Voice

The system's typographic idiom. Brutalist hairline frames around statement headlines. Mono uppercase tracked-out labels for system metadata. Italic accents reserved for one signature word per hero.

Brutalist frame
A 1px hairline border at border.frame opacity, generous internal padding, no shadow. Wraps a single statement headline. Reference: 'STOP RE-DESIGNING'.

Stop re-designing.

Mono uppercase tracked labels
Every system metadata line uses .lumen-mono-cap — Satoshi at +0.16em tracking, uppercase, calt off, tnum on. Reads as 'instrument-panel signal' without a second typeface.
SYSTEM V0.15 · LIVE
@ DIGITAL HQ · GLOBAL ACCESS
HOURS · MINS · SECS
AI-POWERED INTERFACE GENERATOR
INVITES IN: 12.02.05
01 · OBSIDIAN-LIME · OBSIDIAN-LIME · OBSIDIAN-LIME
Italic accent
One word per hero gets the italic treatment, in lime accent. Used to break the otherwise tight, brutalist sans rhythm. Never two words. Never on body copy.
Design at the Speed of Thought.
10 · Components

Controls

Inputs, switches, sliders, and the form scaffolding around them. Every control honours focus visibility and screen-reader semantics.

Buttons
Five intents · five sizes · loading + disabled states
Form fields
v0.6 — single shell, single focus ring, slots bonded
STD

We'll send the booking confirmation here.

lb
Field states
Rest, hover, focus, error, success, disabled, read-only

Describes what the field expects.

USD
Switches & checkboxes
Binary controls for instant-effect settings
Saves quote drafts every 12 seconds.
Subscribes to carrier ping stream while quote is open.
Carrier missed pickup, ETA slipped > 4 h.
Adds compliance flow and DOT routing surcharge.
Sliders & progress
Ranges, ratios, completion
260/lane
4h
Carrier coverage84%
Quote freshness42%
92%
64%
28%
11 · Components

Display

Identity, presence, status, and the placeholders that stand in while data loads.

Avatars
Initials by default, deterministic palette per name
AMA MercerJPJ ParkARA ReyesKCK ChenMBM B
AMA MercerJPJ ParkARA ReyesKCK Chen+3
+3 collaborators
Skeletons
Shimmer placeholders while content loads
Spinners & tooltips
Loading state + on-hover hints
12 · Components

Navigation

Inline tabs, breadcrumbs, and the patterns that orient users without taking the page over.

Inline tabs · underline
Inline tabs · pill
Breadcrumb
13 · Warp signatures

Live-data signatures

The three primitives that carry Warp's instrument-panel mood across every surface — Stat, LiveDot, RateTicker. v0.14 R11 retired the spring-green-glow ambient that earlier rounds layered behind these primitives; the 8 pt grid + neutral elevation now do the amplifying, and the green appears only on the LiveDot itself.

Stat — big bold number, mono unit, optional delta + sparkline
Shipments today
1,284
+12.4% wow
On-time %
98.2%
+0.4 pts
Avg cost / pallet
$42.10
-3.6%
Active lanes
1,547
+18 wk
Routed in 2025
655K+
Lanes
1,547
Cost down
27%
Carriers
42
LiveDot — 3s pulse · the system's signature loop
Tracking liveAPI healthyQuote refreshingNetwork slowCarrier offlineBeta channel
RateTicker — windowed view onto a stream
LAX→SFO$262
ORD→ATL$485
DFW→PHX$390
SEA→DEN$612
MIA→JFK$724
LAX→ORD$1,230
BOS→CLT$540
SAN→SLC$455
MSP→MCI$280
PHL→RDU$370
LAX→SFO$262
ORD→ATL$485
DFW→PHX$390
SEA→DEN$612
MIA→JFK$724
LAX→ORD$1,230
BOS→CLT$540
SAN→SLC$455
MSP→MCI$280
PHL→RDU$370