Beatrix Canvas

Open source · Design extraction

The palette
that grows
with you

Extract any public page

Any public page. Nothing to install.

Beatrix, a hooded watercolor portrait

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

Native read

Beatrix reads any public page

stripe.com (Illustrative Example Mockup)

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

Scan detail · graph, values and exports

Open the live dashboard →

#1 Extract

Paste any page

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

#2 Measure

Real browser, real page

Headless Chromium reads computed styles after hydration — color, type, spacing, motion. Not a screenshot guess.

#3 Graph

See the system

Tokens drawn as a graph you can explore. A value used across forty elements is not the same as one seen once.

#4 Remember

Every scan, kept

Come back to any page you have taken apart. Compare two sites. Export again whenever you need it.

#5 Explain

Why it holds

Beatrix reads the tokens alongside the screenshot and writes why the system holds together — the part a JSON dump cannot give you.

#6 Export

Hand it to your agent

DESIGN.md, W3C tokens, and a prompt. Paste into Cursor, Claude Code, or any tool with your own content.

Beatrix

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.

Beatrix Canvas v1.0.0

Beatrix

Design Extraction Agent

MIT License · 2026

New Scan

Extract a design system

Paste a public website URL below.

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

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