Pattern group
Foundations
The tokens every pattern reads, the base typography, buttons and form controls. Switch the theme to see the dark token set.
Colour tokens
:root { --oo-color-* }
--oo-color-bg--oo-color-surface--oo-color-surface-2--oo-color-text--oo-color-text-muted--oo-color-border--oo-color-border-strong--oo-color-accent--oo-color-accent-hover--oo-color-on-accent--oo-color-accent-soft--oo-color-on-accent-soft--oo-color-focus--oo-color-success--oo-color-danger
Type scale
--oo-text-xs ... --oo-text-4xl
Display 4xl
Heading 3xl
Heading 2xl
Heading xl
Large body text for introductions
Body text at the default size, set for comfortable reading at around sixty to seventy-five characters per line.
Small text for captions and metadata
Eyebrow label
Prose
.oo-prose
A lead paragraph sets the tone. It is larger and a little quieter than the text that follows.
Body copy with an inline link, some strong emphasis, a little italic and inline code.
A third-level heading
- Lists keep a readable indent.
- Spacing between items is consistent.
Good work is mostly the patience to look at a thing one more time.
Buttons and tags
.oo-button, .oo-button--secondary, .oo-button--ghost, .oo-tag
Form controls
.oo-form, .oo-field, .oo-input, .oo-select, .oo-textarea, .oo-choice