style.mdby SuperMD

// style.md

Copy any website's design system.

Paste a URL. Get a style.mdwith the exact colors, fonts, spacing, radii, and shadows — extracted directly from the site's CSS. Drop it into your AI to recreate the design precisely.

Publicly accessible URLs only. Fetches linked CSS stylesheets and inline styles server-side.

// what gets extracted

CSS custom properties
Google Fonts
Color palette
Font families
Border radius scale
Box shadows
Font size scale
Body base styles

style.md output appears here

// what is style.md

Give your AI the real design tokens.

Telling an LLM “match the Linear design” means nothing — it will guess. A style.md gives it the actual hex values, the exact font stack, the specific border radius scale, and the real shadow definitions extracted directly from the site's CSS.

Drop it into your context before asking your AI to build UI components and it will match the design precisely — no guessing, no approximation.

linear-style.md
# Design System — Linear (linear.app)

> Source: https://linear.app

## Typography
**Google Fonts**: Inter

## Colors
**CSS Color Variables**
```css
--color-background: #ffffff;
--color-text: #1a1a1a;
--color-primary: #5E6AD2;
--color-gray-100: #F5F5F5;
```

## Border Radius
**Values Found**: `4px` · `6px` · `8px` · `12px`

## Shadows
- `0 1px 2px rgba(0,0,0,0.06)`
- `0 4px 8px rgba(0,0,0,0.08)`

// use cases

When do you use style.md?

Clone a reference design

Design copy

Found a site with design you love? Extract its style.md and drop it into your AI. It will replicate the exact colors, fonts, and spacing — not a rough approximation.

Reverse-engineer a design system

Audit

Use style.md to document what a site actually uses — CSS variables, font stacks, color palettes. Useful for audit, migration, or rebuilding a design system from scratch.

Brief an AI on a brand

Branding

Working on a project that needs to match a client's existing site? Extract style.md once and reference it in every prompt — consistent design, zero guessing.

Build component libraries

UI library

Starting a UI library that matches a specific design? Feed style.md to your AI before it writes a single component — the tokens are already correct from line one.

// faq

Frequently asked questions

Does this work on any website?

It works on any publicly accessible website that uses external CSS stylesheets or inline styles. Sites using CSS-in-JS or Tailwind utility classes may yield fewer CSS variables but still expose font families, Google Fonts, and raw color values.

What about sites behind authentication?

style.md fetches the page server-side without any session cookies, so authenticated pages won't return full styles. For private sites, use browser DevTools to inspect computed styles or copy the CSS source manually.

How exact is the extraction?

CSS custom properties (design tokens like --color-primary, --font-sans, --radius-md) are extracted verbatim — these are exact values. Raw color extraction uses frequency analysis on the full CSS, which is accurate for design systems but may include noise on Tailwind-heavy sites.

What's the difference between style.md and design.md?

design.md is a feature design document for briefing an LLM before implementation — it captures problem, solution, decisions. style.md is a visual design token file extracted from a live site — it captures colors, fonts, spacing, and shadows for UI replication.