Design system

Principles

Warm monochrome

Canvas, text and edges carry the page. One deep teal accent marks what is active. A Preset's own colors appear only inside its window.

One hairline

Sections are split by a 1px border. Cards are a fill plus that border. Never put a card inside a card.

Pills and panels

Anything you press or type into is a pill. Anything that holds content has a 12px radius.

Flat

No gradients, glass or heavy shadows. The one exception is a dot pattern that fades out behind a hero.

Color

Light is the default. Dark swaps every token. Switch the theme in the footer to see both.

• background

  Page canvas

• foreground

  Text and ink

• card

  Cards and outline buttons

• muted

  Tracks and quiet fills

• muted-foreground

  Secondary text

• border

  The one hairline

• accent

  Active nav label, selection

• accent-soft

  Selected rows

• pastel-green

  Open License tag

• pastel-amber

  Free License tag

• destructive

  Errors

Type

HeadingInstrument Serif 400

Make the place you code feel like yours.

BodyGeist, line height 1.6

Make the place you code feel like yours.

CodeGeist Mono

Make the place you code feel like yours.

Buttons

One ink button per view. The rest are outline or ghost. Labels start with a verb.

Tags

Color is always paired with a word and an icon, never alone.

Spot illustrations

One style: black line drawings of a person at work. They head a feature or a step, never a button or a tag.

• Take a look around

  Searching a list

• Can’t pick?

  Comparing two versions

• Found your favorite?

  Duplicating a settings panel

• Couldn’t find what you’re looking for?

  Recording a visual snapshot

• Make the Snapshot

  Picking a theme

• Add the Preset file

  Saving a document

• Open a pull request

  Reviewing a pull request

Source

Tokens, component guidelines and the full rules live in the repository.