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.