Design system extraction · v0.1

Paste a URL.
Get its entire design system.

Colors, type, spacing, borders and motion, read off any live page — drawn as a graph you can explore, and written to a spec file your AI coding tool can build from.

Any public page. Nothing to install.

Design only — never your content Exports to any AI coding tool

Interactive Demo Preview

Explore an example system graph.

Sample interactive visualization built from example design data. Hover and drag nodes to inspect token relationships.

Demo preview · Interactive sample layout…
0 tokens
Color Type Spacing Motion Surface Used throughout Seen once

Why this exists

The site is the first
thing anyone checks.

A token goes live in a day, so the site gets built in an afternoon — and it shows. In a market where everyone is scanning for a reason not to trust you, looking rushed is reason enough.

Most teams don't have a designer, a budget, or the week it would take to fix that. What they usually do have is a site they already admire. This turns that into something they can actually build from.

Built in an afternoon
Built from a design system

How it works

Four steps, start
to shipped site.

01 Paste

Give it a page

Any live URL whose design is worth having — a competitor, a product you admire, anything public.

02 Watch

See it come apart

The page is rendered in a real browser and read: color, type, spacing, borders, shadows, motion. The graph builds as it works.

03 Export

Take the spec

Download DESIGN.md — exact values, component recipes, and plain notes on anything that could only be approximated.

04 Build

Hand it to your agent

Paste it into Claude Code, Cursor, or any AI coding tool with your own content. Same visual language, your project.

Under the hood

A specimen,
dissected.

Nothing here is guessed from a screenshot. The page is rendered, measured, and scored — then explained.

Fig. 1 — Render

Real browser, real page

Headless Chromium via Playwright, with a Firefox fallback for pages behind bot detection.

Fig. 2 — Measure

Computed styles

Color, typography, spacing, borders and shadows read from the DOM after hydration — not from source CSS.

Fig. 3 — Motion

Animation profile

Duration scale, easing curves, and which properties move on hover, per component type.

Fig. 4 — Score

Confidence per token

A value used across forty elements isn't the same as one seen once. Both are kept; only one is trusted.

Fig. 5 — Explain

Reasoning layer

Claude reads the tokens alongside the screenshot and writes why the system holds together — the part a raw JSON dump can't give you.

Fig. 6 — Export

Portable output

DESIGN.md, W3C design tokens, and a brand guide PDF. No lock-in to one editor or one model.

The dashboard

Every scan, kept.

Come back to any page you've taken apart. Read the exact values, compare two sites side by side, export again whenever you need it.

stripe.com (Illustrative Example Mockup)

DESIGN.md Tokens JSON Brand guide Compare

Token graph · Example

color/ink type/body stripe.com space/base motion/ease

Sample token values · 27

color/ink #0A2540
color/primary #635BFF
type/display Sohne 76px
space/base 8px
radius/md 12px
motion/ease 200ms ease-out
confidence

Fig. 7 — Scan detail · graph, values and exports

Open the live dashboard →

Start here

Find a site you
wish were yours.

Take its design apart, keep the system, bring your own content.

No account needed to run a scan or export.

OPHELIA

Palette Design extraction $OPA
Result Dashboard + New scan
Ophelia Palette — v0.1.0 Reads public CSS. Design systems only, never content. Back to top

New Scan

Extract a design system

Paste a public website URL below.

ophelia-palette.com/scan?url=stripe.com

Reading stripe.com

This is its own page — not a section on the landing site. The moment you submit a URL, you land here.

https://stripe.com
● Rendering page…0 tokens

Once this finishes, the browser moves to /scan/[id] — the Result view. The URL changes, so a result can be bookmarked or shared.

This page needs no login. Running a scan and exporting DESIGN.md stay frictionless — only saving to history (Dashboard) asks for an account.

Scan result

stripe.com

Scanned Aug 7, 2026 · 09:00 · ophelia-palette.com/scan/a8f2

27Tokens
6Components
42Edges
GraphInteractive — hover for detail
Token values27 rows
Token Value Used by Confidence
Color
color/ink #0A2540 4
color/primary #635BFF 2
color/paper #FFFFFF 3
color/accent #00D4FF 1
Typography
type/display Söhne 76px 500 1
type/body Söhne 17px 400 3
Spacing
space/1 8px 2
space/2 16px 1
space/5 64px 1
Motion
motion/fast 200ms ease-out 2
DESIGN.md preview 
---
source: https://stripe.com
extracted: 2026-08-07T09:00:00Z
tokens:
  color:
    ink: "#0A2540"
    primary: "#635BFF"
---

# Design System

Extracted from `stripe.com`. Visual language only — no copy, no images, no brand assets.

## Color

- `--ink` `#0A2540` — primary text _(4 components)_
- `--primary` `#635BFF` — interactive _(2 components)_

## Component Recipes

### Button
```css
background: #635BFF;
border-radius: 12px;
transition: 200ms cubic-bezier(.2,.7,.3,1);
/* :hover */
background: #5449E0;
transform: scale(1.02);
```

## Confidence & Detection Notes
`color/accent` — seen on 1 element only, may not be systematic.
Hero uses a canvas gradient — can't be extracted exactly, described instead.
Shown as-is, never hidden

Detection notes

  • Low confidence (1): color/accent appears on 1 element only — may be incidental, not systematic.
  • Described, not extracted (1): the hero uses a canvas-based gradient. There's no DOM to read — the executing AI will recreate it from the description, not an exact value.

Dashboard

Your scan history

Viewing

stripe.com

27Tokens
6Components
GraphSame renderer as Result — not a second design

Compare view

Line up two scans at once — a token that only exists on one side is marked with a dashed poppy outline.

stripe.com · 4 colors
linear.app · 3 colors