Design system

Themes

Foundations

Colour and contrast

Base

Primary

Supporting

Sunken

Primary

Supporting

Typography

Display

Room to think.

Panel title

A clear starting point

Reading

A little space makes the important things easier to see.

Body

Use familiar words, a comfortable measure and a consistent rhythm.

Supporting

Details that help without competing.

Radius and padding

Inner radius —

Radius and gap

Collection
First itemSecond itemThird item
Joining radius —

Iconography

Message
Settings
Folder

Motion

Selection

Hover and focus

Reveal

Collection details
Notes

12 items · Updated today

Components

Actions and links

Commit changes
Return to a list
Dismiss a panel
Open an item
Link within text
Unavailable action

Examples stay on this page.

Fields and selects

Demo form · nothing is sent.

Selection

Ranges

Patterns

Toolbar and collection

Collections · 4
  • Notes12 entries
  • Studies6 experiments
  • Projects4 projects
  • Archive28 items

Overflow and edge fades

  1. Item 01Supporting detail
  2. Item 02Supporting detail
  3. Item 03Supporting detail
  4. Item 04Supporting detail
  5. Item 05Supporting detail
  6. Item 06Supporting detail
  7. Item 07Supporting detail
  8. Item 08Supporting detail

Scroll to reveal more. Fades disappear at each end.