# DESIGN.md Library

> 759 design systems documented in Markdown, ready to copy and use with any AI coding agent.

## What is the Library?

The DESIGN.md Library is a collection of 759+ pre-built DESIGN.md files covering every major design style — from Swiss minimalism to cyberpunk, from flat design to brutalism. Each file is a complete design system ready to download and use with any AI coding agent.

## How to Use

1. **Browse** the library filtered by category, style, or era
2. **Choose** a style that matches your project
3. **Copy** the DESIGN.md content
4. **Place** it at your project root
5. **Reference** it in your AI agent config

## Design Styles Available

- **Minimalist**: Clean, simple, focused on content
- **Flat**: No shadows, bold colors, clear typography
- **Material**: Google's Material Design principles
- **Brutalist**: Raw, unpolished, high contrast
- **Glassmorphism**: Translucent, frosted glass effects
- **Neumorphism**: Soft, extruded plastic look
- **Cyberpunk**: Neon, dark, futuristic
- **Swiss**: Grid-based, typography-focused
- **And many more...**

## Categories

- SaaS & Product
- E-commerce
- Fintech
- Healthcare
- Education
- Creative & Portfolio
- Landing Pages
- Dashboards
- Mobile Apps

## Key Information for AI Agents

- **Format**: Markdown + YAML front matter
- **Token types**: Color (#hex sRGB), Dimension (px/em/rem), Typography (object), Token Reference ({path.to.token})
- **Sections**: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts
- **Validation**: npx @google/design.md lint
- **Export**: Converts to Tailwind theme config and DTCG tokens.json (W3C)
- **License**: CC BY 4.0 (Creative Commons Attribution 4.0)

## FAQ

### What is a DESIGN.md file?

A DESIGN.md is a Markdown file with YAML front matter that defines design tokens, typography, colors, and component patterns for AI coding agents to maintain visual consistency.

### How do I use a DESIGN.md from this library?

Browse the library, choose a style that matches your project, copy the DESIGN.md content, and place it at your project root. Your AI agent reads it before generating any UI component.

### Which AI agents support DESIGN.md?

DESIGN.md works with Claude Code, Cursor, Kiro, Windsurf, Google Stitch, and any AI agent that reads project files from the context window.

## Related Resources

- https://designmd.app/brands — Real brand DESIGN.md files
- https://designmd.app/guides — Setup guides for AI agents
- https://designmd.app/integrations — Integration details
- https://designmd.app/faq — Common questions

---
Source: https://designmd.app/library