Component lab

Storybook

Living gallery of site components. Tune the source, watch it land here.

Design system

Button

Six intents across five sizes. Hover and press states carry the elevation language.

default

secondary

outline

ghost

destructive

link

xs

sm

default

lg

icon

states

Badge

Status pills in two sizes. Ghost and link variants inherit interactive affordances.

default size

defaultsecondaryoutlineghostinfosuccessdestructivelink

sm

defaultsecondaryoutlineghostinfosuccessdestructivelink

with icon

PassingFailingBeta

Card

Surface treatments over one vivid strip. Glass and muted are translucent; sunken is a pressed-in well; elevated is an emphasis layer that stacks on any surface.

default

The quick brown fox jumps over the lazy dog.

Body copy sits here so you can judge contrast against each surface.

Baseline surface. Elevation 1.

glass

The quick brown fox jumps over the lazy dog.

Body copy sits here so you can judge contrast against each surface.

Translucent (78%) with backdrop blur. For sitting on imagery.

interactive

The quick brown fox jumps over the lazy dog.

Body copy sits here so you can judge contrast against each surface.

default + hover lift and primary ring.

muted

The quick brown fox jumps over the lazy dog.

Body copy sits here so you can judge contrast against each surface.

45% muted tint. Quiet secondary content.

sunken

The quick brown fox jumps over the lazy dog.

Body copy sits here so you can judge contrast against each surface.

Pressed-in well. Opaque, darker, inner shadow.

default + elevated

The quick brown fox jumps over the lazy dog.

Body copy sits here so you can judge contrast against each surface.

Emphasis layer over any surface: larger radius, primary ring, elevation 2.

Input

Field anatomy: labels, placeholders, disabled, and invalid rings.

default

Email

filled

Display name

disabled

API key

invalid

Workspace

textarea

Bio

Alert

Inline messaging with optional action slot.

Heads up

Deploys queue behind the current build until it finishes.

Build failed

Type errors found in 2 files. Check the logs for details.

Stat

Numeric callouts in three containers.

Visitors

18,204

+12% vs last week

Read time

4m 32s

Median across sessions

Posts

42

Across 42 published notes

Headers

Page and section headers at every scale, plus the eyebrow.

Eyebrow label

Heading fontMono body 0123456789Sans body — the quick brown fox.

Section

Compact section header

Compact scales down for dense layouts.

Section

Default section header

The default workhorse for most pages.

Section

Large section header

Large headers open major page divisions.

Page

Embedded page header

Full page headers include their own separator.

Tabs

Pill and underline treatments.

Pill tabs use the muted track with an elevated active state.

Line tabs trade the track for an underline indicator.

Feedback

Loading surfaces, spinners, and progress bars.

skeleton composition

spinner

Loading…

progress

Storage used

x

Migration complete

x

Identity

Avatars, keyboard hints, separators, and tooltips.

avatar sizes

GKGKGK

avatar group

ABCDEF

+9

kbd

⌘KShift?Esc

separator

Left

Right

tooltip

Layout

Page width and column primitives. Every layout on the site composes from these.

Container · shell / narrow

shell (max-w-page)

narrow (max-w-article)

Grid · cols={2} / cols={3} from="md"

1

2

1

2

3

Grid gap · tight / default / loose / section

t

t

t

s

s

s

Grid split="sidebar-left"

0.7fr

1.3fr

Grid split="hero"

0.9fr

min 22rem · 0.78fr

Grid split="rail"

0.26fr

1fr

Micro-type

Mono uppercase labels. Sizes and tracking come from theme tokens; Eyebrow is a MonoLabel.

size · default / xs / 2xs

micro 0.6875rem

nano 0.625rem

pico 0.5625rem

tracking · tag / label / eyebrow

tag 0.12em

label 0.08em

eyebrow 0.16em

tone · muted / primary / inherit

muted label

primary label

inherit label

Tokens

Theme primitives every component reads from. Dial these before touching component classes.

background

card

popover

primary

secondary

muted

accent

destructive

info

success

warning

border

input

ring

surface-raised

surface-sunken

Brand palettes

hero background

hero overlay

hero-navy

hero-blue

hero text

hero-mist

hero-haze

brand orange

hero-ember

hero-light

HUD background

depths-cave

depths-panel

depths-stone

depths-shard

depths-glow

HUD text

depths-bone

HUD muted

depths-mauve

depths-slate

visual backdrop

lab-cream

accent

accent

accent

graphic frame

Missing something? Add a section in src/routes/storybook.tsx.