GLOBAL SYSTEM
Color & typography styleguide
A high-contrast editorial reference page for the project’s global color tokens and text style presets.
Text styles
Heading 1
Unbounded · 70px · 1.05em · -0.02em · 700
Heading 1: Design Festival Index
Heading 2
Unbounded · 50px · 1.1em · -0.01em · 500
Heading 2: Design Festival Index
Heading 3
Unbounded · 38px · 1.15em · -0.01em · 400
Heading 3: Design Festival Index
Heading 4
Unbounded · 28px · 1.2em · 0em · 500
Heading 4: Design Festival Index
Heading 5
Unbounded · 22px · 1.25em · 0.05em · 700
Heading 5: Design Festival Index
Heading 5b
Raleway · 14px · 1.4em · 0.02em · 500
Heading 6: Design Festival Index
Heading 6
Raleway · 14px · 1.4em · 0.02em · 500
Heading 6: Design Festival Index
Large
Raleway · 20px · 1.55em · 0em · 400
Large body copy for introductions and editorial summaries.
Paragraph
Raleway · 16px · 1.55em · 0em · 400
A restrained paragraph style for readable editorial body copy, supporting longer descriptions without losing contrast or rhythm.
Small
Raleway · 12px · 1.4em · 0em · 400
Fine print, footer links, credits, and quiet system details.
Color tokens
primary
11 tokens
primary/50
rgb(255, 240, 241)
primary/100
rgb(255, 226, 228)
primary/200
rgb(255, 201, 208)
primary/300
rgb(255, 157, 169)
primary/400
rgb(255, 102, 125)
primary/500
rgb(255, 48, 84)
primary/600 (brand)
rgb(227, 12, 59)
primary/700
rgb(204, 4, 53)
primary/800
rgb(171, 6, 52)
primary/900
rgb(146, 9, 51)
primary/950
rgb(82, 0, 22)
secondary
11 tokens
secondary/50
rgb(238, 241, 255)
secondary/100
rgb(225, 230, 254)
secondary/200
rgb(200, 209, 253)
secondary/300
rgb(167, 177, 250)
secondary/400
rgb(132, 137, 245)
secondary/500
rgb(105, 102, 238)
secondary/600
rgb(88, 74, 225)
secondary/700
rgb(76, 59, 199)
secondary/800
rgb(62, 51, 160)
secondary/900
rgb(54, 48, 127)
secondary/950 (brand)
rgb(41, 35, 92)
neutrals
12 tokens
neutrals/0
rgb(255, 255, 255)
neutrals/50
rgb(246, 246, 246)
neutrals/100
rgb(231, 231, 231)
neutrals/200
rgb(209, 209, 209)
neutrals/300
rgb(176, 176, 176)
neutrals/400
rgb(136, 136, 136)
neutrals/500
rgb(109, 109, 109)
neutrals/600
rgb(93, 93, 93)
neutrals/700
rgb(79, 79, 79)
neutrals/800
rgb(61, 61, 61)
neutrals/950
rgb(26, 26, 26)
neutrals/1000
rgb(0, 0, 0)
neutralsOpacityBlack
10 tokens
neutralsOpacityBlack/50
rgba(0, 0, 0, 0.05)
neutralsOpacityBlack/100
rgba(0, 0, 0, 0.1)
neutralsOpacityBlack/200
rgba(0, 0, 0, 0.2)
neutralsOpacityBlack/300
rgba(0, 0, 0, 0.3)
neutralsOpacityBlack/400
rgba(0, 0, 0, 0.4)
neutralsOpacityBlack/500
rgba(0, 0, 0, 0.5)
neutralsOpacityBlack/600
rgba(0, 0, 0, 0.6)
neutralsOpacityBlack/700
rgba(0, 0, 0, 0.7)
neutralsOpacityBlack/800
rgba(0, 0, 0, 0.8)
neutralsOpacityBlack/950
rgba(0, 0, 0, 0.92)
neutralsOpacityWhite
10 tokens
neutralsOpacityWhite/50
rgba(255, 255, 255, 0.05)
neutralsOpacityWhite/100
rgba(255, 255, 255, 0.1)
neutralsOpacityWhite/200
rgba(255, 255, 255, 0.2)
neutralsOpacityWhite/300
rgba(255, 255, 255, 0.3)
neutralsOpacityWhite/400
rgba(255, 255, 255, 0.4)
neutralsOpacityWhite/500
rgba(255, 255, 255, 0.5)
neutralsOpacityWhite/600
rgba(255, 255, 255, 0.6)
neutralsOpacityWhite/700
rgba(255, 255, 255, 0.7)
neutralsOpacityWhite/800
rgba(255, 255, 255, 0.8)
neutralsOpacityWhite/950
rgba(255, 255, 255, 0.92)