Tokens

The design tokens held in the brand brain: colour, roles, type, space and motion.

About
Colour
Roles
Type, space and motion

Exactly as stored in the brand brain. Source: Brand Instructions/brand-style-guide.md.

Tokens as JSON Tokens as CSS

Colour

Primitives16 colours

#973DDARGB 151,61,218 · CMYK 57,79,0,0

#FFFFFFRGB 255,255,255 · CMYK 0,0,0,0

#22192BRGB 34,25,43 · CMYK 79,81,52,67

#231F20

#000000

#45202CRGB 69,32,44 · CMYK 53,81,58,61

#F17053RGB 241,112,83 · CMYK 1,70,70,0

#FE6E4E

#CFC17FRGB 207,193,127 · CMYK 20,19,60,0

#642D3FRGB 100,32,63

#DDD6B4RGB 221,214,180

#DBACFFRGB 219,172,255

#402058RGB 64,32,88

#F8F8F8RGB 248,248,248

#E7ECE4RGB 231,236,228

#BCCCC1RGB 188,204,177

Roles

Semantic tokens13 roles

bg.field.fromprimitive.purple

bg.field.toprimitive.deep-plum

bg.surfaceprimitive.off-white

text.on-darkprimitive.white

text.on-lightprimitive.text-black

accent.ctaprimitive.coral

accent.ruleprimitive.coral

block.fill.1primitive.purple

block.fill.2primitive.gold

block.fill.3primitive.dark-maroon

block.fill.4primitive.wine-red

warmth.goldprimitive.gold

warmth.lavenderprimitive.lavender

Type, space and motion

Type10 entries

`family.display`	Funnel Display
`family.body`	Funnel Sans
`family.label`	Barlow Semi-Condensed
`weight.light`	300
`weight.regular`	400
`weight.semibold`	600
`scale.ratio`	1.25
`size`	{"headline": "3rem", "sub": "1.953rem", "quote": "1.563rem", "body": "1rem", "small": "0.8rem", "label": "0.75rem"}
`leading`	{"tight": 1.1, "normal": 1.5}
`tracking`	{"label": "0.04em"}

Space2 entries

`base`	4
`scale`	[4, 8, 12, 16, 24, 32, 48, 64, 96]

Grid3 entries

`columns`	12
`gutter`	24
`breakpoints`	{"sm": 480, "md": 768, "lg": 1024, "xl": 1440}

Radius4 entries

`block-cut`	45deg
`pill`	999px
`sm`	4px
`md`	8px

Motion2 entries

`duration`	{"fast": "180ms", "base": "320ms", "slow": "640ms"}
`ease`	{"standard": "cubic-bezier(0.4,0,0.2,1)", "decelerate": "cubic-bezier(0,0,0.2,1)", "assemble": "cubic-bezier(0.2,0.8,0.2,1)"}

Codeblock4 entries

`cut-angle`	45
`cut-ratio`	0.28
`facet-offset`	0.06
`facet-darken`	0.18

Icon2 entries

`stroke`	1.5px
`size`	{"sm": "16px", "md": "24px", "lg": "32px"}