Components

Reusable UI components that embody the Canon aesthetic. Built with Svelte, designed for subtraction.

Button

Primary, secondary, and ghost variants. Follows Canon motion tokens for hover states.

Container component with elevation tokens. Supports subtle, surface, and elevated states.

Header navigation, sidebars, breadcrumbs, and tabs. Patterns for wayfinding.

Every Canon component follows the Subtractive Triad—evaluated at three levels of abstraction.

Components unify patterns. No duplicated variants.

Every prop, every variant must earn its existence.

Components serve the design system. Tools recede into use.

All components use Canon tokens for consistency. No hardcoded colors, spacing, or motion.

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

--duration-micro --ease-standard

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

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