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.
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.
Four color roles, each with a full 50–900 scale. Light and dark variants computed automatically.
Nine levels from caption to display, each with size, weight, line-height, and letter-spacing.
A harmonious spacing scale from 4px to 96px for consistent padding, margin, and gap values.
Small, medium, large, extra-large, and full radius tokens for buttons, cards, and pills.
Five-level shadow scale plus focus-ring and overlay definitions for consistent depth.
Pre-mapped tokens for buttons, cards, and inputs: background, border, text, hover, and focus states.
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.
Generate once, use everywhere. Your agent reads the token file and produces UI that matches your design system.
Configure colors, typography, and spacing in the visual generator. Preview everything in real time.
Place designtoken.md in your project root alongside your code. One file, zero dependencies.
Your agent reads the tokens and produces consistent, on-brand UI across every component.
Compatible with the agents you already use
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.
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.
Static design tokens in markdown. Full color scales, type hierarchies, component tokens. Drop it in your project. Your agent gets consistent UI.
Free · File-basedRuntime 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-serveddesigntoken.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.
@color-primary-500: #D97706 or @spacing-lg: 24px that can be imported across your stylesheet. You can export designtoken.md values as LESS variables for use in preprocessor-based projects.
skill.design — Build AI skills that use design tokens, so your agent carries your design system across every project as an installable package.
designless.io — See expression infrastructure in action — the full runtime layer for agents that need to compose, not just apply.
Generate a designtoken.md file in under a minute, or skip straight to production-grade expression infrastructure.
designtoken.md is free forever. Designless is expression infrastructure for agents at scale. W3C Design Tokens Community Group participant.