CREATE SOMETHING

Philosophy

Canon's color system embraces functional minimalism. The primary palette is black and white, with opacity creating hierarchy rather than additional colors. Semantic colors serve specific purposes—success, error, warning, and information—never decoration.

"Color is not to decorate, but to communicate."

Backgrounds

Four background levels create depth through subtle elevation. Use elevation, not color, for hierarchy.

--color-bg-pure

#000000

Pure black canvas

--color-bg-elevated

#0a0a0a

Slightly elevated surface

--color-bg-surface

#111111

Card and panel backgrounds

--color-bg-subtle

#1a1a1a

Subtle background distinction

Foregrounds

Five foreground levels create text hierarchy. All are white with varying opacity. Contrast ratios are measured against --color-bg-pure.

--color-fg-primary

#ffffff

Headlines, primary text

Contrast: 21.00:1 AAA

--color-fg-secondary

rgba(255, 255, 255, 0.8)

Body text

Contrast: 16.60:1 AAA

--color-fg-tertiary

rgba(255, 255, 255, 0.6)

Secondary content

Contrast: 12.24:1 AAA

--color-fg-muted

rgba(255, 255, 255, 0.46)

Captions, labels

Contrast: 4.56:1 AA

--color-fg-subtle

rgba(255, 255, 255, 0.2)

Disabled, decorative

Contrast: 2.05:1 Fail

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.

--color-border-default

rgba(255, 255, 255, 0.1)

Subtle separation

--color-border-emphasis

rgba(255, 255, 255, 0.2)

Moderate emphasis

--color-border-strong

rgba(255, 255, 255, 0.3)

Strong separation

Semantic Colors

Functional colors for system feedback. All are WCAG AA compliant (4.5:1+) on pure black. Each has -muted and -border variants.

--color-success

#44aa44

Positive actions, confirmations

Contrast: 7.08:1 AAA

--color-error

#d44d4d

Errors, destructive actions

Contrast: 4.97:1 AA

--color-warning

#aa8844

Cautions, attention needed

Contrast: 6.31:1 AA

--color-info

#5082b9

Informational, links

Contrast: 5.23:1 AA

Semantic Variants

Success --color-success-muted + --color-success-border

Error --color-error-muted + --color-error-border

Warning --color-warning-muted + --color-warning-border

Info --color-info-muted + --color-info-border

Interactive States

Overlay colors for hover, active, and focus states.

--color-hover

rgba(255, 255, 255, 0.05)

Hover state overlay

--color-active

rgba(255, 255, 255, 0.1)

Active/pressed state

--color-focus

rgba(255, 255, 255, 0.5)

Focus ring color

Contrast: 5.28:1 AA

Data Visualization

Six-color palette for charts, graphs, and data displays. Each has a -muted variant for backgrounds.

--color-data-1

#60a5fa

Blue - primary data

--color-data-2

#22c55e

Green - secondary data

--color-data-3

#c084fc

Purple - tertiary data

--color-data-4

#fbbf24

Amber - quaternary data

--color-data-5

#f472b6

Pink - quinary data

--color-data-6

#facc15

Yellow - senary data

Overlays

Backdrop colors for modals, dialogs, and drawers.

--color-overlay

rgba(0, 0, 0, 0.5)

Modal backdrop

--color-overlay-heavy

rgba(0, 0, 0, 0.7)

Heavy overlay

Usage

Always use CSS custom properties, never hardcoded values.

colors.css
 /* Background usage */
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
}

/* Text usage */
.heading {
  color: var(--color-fg-primary);
}

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

/* Semantic usage */
.error-message {
  color: var(--color-error);
  background: var(--color-error-muted);
}