# designtoken.md

> Make your brand agent-readable. Generate design tokens from brand colors and typography in any format.

## What this is

designtoken.md is a free, open design token generator and API. Enter your brand colors and typography, get back structured tokens that any AI agent can read and apply.

## Token API (Open, No Auth)

GET https://designtoken.md/api/tokens

Parameters:
- primary: Hex color without # (e.g., 4A7C59)
- secondary: Hex color without # (e.g., 64748B)
- accent: Hex color without # (e.g., D97706)
- neutral: Hex color without # (e.g., 78716C)
- font: modern-sans | classic-serif | technical-mono | expressive-display | minimal-system
- radius: Border radius base in px (2-48, default 8)
- density: compact | default | spacious
- mode: light | dark
- brand: Brand name (default "Acme Corp")
- format: json | md | css | tailwind | style-dictionary | instructions

Example:
GET https://designtoken.md/api/tokens?primary=4A7C59&secondary=64748B&accent=D97706&neutral=78716C&font=modern-sans&format=css

Returns CSS Variables, Markdown, W3C JSON, Tailwind config, or Style Dictionary format.

## Output Formats

- **json** — W3C Design Token Community Group format. Machine-readable, tool-compatible.
- **md** — designtoken.md Markdown. Drop into your repo as context for coding agents.
- **css** — CSS Custom Properties. Copy into :root for immediate use.
- **tailwind** — Tailwind CSS config. Paste into tailwind.config.js.
- **style-dictionary** — Style Dictionary format for design system pipelines.
- **instructions** — Ready-to-paste CLAUDE.md / .cursorrules / agents.md snippet with rules, palette, API URLs, and component defaults.

## Interactive Generator

https://designtoken.md/generator

Visual tool with live preview. Supports URL params for shareable configs:
https://designtoken.md/generator?primary=4A7C59&secondary=64748B&accent=D97706&neutral=78716C&font=modern-sans

## Agent Integration Guides

- https://designtoken.md/docs/claude-code — Claude Code
- https://designtoken.md/docs/cursor — Cursor
- https://designtoken.md/docs/copilot — GitHub Copilot
- https://designtoken.md/docs/codex — OpenAI Codex
- https://designtoken.md/docs/gemini-cli — Gemini CLI
- https://designtoken.md/docs/windsurf — Windsurf
- https://designtoken.md/docs/lovable — Lovable
- https://designtoken.md/docs/stitch — Google Stitch
- https://designtoken.md/docs/any-agent — Any Agent
- https://designtoken.md/docs/figma-skills — Figma Skills

## Key Pages

- https://designtoken.md/ — Home, FAQ, getting started
- https://designtoken.md/generator — Interactive generator
- https://designtoken.md/spec — Token specification
- https://designtoken.md/design-md — What is design.md?
- https://designtoken.md/examples — 12 industry examples (SaaS, Fintech, E-commerce, etc.)
- https://designtoken.md/agentic-design-system — What is an agentic design system?

## Standards

designtoken.md outputs tokens in W3C Design Tokens Community Group (DTCG) format. Designless is a participant in the W3C Design Tokens Community Group (https://www.w3.org/community/design-tokens/).

## Part of the Designless Ecosystem

designtoken.md is part of the Designless expression infrastructure ecosystem:
- https://designless.io — Expression infrastructure runtime (LESS Studio)
- https://skill.design — Design skill registry for AI agents
- https://designless.live — Category vocabulary and brand story