Guide

Blend two reference sites into one design for a prototype

“Make it feel like Notion meets Stripe.” Clients brief prototypes like this all the time. With a DESIGN.md for each site you can turn that sentence into one concrete spec: compare the tokens side by side, decide which file leads, and merge.

Design Extractor gives you the two files. The merge is yours to make, by hand or with your coding agent, and this guide shows both.

Written for designers and agencies prototyping. Updated .

What you'll get

  • Two DESIGN.md files compared token by token, so the differences are concrete.
  • A merge plan: one file as the base, named token groups from the other.
  • The merged DESIGN.md, made by hand or by your agent with the prompt below.
  • A contrast check, so the blend still reads well.

How blending works

A blend is not an average. Mixing half of one palette with half of another gives you a site that looks like neither. What works is one base file plus a few named parts from the other:

  • The base gives the structure: type scale, spacing, radii and component recipes.
  • The accent lends whole groups, such as its primary color family or its display font, never single stray values.

Both files follow Google's DESIGN.md specification, so the groups line up: colors, typography, rounded, spacing and components. See what a DESIGN.md contains for the full structure.

Steps

  1. Get both files

    Copy them from the gallery if they are there, or paste each URL on the Design Extractor home page and run a Pro extraction for each.

  2. Put them side by side

    Compare primary colors, backgrounds, fonts, type sizes and radii, as in the table below.

  3. Pick the base

    Choose the site whose layout and density match the prototype.

  4. Name what the accent lends

    Write it down as token groups, such as “its primary color family”.

  5. Merge by hand or with your agent

    Both ways are below. Save the result as DESIGN.md in the prototype repo.

  6. Check contrast and structure

    Paste the merged file into the free DESIGN.md Validator.

Worked example: Notion meets Stripe

Two real files from the gallery: Notion's DESIGN.md and Stripe's DESIGN.md. Both were extracted from the brands' public websites and are not official brand guidelines.

NotionStripe
Primary#0075DE#533AFD
Background#FFFFFF#FFFFFF
Text#000000#061B31
FontsNotion Inter, Lyon TextSohne
Largest typehero-display, 96px, weight 600hero-display, 56px, weight 500
Body typebody, 16px, weight 400body-lg, 18px, weight 300
Button radius8px4px
Color tokens2021
Component recipes1471

One way to blend them

Take Notion as the base for its type, spacing, radii and components, and let Stripe lend its primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft). That is the classic “our layout, their energy” brief.

Check the numbers before you commit to it. Stripe's primary on Notion's background has a contrast of 6.1:1. Notion's on-primary text on the new primary reaches 6.1:1. Body text needs at least 4.5:1 under WCAG AA; large text and icons need 3:1.

One trap: Notion's own primary, #0075DE, appears 65 times in its file, mostly inside component recipes. Replacing the token at the top is not enough; every copy has to change.

Illustration of the hand merge described above, assembled by this page from the two gallery files: Notion's tokens with Stripe's primary family, abridged. It is not a Design Extractor feature and not agent output.
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

Merge by hand

  1. Copy the base file to DESIGN.md and change its name.
  2. In colors, replace the base's primary family with the accent's values.
  3. Search the whole file for each old hex value and replace it. Component recipes repeat the colors in their CSS, so the token list alone is not enough.
  4. Rewrite the Overview and Colors prose so they describe the blend, not either brand.
  5. Check the file in the validator and fix any contrast warnings.

Merge with your agent

Save both files in the prototype repo, for example under design/, and give your agent a prompt that names the base, the groups to take and the checks to run. This one was written for this guide with the real file and token names.

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

Review what comes back like any other change: read the diff, then paste the file into the validator. The agent does the typing; the decisions in the prompt are still yours.

FAQ

Blend two website designs into one: questions

Short answers to what people ask before they try this.

No, there is no merge feature. Each extraction returns the DESIGN.md of one site. You merge two files by hand, or you ask your coding agent to do it with a prompt like the one in this guide, and then review the result.

Two, sometimes three. One file is the base and gives the structure: type scale, spacing, radii and components. The others lend a named part, such as a color family or a display font. Mixing values from more files makes the result look patched together.

The one whose layout and density match the prototype. If the client wants a calm document-like product with one site's colors, the calm site is the base and the other lends its colors, not the other way round.

Paste the merged file into the free DESIGN.md Validator. It checks the structure and flags text colors with too little contrast. Then build one real screen with it before you show the client.

Get the two files for your brief

Paste each reference site's URL and get its DESIGN.md, ready to compare and merge.

Get a DESIGN.md from any website

Related guides

See all DESIGN.md guides