FoundationsTokens
Tokens
Every design token in the system — the values every component resolves to.
Colour
Surface
surface
#F5F3EF
surface-container-low
#EBE9E5
surface-container
#FFFFFF
Ink
on-surface
#15171A
on-surface-variant
#444649
on-surface-muted
#737579
on-surface-hint
#A3A5A8
on-surface-disabled
#C7C9CD
Lines
outline
#D2D0CC
outline-variant
#E3E1DD
Brand
primary
#9C5C85
on-primary
#FFFFFF
primary-hover
#89316E
primary-container
#F3DEEA
on-primary-container
#512C44
Success
success
#3B865B
on-success
#FFFFFF
success-container
#D7EBDD
on-success-container
#19442C
Danger
danger
#A75C54
on-danger
#FFFFFF
danger-container
#F7DEDB
on-danger-container
#582C28
Warning
warning
#BF5E1A
on-warning
#FFFFFF
warning-container
#F5E0D4
on-warning-container
#553019
Info
info
#2C7DA7
on-info
#FFFFFF
info-container
#D4E8F5
on-info-container
#0F3F57
Inverse & canvas
inverse-surface
#212326
on-inverse-surface
#F5F3EF
canvas
#FFFFFF
on-canvas
#14171B
scrim
color-mix(in srgb, var(--color-on-surface) 50%, transparent)
Type
Ag The quick brown fox
font-sans
Ag The quick brown fox
font-mono
Page title
koala-page-title
1.75rem
1.75rem
Section title
koala-section-title
1rem
1rem
Region label
koala-section-label
0.6875rem
0.6875rem
Body copy the reader scans
koala-body
1rem
1rem
Caption, timestamp, helper
koala-caption
0.875rem
0.875rem
P-YCJFQH
koala-mono-id
0.875rem
0.875rem
Radius
radius-sm
8px
radius-md
12px
radius-lg
16px
radius-full
9999px
Shadow
shadow-resting
shadow-raised
shadow-floating
shadow-overlay
Spacing
4px
8px
12px
16px
24px
32px
48px
Motion
motion-fast
0.12s
motion-default
0.2s
motion-slow
0.32s
easing-default
cubic-bezier(0.22, 1, 0.36, 1)
easing-emphasis
cubic-bezier(0.1, 0.5, 0.1, 1)
Z-index
z-base
0
z-raised
10
z-sticky
20
z-dropdown
30
z-overlay
40
z-modal
50
z-toast
60
Focus
ring-color-focus
var(--color-primary)
ring-color-focus-error
var(--color-danger)
ring-width-focus
2px
ring-offset-focus
0px