Design System Utility

Color Token Exporter

This tool turns a small palette into reusable token output so you can move faster when building CSS variables, JSON theme files, or lightweight design systems.

What it does

• Accepts a palette and a naming prefix.
• Exports CSS custom properties and JSON token output.
• Shows swatches so you can verify the order before copying.
• Helps move from visual palette exploration into implementation-ready tokens.

How to use it

• Open /ColorTokenExporter/.
• Enter a prefix such as brand, ui, or accent.
• Paste comma-separated hex colors in the palette field.
• Review the generated CSS variables and JSON export blocks.
• Copy the output that matches your stack.

When it is useful

• Preparing tokens for a new landing page or dashboard.
• Converting a quick palette into implementation output.
• Creating handoff material for frontend work without a full design token pipeline.

Project structure

• index.php: UI shell and export layout.
• css/style.css: page styling and swatch presentation.
• js/app.js: parsing, token naming, and export generation.
• Documentation/index.html: this guide.