ricocc/brands-design-md

Documentation: English · 中文

Quick links: Preview examples · How to use · What is DESIGN.md? · Directory structure · Included brands · Sources

An open-source collection of brand design references, including DESIGN.md files, interactive previews, and website screenshots.

The library is built for designers, frontend developers, and anyone using AI-assisted design or coding tools. Use it to quickly understand a brand’s color palette, typography, spacing, component patterns, and overall visual character before designing or building an interface.

The composite below highlights three examples from the collection. Use the links beneath it to open each brand’s preview.html—a browser-based overview of its design tokens, typography, colors, components, and visual direction.

1. Choose a brand directory under brands/.
2. Start with the screenshot and preview.html to get a quick feel for the brand.
3. Read DESIGN.md for a structured breakdown of its colors, typography, spacing, components, and layout rhythm.
4. When you are ready to build, use tokens.json, variables.css, and theme.css as implementation references.

DESIGN.md is a portable design brief written in Markdown. It captures the visual language of a brand or product in a structured format that works equally well as human-readable documentation and context for AI design or coding tools.

A typical DESIGN.md includes:

• The brand’s overall visual direction, tone, and character
• Colors, font families, font sizes, line heights, and letter spacing
• Spacing, corner radii, grids, and content-width rules
• Visual descriptions of common components such as buttons, cards, navigation, and forms
• Practical guidance on what to preserve—and what to avoid

DESIGN.md is not an official brand guideline or a substitute for the source website. Think of it as a practical starting point: detailed enough to guide design and implementation, but compact enough to reuse across tools and workflows.

Each brand lives in its own directory:

brands/
└── <brand>/
    ├── DESIGN.md             # Brand design reference
    ├── preview.html          # Browser-ready visual preview
    ├── cover_<domain>.webp   # Screenshot cover of the brand website
    ├── favicon.*             # Website icon, where available
    ├── tokens.json           # Structured design tokens
    ├── variables.css         # CSS custom properties
    └── theme.css             # Reusable theme styles

registry.json                 # Brand index and metadata

Some brands may not include every optional asset listed above. Check the individual brand directory for what is available.

The repository currently includes 69 brands. Choose Open preview to explore a brand’s visual reference in your browser.

Each brand can include two visual companions to the written documentation:

• preview.html turns the documented design rules into a browsable reference page, making the palette, type hierarchy, components, and overall direction easier to understand at a glance.
• cover_<domain>.webp is a screenshot of the source website. It makes brands easier to identify and provides a visual point of comparison for the documentation and preview.

Together, they make the collection faster to scan and compare, so you can decide whether a visual direction fits your project before reading the full document.

I created and curated the design documents, preview pages, screenshots, and supporting files in this repository, then reviewed them against each brand’s public-facing design language.

The research and documentation process also draws on public design references, including:

• getdesign.md
• Refero Styles

Each brand’s public website remains the primary reference for its current visual identity. This repository is an independent, unofficial resource based on publicly available material; it is not affiliated with, authorized by, or endorsed by any of the featured brands.

Brand names, trademarks, and related visual assets belong to their respective owners. This repository is provided for learning, research, and design reference only. Inclusion does not imply authorization, partnership, affiliation, or endorsement.