01
Typography
One fluid type scale drives every heading level and body size. Values are clamped, so each step resolves against the viewport rather than a fixed breakpoint.
The quick brown fox
text-xs
The quick brown fox
text-s
The quick brown fox
text-m · h6
The quick brown fox
text-l · h5
The quick brown fox
text-xl · h4
The quick brown fox
text-2xl · h3
The quick brown fox
text-3xl · h2
The quick brown fox
text-4xl · h1
The quick brown fox
text-5xl
Where curiosity takes form
Ideas rarely arrive finished. They turn up sideways, half-shaped, wearing the clothes of something else entirely — and the work is deciding which of them deserve a second look.
Good structure is invisible until you try to remove it.
Hierarchy creates momentum
A reader should never have to ask what matters most on a page. Size, weight and spacing answer that question before a single word is read, which is why the scale above is fixed and the exceptions are few. See the colour section for how contrast carries the same job.
02
Colour
Every palette colour carries a ten-step light ramp, a ten-step dark ramp and a ten-step alpha ramp. Text colour on each step is chosen by contrast, not by eye. Hover any step to copy its value.
Primary
--brxp-primary
Lightl-1 → l-10
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
Darkd-1 → d-10
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
Alphat-1 → t-10 · over white
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10
Secondary
--brxp-secondary
Lightl-1 → l-10
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
Darkd-1 → d-10
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
Alphat-1 → t-10 · over white
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10
Surface
--brxp-surface
Lightl-1 → l-10
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
Darkd-1 → d-10
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
Alphat-1 → t-10 · over white
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10
Contextual
Info
--brxp-info
Success
--brxp-success
Warning
--brxp-warning
Danger
--brxp-danger
04
Space & Radius
Spacing bars are drawn at their true computed width, so the ratio between steps is the ratio you get. Radii are outlined rather than filled — the corner is the thing being measured.
Spacing
3XS
brxw-space-3xs
2XS
brxw-space-2xs
XS
brxw-space-xs
S
brxw-space-s
M
brxw-space-m
L
brxw-space-l
XL
brxw-space-xl
2XL
brxw-space-2xl
3XL
brxw-space-3xl
4XL
brxw-space-4xl
5XL
brxw-space-5xl
Border radius
3XS
radius-3xs
2XS
radius-2xs
XS
radius-xs
S
radius-s
M
radius-m
L
radius-l
XL
radius-xl
2XL
radius-2xl
3XL
radius-3xl
4XL
radius-4xl
5XL
radius-5xl
Full
radius-full
05
Elevation
Neutral elevation plus the tinted primary and secondary sets. Each group’s surface is the opposite lightness to its shadow — the name describes the shadow, so a light shadow is shown on a dark surface and vice versa.
Standard
XS
brxw-shadow-xs
S
brxw-shadow-s
M
brxw-shadow-m
L
brxw-shadow-l
XL
brxw-shadow-xl
Primary dark
XS
brxp-shadow-xs-primary-dark
S
brxp-shadow-s-primary-dark
M
brxp-shadow-m-primary-dark
L
brxp-shadow-l-primary-dark
XL
brxp-shadow-xl-primary-dark
Primary light
XS
brxp-shadow-xs-primary-light
S
brxp-shadow-s-primary-light
M
brxp-shadow-m-primary-light
L
brxp-shadow-l-primary-light
XL
brxp-shadow-xl-primary-light
Secondary dark
XS
brxp-shadow-xs-secondary-dark
S
brxp-shadow-s-secondary-dark
M
brxp-shadow-m-secondary-dark
L
brxp-shadow-l-secondary-dark
XL
brxp-shadow-xl-secondary-dark
Secondary light
XS
brxp-shadow-xs-secondary-light
S
brxp-shadow-s-secondary-light
M
brxp-shadow-m-secondary-light
L
brxp-shadow-l-secondary-light
XL
brxp-shadow-xl-secondary-light