Skip to main content

Open DS docs

Five design system schemes. Same questions. Different answers.

Every design system is a set of answers. Each scheme answers how dense, how round, how loud and how fast it should be. Pick a scheme to read its design system, then switch schemes from the top bar on any page.

  • How dense?
  • How round?
  • How loud?
  • How fast?
A tin robot with a jeweller's loupe scans a long printout at a desk of tiny glowing screens.A tin robot with a jeweller's loupe scans a long printout at a desk of tiny glowing screens.Dense dataA tin robot reads a thick navy book in an armchair under a lamp, with a cup of tea.A tin robot reads a thick navy book in an armchair under a lamp, with a cup of tea.Content firstA big tin robot with large blue buttons kneels to help a small robot up a wooden ramp.A big tin robot with large blue buttons kneels to help a small robot up a wooden ramp.Accessible firstA tin robot leaps with a brass megaphone through pink confetti and streamers.A tin robot leaps with a brass megaphone through pink confetti and streamers.Brand expressiveA tin robot with a paintbrush beside three identical small robots painted teal, violet and orange.A tin robot with a paintbrush beside three identical small robots painted teal, violet and orange.Multi-brand

Pick a scheme

A tin robot with a jeweller's loupe scans a long printout at a desk of tiny glowing screens.A tin robot with a jeweller's loupe scans a long printout at a desk of tiny glowing screens.

Dense datav0.1.0For dashboards

Compact, exact and quiet, for analysts who scan alerts and compare signals all day.

  • Security operations console
  • Threat detection
  • AI model monitoring
  • Analytics dashboard
Components
58
Answers
78
Themes
Light, dark
Corners
2 px
Type
IBM Plex Sans
Motion
120 ms
Read the docs
A tin robot reads a thick navy book in an armchair under a lamp, with a cup of tea.A tin robot reads a thick navy book in an armchair under a lamp, with a cup of tea.

Content firstv0.1.0For reading

Large, calm type and generous space, for people who come to read.

  • Magazine
  • Documentation site
  • Help center
  • Long-form guide
Components
36
Answers
78
Themes
Light, dark
Corners
8 px
Type
Source Serif 4
Motion
200 ms
Read the docs
A big tin robot with large blue buttons kneels to help a small robot up a wooden ramp.A big tin robot with large blue buttons kneels to help a small robot up a wooden ramp.

Accessible firstv0.1.0For public services

Large text, large targets and AAA contrast, so everyone can finish the task.

  • Benefits application
  • Health booking
  • Public form
  • Council services
Components
41
Answers
78
Themes
Light, dark
Corners
6 px
Type
Atkinson Hyperlegible
Motion
200 ms
Read the docs
A tin robot leaps with a brass megaphone through pink confetti and streamers.A tin robot leaps with a brass megaphone through pink confetti and streamers.

Brand expressivev0.1.0For launches

Big display type, vivid color and springy motion, for launches that must be remembered.

  • Product launch
  • Campaign site
  • Consumer app landing
  • Event site
Components
47
Answers
78
Themes
Light, dark
Corners
Pill
Type
Bricolage Grotesque
Motion
120 ms
Read the docs
A tin robot with a paintbrush beside three identical small robots painted teal, violet and orange.A tin robot with a paintbrush beside three identical small robots painted teal, violet and orange.

Multi-brandv0.1.0For several brands

Customer screens for several brands, often on phones: sign-up, checkout, account. Components never change; brand primitives do.

  • Brand family of apps
  • White-label platform
  • Agency client portfolio
Components
49
Answers
78
Themes
3 brands × 2
Corners
4 px
Type
Inter
Motion
200 ms
Read the docs