DESIGN.md generator: turn any website into a DESIGN.md

A DESIGN.md is a plain-text style brief that AI coding tools read before they build a screen. Stylasso writes one from any website you open: the colors it really paints, its type levels, radii, spacing and button styles, in the open DESIGN.md format from Google Labs.

What a DESIGN.md is

DESIGN.md is an open format published by Google Labs (google-labs-code/design.md). The top of the file is YAML front matter with the normative tokens: colors, typography, rounded, spacing and components. Below it come eight sections in a fixed order, from Overview to Do's and Don'ts, that explain how the tokens are meant to be used. An AI agent that reads the file gets exact values instead of guessing from a screenshot or a site name.

Why it works better than "make it look like this site"

Ask Cursor, Claude Code, v0 or Lovable for a page "in the style of" a site and they work from memory: the palette is roughly right, the type and the buttons are generic. With a DESIGN.md in the project they can use the real hex values, the type scale with its weights and tracking, the button radius and padding, and a one-line description of the site's character (for example "light, airy headlines, softly rounded buttons, flat surfaces separated by borders").

How to make one with Stylasso

Install Stylasso for Chrome or Edge.
Open the website whose style you want to follow and click the Stylasso icon.
Pick DESIGN.md in the export bar and press Copy DESIGN.md, or download the file.
Put DESIGN.md in your project root and ask your tool: Build a pricing page that follows @DESIGN.md.

Stylasso samples the page as your browser renders it, so roles come from what is really painted: the color of the main buttons becomes primary, the most used body color becomes on-surface, and so on. Commercial fonts get a note with the closest free Google font, because your project probably has no license for the original.

A real example

This is the complete file Stylasso wrote for Northwind Roasters, a fictional coffee shop we built for demos. The official linter (npx @google/design.md lint) reports 0 errors and 0 warnings: 7 colors, 6 type levels, 5 radii, 13 spacing steps and 7 components.

---
version: alpha
name: "Northwind Roasters"
description: "Visual style of https://northwind-roasters.test/, extracted 2026-11-07."
colors:
  primary: "#c2410c"
  secondary: "#4d7c5a"
  neutral: "#fffaf3"
  surface: "#f6eadb"
  on-surface: "#2b1d14"
  on-surface-variant: "#7a6656"
  outline: "#ead8c3"
typography:
  headline-display:
    fontFamily: "Fraunces"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -1.28px
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.4px
  body-lg:
    fontFamily: "Fraunces"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "Hanken Grotesk"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
  button-label:
    fontFamily: "Hanken Grotesk"
    fontSize: 17px
    fontWeight: 600
rounded:
  md: 6px
  lg: 10px
  r16: 16px
  r18: 18px
  full: 9999px
spacing:
  base: 4px
  s4: 4px
  s6: 6px
  s11: 11px
  s12: 12px
  s16: 16px
  s18: 18px
  s20: 20px
  s24: 24px
  s28: 28px
  s32: 32px
  s56: 56px
  s72: 72px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.button-label}"
    rounded: "{rounded.lg}"
    padding: "11px 20px"
  button-secondary:
    backgroundColor: "#4d7c5a"
    textColor: "#ffffff"
    typography: "{typography.button-label}"
    padding: "11px 20px"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "#ffffff"
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  caption:
    textColor: "{colors.on-surface-variant}"
  divider:
    backgroundColor: "{colors.outline}"
---
# Northwind Roasters

## Overview

Visual style extracted from https://northwind-roasters.test/ on 2026-11-07 by sampling the rendered page. It is a light interface with #c2410c as the brand color, set in Fraunces.

Character: medium-weight headlines, tight letter-spacing on large type, softly rounded buttons, soft shadows for depth.

## Colors

- **primary (#c2410c):** Brand color for main buttons, links and active states.
- **secondary (#4d7c5a):** Second brand color for highlights and badges.
- **neutral (#fffaf3):** Page background.
- **surface (#f6eadb):** Cards, panels and sections.
- **on-surface (#2b1d14):** Body text and headings.
- **on-surface-variant (#7a6656):** Secondary text and captions.
- **outline (#ead8c3):** Borders and dividers.

Other colors on the page, by painted area: #f59e0b (2.9%), #9a3412 (0.8%).

Body text on the background has a contrast of 15.6:1. The brand color has 4.9:1 against the background.

## Typography

- **heading:** Fraunces (Google Fonts, weights 600). CSS stack: `Fraunces, ui-sans-serif, system-ui, sans-serif`. Load it from Google Fonts as Fraunces.
- **body:** Hanken Grotesk (Google Fonts, weights 400, 500, 600). CSS stack: `"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif`. Load it from Google Fonts as Hanken Grotesk.
- **mono:** JetBrains Mono (Google Fonts, weights 400). CSS stack: `"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace`. Load it from Google Fonts as JetBrains Mono.

The base size is 17px and the scale grows by about 1.556 per step.

## Layout

Spacing follows a 4px grid; the common steps are 4px, 6px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 56px, 72px.

## Elevation & Depth

Shadows in use, smallest first: `rgba(43, 29, 20, 0.12) 0px 1px 2px 0px`; `rgba(43, 29, 20, 0.08) 0px 1px 3px 0px`; `rgba(43, 29, 20, 0.35) 0px 24px 48px -16px`.

Gradients used for hero and feature backgrounds: `linear-gradient(135deg, rgb(194, 65, 12), rgb(245, 158, 11))`.

## Shapes

Corner radii: md 6px, lg 10px, r16 16px, r18 18px, full 9999px.

## Components

Primary buttons use #c2410c with #ffffff text, 49px tall, padded 11px 20px, bold 17px text, radius 10px, with a shadow. Secondary buttons on the first screen are #4d7c5a with #ffffff text, 49px tall, padded 11px 20px, bold 17px text, radius 10px, with a shadow.

## Do's and Don'ts

- Do use only the tokens above; do not invent new colors, sizes or radii.
- Do reserve the primary color for the main action on a screen.
- Do keep body text at or above the contrast stated in Colors.
- Don't copy the source site's logos, images, illustrations or text.

What Stylasso puts in the file

Colors with roles: primary, secondary (accent), neutral (background), surface, on-surface (text), on-surface-variant (muted) and outline (border), each with its contrast against the background.
Typography: headline, body and label levels with family, size, weight, line height and letter spacing, plus the CSS font stack.
Shapes and spacing: corner radii named on the Tailwind scale and the spacing grid.
Components: primary and secondary buttons as drawn on the page (height, padding, radius, weight, text case), cards, badges, captions, dividers.
Guidance: gradients used for hero backgrounds, shadows, "build every screen dark" for dark sites, and a reminder not to copy logos, images or text.

Questions

Is the DESIGN.md format stable?

The spec is labeled alpha. Stylasso tracks it and checks its output with the official linter in its test suite.

Is it free?

Yes. DESIGN.md, CSS variables, Tailwind v4 and JSON exports are free with no daily limit. Pro ($9.99 once) adds a shadcn/ui theme, Figma tokens, an SVG ZIP and 100 saved kits.

Does it copy the website?

No. It records style values (colors, sizes, spacing, radii) and names fonts. It never exports page text, images or logos, and the file tells your AI tool not to copy them either.