Design

Spacing

Base unit: 4px. Each token is a multiple of that unit.

Use CSS variables — never hardcode pixel values.

Spacing Scale

Visual representation of every spacing token. Bar width corresponds to the actual pixel value.

--spacing-0 0 0px —

--spacing-0-5 0.125rem 2px

--spacing-1 0.25rem 4px

--spacing-1-5 0.375rem 6px

--spacing-2 0.5rem 8px

--spacing-3 0.75rem 12px

--spacing-4 1rem 16px

--spacing-5 1.25rem 20px

--spacing-6 1.5rem 24px

--spacing-8 2rem 32px

--spacing-10 2.5rem 40px

--spacing-12 3rem 48px

--spacing-16 4rem 64px

--spacing-20 5rem 80px

--spacing-24 6rem 96px

Usage Principles

Use the scale

All spacing — margin, padding, gap, inset — should use a token. If a value doesn't exist in the scale, use the nearest token or request a new one.

Component density

Use --spacing-1–--spacing-3 for tight internal padding (icon buttons, table cells). Use --spacing-4–--spacing-6 for component padding. Use --spacing-8+ for section gaps.

Layout rhythm

Page-level gaps between sections: --spacing-12 or --spacing-16. Between related groups: --spacing-6 or --spacing-8. Between items in a list: --spacing-2 or --spacing-3.

Border Radius Scale

Generous rounding throughout — this is a deliberate brand signal. Use --radius-full for pill badges and nav tabs, --radius-lg or --radius-xl for cards, and --radius-3xl for large hero panels.

--radius-sm 0.375rem / 6px Subtle rounding — input borders, small chips

--radius-md 0.625rem / 10px Inputs, small cards

--radius-lg 1rem / 16px Cards, dialogs — standard surface shape

--radius-xl 1.25rem / 20px Large cards, picture-book plate style

--radius-2xl 1.5rem / 24px Hero elements, feature panels

--radius-3xl 2rem / 32px Hero backdrop blob panels

--radius-full 9999px Pill — badges, nav tabs, chip buttons

Shadow Scale

All shadows are soft, diffuse, and warm-tinted — never cold blue-grey. The glow variant is reserved for coral primary elements (CTAs on hover, active chips).

--shadow-sm Aa

--shadow-md Aa

--shadow-lg Aa

--shadow-xl Aa

--shadow-card-hover Aa

--shadow-glow-coral Aa