Overview

The Cajón Design System is the shared visual foundation for every Codazen product surface. It ships as a single React library, @cajon-ui/react, plus this living documentation site.

What ships today

This is the foundation increment (Beat B-234). It covers:

• Design tokens — the shared settings that control color, typography, spacing, shape, and elevation. See Token Reference.
• Three brand themes + dark mode — Cajón (sky), Verdant (emerald), Ember (amber). See Theming.
• Eleven core components — Button, Card, Badge, Input, Alert, Avatar, Progress, Kbd, IconButton, EmptyState, and Tabs. See Components.

Principles

• One source of truth. Every component reads from --cajon-* CSS variables, so a theme change re-themes the whole product without touching any screen.
• Token-driven plain CSS. No MUI or Tailwind at runtime — the library is portable across React 18 and React 19 apps.
• Pure renderers. Components take props and return JSX; they hold no business logic.

Every component viewer has its own theme selector that previews the component across all five themes — without re-coloring the rest of the page. Try it:

See it all together

The same components, composed into a full finance dashboard. Switch the theme in the toolbar above and watch every panel — cards, charts, the table, chips, the split meter — re-theme as one, without a single hardcoded color.