DESIGN SYSTEM · v3.0 · SUCCEEDS ORBITAL 2.0
Two surfaces, one accent, four signals.
ORBITAL 2.0 was built for one screen — the app's HUD — and it holds up. What it never had was a layout, rhythm and motion grammar, because a HUD doesn't need one. 3.0 adds exactly that layer, inherits the colour table unchanged, and adds three colours in total.
01 / COLOUR
Light is signal, not decoration
Resting surfaces are almost black. Glow attaches to values that are alive. Beam is system activity and must be the largest chromatic area on any screen. Aurora is memory and structure — the brain is that colour. The rest are states, not tastes.
void is the canvas — deliberately not pure black; it leans toward deep space. Everything that floats (docks, menus, headers) sits on panel; card interiors drop to panel-2; full screens use panel-3; raise is hover and selection.
★flare must never occupy more area than beam.★ The moment warning colour outweighs activity colour, the interface reads as broken even when nothing is wrong. This rule is inherited from 2.0 and is the one most often violated in practice.
fg-hi is for text whose purpose is to be read — headings and numbers. mut is for things that have quieted down: units, disabled states, timestamps.
abyss — one step below void, so a full-bleed 3D canvas still has a floor to contrast against. horizon — the beam→aurora hairline that marks a section seam; without it, dark blocks meeting dark blocks read as one endless page. grid-line — the technical lattice, at 4.5% beam: "measured space".
02 / TYPE
Space Grotesk speaks. JetBrains Mono reports.
Two families, one job each. Anything that is a measurement, a state, a label or a log is set in mono with tabular figures — if the digits shift width, every row judders when a value changes. Latin faces ship with the repo; CJK falls through to the system stack on purpose, because a Korean webfont is megabytes.
A label is one or two words, or a number. The moment a sentence appears in this slot the hierarchy is gone — it becomes a second body copy in a costume.
03 / SPACE
4px base, and a separate ladder for sections
Component spacing and page rhythm are different problems. Inside a card, steps of 4px. Between sections, a viewport-fluid value — otherwise a page that breathes on a 27-inch display suffocates on a laptop.
/* content shell — everything structural lives inside this */ --shell: 1240px; /* reading column — prose, quotes, single-column argument */ --shell-narrow: 760px; /* gutters and column gaps ride the viewport */ --gutter: clamp(20px, 4vw, 56px); --col-gap: clamp(16px, 2vw, 28px); /* section rhythm */ --sec-y: clamp(80px, 11vh, 160px); --sec-y-lg: clamp(120px, 18vh, 240px);
04 / MOTION
One curve, four lengths
Every transition rides the same easing, so the screen reads as one hand. ★No constant-velocity motion.★ Hover a track below to run it.
Ordinary UI state change
A panel arriving, with an 8px rise
A section revealing on scroll
First appearance. Once, ever
Two more values are periods rather than durations: --breath (3.2s) is the pulse on anything alive, and --drift (14s) is the slow tilt of the field. The 3D core breathes on exactly --breath so the canvas and the CSS share a heartbeat.
05 / COMPONENTS
Shape says what colour says
Surfaces are rounded rectangles — but a surface carrying activity also gets corner brackets, the mark a HUD makes when it is targeting something. So "what is live right now" is legible without relying on colour alone.
Minimum target height is 46px, never below 44. The primary carries a single light sweep on hover — one per button, never looping. A looping shine reads as an advert.
Resting
Border only. Nothing is happening here.
Readable
Border plus a hairline highlight along the top edge — one small lie about where the light comes from, which is what makes it read as an object.
Active
Corner brackets and a beam border. This surface is carrying activity.
If a number has no source, the slot stays empty. Data slop — invented metrics, decorative percentages — is the fastest way to make a real product look fake.
The number is part of the content
Principles, stages, ranked steps. Mono numerals, zero-padded, in beam.
Otherwise use a plain list
Numbering things that have no order is a promise the content doesn't keep.
06 / THE FIELD
The 3D stage is a component, with rules
One WebGL field runs the whole page and changes layer as you scroll — orbit → journal → index → graph. It is not a background loop; it is the memory model, rendered.
Colour is not declared in the shaders. The field reads --beam,
--aurora and the rest out of :root at boot, so changing the
palette changes the 3D too. That is the same discipline that keeps the app and the
site the same product.
// The stage is the SUBJECT in the hero and the pinned brain sequence, // and BACKDROP everywhere else. At full strength over a reading column, // the orbit and the type both lose. field.setDim(loud ? 1 : 0.46);
Let one field run the whole page. A canvas per section turns a continuous descent into a slideshow.
Give reduced-motion one still frame. Killing the stage leaves an empty black hero, which is worse than stillness.
Let bloom pass 0.26 threshold with high strength. Measured: the graph layer blew into white shapes over the copy.
Give the canvas pointer events. Links come first; the field listens on the window instead.
07 / WHERE THIS GOES NEXT
One system, three destinations
This was built as a landing page, but the layer it adds — rhythm, scale, layout, motion — is exactly what the other two surfaces are missing.
cosmos-site
The marketing site at cosmos-aios.com, today a single static screen.
- Drop in
tokens.css+base.cssas-is - Its palette copy becomes redundant — one source, one file
- Signup / login inherit the button and field vocabulary
cosmos-billy · the app
The HUD already speaks ORBITAL 2.0. 3.0 is additive, never a repaint.
- Colour table is byte-identical — nothing to migrate
- Adds the type scale and spacing ladder the HUD improvises today
- Brackets formalise what the dock already does by hand
- The field's act model is the brain view, generalised
Honeyground
The studio site. Same skeleton, different voice.
- Keep the layout, motion and component set
- Swap the accent pair; keep the surface ladder
- The field becomes a portfolio device rather than a memory model
Take the tokens
Copy
tokens.css. Section A is the app's own table, so nothing changes on screen; section B is new capability.Take the type and spacing
Replace ad-hoc font sizes with the scale. This is where a page stops looking assembled.
Take the components
Buttons, pills, cards, brackets. They are plain CSS with no framework attached.
Take the field, last
It costs a WebGL dependency. Everything above works without it, and the CSS fallback is a static nebula.