Design Systems & AI Rules
DESIGN.md Generator
Build a tokenized design system specification that AI coding agents can read, understand, and apply consistently across your codebase.
Start with a conversation
Talk to us
Use Halden AI as a sales assistant to explore services, understand offerings, and choose the right next step before booking a meeting.
Configure & Build your DESIGN.md
DESIGN.md is an open standard specification for defining design tokens, UI guidelines, and styling constraints in a machine-readable format for AI coding assistants. Generate tokens, live-preview styling, and export directly to DESIGN.md, Tailwind v4 @theme, and CSS variables.
1. Design System Identity
Establish the core name, brand seed color, and visual philosophy for AI coding agents.
2. Semantic Color Tokens
Define semantic color roles. AI agents will use token names (e.g. {colors.tertiary}) instead of arbitrary hex codes.
3. Component Token Mapping
Map semantic tokens to core UI components so agents assemble interfaces deterministically.
4. Agent Guidelines (Do's & Don'ts)
Define clear behavioural guardrails that AI coding models must follow when authoring UI.
5. Live Visual Preview
Interactive preview rendered in real-time with your active token definitions.
Halden Design System
Modern, high-trust technology aesthetic with subtle borders and clear contrast.
---
version: 1.0.0
name: "Halden Design System"
description: "Modern, high-trust technology aesthetic with subtle borders and clear contrast."
colors:
primary: "#0f172a"
secondary: "#334155"
tertiary: "#0d9488"
neutral: "#f8fafc"
surface: "#ffffff"
on-tertiary: "#ffffff"
border: "#e2e8f0"
typography:
h1:
fontFamily: "Inter, system-ui, sans-serif"
fontSize: "2.5rem"
fontWeight: "700"
lineHeight: "1.2"
h2:
fontFamily: "Inter, system-ui, sans-serif"
fontSize: "1.75rem"
fontWeight: "600"
lineHeight: "1.3"
body-md:
fontFamily: "Inter, system-ui, sans-serif"
fontSize: "1rem"
fontWeight: "400"
lineHeight: "1.6"
label-caps:
fontFamily: "Inter, monospace"
fontSize: "0.75rem"
fontWeight: "600"
lineHeight: "1.4"
spacing:
xs: "4px"
sm: "8px"
md: "16px"
lg: "24px"
xl: "32px"
rounded:
sm: "6px"
md: "12px"
lg: "16px"
full: "9999px"
components:
button-primary:
backgroundColor: "{colors.tertiary}"
textColor: "{colors.on-tertiary}"
border: "{colors.transparent}"
rounded: "{rounded.md}"
padding: "10px 20px"
card:
backgroundColor: "{colors.surface}"
textColor: "{colors.primary}"
border: "{colors.border}"
rounded: "{rounded.lg}"
padding: "24px"
input:
backgroundColor: "{colors.neutral}"
textColor: "{colors.primary}"
border: "{colors.border}"
rounded: "{rounded.sm}"
padding: "10px 14px"
---
# Halden Design System
## Overview
Architectural clarity meets enterprise polish. The UI prioritises clean hierarchy, high readability, and crisp hairline borders.
## Colors
The palette is rooted in semantic tokens. Use token references (e.g. `{colors.tertiary}`) rather than raw hex codes.
- **primary** (`#0f172a`): Main dark foreground & headings
- **secondary** (`#334155`): Subtle text & secondary elements
- **tertiary** (`#0d9488`): Accent teal for interactive highlights
- **neutral** (`#f8fafc`): Light background surface for cards
- **surface** (`#ffffff`): Pure white container background
- **on-tertiary** (`#ffffff`): High-contrast text on accent
- **border** (`#e2e8f0`): Subtle structural border lines
## Typography
| Token | Font Family | Size | Weight | Line Height |
| :--- | :--- | :--- | :--- | :--- |
| `h1` | Inter, system-ui, sans-serif | 2.5rem | 700 | 1.2 |
| `h2` | Inter, system-ui, sans-serif | 1.75rem | 600 | 1.3 |
| `body-md` | Inter, system-ui, sans-serif | 1rem | 400 | 1.6 |
| `label-caps` | Inter, monospace | 0.75rem | 600 | 1.4 |
## Layout & Spacing Scale
- `spacing.xs`: 4px
- `spacing.sm`: 8px
- `spacing.md`: 16px
- `spacing.lg`: 24px
- `spacing.xl`: 32px
## Shapes & Corner Radius
- `rounded.sm`: 6px
- `rounded.md`: 12px
- `rounded.lg`: 16px
- `rounded.full`: 9999px
## Depth & Elevation
Depth is achieved through tonal layering and delicate borders rather than heavy drop shadows. High-elevation surfaces use pure white or darkened glass.
## Component Token Mapping
### `button-primary`
- **Background**: `{colors.tertiary}`
- **Text**: `{colors.on-tertiary}`
- **Border**: `{colors.transparent}`
- **Radius**: `{rounded.md}`
- **Padding**: `10px 20px`
### `card`
- **Background**: `{colors.surface}`
- **Text**: `{colors.primary}`
- **Border**: `{colors.border}`
- **Radius**: `{rounded.lg}`
- **Padding**: `24px`
### `input`
- **Background**: `{colors.neutral}`
- **Text**: `{colors.primary}`
- **Border**: `{colors.border}`
- **Radius**: `{rounded.sm}`
- **Padding**: `10px 14px`
## Do's and Don'ts
- Do: Use tertiary color sparingly for key CTAs.
- Do: Always check WCAG AA contrast for text tokens.
- Do: Default to named spacing tokens rather than arbitrary px values.
- Don't: Don't combine more than two font families.
- Don't: Don't use unrounded borders on interactive buttons.
- Don't: Never hardcode hex values inside components.
Integration
Where to place your DESIGN.md
Place DESIGN.md in the root directory of your project repository. AI agents like Claude Code, Cursor, and Copilot will automatically inspect it when generating components.
your-project/ ├── DESIGN.md ← root of repository ├── AGENTS.md ← references DESIGN.md for UI tasks ├── package.json └── src/
Key Capabilities & Features
- Interactive semantic color tokens editor with auto-palette generation
- Typography, spacing scales, and corner radius token management
- UI component token mapping for buttons, cards, inputs, and badges
- Live rendered preview card with real-time token application
- Multi-format export: DESIGN.md, CSS :root variables, Tailwind v4 @theme, and W3C DTCG JSON
- One-click clipboard copy and file download
Related Tags
FAQ
Frequently Asked Questions
Everything you need to know about DESIGN.md and AI agent tooling.
What is DESIGN.md?
DESIGN.md is a structured markdown file that combines YAML frontmatter (for machine-readable design tokens like colors, typography, spacing, and components) with plain Markdown prose explaining visual rules and UI constraints.
Which AI coding agents support DESIGN.md?
Claude Code, Cursor, GitHub Copilot, Codex, Aider, Windsurf, Devin, and any LLM instructed in AGENTS.md or prompt rules to reference ./DESIGN.md.
How do I enforce DESIGN.md in my workflow?
Add a reference in your AGENTS.md or .cursor/rules instructing agents: "For all UI styling, component creation, and visual changes, strictly adhere to the tokens and rules defined in ./DESIGN.md."
Is any of my design data sent to external servers?
No. The generator runs entirely client-side in your browser. All token generation, preview rendering, and export calculations happen locally on your device.
Explore
More Developer & AI Tools
Explore other open configuration generators from Halden Solutions.
AGENTS.md Generator
Generate a universal AGENTS.md configuration file that provides unified repo context, guidelines, and execution boundaries to any AI coding agent.
MCP Config Generator
Create Model Context Protocol (MCP) server configuration files to securely connect AI coding assistants to external tools, databases, APIs, and cloud resources.
llms.txt Generator
Create structured llms.txt and llms-full.txt files to guide AI search engines, LLMs, and agent web crawlers to your highest-value documentation.
Need help building production AI platforms and multi-agent systems?
Halden Solutions helps teams design, build, and scale autonomous AI systems, secure agent guardrails, and enterprise cloud infrastructure.