design.md

The design system
behind getdesign.

A living design.md, rendered. Every swatch copies its CSS variable. Every component is the real component. If you'd like this for your site, that's the whole product.

02

Palette

03

Typography

.display-hero
clamp(36px, 6vw, 64px) / 1.04 / -0.035em / 500
The design system for any URL.
.display-md
clamp(22px, 2.8vw, 32px) / 1.15 / -0.025em / 500
Five surfaces, one agent.
body
14.5px / 1.6 / -0.005em / 400

getdesign opens a site in a real browser, extracts palette, typography, and components, and returns a production-grade design.md, grounded in the site's actual CSS.

.eyebrow
12px / 1.4 / -0.01em / muted
OWN YOUR DESIGN SYSTEM
mono
JetBrains Mono / 12px / tnum
npx @getdesign/cli https://stripe.com
04

Spacing & Radius

Spacing scale · 4px base
22px
44px
66px
88px
1212px
1616px
2424px
3232px
4848px
6464px
Radius
sm
md
lg
xl
full
05

Components

Button · primary
Button · ghost
Button · accent
Input · compact
>
Chip · status
Shipping Q2 2026
Nav link · active
SURFACES
Dashed rail
dashed-frame
Code token
const design = await getDesign("stripe.com");// → design.md
06

Motion

standard

cubic-bezier(0.2, 0.7, 0.2, 1)

UI transitions, nav, hovers. ~220ms.

draw-on

cubic-bezier(0.2, 0.7, 0.2, 1)

Logo + brackets. 520ms stagger 80ms.

pulse

ease-in-out

Status dots. 1.4s loop, opacity 1 → 0.35.

07

Voice & Tone

#DoDon't
01The design system for any URL.The revolutionary AI-powered design platform.
02Paste a URL. Get a design.md.Unlock the power of intelligent design extraction.
03Five surfaces, one agent.Our robust multi-platform AI ecosystem.
04Grounded in the site's actual CSS.Leveraging cutting-edge web analysis technology.