← All Projects
Published
salt-theme-gen — Design System Theme Engine
Creator & Sole Developer
An open-source OKLCH-based theme generator that takes one hex color and produces a complete light/dark design system with 21 semantic colors, 32 interactive states, and WCAG accessibility reports.
Problem
Building accessible, consistent color systems is tedious and error-prone. Developers manually derive dozens of color tokens with no guarantee of perceptual consistency or accessibility compliance.
What I Built
- Automated derivation of 21 semantic colors from a single hex input using the Butterfly Rule
- 32 interactive state generation (hover, active, disabled, focus for 8 intents)
- 18-entry WCAG accessibility report baked into the generation pipeline
- Triadic, complementary, split-complementary, tetradic, and monochromatic harmony options
- 20 nature-inspired presets with perceptual lightness compensation
- Light and dark mode output from one source color
Outcome
- Published on npm as salt-theme-gen
- Zero runtime dependencies, pure TypeScript
- Featured on DEV Community
- Powers this very website’s theme system
Why It Matters
Color science, design systems thinking, and open-source engineering in one package. A single hex color in — a mathematically derived, WCAG-compliant design system out. The kind of tool that only gets built by someone who understands both the math and the product.