About designtoken.md
A free design token generator that outputs rich, structured markdown files coding agents can parse deterministically.
What is designtoken.md?
designtoken.md is a free, browser-based design token generator. Pick your colors, choose your typography, and get a complete designtoken.md file — full color scales, typography rules, component tokens, spacing, elevation, and a visual reference card. Drop it into any project. Your coding agent handles the rest.
No account needed. No signup required.
What's in a designtoken.md file?
Every generated file is a structured markdown document containing a complete design token system. Here's what you get:
Full 50-900 color scales for 4 roles (primary, secondary, accent, neutral)
9-level type scale with weights, line-heights, and letter-spacing
Spacing scale from 4px to 96px with named tokens
Border radius scale from sharp to fully rounded
Elevation / shadow scale with use-case annotations
Component tokens for buttons, cards, inputs, and navigation
Semantic color roles for backgrounds, surfaces, and actions
Visual reference description of the overall design feel
That's ~150-200 lines of production-ready token definitions — structured so any coding agent can parse it deterministically, not guess at intent from natural language.
Who it's for
- Vibe coders who want consistent UI without a design background
- Developers using Claude Code, Cursor, Copilot, Codex, or Gemini CLI who want their agent to produce coherent interfaces
- Designers who want to hand structured tokens to an AI workflow instead of a Figma file
- Anyone building with coding agents who wants more than a 30-line design.md
Part of Designless
designtoken.md is built by Designless — expression infrastructure for AI agents. Static token files get you started. For runtime token resolution, brand guardrails, and composition intelligence at production scale, visit designless.studio.
Founded by Ashutosh Upadhyay.