Design System

Token reference, typography scale, and component showcase.

Colors

Backgrounds & Surfaces

surface

surface-soft

accent

danger

warning

success

Text

Aatext

Aatext-secondary

Aatext-muted

Aaaccent-foreground

Borders

border

border-strong

Typography

Font Families

Satoshifont-sans - body copy, labels, UI text

Instrument Seriffont-serif - titles, headings, display text

JetBrains Monofont-mono - timestamps, metadata, code

Radius

sm4px

md8px

lg12px

full9999px

Shadows

overlay

Button

Variants

Sizes

States

Badge

NeutralActivePendingError

Card

Default

Plain surface, no border.

Bordered

Visual separation.

Elevated

Subtle shadow lift.

Input

Sizes

States

Default

Disabled

Invalid

Textarea

States

Default

Message

Invalid

Error

Disabled

Select

States

Default

Invalid

Disabled

Checkbox

Unchecked by default

Checked by default

Disabled

Indeterminate

Radio Group

Options

Option 1

Option 2

Disabled

Switch

Off by default

On by default

Disabled

Field Composition

We'll never share your email.

Username

Organization

Contact support to change this.

Bio

Markdown supported.

Favorite Font

Used for future theme personalization.

Accept updates

Occasional product and writing updates.

Dialog

Popover

Dropdown Menu

Tabs

Overview content goes here. Tabs use Base UI for keyboard navigation and focus management.

Skeleton

Empty State

No posts yet

Write your first blog post to get started.