Design

Visual foundations for building consistent, accessible interfaces. From color tokens to layout patterns, everything you need to make Catalyst look and feel cohesive.

Principles

Simple over clever

Prefer readable, obvious solutions. Avoid complex animations or interactions that don't add value.

Consistent and predictable

Use the same patterns everywhere. Users and AI agents should be able to predict behavior.

Accessible by default

All components follow ARIA patterns. Color contrast meets WCAG AA. Keyboard navigation works.

AI-friendly

Components are easy for AI to understand and modify. No magic, no hidden behavior.

Proof-Led UX

In Catalyst, design supports validation. Every UI element should help stakeholders understand what's being built and make decisions. Polish is secondary to clarity at POC stage — invest in aesthetics as you progress toward production.

The Design System

A layered approach to visual consistency.

CSS Variables (Tokens)

Colors, spacing, and typography defined in globals.css. Change a token, everything updates.

Tailwind CSS 4

Utility-first styling with CSS variable integration. Fast to write, easy to maintain.

shadcn/ui + base-ui

Accessible, unstyled primitives. You own the code, not a dependency.

Dark Mode

Class-based switching via next-themes. Variables adapt automatically.

Documentation

Everything you need to work with the design system.

Customisation

Start here

Transform Catalyst into your project. Personality presets, colour palettes, border radius, typography, and more. Copy prompts, let AI do the work.

Make it yours

Demo

Live preview of the entire design system. Great for validating changes at a glance.

Colours

Theme colors, semantic tokens, and usage guidelines. Where your brand lives.

Typography

Font scales, text styles, and heading hierarchy. Words matter.

Layout

Spacing scale, page templates, and grid patterns. Structure for your UI.

Patterns

Content patterns for websites, apps, and presentations. Narrative structures that work.

Token Architecture

:root (Raw Values)

Color scales, spacing, and base values. AI can regenerate these from a palette.

--primary-500: oklch(0.65 0.2 180)

@theme (Semantic Tokens)

Maps raw values to meanings. Components reference these names.

--color-primary: var(--primary-500)

See app/globals.css for the complete token definitions.

Quick start

Exploring the system?

Start with the Demo page to see everything in one place. Then dive into specific topics.

View demo

Changing the theme?

Update tokens in globals.css, then check the Demo page to validate your changes.

Colour tokens

Related docs