Color Guidance

Overview

Morpha UI's color system is built on tonal palettes — Primary (purple #6c5ce7), Secondary (coral #dc415f), Error, Neutral and Neutral Variant — each with tones from 0 (white) to 1000 (black). From these tones we derive a set of semantic roles for light and dark themes.

The semantic layer is shadcn-compatible: --background, --foreground, --card, --primary, --secondary, --muted, --accent, --destructive, --border, --input and --ring all exist, so any shadcn/Radix component drops in with no changes. Alongside them sit the Material-style roles from Figma — --surface*, --on-surface, --primary-container, category colors and more — for richer, app-level surfaces.

Token Contract

Every color is exposed as a CSS custom property and, where useful, as a Tailwind color utility:

• Tonal scales → --primary-500 (raw) and --color-primary-500 (utility, e.g. bg-primary-500).
• Semantic roles → --primary / --color-primary (utility bg-primary), --surface, --on-surface, …

Tonal palettes are theme-independent; semantic roles change between :root (light) and .dark. Switch to Semantic roles in the generator below for the full light/dark table.

Interactive Generator

Set a primary and a secondary color — the tonal scales, the semantic roles and the live preview all regenerate from your choice (Neutral, Neutral Variant and Error stay fixed).

Usage

1. Install the theme with the Morpha CLI — it adds the canonical token stylesheet (styles/morpha-theme.css, the full @theme inline + :root + .dark set):

   npmpnpmbun

   npx morpha-ui@latest add theme

   pnpm dlx morpha-ui@latest add theme

   bunx --bun morpha-ui@latest add theme

2. @import it from your Tailwind v4 entry CSS.

3. Use the tokens through Tailwind utilities (bg-primary, text-on-surface, bg-primary-500) or directly as variables (background: var(--surface)).

Because the semantic set matches shadcn's, components installed from the Morpha CLI inherit this theme automatically.