UI kit · Foundations
The design foundations, measured one by one.
Every token is read straight from theme.css when this page is built, contrast ratios against the paper included. No number is typed by hand.
See text and formats01
Colours
Text needs 4.5:1 or more, large text and icons 3:1 (WCAG 2.2 AA). Measured against paper and paper-raised.
Text, icons and status
ink
#14201a
- On paper
- 15.83:1
- On paper-raised
- 16.51:1
Passes AA: text
ink-muted
#56645b
- On paper
- 5.87:1
- On paper-raised
- 6.13:1
Passes AA: text
sage-400
#a7b5a0
- On paper
- 2.02:1
- On paper-raised
- 2.11:1
Below AA: decoration only
firdaus-500
#2d7656
- On paper
- 5.16:1
- On paper-raised
- 5.38:1
Passes AA: text
firdaus-700
#1b4d39
- On paper
- 9.14:1
- On paper-raised
- 9.53:1
Passes AA: text
firdaus-900
#0e2c20
- On paper
- 14.15:1
- On paper-raised
- 14.76:1
Passes AA: text
gold-500
#b68a3e
- On paper
- 2.95:1
- On paper-raised
- 3.08:1
Below AA: decoration only
danger-500
#b3402e
- On paper
- 5.36:1
- On paper-raised
- 5.60:1
Passes AA: text
danger-700
#8f2a1c
- On paper
- 7.87:1
- On paper-raised
- 8.21:1
Passes AA: text
warning-500
#946506
- On paper
- 4.80:1
- On paper-raised
- 5.01:1
Passes AA: text
warning-700
#6b4604
- On paper
- 7.91:1
- On paper-raised
- 8.25:1
Passes AA: text
success-500
#2a7a4f
- On paper
- 4.95:1
- On paper-raised
- 5.17:1
Passes AA: text
success-700
#17503a
- On paper
- 8.82:1
- On paper-raised
- 9.20:1
Passes AA: text
info-500
#3a6f80
- On paper
- 5.26:1
- On paper-raised
- 5.48:1
Passes AA: text
info-700
#274c59
- On paper
- 8.74:1
- On paper-raised
- 9.12:1
Passes AA: text
Surfaces
paper
#fbf8f2
- Ink text on it
- 15.83:1
paper-raised
#fffdf9
- Ink text on it
- 16.51:1
sage-100
#eef1ea
- Ink text on it
- 14.70:1
sage-200
#dfe5d9
- Ink text on it
- 13.06:1
danger-100
#f7e4df
- Ink text on it
- 13.68:1
warning-100
#f6ecd2
- Ink text on it
- 14.26:1
success-100
#e3f0e8
- Ink text on it
- 14.30:1
info-100
#e3edf0
- Ink text on it
- 14.09:1
02
Type scale
Six named steps, each with a size, a line height and a tracking.
display
4.5rem
line height 1
tracking -0.04em
A school, in order.
title
2.5rem
line height 1.1
tracking -0.03em
A school, in order.
heading
1.5rem
line height 1.25
tracking -0.02em
A school, in order.
body
1rem
line height 1.6
A school, in order.
small
0.875rem
line height 1.5
A school, in order.
caption
0.75rem
line height 1.4
tracking 0.02em
A school, in order.
03
Shape, shadow and spacing
Double radii for containers, soft diffused shadows, and a compact rhythm for work screens.
Radii
-
shell
2rem
-
core
calc(2rem - 0.375rem)
Shadows
-
ambient
-
inset-highlight
Work-screen spacing
-
work-sm 0.5rem
-
work 0.75rem
-
work-lg 1.25rem
Tabular figures
- 1.250.000
- 87.500
- 4.300
- 12
Digits line up in a column.
04
Motion
Spring for things that move, expo for things that arrive. When the user asks for reduced motion, everything stays at rest.
spring
cubic-bezier(0.32, 0.72, 0, 1)
out-expo
cubic-bezier(0.16, 1, 0.3, 1)
05
Icons
Phosphor Light, thin line, drawn inline with currentColor. Hidden from screen readers unless given a label.
- search
- plus
- x
- check
- caret-down
- caret-right
- arrow-left
- arrow-right
- arrow-up-right
- pencil-simple
- trash
- calendar-blank
- clock
- user
- users
- student
- buildings
- gear
- sign-out
- sign-in
- info
- warning
- warning-circle
- check-circle
- download-simple
- upload-simple
- funnel
- list
- dots-three
06
Focus ring
One ring for every focusable element: firdaus-500, 2 px, 2 px offset. Press Tab to see it.