Color Systems — Palettes, Semantics, Dark Mode

60-30-10: ~60% neutral surfaces, ~30% secondary/structural, ~10% accent. Accent is scarce by design — that scarcity is what makes CTAs pop.
One brand/accent hue + full neutral ramp + 4 semantic hues (success green, warning amber, danger red, info blue).
Build ramps of 10–12 steps per hue (50→950). Generate in a perceptual space (OKLCH) so steps are visually even; keep hue slightly shifting across the ramp (warmer lights, cooler darks) to avoid dead grays.
Neutrals: tint them toward the brand hue 1–3% saturation — pure gray reads lifeless next to a colored accent.
Test every pairing you actually use: accent-on-surface, text-on-accent, border-on-surface at 3:1/4.5:1.

Two layers:

Primitives: blue-600, gray-100 … (raw ramps)
Semantic roles: bg/surface, bg/surface-raised, bg/accent, text/primary, text/secondary, text/on-accent, border/default, border/focus, state/success|warning|danger

Components consume only semantic roles → dark mode and theming become a token swap, not a redesign.

Surfaces: dark gray (#0A0A0B–#1C1C1E range), never pure black behind text (halation); elevation = lighter surface, not shadow.
Desaturate accents ~10–20% and lighten them; saturated brights vibrate on dark.
Text: white at 87–92% opacity primary, 60% secondary — pure #FFF body text is harsh.
Shadows barely work — use borders (+6–8% white overlay) to separate raised surfaces.
Semantic colors need dark-mode variants (lighter red/green for 4.5:1 on dark surfaces).
Images/illustrations: dim slightly (~90% opacity) or provide dark variants.
Respect the OS setting (prefers-color-scheme) and offer a manual override that persists.

Blue = trust/finance-tech default (also the most overused); green = growth/health/money; red = urgency/danger — reserve for destructive & errors in-product; purple = premium/creative; orange/yellow = energy/attention, weak for text.
Cultural check for global products (white/red/gold meanings vary).
Category convention beats psychology: fintech ≈ blue/green + dark premium; health ≈ calm greens/blues; food ≈ warm reds/oranges.

Red/danger only ever means destructive or error in-product. Don't use it for badges/accents.
Links: one link color, underline in body prose.
Charts: 6-hue max categorical palette, colorblind-safe (test deuteranopia), consistent series colors across the product.
Gradients: same-hue or adjacent-hue only (blue→violet fine, blue→orange muddy); subtle in UI, bolder allowed in marketing heroes.
White space is a color: default to more surface, less ink.

Accent color used for 30% of the screen (nothing pops).
Text on gradients/images without scrim.
Dark mode as naive inversion (pure black + neon saturated accents).
Six different blues drifting across a product because values were hardcoded per-component.

Sources