Design System

Semantic tokens and Base UI primitives for fast, consistent personal projects.

A working reference for the visual language, spacing rules, and reusable components that power my projects.

Philosophy

Flat surfaces, sharp semantics, and subtle motion. Components stay quiet so product ideas can speak first.

Stack

Tailwind v4 tokens, Base UI primitives, and thin TypeScript wrappers with stable APIs.

Scope

Tokens, form controls, overlays, feedback states, and docs.

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

Space Groteskfont-sans - body, headings, labels

Space Monofont-mono - metadata, measurements, code

Type Scale

Display

text-7xl / 7xl - 4.5rem

Display

text-6xl / 6xl - 3.75rem

Hero

text-5xl / 5xl - 3rem

Title

text-4xl / 4xl - 2.25rem

Heading

text-3xl / 3xl - 1.875rem

Heading

text-2xl / 2xl - 1.5rem

Subheading

text-xl / xl - 1.25rem

Lead

text-lg / lg - 1.125rem

Body text

text-base / base - 1rem

Small text

text-sm / sm - 0.875rem

Micro label

text-xs / xs - 0.75rem

Spacing

4px

gap-1

8px

gap-2

12px

gap-3

16px

gap-4

24px

gap-6

32px

gap-8

48px

mt-12

64px

mt-16

80px

mt-20

Radii

sm / 4px

md / 8px

lg / 12px

full / 9999px

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.