Guide

No designer? Borrow a proven design system for your app

You know good design when you see it, but you can't produce it from scratch. You don't have to. Pick a product you admire, take its design system as a DESIGN.md, change the parts that make it theirs, and your coding agent has a proven system to build your app with.

Proven means tested on real users: type that reads well, spacing that breathes, buttons that look like buttons. You keep that, and swap in your own identity.

Written for solo founders and small teams. Updated .

What you'll get

  • A short list of what makes a good reference site, so you pick one that fits your product.
  • A DESIGN.md you can drop into your repo as your starting design system.
  • A clear split between what to keep (type scale, spacing, radii, component shapes) and what to change (brand color, logo, fonts, voice).
  • A prompt that makes the swap for you, and a check that the result still reads well.

How to pick a reference site

The site you borrow from decides most of how your app will feel, so spend ten minutes here. A good reference has these traits:

  • The same kind of product. A dashboard borrows well from another dashboard, not from a fashion store.
  • A similar density. If your app is forms and tables, pick a site with forms and tables, not a single big hero.
  • One clear action color. When a single color marks what to click, rebranding means swapping that one color family.
  • Type you can read. Open the site on your phone and read a paragraph. If it is comfortable, the type scale is worth taking.
  • Light or dark, the way you want it. Turning a dark-first system into a light one is a redesign, not a tweak.
  • A look that is not the brand itself. If you would recognize the site from its color alone, you would have to change too much of it.

The DESIGN.md gallery can be filtered by category, which makes it quick to compare a few candidates.

Steps

  1. Shortlist two or three sites

    Use the traits above. Screenshots of the screens you like help you decide later.

  2. Get the DESIGN.md of your favorite

    Copy it from its gallery page, or paste the URL on the Design Extractor home page and run a Pro extraction. Pro samples the site's key pages and returns one file with colors, typography, spacing, radii and component recipes. New to the format? Read what a DESIGN.md is.

  3. Make it yours

    Change the brand color family, the fonts if they are commercial, the name and the voice. The prompt below does it in one go.

  4. Put it in your repo and point your agent to it

    Save it as DESIGN.md in the repository root. The Claude Code and Cursor guide has the pointer to add.

  5. Check it

    Paste the edited file into the free DESIGN.md Validator. It checks the structure and flags text colors with too little contrast.

Worked example: Notion

Say you like how Notion feels. Here is its design system as the gallery DESIGN.md records it, and what you would keep and change.

Colors

Typography

hero-displayDesign is intelligence made visibleNotion Inter96px / 600 / 1.05
display-lgDesign is intelligence made visibleNotion Inter72px / 500 / 1.2
display-mdDesign is intelligence made visibleNotion Inter54px / 700 / 1.05
display-smDesign is intelligence made visibleNotion Inter40px / 400 / 1.5
title-lgDesign is intelligence made visibleNotion Inter24px / 500 / 0.85
title-mdDesign is intelligence made visibleNotion Inter22px / 700 / 1.25

Shapes

xs · 4px
sm · 8px
md · 12px
full · 9999px

Notion's first 12 colors, 6 type styles and 4 radii, rendered from its DESIGN.md. Click a swatch to copy the hex value.

What to keep and what to change

Part of the fileIn Notion's DESIGN.mdWhat to do
Type scalehero-display, 96px, weight 600 down to body, 16px, weight 400Keep
Radiixs 4px, sm 8px, md 12px, full 9999pxKeep
Neutralssurface #FFFFFF, ink #000000Keep
Component shapes14 component recipes with sizes, padding, borders and statesKeep
Brand colorprimary #0075DE, primary-focus #0075DE, primary-link #097FE8, primary-pressed #005BAB, primary-tint #E6F3FEChange to your color and its shades
FontsNotion Inter, Lyon TextKeep only if free to use, otherwise use a stand-in
Namename: NotionChange to your product's name
VoiceThe Overview describes their personalityRewrite it in a sentence or two about yours
Logo and imageryNot in the fileBring your own logo, icons and illustrations
Not sure about the fonts? Notion's DESIGN.md answers it in its Typography section, word for word:
### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

Extracted from Notion's public website, not official brand guidelines. Read the full Notion DESIGN.md

Make it yours with one prompt

Your coding agent can do the edit. Open the repo with DESIGN.md in it and paste a prompt like this, with your own name, color and sentence in place of Acme's. It was written for this guide with Notion's real token names.

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

Then read the diff. Hex values change in two places: the colors tokens at the top, and the CSS of each component recipe further down. Both have to move together, or buttons keep the old color.

Why not to copy a brand wholesale

A borrowed system is a starting point, not a disguise. Shipping someone else's look unchanged hurts you more than it helps:

  • People notice. An app that looks like a famous product with a different name reads as a copy, and that costs trust.
  • The identity is not yours to take. Logos, product names, signature colors, illustrations and copy belong to the brand. Spacing, type sizes and radii are the shared craft you can learn from.
  • Fonts come with licenses. A commercial font on their site does not come with a license for yours.
  • You will want to grow it. Once the colors and voice are yours, adding screens feels like building your product, not someone else's.

The rule of thumb: keep the structure, change the identity. At minimum swap the brand color, the logo, any commercial font and the voice. Gallery files are extracted from each brand's public website, not official brand guidelines, and the same goes for anything you extract.

FAQ

Borrow a design system without a designer: questions

Short answers to what people ask before they try this.

Using a site's spacing, type sizes and corner radii as a starting point is how most interfaces are made. Copying its identity is not okay: its logo, name, signature brand color, illustrations or copy. Change those, and use a commercial font only if you license it. Gallery files are extracted from public websites, not official brand guidelines.

Many brands use commercial or custom fonts. The DESIGN.md names each family in its typography tokens, and its Typography section usually suggests an open-source stand-in with notes on tracking and weights. Use the stand-in, or pick a free font with similar proportions.

Reading and copying a file from the gallery costs nothing. Extracting a site you choose uses prepaid credits: a Pro extraction costs 10 credits and packs start at $5 for 50 credits. Credits never expire and there is no subscription.

No. It is a text file: colors are hex values, fonts are names, sizes are pixels. Change the values, or ask your coding agent to make the change for you, then check the result with the free DESIGN.md Validator, which also flags text colors with too little contrast.

Found a site you admire?

Paste its URL and get its design system as a DESIGN.md, ready to make your own.

Get a DESIGN.md from any website

Related guides

See all DESIGN.md guides