CSS Variables Color System for Websites and Apps
A color system helps developers avoid random one-off colors. Use tokens for intent: background, text, border, primary action and state colors.
Starter color tokens
:root {
--color-bg: #ffffff;
--color-surface: #f8fafc;
--color-text: #0f172a;
--color-muted: #64748b;
--color-border: #cbd5e1;
--color-primary: #2563eb;
}
.dark {
--color-bg: #09090b;
--color-surface: #18181b;
--color-text: #f4f4f5;
--color-muted: #a1a1aa;
--color-border: #3f3f46;
--color-primary: #60a5fa;
}Developer checklist
- Name tokens by purpose instead of color names.
- Keep dark mode values in the same token names.
- Test text and button contrast before release.