Skip to content

Style guide

Reference for the project’s UI primitives. Edit values in src/styles/app.css and the underlying components.

Typography — Headings

Heading 1 / The quick brown fox

Heading 2 / The quick brown fox

Heading 3 / The quick brown fox

Heading 4 / The quick brown fox

Heading 5 / The quick brown fox
Heading 6 / The quick brown fox

Typography — Body

Large body. The quick brown fox jumps over the lazy dog.

Medium body. The quick brown fox jumps over the lazy dog.

Regular body. The quick brown fox jumps over the lazy dog.

Small body. The quick brown fox jumps over the lazy dog.

Tiny body. The quick brown fox jumps over the lazy dog.

Buttons

primary

medium

large

secondary

medium

large

tertiary

medium

large

Hover any button to preview the hover state. Buttons accept an SVG icon URL via the iconprop (mask-based, takes the button’s text color).

Colors

Canvas
Canvas muted
Ink
Ink muted
Accent
Border
Border strong