A warm, joyful design system built on OKLCH color science.
Design · Color · Motion · Animation · Ports · Palette · Development
Delightful is a design system that takes color seriously. Every value flows through a 3-tier OKLCH token architecture — 7 color families tuned for perceptual uniformity, not eyeballed hex codes. Neo-brutalist aesthetics (solid shadows, 2px borders, bold type) meet spring-physics motion and warm cream backgrounds that never feel cold. Light and dark modes, both designed from scratch.
50+ components built on a 3-tier OKLCH token architecture — 7 primitive color families feeding into semantic tokens for light and dark mode, feeding into component tokens. Neo-brutalist aesthetic with solid shadows, 2px borders, and bold type. Nothing skips a tier.
Deep-dive into the 3-tier OKLCH color architecture — 7 primitive families, semantic token mapping for light and dark mode, and component token binding. Interactive palette explorer with copy-to-clipboard.
59 named CSS animations across 10 categories — entrances, exits, attention-seekers, morphs, reveals, bounces, loading indicators, micro-interactions, text effects, and decorative. All respect prefers-reduced-motion.
JS-powered spring physics, FLIP layout transitions, particle systems, SVG morphing, gesture handling, and generative art. 23 interactive demos with linear() spring easing custom properties.
7 families, each with 5 stops in OKLCH. Warm hues throughout — no cold grays.
| Family | Role | Hue | Stops |
|---|---|---|---|
| Neutral | Backgrounds, text, borders | 60–70 | 14 (0–950) |
| Pink | Primary brand, actions | 350 | 5 (100–500) |
| Red | Danger, errors | 20 | 5 (100–500) |
| Gold | Warning, highlights | 78 | 5 (100–500) |
| Cyan | Tertiary, info | 210 | 5 (100–500) |
| Green | Success, confirmations | 148 | 5 (100–500) |
| Purple | Creative, special | 300 | 5 (100–500) |
Light mode primitives
Neutral — warm grays, never cold
| Stop | OKLCH |
|---|---|
| 0 | oklch(1.00 0.000 0) |
| 25 | oklch(0.988 0.006 70) |
| 50 | oklch(0.980 0.008 70) |
| 100 | oklch(0.960 0.010 70) |
| 150 | oklch(0.940 0.012 70) |
| 200 | oklch(0.920 0.012 70) |
| 300 | oklch(0.860 0.014 70) |
| 400 | oklch(0.750 0.014 70) |
| 500 | oklch(0.600 0.012 70) |
| 600 | oklch(0.480 0.010 70) |
| 700 | oklch(0.350 0.010 70) |
| 800 | oklch(0.250 0.012 60) |
| 900 | oklch(0.180 0.012 60) |
| 950 | oklch(0.140 0.012 60) |
Pink — primary brand
| Stop | OKLCH |
|---|---|
| 100 | oklch(0.920 0.060 350) |
| 200 | oklch(0.840 0.140 350) |
| 300 | oklch(0.720 0.220 350) |
| 400 | oklch(0.640 0.270 350) |
| 500 | oklch(0.560 0.280 350) |
Red — danger
| Stop | OKLCH |
|---|---|
| 100 | oklch(0.930 0.050 20) |
| 200 | oklch(0.850 0.110 20) |
| 300 | oklch(0.720 0.180 20) |
| 400 | oklch(0.620 0.220 20) |
| 500 | oklch(0.540 0.230 20) |
Gold — warning, highlights
| Stop | OKLCH |
|---|---|
| 100 | oklch(0.960 0.055 85) |
| 200 | oklch(0.920 0.115 85) |
| 300 | oklch(0.870 0.165 85) |
| 400 | oklch(0.840 0.175 85) |
| 500 | oklch(0.820 0.170 85) |
Cyan — tertiary, info
| Stop | OKLCH |
|---|---|
| 100 | oklch(0.930 0.038 210) |
| 200 | oklch(0.850 0.085 210) |
| 300 | oklch(0.740 0.125 210) |
| 400 | oklch(0.650 0.148 210) |
| 500 | oklch(0.570 0.155 210) |
Green — success
| Stop | OKLCH |
|---|---|
| 100 | oklch(0.930 0.042 148) |
| 200 | oklch(0.840 0.095 148) |
| 300 | oklch(0.730 0.145 148) |
| 400 | oklch(0.630 0.170 148) |
| 500 | oklch(0.540 0.165 148) |
Purple — creative
| Stop | OKLCH |
|---|---|
| 100 | oklch(0.940 0.040 300) |
| 200 | oklch(0.860 0.080 300) |
| 300 | oklch(0.720 0.160 300) |
| 400 | oklch(0.640 0.220 300) |
| 500 | oklch(0.560 0.260 300) |
Dark mode semantic accents
Dark backgrounds use warm amber hue (65) instead of cold black. Accents are brightened for readability.
| Token | Light | Dark |
|---|---|---|
--bg-page |
oklch(0.982 0.008 70) |
oklch(0.140 0.014 65) |
--bg-surface |
oklch(0.995 0.004 70) |
oklch(0.165 0.015 65) |
--bg-elevated |
oklch(1.00 0.00 0) |
oklch(0.190 0.015 65) |
--text-primary |
oklch(0.200 0.015 60) |
oklch(0.935 0.008 70) |
--accent-primary |
oklch(0.640 0.270 350) |
oklch(0.700 0.230 350) |
--accent-danger |
oklch(0.620 0.220 20) |
oklch(0.660 0.200 20) |
--accent-gold |
oklch(0.840 0.175 85) |
oklch(0.840 0.170 85) |
--accent-cyan |
oklch(0.650 0.148 210) |
oklch(0.720 0.140 210) |
--accent-green |
oklch(0.630 0.170 148) |
oklch(0.680 0.155 148) |
--accent-purple |
oklch(0.640 0.220 300) |
oklch(0.700 0.200 300) |
|
VS Code 
|
Obsidian 
|
|
Ghostty 
|
iTerm2 
|
|
Claude Code Plugin
Build with Delightful in your own projects. Includes |
Shell / Starship
Starship prompt, zsh config, smart-open. |
delightful-design-system/
├── delightful-design-system.html # Source of truth — all tokens and components
├── delightful-color.html # OKLCH color architecture deep-dive
├── delightful-motion.html # 59 CSS animations
├── delightful-animation.html # JS spring physics, FLIP, particles
├── claude-plugin/ # Claude Code plugin (skills, agents, tokens)
├── vscode-theme/ # VS Code extension
├── obsidian-theme/ # Obsidian theme
├── ghostty/ # Ghostty terminal theme + shaders
├── iterm2/ # iTerm2 color profiles
├── shell/ # Starship prompt + zsh config
├── scripts/ # sync-tokens, bump-version, setup-terminal
├── screenshots/ # Platform screenshots (light + dark)
└── tests/ # Playwright visual regression + token consistency
delightful-design-system.html contains every primitive, semantic, and component token. Edit tokens there, then propagate.
After changing tokens in the source HTML:
npm run sync— auto-updates CSS tokens, Obsidian theme, motion/animation HTMLcd vscode-theme/scripts && node generate-themes.mjs— regenerates VS Code themes- Manually update: Tailwind preset, Figma tokens, reference docs, agents, skills
npm run bump 0.6.0Updates all 6 version files and creates a git tag. Never update versions manually.
npx playwright testVisual regression, token consistency, press behavior, animation, terminal theme, and color audit tests.