# Real Brands — Brand DESIGN.md files for AI Agents

> Real brands. We extracted the public CSS and turned it into DESIGN.md.

## What are Real Brands?

Real Brands are DESIGN.md files reverse-engineered from the public CSS of well-known companies. We analyzed the actual stylesheets that browsers download when you visit sites like nubank.com.br, ifood.com.br, stripe.com, and apple.com — then converted the visual patterns into structured DESIGN.md files.

## How to Use

1. **Copy the file** — Pick a brand. Download its DESIGN.md. Drop it in your project root.
2. **Prompt your agent** — Tell Claude Code, Cursor, or any AI agent to build a component. It reads the DESIGN.md and applies the brand's colors, spacing, typography, and radii automatically.
3. **Ship with brand fidelity** — Your agent outputs UI that matches the brand's visual language.

## Brands Available

- **Nubank** — Brazilian fintech, purple (#820AD1)
- **iFood** — Brazilian food delivery, red
- **Itaú** — Brazilian bank, orange
- **Stripe** — Global payments, purple/blue
- **Apple** — Tech giant, minimalist
- **Santander** — Global bank, red
- **And many more...**

## FAQ

### What is a brand DESIGN.md?

A structured markdown file that describes a brand's visual system — colors, typography, spacing, radii, shadows — in a format AI agents can read. Think of it as a design token file, but written for LLMs instead of build tools. The agent reads it and generates UI that looks like the brand built it.

### Can I use Stripe's DESIGN.md in my project?

Yes, for prototyping and reference. The DESIGN.md captures visual patterns extracted from public CSS — not proprietary assets. Use it to study how Stripe structures spacing and color, or to prototype with a polished look before defining your own system. Don't ship it as your brand identity.

### Do Brazilian brands have official DESIGN.md files?

No. We extracted these from public CSS — the same stylesheets your browser downloads when you visit nubank.com.br or ifood.com.br. The tokens are real (we pulled actual hex values, font stacks, spacing scales), but the files aren't endorsed by the brands. They're community-built references.

### What's the difference between Library and Real Brands?

Library files are design systems built from scratch for AI agents — opinionated, ready to ship as your product's visual identity. Real Brands are reverse-engineered from existing companies. Use Library when you're starting fresh. Use Real Brands when you need a reference, a prototype skin, or want to study how a top-tier brand structures its tokens.

## Disclaimer

These DESIGN.md files are community-built references extracted from publicly available CSS. They are not official design system documents and are not endorsed by the respective brands. Use them for learning, prototyping, and reference purposes.

## Related Resources

- https://designmd.app/library — 759+ design systems built from scratch
- https://designmd.app/guides — Setup guides for AI agents
- https://designmd.app/faq — Common questions

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