Style guide

// Style guides are used to exemplify a design system. This includes typography, colors & contrast, component styling, and content spacing.

colors

Base hue
Paper
Paper accent
Paper grey
Ink
Ink grey

type overview

Hans Grotesk

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

?!@#$%^&*()_+][}{><,.\/:;

1234567890

  • Font weights:
  • Extralight
  • Light
  • Regular
  • Semibold
  • Bold

type voicings

This is the XXL voice, for heroes & big emphasis.

This is the XL voice, for muted page headers and section headers.

This is the large voice, for subheaders.

This is the medium plus voice, which, tbh is mostly for awkward in-between places.

This is the medium voice, for body text.

This is the small voice, for captions, footnotes, and small features.

body text

Here's a paragraph. It has a maximum width to maintain readability. Multiple lines will give you a sense of the line height.

Additional styles applied to body text include emphasis, strong, and link.

List styles within a body of text:

  • List item 1
  • List item 2
  • List item 3
  • List item 4