The base look: a calm teal on quiet surfaces, set in one friendly face.
Colour
Action
Hex
RGB
Action hover
Hex
RGB
Action pressed
Hex
RGB
On action
Hex
RGB
Page
Hex
RGB
Surface
Hex
RGB
Soft surface
Hex
RGB
Deep surface
Hex
RGB
Ink
Hex
RGB
Secondary text
Hex
RGB
Tertiary text
Hex
RGB
Border
Hex
RGB
Status
Info
Hex
RGB
Positive
Hex
RGB
Warning
Hex
RGB
Error
Hex
RGB
Neutral
Hex
RGB
Accents and chart series
Cobalt
Hex
RGB
Mint
Hex
RGB
Gold
Hex
RGB
Coral
Hex
RGB
Violet
Hex
RGB
Amber
Hex
RGB
Typography
display-1
Every pixel, one token.
display-2
Shape the system.
sub-display
A theme is a set of decisions
heading-1
Ship the whole look
heading-2
Colour, type and shape
heading-3
Surfaces and depth
title-body
A title for a card or a row
paragraph
Body text carries the reading. It sits at one weight and lets the headings do the shouting.
paragraph-sm
Smaller body text, for dense rows and secondary detail.
caption
Caption text for metadata and timestamps
overline
Overline label
Buttons and badges
primaryThe one action colour.
secondary
tertiary
neutral
destructive
compact and circular
AddMore
badges and chips
InfoPositiveWarningErrorNeutralDesignTokens
Surfaces and depth
SurfaceThe default card.
Soft surfaceEmphasis by tint.
FloatingMenus and popovers.
ModalDialogs.
InverseThe polarity flip.
Radius
050 100 200 300 400 600 1200 pill Form elements
input
input with icon
textarea
segmented control
selection
Checked
Unchecked
Selected
range
Signature pieces
nav pill
TidePricingDocsLog in
alerts
Theme applied
Two tokens left at their base
people
icons
tabs
Space
--gap-050 --gap-100 --gap-200 --gap-300 --gap-400 --gap-500 --gap-1000 --gap-1500 --gap-2000