Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
FoundationsTokens

Tokens

Every design token in the system, and the value each one 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
Section title koala-section-title
1.125rem
Section label koala-section-label
0.6875rem
Body copy the reader scans koala-body
1rem
The answer half of an info row koala-value
1rem
Caption, timestamp, helper koala-caption
0.875rem
£1,240 koala-figure
1.875rem
P-YCJFQH koala-mono-id
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 70

Focus

ring-color-focus var(--color-focus)
ring-color-focus-error var(--color-danger)
ring-width-focus 2px
ring-offset-focus 0px

Scrollbars

default: every scroller, no opt-in

Row 1. Scroll this box to see the house bar.

Row 2. Scroll this box to see the house bar.

Row 3. Scroll this box to see the house bar.

Row 4. Scroll this box to see the house bar.

Row 5. Scroll this box to see the house bar.

Row 6. Scroll this box to see the house bar.

Row 7. Scroll this box to see the house bar.

Row 8. Scroll this box to see the house bar.

Row 9. Scroll this box to see the house bar.

Row 10. Scroll this box to see the house bar.

Row 11. Scroll this box to see the house bar.

Row 12. Scroll this box to see the house bar.

koala-scroll-none: overflow stays invisible

Row 1. Same overflow, no bar.

Row 2. Same overflow, no bar.

Row 3. Same overflow, no bar.

Row 4. Same overflow, no bar.

Row 5. Same overflow, no bar.

Row 6. Same overflow, no bar.

Row 7. Same overflow, no bar.

Row 8. Same overflow, no bar.

Row 9. Same overflow, no bar.

Row 10. Same overflow, no bar.

Row 11. Same overflow, no bar.

Row 12. Same overflow, no bar.