Design DNA extraction: how we reverse-engineer Stripe, Vercel, and Linear

Every great software brand has a design system. But not the kind that ships in a Figma file or a npm package. The real design system lives in hundreds of micro-decisions: the specific saturation of a hover state, the exact border-radius that makes a card feel approachable but not childish, the shadow depth that communicates hierarchy without visual noise.

This is design DNA — the underlying code of a brand's visual intelligence. And at Dupe, we've built a methodology for extracting it systematically and packaging it into formats AI coding agents can actually use.

What design DNA extraction means

Design DNA extraction is the process of reverse-engineering a brand's visual decisions and translating them into structured, machine-readable (and agent-readable) formats.

It's not scraping. It's analysis. We study:

• The mathematical relationships between colors in a brand's palette
• The typographic scale and how it's applied across hierarchy levels
• Spacing cadences — the base units and multipliers that create visual rhythm
• Component anatomy — how buttons, cards, inputs, and navigation are constructed
• Motion and interaction philosophy — what animates, how fast, with what easing
• The emotional register — what the brand is trying to make you feel, and how design achieves that

Case study: Stripe

Stripe's design DNA is one of the most studied in the industry. On the surface it looks like a dark navy background with a purple accent. But the depth is in the details.

The primary dark — #0A2540 — is not just dark blue. It's a specific value that sits at the boundary between "professional financial product" and "premium tech brand." It references enterprise trust without feeling corporate. The blurple (#635BFF) accent sits at a precise point on the spectrum between blue (stability) and purple (innovation) — intentionally between the two categories.

The card surfaces use a 15-20% lighter version of the background (#0D3251), creating depth through value contrast rather than shadows. This is a deliberate choice: shadows add visual weight; value shifts add depth without weight. The result is interfaces that feel substantial without feeling heavy.

None of this is documented in a public design system. It's extracted by careful analysis of how the product actually looks and behaves across hundreds of screens.

Case study: Vercel

Vercel's design DNA is built on radical restraint. The palette is pure black and white — but the implementation is anything but simple. The background is #000000 true black, which is deliberately extreme. Most dark mode interfaces use #111 or #1a1a1a because true black feels harsh. Vercel uses true black because it creates maximum contrast, and maximum contrast signals confidence.

The gray scale is carefully calibrated: #888888 for secondary text, #444444 for borders, #111111 for surface elements. These aren't default gray values — they're specific choices that create a five-step luminosity ladder from black to white with mathematically precise intervals.

Typography is set in Geist, Vercel's own typeface, but the principles translate: tight letter-spacing (-0.02em to -0.04em) on display text, generous line-height on body, and weight contrast (400 body, 600 headings) that creates hierarchy without relying on size alone.

Vibe coding brand tokens: the new primitive

The AI coding movement introduced "vibe coding" — using natural language to describe what you want to build. But vibe coding has a visual ceiling. You can describe function perfectly in natural language. Aesthetic is much harder to describe.

"Make it look like Stripe" is actually a useful prompt — but only if your agent knows what Stripe looks like in precise, implementable terms. This is where vibe coding brand tokens come in.

Brand tokens are the extracted, structured values from a brand's design DNA — packaged in formats that bridge the gap between natural language description and actual implementation. A Dupe pack includes:

• tokens.css — CSS custom properties ready to drop into any project
• tokens.json — W3C Design Token format for tooling compatibility
• tailwind.extend.js — direct Tailwind configuration snippet
• taste.md — the human-readable design intelligence document
• prompt.md — the agent-optimized unified instruction file

When an agent has access to these, "make it look like Stripe" becomes actionable. The agent isn't guessing — it's implementing documented, extracted design decisions.

Why this matters now

The bottleneck in AI-assisted development is shifting. Generating working code is increasingly solved. Generating designed code — code that produces interfaces people want to use, trust, and pay for — is the next frontier.

Design DNA extraction gives AI coding agents the reference material they need to clear that frontier. It's not a workaround. It's the missing primitive in the AI development stack.