Design System

Live reference for the design tokens and UI primitives used across this site. All values are sourced from app/globals.css and components/ui/.

Color · Semantic

bg/primary

—

bg/surface

—

bg/elevated

—

border/accent

—

border/muted

—

text/primary

—

text/secondary

—

Color · Step

step/thinking

—

step/code

—

step/tool

—

step/result

—

step/final

—

step/error

—

Typography

font/mono — Geist Mono

size/24The quick brown fox jumps over the lazy dog · 0123456789

size/18The quick brown fox jumps over the lazy dog · 0123456789

size/14The quick brown fox jumps over the lazy dog · 0123456789

size/13The quick brown fox jumps over the lazy dog · 0123456789

size/12The quick brown fox jumps over the lazy dog · 0123456789

size/11The quick brown fox jumps over the lazy dog · 0123456789

size/10The quick brown fox jumps over the lazy dog · 0123456789

size/9The quick brown fox jumps over the lazy dog · 0123456789

size/8The quick brown fox jumps over the lazy dog · 0123456789

size/7The quick brown fox jumps over the lazy dog · 0123456789

Radius

1.5px

2px

3px

4px

full

Primitive · Button

components/ui/Button.tsx — Three variants × three sizes. loading and disabled states. prefix/suffix slots for icons. ButtonLink is the <a> counterpart.

variant=primary

variant=secondary

variant=ghost

states

ButtonLink (anchor)

internal link [external link]↗

Primitive · TerminalChrome

components/ui/TerminalChrome.tsx — Window-style shell. Accepts title + children.

example title

Any content goes inside. Used as the chrome for modals, panels, and the main app surface.

Primitive · Modal

components/ui/Modal.tsx — Backdrop + animated container + ESC + body scroll lock + close button. Props: open, onClose, title, size?, scrollable?, children.