Tonex turns one starting color into a complete color system: semantic roles, light and dark palettes, and contrast checks that travel with the output. It is not a theme preset and not another token format. Tonex is the color-authoring layer underneath them — the part that decides what the colors are, how they relate, and which pairings are safe to ship.
Pick a seed from a brand color, a logo, a hex value, or an agent workflow. Tonex builds the system around that intent instead of inheriting whatever the framework, template, or model happened to choose.
Why color needs authorship
Color is easy to start and hard to finish. A single accent looks fine in isolation, but real interfaces need backgrounds, text, borders, states, charts, light mode, dark mode, and every awkward pairing in between. If one role is off, the whole surface can feel wrong. If one foreground/background pair misses contrast, the design stops being usable.
That risk pushes teams toward defaults. Products retreat to safe neutrals, familiar ramps, and the same almost-designed look. Agents make the problem faster: they can generate screens in seconds, but without a color system underneath, their palettes are often just a mood attached to a mockup.
Tonex treats color as authored by intent, not inherited by default. The user or agent chooses the direction. The system supplies the structure and constraints.
What Tonex gives you
You give Tonex one color. It derives a role-mapped system around it: primary, surface, on-surface, error, and the other jobs an interface needs. The output is semantic, not just a list of swatches, so each color has a purpose and a known relationship to the others.
Light and dark palettes are generated together, not patched separately. Foreground and background roles are checked for contrast as you work. Under the hood, Tonex uses Material Color Utilities so those relationships are computed in color space, not guessed by eye.
The result is a palette you can tune without starting over. Change the seed, shift the variant, adjust contrast, tune surfaces, or pin a role when you need control. The system keeps the surrounding roles coherent where it still can, and makes exact choices explicit where it cannot.
How it fits with agents and tools
Modern design systems have more ways to carry tokens than ever: shadcn themes, Material JSON, DESIGN.md, SKILL.md, DTCG token files, and whatever custom format a project already runs. Those formats describe and transport tokens. Tonex fills the color block.
That matters most when agents are doing the work. The agent knows the target codebase, component library, naming conventions, and final layout. Tonex gives it a coherent palette plus the rules for applying it: which roles go together, which pairs pass contrast, and what should stay stable across light and dark. The agent paints the canvas. Tonex keeps the colors from becoming throwaway output.
Two ways to use it
- Web app — a visual editor. Set a seed, shape the system, preview it on real components, and export. Start at Seed color.
- CLI — one command from your terminal or an agent. Generate tokens, check contrast, and hand the result to a target format. Start at Installation.
Both share one engine, so the same seed produces the same system in either surface.