Generate rich design tokens your coding agent can actually use.

Pick your colors, choose your type, and get a complete designtoken.md file with full color scales, typography rules, component tokens, spacing, elevation, and a visual reference card. Drop it into any project. Your agent handles the rest.

designtoken.md
primary
secondary
tertiary
neutral
Display 36 / 700
Heading 24 / 600
Body text in the default size 16 / 400
Caption small 12 / 400
Card Component
Elevation level 2 with radius-lg and default padding tokens applied.

What's in a designtoken.md file

A single markdown file with everything a coding agent needs to produce consistent, on-brand UI. Substantially richer than a typical 30-line design file.

🎨

Color Scales

Four color roles, each with a full 50–900 scale. Light and dark variants computed automatically.

4 roles × 10 stops = 40 color tokens

Typography Scale

Nine levels from caption to display, each with size, weight, line-height, and letter-spacing.

9 levels · size / weight / lh / ls

Spacing Scale

A harmonious spacing scale from 4px to 96px for consistent padding, margin, and gap values.

4px → 96px · 12 steps

Border Radius

Small, medium, large, extra-large, and full radius tokens for buttons, cards, and pills.

sm / md / lg / xl / full

Elevation & Shadows

Five-level shadow scale plus focus-ring and overlay definitions for consistent depth.

5 levels + focus ring + overlay

Component Tokens

Pre-mapped tokens for buttons, cards, and inputs: background, border, text, hover, and focus states.

Buttons · Cards · Inputs
🖼

Visual Reference Card

A human-readable description of how the theme should look and feel: color palette, button styles, card rendering, and input states. Agents use this to self-verify their output.

Palette swatches · Button variants · Card preview · Input states

Works with your coding agent

Generate once, use everywhere. Your agent reads the token file and produces UI that matches your design system.

1

Generate

Configure colors, typography, and spacing in the visual generator. Preview everything in real time.

2

Drop it in

Place designtoken.md in your project root alongside your code. One file, zero dependencies.

3

Build

Your agent reads the tokens and produces consistent, on-brand UI across every component.

Compatible with the agents you already use

Claude Code Cursor Copilot Codex

Richer than Google Stitch's design.md

Google Stitch introduced design.md, a markdown file describing your design system in natural language. Great concept. But ~30 lines of color names and font choices give your agent vocabulary without depth. A designtoken.md is 150+ lines of structured, production-ready token definitions with full scales, component states, and deterministic parsing.

design.md Google Stitch

~30 lines
# design.md ## Visual Theme A clean, contemporary visual identity with a light surface tone... ## Colors Primary: Green (#4A7C59) Secondary: Clay (#C2785C) Background: #FAFAF9 Text: #1C1917 ## Typography Heading: Plus Jakarta Sans 700 Body: Inter 400, 16px ## Components Primary Button: green bg, white text, border-radius 10px, padding 12px 24px

designtoken.md

~150+ lines
# designtoken.md ## Color – Primary (Nature Green) | Stop | Hex | Usage | |------|---------|--------------------| | 50 | #ECFDF5 | Hover backgrounds | | 100 | #D1FAE5 | Selected states | | 200 | #A7F3D0 | Light accents | | 300 | #6EE7B7 | Borders | | 500 | #4A7C59 | Default buttons | | 700 | #2D5238 | Pressed states | | 900 | #132618 | High-contrast text | ## Typography Scale | Level | Size | Weight | LH | LS | |---------|------|--------|-----|---------| | display | 36px | 700 | 1.1 | -0.02em | | h1 | 30px | 700 | 1.2 | -0.02em | | body | 16px | 400 | 1.5 | 0 | | caption | 12px | 400 | 1.4 | 0.01em | … + spacing, radius, shadows, component tokens, visual reference

Agents need more than tokens

Static token files give your agent a vocabulary. But vocabulary without judgment produces output that's competent, consistent, and completely soulless. At production scale, you need expression infrastructure: runtime token resolution, brand guardrails, and composition intelligence in a form machines can reason with.

1 Start here

designtoken.md

Static design tokens in markdown. Full color scales, type hierarchies, component tokens. Drop it in your project. Your agent gets consistent UI.

Free · File-based
2 Go further

Expression Infrastructure

Runtime token resolution via API. Brand guardrails that enforce consistency at machine speed. Composition intelligence that encodes taste, not just colors. Your design system becomes a living, bidirectional system agents can query deterministically.

Production-ready · API-served

designtoken.md gets you started. Designless is expression infrastructure for when your agents need to compose, not just apply tokens, but understand why this and not that.

Start with tokens. Scale with expression.

Generate a designtoken.md file in under a minute, or skip straight to production-grade expression infrastructure.

Generate tokens → Explore Designless →

designtoken.md is free forever. Designless is expression infrastructure for agents at scale.