← Back to ICSC comps
Design System

Design tokens.

Three-layer token library — primitives, semantic mappings, component contracts. The full source of truth is in src/tokens/. A richer interactive version of this page lives in Storybook under Design System → Tokens.

Brand · Azure

Primary brand color. 500 (DEFAULT) drives CTAs; tint 100 is the soft brand surface.

50
#EEF4FF
100
#DFEAFF
200
#A7C5FF
300
#7BA6FF
400
#4F88FF
500
#246EFF
600
#1E5AD6
700
#1845A8
800
#12347E
900
#0B2154

Brand · Indigo

Editorial deep blue. Drives the Premier sponsor panel and member-experience surfaces.

50
#EFEDF8
100
#D8D2F0
200
#B5A9E1
300
#8F7DD0
400
#6952BF
500
#4C36B5
600
#3625A8
700
#2D1F92
800
#22177D
900
#160F5A

Brand · Bright Sun

50
#FFFBE6
100
#FDEA9B
200
#FBD968
300
#F8C547
400
#F4B132
500
#E59A1E
600
#C27A12

Brand · Aqua

50
#EDF6F7
100
#D4ECEE
200
#A7D7DC
300
#7BBFC7
400
#4FA5AF
500
#2B8B96

Neutral · Ink

Text + dark surfaces.

50
#F5F6F8
100
#E8EAEE
200
#C4C9D2
300
#9CA3B0
500
#4A5168
700
#1E2433
800
#141926
900
#0B0F17

Neutral · Surface

Off-white backgrounds for editorial sections.

white
#FFFFFF
bone
#F9F8F6
sand
#F0EEE9
stone
#E5E2DA

Status · Emerald (Success)

50
#ECFDF5
100
#D1FAE5
200
#A7F3D0
400
#34D399
500
#10B981
600
#059669
700
#047857
800
#065F46

Semantic · Background

Use these names in component code instead of palette steps.

bg.page
#FFFFFF
bg.surface
#FFFFFF
bg.surface-secondary
#F9F8F6
bg.surface-tertiary
#F0EEE9
bg.inverse
#0B0F17
bg.brand
#246EFF
bg.brand-secondary
#3625A8
bg.brand-tint
#DFEAFF
bg.status-success
#059669
bg.status-warning
#F59E0B
bg.status-danger
#E11D48
bg.status-info
#246EFF

Semantic · Foreground

fg.default
#0B0F17
fg.muted
#4A5168
fg.subtle
#5B6573
fg.inverse
#FFFFFF
fg.brand
#246EFF
fg.brand-secondary
#3625A8
fg.on-brand
#FFFFFF
fg.on-success
#FFFFFF
fg.on-warning
#0B0F17
fg.on-danger
#FFFFFF
fg.status-success
#047857
fg.status-warning
#B45309
fg.status-danger
#BE123C

Display scale (serif, fluid)

display-2xl
See you in November.
display-xl
The minds shaping what comes next.
display-lg
Three days, engineered for momentum.
display-md
Welcome back, Jordan.

Weight

light
The quick brown fox jumps over the lazy dog
regular
The quick brown fox jumps over the lazy dog
medium
The quick brown fox jumps over the lazy dog
semibold
The quick brown fox jumps over the lazy dog
bold
The quick brown fox jumps over the lazy dog

Letter spacing

tighter
Featured Speakers
tight
Featured Speakers
normal
Featured Speakers
wide
Featured Speakers
wider
Featured Speakers
widest
Featured Speakers
kicker
Featured Speakers

Spacing scale

4-pixel base. Prefer semantic tokens (card-padding-md, section-y-lg).

0
0px
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
7
28px
8
32px
10
40px
12
48px
14
56px
16
64px
20
80px
24
96px
28
112px
32
128px
40
160px
48
192px
56
224px
64
256px
px
1px
0.5
2px
1.5
6px
2.5
10px

Border radius

none
0
xs
4px
sm
6px
md
8px
lg
12px
xl
16px
2xl
20px
3xl
24px
card
16px
card-lg
24px
card-xl
32px
pill
9999px
full
9999px

Shadow / elevation

none
0 0 0 0 rgba(0,0,0,0)
plate
0 1px 2px rgba(0, 0, 0, 0.04)
raised
0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)
card-hover
0 8px 24px rgba(0, 0, 0, 0.08)
overlay
0 12px 32px rgba(11, 15, 23, 0.12)
feature
0 24px 60px rgba(11, 15, 23, 0.18)
modal
0 32px 80px rgba(11, 15, 23, 0.24)

Motion

Hover an easing swatch to see the curve in action.

instant
0ms
fast
150ms
base
300ms
slow
500ms
slower
800ms
reveal
1100ms
linearhover →
ease-inhover →
ease-outhover →
ease-in-outhover →
out-expohover →
back-outhover →

Z-index layers

Named slots only — never use arbitrary z-index values.

hidden
-1
base
0
raised
10
sticky
20
nav
30
overlay
40
modal
50
toast
60