50 Top Brand's Design Guide md Files

Every brand you admire, from Apple to Stripe to Nike, is running on a design system. Not a mood board. Not a vibe. An actual, specific set of rules: this exact shade of black, this font at this exact weight, this corner radius, this shadow, and nowhere else. Most of that system is invisible. You can look at a website all day and never quite name why it feels expensive, or why a competitor's site with the same layout feels cheap.

We pulled those rules out of 50 sites by reading their live, computed styles directly, the actual values the browser renders, not a guess based on screenshots. Each brand got turned into two files: a structured design file you can hand to an AI tool, and a rendered HTML page you can open in a browser to see the system in action. This pack is all 50, packaged up and ready to download, spanning tech companies like Anthropic, Notion, and Vercel, fashion houses like Gucci and Off-White, car makers like Tesla, Rivian, and Porsche, and product design darlings like Linear, Raycast, and Superlist.

This tutorial covers what's actually in the pack, how the two file types differ, and three concrete ways to use them so you're not just staring at a folder of files wondering where to start.

One thing worth saying up front: this is not the same as asking an AI tool to "make me a color palette." A generated palette is a guess dressed up as a decision. What's in this pack is the opposite. Every value came from reading the live, computed CSS of a real, shipped, tested product, the same numbers the brand's own engineers put into production. When Nike's button is a 30px pill, that's not an aesthetic opinion, that's the actual radius rendered in a real browser on nike.com. That difference is why these files are useful as inputs, not just inspiration.

What's Actually Inside The Pack

Unzip the pack and you'll see 50 folders, one per brand, each named after the company. Open any folder and you'll find exactly two files:

Nothing here needs installing. You don't need Figma, a build step, or an account anywhere. Every file opens with software you already have: a text editor and a browser. Rename, move, or reorganize the folders however you like, the two files inside stay linked by name only, so nothing breaks if you shuffle them into your own project structure.

Every brand's design file was built the same way: by loading the live site and reading its actual, rendered CSS, the computed values a browser applies after every stylesheet, override, and inherited rule has been resolved. That's a meaningfully different approach from eyeballing a screenshot and guessing at a hex code. A screenshot can lie to you, JPEG compression shifts colors, screen calibration shifts colors, and a guessed value is never going to match a hover state or an active state you didn't happen to capture. Reading computed styles gets the real number every time, which is why you can trust the values enough to actually build with them instead of just admiring them.

Anatomy Of A DESIGN.md File

Each design file has two parts. The top is a YAML block: structured data an AI tool can parse in one pass. The bottom is a written analysis in plain English, explaining the reasoning behind the choices, the kind of thing a senior designer would tell you if you asked them to walk you through a brand's system.

Here's a real excerpt from the top of DESIGN-nike.md:

And here's a line from the written analysis underneath it, describing why that palette works the way it does:

That's the pattern across all 50 files. Structured values first, so an AI tool has exact numbers to work from. Written reasoning second, so you understand the intent, not just the output. Every design file covers the same six categories, in the same order, so once you've read one you can navigate all fifty:

Every category is written the same way for every brand, which means you can drop any DESIGN.md file into your AI tool and it already knows exactly how to read it, no explanation needed.

What The Showcase HTML Is For

The design file tells you the values. The showcase page shows you what they look like together. Open any {brand}-showcase.html file and you'll see the full palette laid out as color swatches, the type scale set at real sizes, buttons in every variant, and sample cards, all built using that brand's actual tokens.

This matters because reading "border-radius: 30px" in a text file tells you nothing. Seeing that same 30px radius on an actual pill button next to Nike's black-on-white palette tells you everything. The showcase page is your gut check. If a brand's system looks right for your project, you'll know in about four seconds of scrolling.

Every showcase page follows the same layout, so once you've scrolled through one, you know your way around all fifty. It opens with a title card summarizing the system in a sentence, then moves through a color palette grid, a full type scale from display headline down to caption, buttons in every state, then sample cards and inputs built from the same tokens. It's essentially a small, self-generated brand book for a company that never published one.

Three Ways To Actually Use These Files

1. Hand the design file straight to your AI tool

This is the main event. Open a DESIGN.md file, copy the whole thing, and paste it into Claude, ChatGPT, or Cursor along with what you're building. The AI now has exact hex codes, font sizes, spacing values, and component rules to work from instead of guessing. You'll get a result that actually holds together, instead of the generic rounded-card-with-drop-shadow look every AI tool defaults to when you don't give it constraints. Here's a prompt you can copy and adapt right now:

2. Steal specific tokens for a project you're already working on

You don't have to use a whole system. If you like Stripe's shadow style or Linear's spacing scale, just copy those values out of the file and drop them into your own CSS or Figma variables. The YAML block is organized by category specifically so you can grab one section, say, just the elevation values, without reading the rest.

3. Use it as a mood board before you design anything

"Make it look clean and modern" is not a brief. "Make it look like the Aesop system: warm neutrals, generous whitespace, serif headlines" is a brief. Flip through a few showcase pages before you start a project and pick the one closest to what's in your head. It turns a vague feeling into a specific, referenceable direction, for you and for any AI tool you bring in.

4. Compare two systems side by side to sharpen a decision

If you're stuck between two directions, like "playful" versus "premium", open the showcase pages for a brand on each side, say Duolingo and Leica, next to each other. Seeing two fully realized systems side by side makes the tradeoff concrete. You're no longer choosing between two adjectives, you're choosing between two rooms you can actually stand in.

Common Questions

Do I need to know how to code?

No. The DESIGN.md files are plain English plus simple structured data, readable by anyone. If you're pasting them into an AI tool and asking it to build something, the AI handles the code. You only need to know how to open a text file and copy its contents.

Can I use these on client work?

Use them to study patterns and to give your AI tools sharper direction, not to hand a client a carbon copy of a competitor's brand identity. A system like Nike's black pill button is recognizably Nike. Learn from how it's built, then build something that's recognizably yours.

What about fonts I don't have a license for?

Several brands here run proprietary or licensed fonts, Helvetica Now Text on Nike, for example. Where that happens, the design file says so and names the closest free alternative it substituted in the showcase page, usually something from Google Fonts. You'll always know exactly which font is real and which is a stand-in.

Will these files get updated as brands redesign?

Brands redesign their sites more often than most people realize. Treat this pack as a snapshot of each system as it existed when it was captured, not a live feed. It's still accurate enough to build with today, and the patterns you learn from it, how a brand balances whitespace or restrains its palette, don't expire even if a hex code eventually does.

Which file should I open first if I only have five minutes?

Skip straight to the gallery below, find two or three brands whose look catches your eye, and open just their showcase.html files. That's the fastest way to get a feel for what's in the pack. Once something clicks, go back for the matching DESIGN.md and start using it. You don't need to read all fifty analyses to get value out of this pack, you need one that fits what you're building right now.

How To Get Started

1. Click Download All near the top of this page. It's one zip file, built into this article, so there's nothing to sign up for or click through.
2. Unzip the pack. You'll get 50 folders, one per brand, sorted alphabetically.
3. Pick a brand whose look matches what you're building. Scroll the gallery below for a preview of all 50, or just open a few showcase.html files directly.
4. Open the DESIGN.md file in any text editor, or paste its full contents into your AI tool of choice.
5. Open the matching showcase.html file in your browser to confirm it looks the way you expect before you build anything with it.

All 50 Design Systems In The Pack

Every brand included, with a preview pulled directly from its showcase.html file. Full design breakdowns and rendered pages for all 50 are in the download above.

What To Do Next

Don't try to absorb all 50 systems at once. Pick three brands whose look you actually like, ideally ones that feel different from each other, like one minimal, one bold, one playful. Open each showcase.html, then open each DESIGN.md. Paste one into your AI tool right now and ask it to redesign something you're already working on using that system.

You'll see the difference immediately. Constraints make AI tools better, not worse. The more specific the input, the less generic the output. That's really the whole point of this pack: giving your AI tools something exact to work from instead of a vague adjective.

And if none of the 50 feel quite right, that's useful information too. Note what's missing, maybe you wanted something warmer, or more colorful, or with heavier typography, and use that gap to brief your AI tool even more precisely. The goal was never to hand you a finished answer. It's to hand you 50 real, working answers so you can see exactly what a decision looks like before you make your own.

Save the pack somewhere you'll actually find it again. This isn't a one-time read, it's a reference you'll want open the next time an AI tool gives you something bland and you need a fast, concrete way to tell it what "better" actually looks like.