Payy
Home
--- version: "alpha" name: "Acid Privacy Ledger" description: "A privacy-finance marketing system built from warm paper space, deep navy product surfaces, acid-lime action signals, and large editorial serif headlines." c...
Open exampleEmerging SEO Collection
DESIGN.md Examples
Browse real website references with visible design analysis or structured design values. This collection is built for teams studying how AI-readable design systems describe palette, typography, layout, motion, and reusable component decisions.
140 tracked examplesShowing latest 2424 example scan size
What You Can Study
Compare how different teams encode brand tone, color systems, typography stacks, spacing logic, and component behavior in a format AI tools can reuse.
What To Compare
Look at system naming, token specificity, layout principles, interaction language, and whether the design description is clear enough to guide consistent implementation.
Why This Matters
DESIGN.md is becoming a practical way to turn visual direction into durable working context for AI coding agents instead of one-off UI prompts.
Browse By System Focus
Use these facet pages to narrow DESIGN.md examples by the part of the system you actually want to study.
Typography Systems
140 examples
Examples where type scale, display choices, and reading hierarchy are described clearly enough to guide implementation.
Color Systems
140 examples
Collections focused on palette logic, semantic tokens, contrast handling, and accent usage.
Component Rules
140 examples
Examples that document reusable components, states, variants, and interaction expectations.
Layout Principles
137 examples
Examples that describe spacing, grid, rhythm, hierarchy, and structural decision-making.
Design Analysis
Common signals across DESIGN.md-ready examples
--- version: "alpha" name: "Acid Privacy Ledger" description: "A privacy-finance marketing system built from warm paper space, deep navy product surfaces, acid-lime action signals, and large editorial serif headlines." c... --- version: "alpha" name: "Signal A...
Reusable Design Signals
- Primary ( 2A292B): Headline ink and core interface text.
- Secondary ( EFE5DA): Navigation shell and grouped support surfaces.
- Tertiary ( FF5C00): CTA fill and flavor label signal.
- Let the display face do the personality work through compression and scale.
- Keep body copy straightforward and readable to anchor the joke.
- Avoid mixing in extra decorative type families.
System Keywords
OverviewImage DirectionColorsTypographyAvoid mixing in extra decorative type familiesUse one modern sans family with controlled weightPrimary ( 000000): Main text and iconographyUse one sans family throughout
2026-02-10
OneTech
Home
--- version: "alpha" name: "Signal Amber Industrial Systems" description: "An industrial product-marketing system built from matte black staging, amber signal color, compact boxed navigation, and large technical object r...
Open exampleAddverb.ai
Home
--- version: "alpha" name: "Midnight Robotics Stage" description: "A robotics marketing system built from black stage space, hard white type, saturated red machine accents, and glossy product-render hero compositions." c...
Open example
Explore Adjacent AI Workflow Collections
These pages narrow DESIGN.md research into more specific intent clusters such as AI design systems, Figma AI workflows, and Claude Design-style prototyping.
AI Design System Examples
DESIGN.md-style references, token-driven systems, and tools for AI-readable design workflows.
Figma AI References
References for Figma AI, Figma Make, MCP-assisted design workflows, and editable UI generation.
Claude Design References
Useful references for teams exploring Claude Design, AI prototyping, and brand-consistent visual workflows.
DESIGN.md FAQ
What is DESIGN.md?
DESIGN.md is an AI-readable design system document. It typically describes visual direction, tokens, component rules, layout principles, and constraints in plain text or structured data.
How should I use these examples?
Use them to compare how strong teams describe design intent, capture repeatable rules, and make visual systems easier to implement consistently across pages and components.
Are these examples tied to real websites?
Yes. Refto ties the design layer back to real website versions, which gives you stronger reference context than a standalone design file without production output.