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

Tokens

Surfaces

surface page
surface-container-low chrome
surface-container card / floating
surface-recessed well inside the card
surface-dim deepest backdrop

Brand

Primary action

primary   on-primary

Selected

primary-container   on-primary-container

Hover state

primary-hover

Ink

Matter heading

on-surface

Body copy and link text sit at this weight of ink.

on-surface-variant

Captions, timestamps, helper text

on-surface-muted

Placeholder / disabled hint

on-surface-hint

Inverse surface

Tooltip / snackbar

inverse-surface  on-inverse-surface

Hover state

inverse-surface-hover

Canvas

Document / QR preview

canvas  on-canvas — forced white in both themes

Outlines

Row one
Row two

outline (card border)  outline-variant (row divider)

Scrim & shadow

Modal

scrim — modal / tray backdrop

Elevated panel

shadow — colour mixed into every elevation token

Status

success filled success on-success success-container on-success-container
danger filled danger on-danger danger-container on-danger-container danger-hover
warning filled warning on-warning warning-container on-warning-container
info filled info on-info info-container on-info-container
neutral filled neutral on-neutral neutral-container on-neutral-container
gold filled gold on-gold gold-container on-gold-container

Font family

The quick brown fox jumps over the lazy dog

font-sans

The quick brown fox jumps over the lazy dog

font-body

The quick brown fox jumps over the lazy dog

font-editorial

The quick brown fox jumps over the lazy dog

font-mono

Type roles

Page title

<koala-page-title>
--text-page-title
Section title koala-section-title
--text-section-title
Region label koala-eyebrow
--text-eyebrow
Body copy carries the sentences a user reads. koala-body
--text-body
Issued 23 hours ago koala-caption
--text-caption
P-YCJFQH koala-mono-id

Radius

radius-sm  4px

radius-md  5px

radius-lg  8px

radius-xl  12px

radius-2xl  16px

Shadows

shadow-resting

static containers

shadow-raised

sticky bars

shadow-floating

dropdowns, popovers

shadow-overlay

modals, trays

Z-index

z-base 0
z-raised 10
z-sticky 20
z-dropdown 30
z-navbar 35
z-modal-backdrop 40
z-modal 50
z-side-tray 50
z-toast 60

Focus

ring-color-focus var(--color-primary)
ring-color-focus-error var(--color-rose-400)
ring-width-focus 2px
ring-offset-focus 0px