Streamlining Design Systems with salt-theme-gen: An OKLCH-Based Theme Engine

I open-sourced salt-theme-gen

Developer Hasan Sarwer has launched salt-theme-gen, an OKLCH-based design system generator for JavaScript and TypeScript. The system automates the derivation of 21 semantic colors and 32 interactive states from a single input hex code.

Why This Matters

Manual theme creation frequently suffers from visual guesswork where dark modes appear washed out or hover states feel inconsistent. The technical friction of re-deriving dozens of colors after a single base change often results in technical debt within design systems. By leveraging OKLCH, salt-theme-gen ensures perceptual uniformity that standard RGB or Hex math cannot achieve. This approach automates the creation of 32 interactive states and 18-entry accessibility reports, moving accessibility from a post-launch cleanup task to a core part of the derivation pipeline.

Key Insights

• Generates 21 semantic colors and 32 interactive states from one primary color input, 2026.
• Perceptual color balance via OKLCH, avoiding visual guesswork common in RGB-based systems.
• Includes an 18-entry accessibility report to ensure WCAG AA compliance during theme generation.
• Six harmony strategies including triadic and tetradic palettes for automated color relationships.
• Zero-dependency TypeScript architecture compatible with React Native, Bun, and Deno.

Working Examples

Example of generating a complementary theme from a single hex value.

import { generateTheme } from "salt-theme-gen"; const theme = generateTheme({ primary: "#0E9D8E", harmony: "complementary", });

Practical Applications

• Build-time static theme generation: Export JSON results to ship themes without runtime overhead. Pitfall: Manually overriding generated colors can break the perceptual balance of the OKLCH model.
• AI-First Integration: Use explicit type shapes to allow LLMs to accurately map theme keys. Pitfall: Relying on AI to guess theme keys leads to broken UI integration and runtime errors.
• Cross-platform consistency: Use the same generator for React Native and Web to maintain brand identity. Pitfall: Ignoring platform-specific elevation standards while applying the same 4 elevation levels.

References:

• https://www.npmjs.com/package/salt-theme-gen
• https://github.com/Hasansarwer/salt-theme-gen