Foundations
Colour
Abyss neutrals carry structure, six signals carry meaning, one each, and energy is reserved for focus and live state.
Quick reference
Select a swatch or token to copy its var(); select a hex to copy the hex.
- PlasmaFocus and selection
- CyanLive data and links
- AzureInformation
- LimeHealthy
- AmberWarning
- CoralRisk
--bg page floorprimary text --fg
Every swatch, sample and chart on this page is drawn from system/tokens.css as the page loads, so what you see is what ships.
Tokens come in three tiers. Build with the semantic tier: themes and densities remap it, so your work follows without edits.
- Tier 1Primitive
Raw values with no job yet. Components never read them directly.
--plasma-500 - Tier 2Semantic
Values with a job. Themes and densities remap this tier.
--accent-2 · --surface-2 - Tier 3Component
Parts read semantic tokens only, so they follow every remap.
nav pill · KPI card
Colour
Abyss neutrals carry structure. Six signals carry meaning, one each. Energy is reserved for focus and live state, so the rest of the screen stays calm.
- Read semantic tokens, never raw hex. Reach for
--surface-2or--accent, so a theme change reaches your work. - Keep pages on the abyss. Pages sit on
--bg; depth comes from glass layers, never from flat grey. - Spend colour on meaning. A signal appears when there is a state to report. Decoration stays neutral.
Abyss ramp
Nine neutrals from the page floor to primary text. Most of any screen is the first three steps; the rest draws strokes, quiet text and text.
- Page floor
--bgis abyss 1000. Nothing sits below it.- Surfaces
--surface-1to--surface-3are glass over abyss 950 to 850, lit from above.- Strokes
--stroke-1for hairlines,--stroke-2for borders that must read.- Text
--fgfor content,--fg-2for support,--fg-3for captions.
Signal colours
Six hues with one semantic job each. Use the semantic name in components so the hue can be retuned without touching your work.
Do
- Show a signal when there is a state to report: healthy, warning, risk, new information.
- Pair every signal with a word or icon. Colour alone is never the only cue.
- Use plasma for the one focused or selected thing on screen.
Do not
- Colour headings, dividers or illustrations with a signal.
- Put two signals on the same element.
- Use lime, amber or coral for text smaller than 18px without checking the contrast table below.
Energy gradient
The signature gradient for focus and live state, and a soft version for fills that sit behind content. One energy element per view is the rule; a second one dilutes the first.
--energy · plasma 500azure 500 at 55%cyan 500
--energy-soft · plasma at 32%cyan at 14%
Contrast
Measured live against abyss 950. Body text needs 4.5:1; 3:1 is enough only for large text and icons.
The tick on each bar marks 4.5:1, the AA floor for body text.
Type scale
Space Grotesk for display, Inter for interface, tabular numerals for data. Steps follow a 1.25 ratio.
- Size with tokens. Use the
--t-*steps rather than pixel values, so density modes can remap them. - Keep display type tight. Headings take
--track-displayand--lh-tight; body text takes--lh-body. - Set numbers in tabular figures.
--numkeeps columns of data aligned as values change.
Families
Steps
Space and radii
A 4 point grid and one radius family. Density modes remap space without touching components.
- Space with steps, not pixels.
--s-4is the default gap inside a card;--s-5pads it. - Nest radii inward. An inner corner is one step smaller than the panel that holds it.
Spacing steps
Nine steps from 4 to 96 pixels, drawn at true size. Switch to compact to see the density remap.
Corner radii
One family from small controls to large panels. Pills and avatars take --r-pill.
Glass elevation
Depth comes from tint, blur, edge light and glow, never from flat grey.
- Climb one layer at a time. A card sits on a panel, a focus state lifts the card; nothing skips a layer.
- Keep the blur at one value.
--glass-bluris shared, so stacked glass stays consistent.
Emissive tier
Glass reflects. Live and active states emit. Light is a token, so the same values drive CSS glow and the 3D bloom pass.
- Give light only to what is live or active. Resting states reflect; they never glow.
- Change light through tokens. Colour is the source,
--glow-r-*is how far it bleeds and--bloom-*is how much halo survives.
Data viz palette
Series read in this order. Plasma leads, cyan follows, status hues stay semantic.
- Assign series in order. The first series is always
--viz-1; add hues down the list, never skip ahead for taste. - Keep the frame quiet. Grid lines take
--viz-gridand labels--viz-axis, so the data stays brightest.
Sequential and diverging
Sequential for magnitude, diverging for change around a midpoint.
low--viz-seqhigh
loss--viz-divgain
Motion
Fast for feedback, slow for space. Reduced motion collapses every duration to zero.
- Arrive with
--ease-out. Things entering or responding start fast and settle. - Travel with
--ease-io. A move between two resting places eases at both ends.
Every token, documented
The whole of system/tokens.css, grouped the way the file groups it. Filter by name or value, then select a token to copy it.
No token matches. Try a family such as surface, viz or ease.
OCTO Foundations · Release 03 · Every value on this page is read from system/tokens.css at runtime.