We built Themal, a small component for React that adds a design system editor to an existing web app.
The goal was to make it easier for teams to customize UI colors without accidentally breaking accessibility. When a user selects colors, the editor automatically enforces WCAG AA contrast requirements.
One feature we found useful is the ability to extract a color palette from an image. Upload or select an image and Themal generates colors for brand, secondary, accent, background, and foreground that can be applied directly to the design system.
Some design choices:
Writes CSS custom properties, so it works with any framework that reads them
Includes a built-in contrast auditor (~2KB) instead of relying on large libraries like axe-core (~580KB)
Uses scoped styles, so it does not affect the host application's CSS
Typography inherits from the host page
Can export results as CSS, design tokens, or a GitHub pull request
Design goals were to keep it simple:
No runtime dependencies beyond React
No vendor lock-in. Everything is just CSS variables
A web component version that works without a build step
Install:
npm install @themal/editor
The README also includes an AI scaffold prompt that generates integration code for your stack.
Interested to hear how others approach accessible customization in design systems.