Canyon
Book a Demo
Canyon/Docs/Themes & design tokens
Design system

Themes & design tokens

Every Canyon app consumes a three-tier design-token hierarchy. Primitives define raw values. Semantic references express intent. Component tokens apply overrides. Tokens are W3C DTCG-compliant, so they round-trip through Figma and your design pipeline without translation.

BetaUpdated April 2026•Reference•Canyon v1.0
BetaThese docs are in beta
Expect gaps and drift from the live product. Something unclear or missing? Grab 30 minutes with the team and we will walk you through it.
Talk to support

Token hierarchy

The three-tier model makes brand changes predictable. Swap a primitive, the semantic layer re-resolves, and every component that references it picks up the new value at build time. The format is W3C DTCG, so tokens round-trip cleanly through Figma, your design pipeline and any compliant tool.

TIER 01primitives
Raw values: colour ramps, spacing scale, border radii. Typed as color, dimension, fontWeight, and so on.
TIER 02semantic
Purpose-driven references such as color.background.default or color.primary.default. Never a raw value — always a reference.
TIER 03components
Component-scoped overrides: button.primary.background, card.borderRadius, input.borderColor.

Compilation

┌─────────────────────────────────────────────────────────────────────────────────────────┐
│  DESIGN TOKEN HIERARCHY (W3C DTCG)                                                       │
│  ═══════════════════════════════════════════════════════════════════════════════════════│
│                                                                                          │
│  THEME STRUCTURE (each theme)                                                            │
│  ─────────────────────────────────────────────────────────────────────────────          │
│                                                                                          │
│  ┌─────────────────────┐                                                                 │
│  │  primitives         │  Raw values (colors, spacing, radii)                            │
│  │  ─────────────────  │  color.neutral.500: "#6b7280"                                   │
│  │                     │  spacing.4: "1rem"                                              │
│  └──────────┬──────────┘  borderRadius.md: "0.375rem"                                    │
│             │                                                                            │
│             ▼                                                                            │
│  ┌─────────────────────┐                                                                 │
│  │  semantic           │  Purpose-driven references                                      │
│  │  ─────────────────  │  color.background.default: "{color.white}"                     │
│  │                     │  color.primary.default: "{color.indigo.500}"                   │
│  └──────────┬──────────┘  color.destructive.default: "{color.red.500}"                  │
│             │                                                                            │
│             ▼                                                                            │
│  ┌─────────────────────┐                                                                 │
│  │  components         │  Component-specific tokens                                      │
│  │  ─────────────────  │  button.primary.background: "{color.primary.default}"          │
│  │                     │  card.borderRadius: "{borderRadius.component.card}"            │
│  └─────────────────────┘  input.borderColor: "{color.border.input}"                     │
│                                                                                          │
│  COMPILED OUTPUT                                                                         │
│  ─────────────────────────────────────────────────────────────────────────────          │
│                                                                                          │
│  primitives ─┐                                                                           │
│  semantic   ─┼──► CSS custom properties (per theme)                                      │
│  components ─┘──► JSON exports (consumed by agents and tooling)                          │
└─────────────────────────────────────────────────────────────────────────────────────────┘

Included themes

Canyon ships with a set of first-party themes covering the dominant UI archetypes. Use one as-is, fork one, or bring your own — all three paths produce the same artefact.

Starter
Golden path
Clean, minimal. Good for MVPs, internal tools, low-chrome product surfaces.
Corporate
Golden path
Professional, enterprise-ready. Tuned for B2B SaaS products and regulated industries.
Dashboard
Golden path
Data-dense, analytics-focused. Tuned for admin panels, ops consoles and reporting.
Commerce
Golden path
Retail-ready. Tuned for storefronts, catalog and checkout flows.
Catppuccin Mocha
Community
Cozy dark theme favoured by developer tooling.
Catppuccin Latte
Community
Cozy light theme favoured by developer tooling.
Radix Slate
Foundation
Neutral, balanced foundation for your own brand theme.
Need a sector-specific theme?
Canyon design partners have built themes for banking, manufacturing, public sector and healthcare. If your brand or sector needs something more specific than the defaults, we can help scope one.

Your own theme

There are three paths. All three produce the same artefact: a validated theme the platform auto-discovers.

1. Manual

  1. Define your primitives (colours, spacing, radii).
  2. Define semantic references (background, primary, destructive, …).
  3. Add any component-level overrides.
  4. Register the theme. It is available to every project in your organisation.

2. Figma import

  1. Export design tokens from Figma (Tokens Studio plugin or an equivalent W3C DTCG exporter).
  2. Upload the JSON to the themes endpoint; Canyon validates it and compiles a theme from it.
  3. Theme is available immediately.

3. AI-assisted generationAlpha

  1. Describe your brand in natural language (“Modern fintech, trustworthy blue, clean”).
  2. Canyon proposes a palette and semantic mappings.
  3. Review, refine, and export as a named theme.
Tokens are compiled, not interpreted
Themes are resolved at build time, not at runtime. Generated bundles stay small, CSS custom properties are tree-shakeable, and agents receive a fully-flattened token set with no further resolution to do.