← Gallery

extracted · 28 artefacts

stripe.com

Live extraction of https://stripe.com — tokens, emitters, anatomy, icons, voice, motion, MCP server, AGENTS.md, prompt pack and a 13-chapter brand book. Generated with one command.

Open brand book ↗Browse tokensAll 28 files
16colors
Aaf0
vs design-extractor.com

They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 28 artefacts for stripe.com and renders 12+ sections below.

See full comparison ↗
3,856 charsbrand book ↗
---
site: "Stripe | Financial Infrastructure to Grow Your Revenue"
url: "https://stripe.com"
generated_at: "2026-05-14T22:12:59.992Z"
generator: "designlang@12.11.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#533afd"
    secondary: "#e5edf5"
    accent: "#ffe0d1"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: sohne-var
    base: 16
  spacing:
    base: 2
    scale: "[1, 28, 32, 40, 48, 52, 60, 64, 72, 80]"
  radii:
    xs: 1
    sm: 4
    md: 8
    lg: 16
    full: 100
  shadows:
    md: "rgba(23, 23, 23, 0.06) 0px 3px 6px 0px"
    lg: "rgba(0, 0, 0, 0.06) 0px 4px 24px 0px, rgba(0, 0, 0, 0.03) 0px 1px 2px 0px"
    xl: "rgba(23, 23, 23, 0.08) 0px 15px 35px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.75), dressed in **flat** material.

> "Flexible solutions for every business model."

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **balanced**.

Reading order detected on the source: `cta → nav → nav → nav → pricing-table → testimonial → pricing-table → content → stats → pricing-table → testimonial → testimonial → pricing-table → nav → gallery → testimonial → nav → testimonial → pricing-table → pricing-table → gallery → cta → footer`.

Source: <https://stripe.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#533afd` | 899 |
| secondary | `#e5edf5` | 57 |
| accent | `#ffe0d1` | 2 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |

**Neutrals:** `#000000` · `#50617a` · `#ffffff` · `#64748d` · `#101010`

**Total unique colors detected:** 29.

# Typography

**Families**
- `sohne-var` · 2408 uses

**Body size:** `16px` / line-height `normal`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `56px` | `300` | `57.68px` |
| h2 | `48px` | `300` | `55.2px` |
| h3 | `32px` | `300` | `35.2px` |
| h4 | `26px` | `400` | `normal` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `28px` · `32px` · `40px` · `48px` · `52px` · `60px` · `64px` · `72px` · `80px`

**Layout primitives:** 53 grid containers · 374 flex containers.

# Elevation and Depth

**Shadow scale**
- `md` — `rgba(23, 23, 23, 0.06) 0px 3px 6px 0px`
- `lg` — `rgba(0, 0, 0, 0.06) 0px 4px 24px 0px, rgba(0, 0, 0, 0.03) 0px 1px 2px 0px`
- `xl` — `rgba(50, 50, 93, 0.12) 0px 16px 32px 0px`
- `xl` — `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px`
- `xl` — `rgba(0, 0, 0, 0.1) 0px 30px 60px -50px, rgba(50, 50, 93, 0.25) 0px 30px 60px -10px`

**Z-index layers:** 6

# Shapes

**Radius scale**
- `xs` — `1px`
- `sm` — `4px`
- `md` — `8px`
- `lg` — `16px`
- `full` — `100px`

# Components

**Detected patterns:** `buttons` · `cards` · `links` · `navigation` · `footer` · `modals` · `dropdowns` · `badges` · `progressBars` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| card | link | md | 177 |
| button | secondary, primary, link | — | 91 |
| other | — | — | 11 |
| link | — | — | 9 |

# Do's and Don'ts

**Do's**
- Use `read`, `stripe`, `continue` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **balanced** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 3 contrast pair(s) fail WCAG AA on the source itself.
- Don't 3 wcag contrast failures.
- Don't 52% of css is unused — consider purging.
- Don't 6098 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.11.0 from <https://stripe.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._

Typography

sohne-var
The quick brown fox jumps
display · 56px / 600
The quick brown fox jumps
headline · 36px / 500
The quick brown fox jumps
subhead · 22px / 400
The quick brown fox jumps
body · 16px / 400
The quick brown fox jumps
caption · 12px / 500 · uppercase

Voice

Tone, CTA verbs, headlines and pronoun stance — pulled from the live page.

tone · neutral · you-only

top CTA verbs

read×20stripe×10continue×6get×5sign×4view×4watch×3contact×2

Motion

Durations and easing curves captured from real CSS transitions.

durations

xs100ms
sm200ms
md300ms
lg500ms
xl800ms

easings

  • custom-311cubic-bezier(0.45, 0.05, 0.55, 0.95)
  • custom-900cubic-bezier(0.4, 0, 0.2, 1)
  • custom-0cubic-bezier(0.6, 0, 0.2, 0.5)
  • ease-out-955cubic-bezier(0.25, 1, 0.5, 1)
  • ease-in-outease
  • linearlinear

Component anatomy

Typed React stubs — variants, slots and props detected from clustered DOM patterns.

1,354 chars · TypeScript
// Auto-generated by designlang — component anatomy v2.
// Scaffolds. Wire into your token system; not a runtime library.

import * as React from 'react';

export interface CardProps {
  variant?: 'link';
  size?: 'md';
  children?: React.ReactNode;
}

export function Card({ variant = 'link', size = 'md', ...rest }: CardProps) {
  return React.createElement('div', { 'data-variant': variant, 'data-size': size, ...rest });
}

export interface ButtonProps {
  variant?: 'secondary' | 'primary' | 'link';
  size?: 'md';
  disabled?: boolean;
  leadingIcon?: React.ReactNode;
  children?: React.ReactNode;
}

export function Button({ variant = 'secondary', size = 'md', ...rest }: ButtonProps) {
  return React.createElement('button', { 'data-variant': variant, 'data-size': size, ...rest });
}

export interface OtherProps {
  variant?: 'default';
  size?: 'md';
  children?: React.ReactNode;
}

export function Other({ variant = 'default', size = 'md', ...rest }: OtherProps) {
  return React.createElement('button', { 'data-variant': variant, 'data-size': size, ...rest });
}

export interface LinkProps {
  variant?: 'default';
  size?: 'md';
  children?: React.ReactNode;
}

export function Link({ variant = 'default', size = 'md', ...rest }: LinkProps) {
  return React.createElement('a', { 'data-variant': variant, 'data-size': size, ...rest });
}

Icon system

SVG icon census — count, style mix, grid and stroke profile.

169
total icons
45
stroke-only
6
fill-only
1.78
avg stroke
—
library

MCP / Agent rules

The same payload the stdio MCP server hands to Claude Code, Cursor and Windsurf. Wire it into your editor and the agent answers brand-system questions with the actual extraction — not a guess.

How to wire MCP →npx designlang mcp --url https://stripe.com
{
  "colors": {
    "all": [
      {
        "hex": "#000000",
        "rgb": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 0
        },
        "count": 2620,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#533afd",
        "rgb": {
          "r": 83,
          "g": 58,
          "b": 253,
          "a": 1
        },
        "hsl": {
          "h": 248,
          "s": 98,
          "l": 61
        },
        "count": 899,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#50617a",
        "rgb": {
          "r": 80,
          "g": 97,
          "b": 122,
          "a": 1
        },
        "hsl": {
          "h": 216,
          "s": 21,
          "l": 40
        },
        "count": 330,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#061b31",
        "rgb": {
          "r": 6,
          "g": 27,
          "b": 49,
          "a": 1
        },
        "hsl": {
          "h": 211,
          "s": 78,
          "l": 11
        },
        "count": 283,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255,
          "a": 0.8
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 100
        },
        "count": 210,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#64748d",
        "rgb": {
          "r": 100,
          "g": 116,
          "b": 141,
          "a": 1
        },
        "hsl": {
          "h": 217,
          "s": 17,
          "l": 47
        },
        "count": 172,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#0000ee",
        "rgb": {
          "r": 0,
          "g": 0,
          "b": 238,
          "a": 1
        },
        "hsl": {
          "h": 240,
          "s": 100,
          "l": 47
        },
        "count": 90,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#e5e

Prompt pack

Paste-ready prompts pre-loaded with the stripe.com system, for v0, Lovable, Cursor and Claude Artifacts.

v01,752 chars
Build a landing page with this exact visual language.
COLORS:
  #000000
  #533afd
  #50617a
  #061b31
  #ffffff
  #64748d
  #0000ee
  #e5edf5
  #7f7dfc
  #3c4f69
  #273951
  #7389ff
  #1a2c44
  #ff6118
FONTS: [object Object]
SPACING: 1, 28, 32, 40, 48, 52, 60, 64
RADIUS: 1, 4, 8, 16, 100
SHADOWS: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px | rgba(0, 0, 0, 0.06) 0px 4px 24px 0px, rgba(0, 0, 0, 0.03) 0px 1px 2px 0px | rgba(50, 50, 93, 0.12) 0px 16px 32px 0px
MATERIAL LANGUAGE: flat
VOICE: Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object O…
Lovable1,588 chars
Clone the design language of this landing page and build a fresh equivalent.
Visual feel: flat. Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
Primary palette: #000000, #533afd, #50617a, #061b31, #ffffff.
Typography: [object Object].
Corner radius vocabulary: 1, 4, 8, 16, 100.
Shadow vocabulary: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px | rgba(0, 0, 0, 0.06) 0px 4px 24px 0px, rgba(0, 0, 0, 0.03) 0px 1px 2px 0px | rgba(50, 50, 93, 0.12) 0px 16px 32px 0px.
Page structure:
- cta
- pricing-table…
Cursor1,709 chars
# Design brief
Page type: **landing**.
Material language: **flat**.
Voice: Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
## Tokens
```ts
export const tokens = {
  colors: ['#000000', '#533afd', '#50617a', '#061b31', '#ffffff', '#64748d', '#0000ee', '#e5edf5', '#7f7dfc', '#3c4f69', '#273951', '#7389ff', '#1a2c44', '#ff6118'],
  fonts: ['[object Object]'],
  radii: ['1', '4', '8', '16', '100'],
  shadows: ['rgba(23, 23, 23, 0.06) 0px 3px 6px 0px', 'rgba(0, 0, 0, 0.06) 0px 4px 24px 0px, rg…
Claude Artifacts1,667 chars
Create a React artifact that reproduces this brand's design language.
Page intent: landing.
Material language: flat.
Voice: Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
Colors to use: #000000, #533afd, #50617a, #061b31, #ffffff, #64748d, #0000ee, #e5edf5, #7f7dfc, #3c4f69, #273951, #7389ff, #1a2c44, #ff6118.
Fonts: [object Object].
Radius vocabulary: 1, 4, 8, 16, 100.
Sections:
- cta
- pricing-table — heading: "Financial infrastructure to grow your revenue. Accept payments, offer finan…

All artefacts

Every file designlang produced for stripe.com — 28 in total. Download anything.

Brand book1 file
Spec3 files
Tokens & emitters7 files
Anatomy1 file
Voice1 file
Motion1 file
Icons1 file
Form states1 file
MCP / Agent rules1 file
Page intel5 files
Prompt pack6 files

Run designlang on your own URL.

Same 28-artefact depth as the stripe.com extraction above. No signup, no API key.

npx designlang yoursite.comTry it live