FOUNDATIONS
Colors
Three brand scales (Plum, Gold, Paper) and twenty+ semantic tokens. Switch the palette in the navbar to see every swatch on this page update live. Use the semantic layer in product code — it re-points automatically when theme or palette changes.
Brand scales
Ink
--ink-*Dark primary — foreground, text, night surfaces
Brand
--brand-*Brand accent — buttons, borders, highlights
Paper
--paper-*Warm ivory/cream surfaces — product base
Semantic tokens
Use these in product code. They re-point automatically when the palette changes.
Background
--background
Main app background
Card
--card
Cards, modals, raised surfaces
Muted
--muted
Secondary surface, hover
Foreground
--foreground
Primary text, borders
Muted Foreground
--muted-foreground
Secondary text, hints
Primary
--primary
Brand highlight (gold)
Secondary
--secondary
Secondary brand (plum)
Memphis Border
--memphis-border-color
Memphis 2px border
Using colors in JSX (Tailwind)
Every semantic token is exposed as a Tailwind utility: bg-*, text-*, border-*. Pair the bg with its matching foreground for guaranteed contrast.
1<div className="bg-background text-foreground">
2 <header className="bg-card text-card-foreground border-2 border-memphis p-4">
3 <h1 className="text-foreground">Title</h1>
4 <p className="text-muted-foreground">Subtitle</p>
5 </header>
6 <button className="bg-primary text-primary-foreground px-4 py-2">
7 Primary action
8 </button>
9 <button className="bg-secondary text-secondary-foreground px-4 py-2">
10 Secondary
11 </button>
12</div>
13
Status colors
Saved
Heads up
Action failed
FYI
1<div className="bg-success text-success-foreground px-3 py-1.5">
2 Saved
3</div>
4<div className="bg-warning text-warning-foreground px-3 py-1.5">
5 Heads up
6</div>
7<div className="bg-destructive text-destructive-foreground px-3 py-1.5">
8 Action failed
9</div>
10<div className="bg-info text-info-foreground px-3 py-1.5">
11 FYI
12</div>
13
Using colors in CSS
Need a color outside Tailwind's utilities? Read the variable directly.
1/* Read the variable directly when you need a non-Tailwind property */
2.timeline-dot {
3 background: var(--primary);
4 border: 2px solid var(--memphis-border-color);
5 box-shadow: 0 0 0 4px var(--background);
6}
7
8.callout--danger {
9 background: var(--destructive);
10 color: var(--destructive-foreground);
11}
12
Inline style fallback
1// JSX inline style — same vars, no Tailwind needed
2<aside
3 style={{
4 background: 'var(--card)',
5 color: 'var(--card-foreground)',
6 border: '2px solid var(--memphis-border-color)',
7 padding: '1rem',
8 }}
9>
10 Static surface using the semantic layer
11</aside>
12
Always pair bg + foreground
Each background semantic ships with a matching foreground variant. Mixing them is the only way to guarantee contrast across themes and custom palettes.
1// Always pair bg- with the matching text- token
2// ✅ contrast guaranteed by the lib
3<div className="bg-primary text-primary-foreground" />
4<div className="bg-card text-card-foreground" />
5
6// ❌ contrast not guaranteed when a custom palette is active
7<div className="bg-primary text-foreground" />
8
Adding dark mode
The lib ships light only. Re-declare semantic tokens under [data-theme='dark'] and the whole UI flips when the user toggles theme.
1/* app/globals.css — declare the dark variant once.
2 Every utility (bg-card, text-foreground, …) and component
3 re-points automatically when [data-theme='dark'] is set. */
4:root[data-theme='dark'] {
5 --background: #09090b;
6 --foreground: #fafafa;
7 --card: #18181b;
8 --card-foreground: #fafafa;
9 --muted: #27272a;
10 --muted-foreground: #a1a1aa;
11 --primary: #fafafa;
12 --primary-foreground: #18181b;
13 --secondary: #27272a;
14 --secondary-foreground: #fafafa;
15 --border: #27272a;
16 --memphis-shadow-color: #fafafa;
17 --memphis-border-color: #fafafa;
18}
19
Adding custom palettes
Same pattern with data-palette. Override only the tokens that should change — everything else inherits from the default palette.
1/* Add a custom palette and switch via data-palette */
2:root[data-palette='cyberpunk'] {
3 --primary: #0f766e;
4 --primary-foreground: #ffffff;
5 --secondary: #7c4dff;
6 --secondary-foreground: #ffffff;
7}
8
Full semantic token list
1// All semantic tokens shipped by Damo UI
2const TOKENS = [
3 '--background', '--foreground',
4 '--card', '--card-foreground',
5 '--popover', '--popover-foreground',
6 '--muted', '--muted-foreground',
7 '--primary', '--primary-foreground',
8 '--secondary', '--secondary-foreground',
9 '--destructive', '--destructive-foreground',
10 '--success', '--success-foreground',
11 '--warning', '--warning-foreground',
12 '--info', '--info-foreground',
13 '--border', '--border-strong',
14 '--ring',
15 '--memphis-border-color', '--memphis-shadow-color',
16] as const
17
Full theming wiring (FOUC prevention, scoped islands, programmatic switching) → Theming.
