Emerging SEO Collection
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.
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.
Use these facet pages to narrow DESIGN.md examples by the part of the system you actually want to study.
27 examples
Examples where type scale, display choices, and reading hierarchy are described clearly enough to guide implementation.
27 examples
Collections focused on palette logic, semantic tokens, contrast handling, and accent usage.
27 examples
Examples that document reusable components, states, variants, and interaction expectations.
27 examples
Examples that describe spacing, grid, rhythm, hierarchy, and structural decision-making.
Design Analysis
--- version: alpha name: Black Signal Marketing System description: A high-contrast dark product marketing language for technical AI and analytics products. colors: primary: " 23FFBD" secondary: " 333333" tertiary: " 935... --- version: alpha name: Storybook L...
Profound
Home
--- version: alpha name: Black Signal Marketing System description: A high-contrast dark product marketing language for technical AI and analytics products. colors: primary: " 23FFBD" secondary: " 333333" tertiary: " 935...
SuperrBook
Home
--- version: alpha name: Storybook Learning Notebook description: A warm storybook learning-product language with ivory paper, chocolate serif typography, hand-drawn orange annotations, illustrated notebook scenes, meado...
Open exampleLlamaIndex
Home
--- version: alpha name: Gradient Document Stack description: A stark white document-intelligence language with hard black CTAs, square navigation, big grotesk headlines, gradient document-stack illustrations, dotted col...
Open exampleDESIGN.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.
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.
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.
