Colors

Why so few colors?

More colors mean more decisions. We use black and white as the foundation, then adjust opacity to create hierarchy—no need to pick new shades. When you need to show success, error, or a warning, semantic colors do the work.

“Color communicates. Decoration distracts.”

Backgrounds

Four levels from pure black to subtle grey. Stack them to create depth—like layers of paper.

Token	Value	Description
--color-bg-pure	#000000	Pure black, the canvas
--color-bg-base	#0a0a0a	Slight lift for main surfaces
--color-bg-surface	#111111	Cards and elevated elements
--color-bg-elevated	#1a1a1a	Modals and popovers

Foregrounds

Five text colors, all white at different opacities. Use brighter for headlines, dimmer for captions.

Token	Value	Contrast	Description
--color-fg-primary	rgba(255,255,255,1)	21:1	Headlines, emphasis
--color-fg-secondary	rgba(255,255,255,0.8)	13.7:1	Body text
--color-fg-tertiary	rgba(255,255,255,0.6)	9.7:1	Secondary information
--color-fg-muted	rgba(255,255,255,0.46)	4.56:1	Captions, hints
--color-fg-subtle	rgba(255,255,255,0.2)	2.1:1	Decorative only

WCAG Compliance: --color-fg-muted (4.56:1) meets AA for normal text. --color-fg-subtle should only be used for decorative elements.

Borders

Three border levels for separation and emphasis.

Token	Value	Description
--color-border-default	rgba(255,255,255,0.1)	Subtle separation
--color-border-emphasis	rgba(255,255,255,0.2)	Hover states
--color-border-strong	rgba(255,255,255,0.3)	Active states

Performance Lab Readability Palette

The CREATE SOMETHING Performance Lab communication layer uses a light operational palette. Use these tokens for buyer-facing and operator-facing surfaces that need immediate comprehension.

This is now a stable Canon layer, not a one-off property treatment. Use the palette when the interface must show workflow maps, trust boundaries, approval states, receipts, validation gates, or handoff evidence.

Token	Value	Use
--color-performance-paper	#f3f3f0	Page canvas
--color-performance-court	#e6e6e0	Secondary bands and inactive states
--color-performance-panel	#ffffff	Cards, panels, receipts
--color-performance-ink	#090909	Primary text and dark CTAs
--color-performance-muted	#5e6268	Secondary copy
--color-performance-muted	#5e6268	Low-emphasis labels
--color-performance-line	#d7d7d2	Hairline panel borders
--color-performance-line-strong	#9c9c96	Focused panel borders
--color-performance-signal	#0057b8	System/action accent
--color-performance-growth	#007a4d	Governed run/wait states
--color-performance-risk	#c62026	Stop/block states

Do not use the clear palette as generic decoration. A clear surface should answer at least one operational question: what is mapped, what can run, what needs review, what is blocked, or what evidence proves the handoff.

Semantic Colors

Four colors that mean something: success, error, warning, info. Each comes with -muted and -border variants.

Token	Value	Use
--color-success	#22c55e	Positive feedback
--color-error	#ef4444	Errors, destructive actions
--color-warning	#f59e0b	Caution states
--color-info	#3b82f6	Informational

Variants

Each semantic color has muted and border variants:

/* Success variants */
--color-success: #22c55e;
--color-success-muted: rgba(34, 197, 94, 0.1);
--color-success-border: rgba(34, 197, 94, 0.3);

/* Error variants */
--color-error: #ef4444;
--color-error-muted: rgba(239, 68, 68, 0.1);
--color-error-border: rgba(239, 68, 68, 0.3);

Interactive States

Token	Value	Use
--color-hover	rgba(255,255,255,0.05)	Hover backgrounds
--color-active	rgba(255,255,255,0.1)	Active/pressed states
--color-focus	rgba(255,255,255,0.5)	Focus rings

Usage Example

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  color: var(--color-fg-secondary);
}

.card:hover {
  border-color: var(--color-border-emphasis);
  background: var(--color-hover);
}

.card-title {
  color: var(--color-fg-primary);
}

.card-meta {
  color: var(--color-fg-muted);
}