Foundations

The Mix palette.

Warm cream as canvas, near-black as ink. A restrained, editorial system designed to age beautifully across every Mix product.

Semantic tokens — Light

Use these names in code (e.g. bg-background, text-foreground). Never hardcode hex or rgb in components.

background

oklch(0.978 0.012 85)

foreground

oklch(0.22 0.01 60)

card

oklch(1 0 0)

primary

oklch(0.2 0.008 60)

secondary

oklch(0.94 0.01 80)

muted

oklch(0.945 0.008 80)

accent

oklch(0.18 0 0)

border

oklch(0.9 0.012 80)

destructive

oklch(0.58 0.22 27)

Mirrored values for the dark theme variant.

background

oklch(0.16 0.008 60)

foreground

oklch(0.96 0.012 85)

card

oklch(0.22 0.01 60)

primary

oklch(0.96 0.012 85)

secondary

oklch(0.28 0.01 60)

muted

oklch(0.28 0.01 60)

accent

oklch(0.92 0 0)

border

oklch(0.32 0.01 60)

destructive

oklch(0.55 0.2 27)

The Mix palette is intentionally narrow. If a new color is needed, add it as a semantic token in src/styles.css — never inline it in a component.

// ✅ Correct

className="bg-card text-foreground border border-border"

// ❌ Wrong

className="bg-[#fcfbf8] text-[#1a1a1a]"