Skip to main content
← All Components

Canon

Components

Published January 8, 2026

Button

Prompt users to take action with primary, secondary, and ghost styles.

Card

Group related content together with three depth levels to choose from.

Navigation

Help users find their way with headers, sidebars, breadcrumbs, and tabs.

How We Build These

We test each component against three questions before shipping it.

One Pattern, One Place

If a component already exists, use it. No duplicates.

Earn Your Place

Every prop and variant must solve a real problem.

Disappear When Working

Good tools get out of the way. You should focus on your work, not ours.

Design Tokens

Use these variables for colors, spacing, and motion. They keep your design consistent automatically.

Colors

--color-bg-surface --color-fg-primary --color-border-default

Motion

--duration-micro --ease-standard

Spacing

--space-xs --space-sm --space-md

Borders

--radius-sm --radius-md --radius-lg