# Design System > Design tokens, OKLCH palettes, typography scales, spacing, theming, dark mode, brand systems, Figma handoff. Use when the token system itself is the work — palettes, type and spacing scales, theming and dark mode, brand-inspired aesthetics, font pairing, Figma-to-code translation. Not for applying tokens inside one component (react-components). - Skill: `krishna-modi12/design-system` (Agent Skill, multi-file: 26 files) - Install (CLI): `npx skillmds@latest add krishna-modi12/design-system` - Raw SKILL.md: https://api.skillmd.com/api/skills/krishna-modi12/design-system/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: Krishna-Modi12 (https://skillmd.com/u/krishna-modi12) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/krishna-modi12/design-system --- # Design System ## When to Use Token systems, colour palettes, typography scales, spacing scales, theming and dark mode, brand-inspired aesthetics, font pairing, style presets, and Figma-to-code translation. For applying tokens inside one component use `react-components`. ## Stack Tailwind v4 `@theme` · CSS custom properties · OKLCH colour · next-themes ## Core Rules 1. **OKLCH everywhere.** Perceptually uniform, so a fixed lightness step looks even across hues. Keep H constant and move L/C for a family. Never raw hex in component code. 2. **Semantic names, not literal ones.** `--color-surface-raised`, not `--color-gray-50`. The name says the role; the value can change per theme without a rename. 3. **Never pure black or white as a surface.** `oklch(14% 0.012 240)` and `oklch(98% 0.005 240)` — tinted neutrals read as designed, pure ones read as unfinished. 4. **Dark mode is a first-class theme, not an inversion.** Invert L, keep H, reduce C slightly. Elevated surfaces get *lighter* in dark mode, not darker. 5. **`color-scheme: dark` on ``** so native scrollbars, inputs and `