STRATA v 1.0
Explore
§ 01 — Foundations

The atomic vocabulary
of the system.

Six token families form the substrate of every screen. Every component pulls from these — never from raw values.

68
Color
14
Type
16
Space
9
Radius
5
Elev.
8
Motion
01 / Color 02 / Typography 03 / Space 04 / Radius 05 / Elevation 06 / Motion
§ 01.01

Color

Three families: ink for content and surfaces, accent for emphasis, signal for state.

Ink

12 steps · base neutral
ink/25#FAFAFC
ink/50#F4F5F8
ink/100#E7E9EF
ink/200#D2D5DE
ink/300#A9AEBC
ink/400#7C8294
ink/500#545A6E
ink/600#353B4C
ink/700#232836
ink/800#161A24
ink/900#0E1118
ink/950#07090F

Lime

Signature
lime/500 · primary action#CCFF00
400
300
100

Cobalt

Secondary
cobalt/500 · informational#2E4BFF
400
100
—

Coral

Editorial
coral/500 · warm highlight#FF6B4A
400
100
—

Plum

Categorical
plum/500 · category C#6B3FA0
100
—
—

Signal

State communication
signal/success
All systems go
500 · #1B9E5A
signal/warning
Heads up
500 · #D97706
signal/danger
Action required
500 · #DC2626
signal/info
For your awareness
500 · #2E4BFF
§ 01.02

Typography

Three families paired across a 12-step scale. Geist carries voice at display sizes, Inter carries work in the UI, and JetBrains Mono carries data.

Display
Aa Bb
Geist 7 weights
UI
Aa Bb
Inter 300–800 · italics
Mono
A0 B1
JetBrains Mono 3 weights
Token Sample Size / LH Use
d/01 Display One 88 / 96 Hero
d/02 Display Two 64 / 72 Page
h/01 Heading One 48 / 56 Section
h/02 Heading Two 36 / 44 Sub
h/03 Heading Three 24 / 32 Card
b/lg Body Large — for prominent paragraphs and intros. 18 / 28 Lede
b/md Body Medium — the default running text in the UI. 16 / 24 Default
b/sm Body Small — dense tables, secondary text, helper copy. 14 / 20 Dense
b/xs Caption — chips, badges, labels, and metadata. 12 / 18 Caption
m/sm value · 482,318 · +12.4% 14 / 22 Data
§ 01.03

Space

A 16-step scale on a 4-pixel base. The first eight steps cover layout density; the upper steps cover page rhythm.

s/00space.00px
s/01space.2
2px
s/02space.4
4px
s/03space.6
6px
s/04space.8
8px
s/05space.12
12px
s/06space.16
16px
s/07space.20
20px
s/08space.24
24px
s/09space.32
32px
s/10space.40
40px
s/11space.48
48px
s/12space.64
64px
s/13space.80
80px
s/14space.96
96px
s/15space.128
128px
§ 01.04

Radius

Corner-radius scale runs from sharp to pill. Use sharp on data surfaces and gentler curves on touchable controls.

r/0 · 0
r/1 · 2
r/2 · 4
r/3 · 6
r/4 · 8
r/5 · 12
r/6 · 16
r/7 · 24
r/full
§ 01.05

Elevation

Shadow tokens stack in five steps. Combined with hairline borders so they read cleanly on both warm paper and printed-style canvases.

elev/0
elev/0 · flat
none
elev/1
elev/1 · hairline
surface, list item
elev/2
elev/2 · card
cards, default
elev/3
elev/3 · popover
menus, tooltips
elev/4
elev/4 · modal
dialogs, sheets
§ 01.06

Motion

Durations and easings, paired. Choreography is deliberate: small movements to confirm intent, larger ones reserved for transitions of meaning.

Durations

4 steps
d/fast 120ms
d/std 200ms
d/slow 320ms
d/deliberate 520ms

Easing curves

4 curves
ease/standard
(.2,.8,.2,1)
ease/enter
(.0,.0,.2,1)
ease/exit
(.4,.0,1,1)
ease/emphatic
(.86,0,.07,1)