Brand System
Liza Choa
Living reference for the site’s design tokens. Every value reads from a Bricks global variable — change the variable and this page follows.
Colour
Sourced from Figma. The gradient composes the coral, red and magenta variables rather than repeating hex values.
red-primary
#E71016
magenta-primary
#FF00D8
coral-primary
#FF542E
black-primary
#101010
black-secondary
#222222
white-primary
#F8F8F8
gradient-primary-red
162.629deg · coral → red → magenta
Type scale
Fluid px clamp, t-shirt named. Each row renders at its live value — resize the window and they move between their min and max.
text-4xl · <h1>
40 → 60px
People first, business second
text-3xl · <h2>
34 → 46px
People first, business second
text-2xl · <h3>
28 → 36px
People first, business second
text-xl · <h4>
22 → 28px
People first, business second
text-l · <h5>
18 → 22px
People first, business second
text-m
16 → 18px · body
People first, business second
text-s
14 → 15px
People first, business second
text-xs
12 → 13px
People first, business second
Button
One button style, two treatments. Primary fills the label and its rule with the brand gradient; secondary is the same shape inverted to white for dark grounds. Set only the Style control — every other Bricks variant is neutralised, and size/outline do nothing here.
Primary
Default
Hover · rule thickens, gradient sweeps
Secondary
Default
Hover · rule thickens, label dims
Spacing
Same fluid px clamp model as type. Bars render at their live width.
space-4xl
96 → 160px
space-3xl
64 → 96px
space-2xl
48 → 64px
space-xl
32 → 48px
space-l
24 → 32px
space-m
16 → 24px · base
space-s
12 → 16px
space-xs
8 → 12px
space-2xs
4 → 6px