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

Tokens

The visual foundations shared across Koala interfaces.

Colour

Surface

surface
surface-container-low
surface-container

Ink

on-surface
on-surface-variant
on-surface-muted
on-surface-hint
on-surface-disabled

Lines

outline
outline-variant

Brand

primary
primary-hover
on-primary
primary-container
on-primary-container

Success

success
success-hover
on-success
success-container
on-success-container

Danger

danger
danger-hover
on-danger
danger-container
on-danger-container

Warning

warning
warning-hover
on-warning
warning-container
on-warning-container

Info

info
info-hover
on-info
info-container
on-info-container

Inverse & canvas

inverse-surface
inverse-surface-hover
on-inverse-surface
canvas
on-canvas
scrim

Type

Ag The quick brown fox

Plus Jakarta Sans is Koala’s product typeface.

Meta — timestamps, counts, help text12 / 16 · 400
Meta strong — table headers, small labels12 / 16 · 500
Reading — body copy and values14 / 20 · 400
Reading strong — a name or label that leads a row or field14 / 20 · 500
Lead — the sentence under a page title16 / 24 · 400
Section — panel, tray and dialog headings16 / 24 · 600
Display — page titles and key figures24 / 30 · 700

Radius

radius-sm

8px

radius-md

12px

radius-lg

16px

radius-full

9999px

Shadow

shadow-resting

shadow-raised

shadow-floating

shadow-overlay

Z-index

z-base 0
z-raised 10
z-sticky 20
z-dropdown 30
z-overlay 40
z-modal 50
z-toast 70
Open