Style guide

Type

This is bold, this is italic, this is a link, this is inline code, and this is Ctrl + K.

• Colors
  • Accent hue, chroma
• Typography

1. Pick a preset
2. Export CSS

Preset

A bundle of values applied in one click.

A theme editor that can’t show you the real page is just a color picker with extra steps.

---

Heading depth

H4 example

H5 example

H6 example

Links & code

specimen.js

export function specimen() {
  return 'themeable';
}

Apply

npm run build

Callouts

Note

Recomputes on every keystroke.

Tip

Start from the closest preset.

Caution

Build-time options only show a note here.

Reset

No undo once confirmed.

Data

ID	Type	Default	Tier
color.accent.hue	range	250	1
sidebar.activeStyle	select	filled-pill	2

What happens to my custom CSS?

It stays, loaded via customCss.

Components

macOS

Search with Cmd+K.

Windows

Search with Ctrl+K.

1. Pick a preset.
2. Adjust treatments.
3. Export theme.css.

• Directorysrc

  • Directorycontent

    • docs/specimen.mdx

Compact

Everything, once.

Themeable

Every surface.

Kitchen SinkThe exhaustive version of this page.

Start FAQ GitHub Default Note Tip Caution Danger Success