easing-1
cubic-bezier(0.45, 0.05, 0.55, 0.95)← Gallery
extracted · 64 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.
17colors
Aaf0
vs design-extractor.com
See full comparison ↗They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 64 artefacts for stripe.com and renders 12+ sections below.
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-varThe quick brown fox jumps
display · 56px / 600The quick brown fox jumps
headline · 36px / 500The quick brown fox jumps
subhead · 22px / 400The quick brown fox jumps
body · 16px / 400The quick brown fox jumps
caption · 12px / 500 · uppercaseVoice
Tone, CTA verbs, headlines and pronoun stance — pulled from the live page.
top CTA verbs
read×20stripe×10continue×6get×5sign×4view×4watch×3contact×2
motionlang
Motion Lab
Every easing curve and duration stripe.com ships, drawn and replayed live. Export them as Framer Motion presets from the motion.framer.js tab above.
easing curves · 9
easing-2
cubic-bezier(0.4, 0, 0.2, 1)easing-3
cubic-bezier(0.6, 0, 0.2, 0.5)ease-out
cubic-bezier(0.25, 1, 0.5, 1)ease-in-out
easelinear
linearsteps
non-bezier
steps(1)ease-out
cubic-bezier(0.165, 0.84, 0.44, 1)ease-out
cubic-bezier(0.16, 1, 0.3, 1)durations · 5
xs100ms
sm200ms
md300ms
lg500ms
xl800ms
Component anatomy
Typed React stubs — variants, slots and props detected from clustered DOM patterns.
// 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
Agent prompt
One self-contained system prompt with every stripe.com token, anatomy slot and voice rule. Drop it into any AI agent and it builds in this brand without hallucinating.
paste into Claude · GPT · Cursor · Windsurf · v0
# You are building UI in the stripe.com design system. Source: https://stripe.com Extracted by designlang on 2026-05-21. ## Brand at a glance - title Stripe | Financial Infrastructure to Grow Your Revenue - page intent landing - material flat - design grade B ## Colour - primary #533afd - secondary #e5edf5 - accent #ffe0d1 - neutrals #000000 · #50617a · #ffffff · #64748d · #7d8ba4 · #101010 ## Typography - families sohne-var - weights 400 · 300 · 500 - base size 16px ## Spacing - scale 1px · 28px · 32px · 40px · 48px · 52px · 60px · 64px · 72px · 80px · 96px · 340px ## Radii - scale 1px · 4px · 8px · 16px · 100px ## Motion - durations 100ms · 200ms · 300ms · 500ms ## Voice - tone neutral - pronoun you-only - headings Sentence case - CTA verbs read · stripe · continue · get · sign · view ## Component anatomy - card variants: [object Object] · [object Object] · slots: false · false · true · false - button variants: [object Object] · [object Object] · [object Object] · [object Object] · slots: true · true · false - other variants: [object Object] · slots: — - link variants: [object Object] · slots: — ## Accessibility - WCAG score 79% · failing pairs: 3 ## Build rules 1. Use the colours above. **Never invent a new hex.** If you need a shade between two existing colours, derive it via HSL adjustment from the closest extracted colour and call out the derivation. 2. Use the extracted typography families. If you need a missing weight, pick the nearest available weight from the list and note it. 3. Snap spacing values to the scale above. No off-scale paddings or margins. 4. Snap border radii to the scale above. 5. Match the voice: same tone, same pronoun stance, same heading style. Reuse the listed CTA verbs. 6. Aim for WCAG AA contrast minimum. When the brand colours fail, prefer the foreground colour on the background colour rather than mid-tone neutrals. 7. Reuse component anatomy when it exists — do not invent novel structures for things the site already has. ## Available context files designlang wrote these alongside this prompt. Reach for them when you need ground truth: - `<host>-design-tokens.json` — DTCG primitive · semantic · composite tokens - `<host>-tailwind.config.js` — Tailwind v3 config - `<host>-tailwind-v4.css` — Tailwind v4 `@theme` block - `<host>-tokens.d.ts` — TypeScript literal-union types - `<host>-variables.css` — bare CSS custom properties - `<host>-reset.css` — brand-aware base styles - `<host>-gradients.css` — `.grad-N` utility classes - `<host>-anatomy.tsx` — typed React component scaffolds - `<host>-shadcn-theme.css` — shadcn/ui theme - `<host>-theme.js` — React / Vue / Svelte theme object - `<host>-mcp.json` — MCP server payload (load via stdio) - `<host>.brand.pdf` — print-ready 13-chapter brand book When you reference the system in code, prefer importing from these files over hard-coding values. ## Output expectations When asked to "build a pricing page" or "make a card" or any UI: - Produce a single self-contained component file in the appropriate framework (React / Vue / Svelte — match what the user is using). - Use Tailwind utility classes wired to the v4 `@theme` if Tailwind is available; otherwise use the CSS custom properties from `variables.css`. - Write the headline copy using the brand voice; do not invent generic Lorem. - Annotate any choice where you had to bend the system, with a one-line `// note:` comment explaining what and why. ## One-line install ```bash npx designlang stripe.com ``` Run this against any other URL to extract its system in the same shape as the one above. --- Generated by designlang. Re-extract by running `npx designlang stripe.com`.
Drop this in any AI agent. It will build UI in the stripe.com brand without hallucinating colours, fonts or component shapes.
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": 312,
"contexts": [
"text",
"border",
"background"
]
},
{
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255,
"a": 0.8
},
"hsl": {
"h": 0,
"s": 0,
"l": 100
},
"count": 181,
"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": "#e5edf5",
"rgb": {
"r": 229,
"g": 237,
"b": 245,
"a": 1
},
"hsl": {
"h": 210,
"s": 44,
"l": 93
},
"count": 57,
"contexts": [
"background",
"border"
]
},
{
"hex": "#7f7dfc",
"rgb": {
"r": 127,
"g": 125,
"b": 252,
"a": 1
},
"hsl": {
"h": 241,
"s": 95,
"l": 74
},
"count": 37,
"contexts": [
"text",
"border",
"background"
]
},
{
"hex": "#3c4f69",
"rgb": {
"r": 60,
"g": 79,
"b": 105,
"a": 1
},
"hsl": {
"h": 215,
"s": 27,
"l": 32
},
"count": 36,
"contexts": [
"text",
"border"
]
},
{
"hex": "#273951",
"rgb": {
"r": 39,
"g": 57,
"b": 81,
"a": 1
},
"hsl": {
"h": 214,
"s": 35,
"l": 24
},
"count": 32,
"contexts": [
"text",
"border"
]
},
{
"hex": "#7389ff",
"rgb": {
"r": 115,
"g": 137,
"b": 255,
"a": 1
},
"hsl": {
"h": 231,
"s": 100,
"l": 73
},
"count": 30,
"contexts": [
"text",
"border"
]
},
{
"hex": "#1a2c44",
"rgb": {
"r": 26,
"g": 44,
"b": 68,
"a": 1
},
"hsl": {
"h": 214,
"s": 45,
"l": 18
},
"count": 28,
"contexts": [
"text",
"border"
]
},
{
"hex": "#ff6118",
"rgb": {
"r": 255,
"g": 97,
"b": 24,
"a": 1
},
"hsl": {
"h": 19,
"s": 100,
"l": 55
},
"count": 28,
"contexts": [
"text",
"border"
]
},
{
"hex": "#b9b9f9",
"rgb": {
"r": 185,
"g": 185,
"b": 249,
"a": 1
},
"hsl": {
"h": 240,
"s": 84,
"l": 85
},
"count": 22,
"contexts": [
"border"
]
},
{
"hex": "#7d8ba4",
"rgb": {
"r": 125,
"g": 139,
"b": 164,
"a": 1
},
"hsl": {
"h": 218,
"s": 18,
"l": 57
},
"count": 14,
"contexts": [
"text",
"border"
]
},
{
"hex": "#d6d9fc",
"rgb": {
"r": 214,
"g": 217,
"b": 252,
"a": 1
},
"hsl": {
"h": 235,
"s": 86,
"l": 91
},
"count": 10,
"contexts": [
"border"
]
},
{
"hex": "#839bc8",
"rgb": {
"r": 131,
"g": 155,
"b": 200,
"a": 1
},
"hsl": {
"h": 219,
"s": 39,
"l": 65
},
"count": 8,
"contexts": [
"text",
"border"
]
},
{
"hex": "#101010",
"rgb": {
"r": 16,
"g": 16,
"b": 16,
"a": 0.3
},
"hsl": {
"h": 0,
"s": 0,
"l": 6
},
"count": 6,
"contexts": [
"text",
"border"
]
},
{
"hex": "#a3b5d6",
"rgb": {
"r": 163,
"g": 181,
"b": 214,
"a": 1
},
"hsl": {
"h": 219,
"s": 38,
"l": 74
},
"count": 6,
"contexts": [
"text",
"border"
]
},
{
"hex": "#81b81a",
"rgb": {
"r": 129,
"g": 184,
"b": 26,
"a": 1
},
"hsl": {
"h": 81,
"s": 75,
"l": 41
},
"count": 4,
"contexts": [
"text",
"border"
]
},
{
"hex": "#000eff",
"rgb": {
"r": 0,
"g": 14,
"b": 255,
"a": 0.5
},
"hsl": {
"h": 237,
"s": 100,
"l": 50
},
"count": 4,
"contexts": [
"text",
"border"
]
},
{
"hex": "#2d2564",
"rgb": {
"r": 45,
"g": 37,
"b": 100,
"a": 1
},
"hsl": {
"h": 248,
"s": 46,
"l": 27
},
"count": 2,
"contexts": [
"text",
"border"
]
},
{
"hex": "#ffe0d1",
"rgb": {
"r": 255,
"g": 224,
"b": 209,
"a": 1
},
"hsl": {
"h": 20,
"s": 100,
"l": 91
},
"count": 2,
"contexts": [
"background"
]
},
{
"hex": "#635bff",
"rgb": {
"r": 99,
"g": 91,
"b": 255,
"a": 1
},
"hsl": {
"h": 243,
"s": 100,
"l": 68
},
"count": 2,
"contexts": [
"text"
]
},
{
"hex": "#00d66f",
"rgb": {
"r": 0,
"g": 214,
"b": 111,
"a": 1
},
"hsl": {
"h": 151,
"s": 100,
"l": 42
},
"count": 1,
"contexts": [
"background"
]
},
{
"hex": "#4834db",
"rgb": {
"r": 72,
"g": 52,
"b": 219,
"a": 0.698
},
"hsl": {
"h": 247,
"s": 70,
"l": 53
},
"count": 1,
"contexts": [
"border"
]
},
{
"hex": "#182659",
"rgb": {
"r": 24,
"g": 38,
"b": 89,
"a": 1
},
"hsl": {
"h": 227,
"s": 58,
"l": 22
},
"count": 1,
"contexts": [
"border"
]
},
{
"hex": "#f2f7fe",
"rgb": {
"r": 242,
"g": 247,
"b": 254,
"a": 1
},
"hsl": {
"h": 215,
"s": 86,
"l": 97
},
"count": 1,
"contexts": [
"background"
]
}
]
},
"regions": [
{
"role": "nav",
"tag": "header",
"bounds": {
"x": 0,
"y": 0,
"w": 1280,
"h": 76
},
"heading": null,
"buttonCount": 15,
"cardCount": 11,
"className": "hds-color-mode navigation section section--white hds-mode--light"
},
{
"role": "nav",
"tag": "nav",
"bounds": {
"x": 18,
"y": 6,
"w": 1244,
"h": 64
},
"heading": null,
"buttonCount": 15,
"cardCount": 11,
"className": "hds-navigation-menu navigation-menu"
},
{
"role": "content",
"tag": "section",
"bounds": {
"x": 0,
"y": 0,
"w": 0,
"h": 0
},
"heading": null,
"buttonCount": 3,
"cardCount": 0,
"className": "navigation-menu-footer"
},
{
"role": "content",
"tag": "section",
"bounds": {
"x": 0,
"y": 0,
"w": 0,
"h": 0
},
"heading": null,
"buttonCount": 1,
"cardCount": 0,
"className": "navigation-menu-header"
},
{
"role": "pricing",
"tag": "main",
"bounds": {
"x": 0,
"y": 76,
"w": 1280,
"h": 13359.53125
},
"heading": "Financial infrastructure to grow your revenue. Accept payments, offer financial services, and implement custom revenue models—from your first transaction to your billionth.",
"buttonCount": 95,
"cardCount": 361,
"className": null
},
{
"role": "hero",
"tag": "section",
"bounds": {
"x": 0,
"y": 76,
"w": 1280,
"h": 617
},
"heading": "Financial infrastructure to grow your revenue. Accept payments, offer financial services, and implement custom revenue models—from your first transaction to your billionth.",
"buttonCount": 3,
"cardCount": 36,
"className": "hds-color-mode hero-section-container section section--white hds-mode--light"
},
{
"role": "pricing",
"tag": "section",
"bounds": {
"x": 0,
"y": 693,
"w": 1280,
"h": 2177.734375
},
"heading": "Flexible solutions for every business model.",
"buttonCount": 15,
"cardCount": 152,
"className": "hds-color-mode section section--white hds-mode--light"
},
{
"role": "content",
"tag": "section",
"bounds": {
"x": 0,
"y": 2870.734375,
"w": 1280,
"h": 560
},
"heading": null,
"buttonCount": 1,
"cardCount": 0,
"className": "hds-color-mode section section--white hds-mode--light"
},
{
"role": "hero",
"tag": "section",
"bounds": {
"x": 0,
"y": 3430.734375,
"w": 1280,
"h": 969.921875
},
"heading": "The backbone of global commerce",
"buttonCount": 4,
"cardCount": 0,
"className": "hds-color-mode stats-section stats-section--time-daytime section section--white hds-mode--light"
},
{
"role": "testimonials",
"tag": "section",
"bounds": {
"x": 0,
"y": 4400.65625,
"w": 1280,
"h": 4583.734375
},
"heading": "Powering businesses of all sizes.",
"buttonCount": 40,
"cardCount": 92,
"className": "hds-color-mode business-sizes-section section section--white hds-mode--light"
},
{
"role": "testimonials",
"tag": "section",
"bounds": {
"x": 33,
"y": 4696.03125,
"w": 1214,
"h": 1379.5
},
"heading": "Transform your enterprise with agile financial infrastructure",
"buttonCount": 30,
"cardCount": 0,
"className": "section-row section-row-gap"
},
{
"role": "nav",
"tag": "header",
"bounds": {
"x": 33,
"y": 4696.03125,
"w": 1214,
"h": 130.21875
},
"heading": "Transform your enterprise with agile financial infrastructure",
"buttonCount": 2,
"cardCount": 0,
"className": "section-header section-header--title-span-5"
},
{
"role": "features",
"tag": "section",
"bounds": {
"x": 33,
"y": 6235.53125,
"w": 1214,
"h": 1019.84375
},
"heading": "Build a foundation for your startup that enables faster growth",
"buttonCount": 4,
"cardCount": 75,
"className": "section-row section-row-gap"
},
{
"role": "nav",
"tag": "header",
"bounds": {
"x": 33,
"y": 6235.53125,
"w": 1214,
"h": 130.21875
},
"heading": "Build a foundation for your startup that enables faster growth",
"buttonCount": 2,
"cardCount": 0,
"className": "section-header section-header--title-span-5"
},
{
"role": "content",
"tag": "section",
"bounds": {
"x": 33,
"y": 6389.75,
"w": 1214,
"h": 617.453125
},
"heading": null,
"buttonCount": 2,
"cardCount": 56,
"className": "startups-carousel"
},
{
"role": "testimonials",
"tag": "section",
"bounds": {
"x": 33,
"y": 7415.375,
"w": 1214,
"h": 1521.015625
},
"heading": "Make your SaaS platform a complete financial operating system",
"buttonCount": 6,
"cardCount": 17,
"className": "section-row section-row-gap"
},
{
"role": "nav",
"tag": "header",
"bounds": {
"x": 33,
"y": 7415.375,
"w": 1214,
"h": 130.21875
},
"heading": "Make your SaaS platform a complete financial operating system",
"buttonCount": 2,
"cardCount": 0,
"className": "section-header section-header--title-span-5"
},
{
"role": "content",
"tag": "section",
"bounds": {
"x": 0,
"y": 8984.390625,
"w": 1280,
"h": 2336.9375
},
"heading": "Reliable, extensible infrastructure for every stack.",
"buttonCount": 3,
"cardCount": 6,
"className": "hds-color-mode section hds-mode--dark"
},
{
"role": "testimonials",
"tag": "section",
"bounds": {
"x": 0,
"y": 11321.328125,
"w": 1280,
"h": 1734.015625
},
"heading": "What’s happening",
"buttonCount": 26,
"cardCount": 73,
"className": "hds-color-mode section section--white hds-mode--light"
},
{
"role": "testimonials",
"tag": "section",
"bounds": {
"x": 33,
"y": 11417.328125,
"w": 1214,
"h": 694.640625
},
"heading": "What’s happening",
"buttonCount": 18,
"cardCount": 73,
"className": "section-row section-row-gap"
},
{
"role": "nav",
"tag": "header",
"bounds": {
"x": 33,
"y": 11417.328125,
"w": 1214,
"h": 102.375
},
"heading": "What’s happening",
"buttonCount": 2,
"cardCount": 0,
"className": "events-section__header"
},
{
"role": "pricing",
"tag": "section",
"bounds": {
"x": 0,
"y": 13055.34375,
"w": 1280,
"h": 380.1875
},
"heading": null,
"buttonCount": 3,
"cardCount": 2,
"className": "hds-color-mode section hds-mode--light"
},
{
"role": "footer",
"tag": "footer",
"bounds": {
"x": 0,
"y": 13435.53125,
"w": 1280,
"h": 1010.578125
},
"heading": null,
"buttonCount": 1,
"cardCount": 77,
"className": "hds-color-mode footer section hds-mode--light"
}
],
"componentClusters": [
{
"kind": "button",
"structuralHash": "button>svg",
"instanceCount": 8,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(6, 27, 49)",
"padding": "12px 0px 12px 0px",
"borderRadius": "4px",
"border": "0px none rgb(6, 27, 49)",
"fontSize": "14px",
"fontWeight": "400"
},
"instanceCount": 4
},
{
"css": {
"background": "rgba(255, 255, 255, 0)",
"color": "rgba(16, 16, 16, 0.3)",
"padding": "0px 0px 0px 0px",
"borderRadius": "4px",
"border": "0px none rgba(16, 16, 16, 0.3)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
},
{
"css": {
"background": "rgb(232, 233, 255)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "4px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 3
}
]
},
{
"kind": "button",
"structuralHash": "a",
"instanceCount": 3,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(6, 27, 49)",
"padding": "12px 0px 12px 0px",
"borderRadius": "4px",
"border": "0px none rgb(6, 27, 49)",
"fontSize": "14px",
"fontWeight": "400"
},
"instanceCount": 1
},
{
"css": {
"background": "rgba(255, 255, 255, 0)",
"color": "rgb(255, 255, 255)",
"padding": "14.5px 24px 15.5px 24px",
"borderRadius": "4px",
"border": "1px solid rgba(72, 52, 219, 0.698)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
},
{
"css": {
"background": "rgba(255, 255, 255, 0)",
"color": "rgb(83, 58, 253)",
"padding": "14.5px 24px 15.5px 24px",
"borderRadius": "4px",
"border": "1px solid rgb(185, 185, 249)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
}
]
},
{
"kind": "button",
"structuralHash": "ul>li>li",
"instanceCount": 1,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
}
]
},
{
"kind": "button",
"structuralHash": "a>svg>span",
"instanceCount": 1,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(83, 58, 253)",
"padding": "10.5px 20px 13.5px 20px",
"borderRadius": "4px",
"border": "1px solid rgb(255, 255, 255)",
"fontSize": "14px",
"fontWeight": "400"
},
"instanceCount": 1
}
]
},
{
"kind": "button",
"structuralHash": "span",
"instanceCount": 3,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(83, 58, 253)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(83, 58, 253)",
"fontSize": "14px",
"fontWeight": "400"
},
"instanceCount": 3
}
]
},
{
"kind": "button",
"structuralHash": "a>svg",
"instanceCount": 17,
"variants": [
{
"css": {
"background": "rgb(83, 58, 253)",
"color": "rgb(255, 255, 255)",
"padding": "15.5px 20px 16.5px 20px",
"borderRadius": "4px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "14px",
"fontWeight": "400"
},
"instanceCount": 7
},
{
"css": {
"background": "rgba(255, 255, 255, 0.65)",
"color": "rgb(83, 58, 253)",
"padding": "14.5px 24px 15.5px 24px",
"borderRadius": "4px",
"border": "1px solid rgb(185, 185, 249)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 10
}
]
},
{
"kind": "button",
"structuralHash": "div>a>a",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "button",
"structuralHash": "button>div>div>div>div",
"instanceCount": 6,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 6
}
]
},
{
"kind": "card",
"structuralHash": "div>div",
"instanceCount": 55,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 35
},
{
"css": {
"background": "rgb(229, 237, 245)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "6px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 13
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(60, 79, 105)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(60, 79, 105)",
"fontSize": "10px",
"fontWeight": "300"
},
"instanceCount": 1
},
{
"css": {
"background": "rgb(229, 237, 245)",
"color": "rgb(0, 0, 238)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 238)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 238)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 238)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "card",
"structuralHash": "div>svg",
"instanceCount": 14,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 13
},
{
"css": {
"background": "rgb(248, 250, 253)",
"color": "rgb(100, 116, 141)",
"padding": "9px 7px 9px 7px",
"borderRadius": "6px",
"border": "0px none rgb(100, 116, 141)",
"fontSize": "9px",
"fontWeight": "300"
},
"instanceCount": 1
}
]
},
{
"kind": "card",
"structuralHash": "div>h3",
"instanceCount": 6,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 60px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "26px",
"fontWeight": "400"
},
"instanceCount": 6
}
]
},
{
"kind": "card",
"structuralHash": "h3",
"instanceCount": 6,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(6, 27, 49)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(6, 27, 49)",
"fontSize": "26px",
"fontWeight": "300"
},
"instanceCount": 6
}
]
},
{
"kind": "card",
"structuralHash": "div",
"instanceCount": 20,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 10
},
{
"css": {
"background": "rgb(248, 250, 253)",
"color": "rgb(100, 116, 141)",
"padding": "9px 7px 9px 7px",
"borderRadius": "6px",
"border": "0px none rgb(100, 116, 141)",
"fontSize": "9px",
"fontWeight": "300"
},
"instanceCount": 2
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(80, 97, 122)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(80, 97, 122)",
"fontSize": "10px",
"fontWeight": "300"
},
"instanceCount": 6
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 238)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 238)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "card",
"structuralHash": "div>div>div",
"instanceCount": 14,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 10
},
{
"css": {
"background": "rgb(248, 250, 253)",
"color": "rgb(0, 0, 238)",
"padding": "0px 0px 0px 0px",
"borderRadius": "6px",
"border": "0px none rgb(0, 0, 238)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 238)",
"padding": "32px 24px 32px 24px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 238)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "button",
"structuralHash": "div>div",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgb(255, 224, 209)",
"color": "rgb(255, 97, 24)",
"padding": "0px 0px 0px 0px",
"borderRadius": "4px",
"border": "0px none rgb(255, 97, 24)",
"fontSize": "10px",
"fontWeight": "400"
},
"instanceCount": 2
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(255, 97, 24)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(255, 97, 24)",
"fontSize": "10px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "button",
"structuralHash": "div>div>div>div>div",
"instanceCount": 2,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(255, 97, 24)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(255, 97, 24)",
"fontSize": "10px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "button",
"structuralHash": "div>div>div",
"instanceCount": 5,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(83, 58, 253)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(83, 58, 253)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "button",
"structuralHash": "div>svg",
"instanceCount": 7,
"variants": [
{
"css": {
"background": "rgb(0, 214, 111)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "4px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
},
{
"css": {
"background": "rgb(0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "4px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(83, 58, 253)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(83, 58, 253)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 5
}
]
},
{
"kind": "card",
"structuralHash": "div>div>div>div",
"instanceCount": 2,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "card",
"structuralHash": "div>div>div>div>div",
"instanceCount": 3,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 3
}
]
},
{
"kind": "card",
"structuralHash": "div>picture",
"instanceCount": 11,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
},
{
"css": {
"background": "rgb(229, 237, 245)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "6px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 7
}
]
},
{
"kind": "card",
"structuralHash": "picture>source>img",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "button",
"structuralHash": "button>p",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "button",
"structuralHash": "div>a",
"instanceCount": 3,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 3
}
]
},
{
"kind": "button",
"structuralHash": "button>h3",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 16px 0px 16px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "button",
"structuralHash": "a>div",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgba(255, 255, 255, 0)",
"color": "rgb(83, 58, 253)",
"padding": "0px 0px 0px 0px",
"borderRadius": "4px",
"border": "1px solid rgb(214, 217, 252)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
},
{
"css": {
"background": "rgb(226, 228, 255)",
"color": "rgb(83, 58, 253)",
"padding": "0px 0px 0px 0px",
"borderRadius": "4px",
"border": "1px solid rgb(226, 228, 255)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 3
}
]
},
{
"kind": "button",
"structuralHash": "div>div>svg",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(83, 58, 253)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(83, 58, 253)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "other",
"structuralHash": "svg>path>path",
"instanceCount": 6,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(83, 58, 253)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(83, 58, 253)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "link",
"structuralHash": "a>div>div>h4>div",
"instanceCount": 7,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 7
}
]
},
{
"kind": "card",
"structuralHash": "img",
"instanceCount": 7,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 7
}
]
},
{
"kind": "card",
"structuralHash": "h4",
"instanceCount": 7,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(6, 27, 49)",
"padding": "0px 16px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(6, 27, 49)",
"fontSize": "16px",
"fontWeight": "300"
},
"instanceCount": 7
}
]
},
{
"kind": "card",
"structuralHash": "div>span",
"instanceCount": 13,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(83, 58, 253)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(83, 58, 253)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 9
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(6, 27, 49)",
"padding": "0px 16px 0px 16px",
"borderRadius": "0px",
"border": "0px none rgb(6, 27, 49)",
"fontSize": "18px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "other",
"structuralHash": "svg>path>path>path",
"instanceCount": 2,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "other",
"structuralHash": "svg>path",
"instanceCount": 3,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 3
}
]
},
{
"kind": "card",
"structuralHash": "div>a>a",
"instanceCount": 1,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
}
]
},
{
"kind": "link",
"structuralHash": "a>div>div",
"instanceCount": 2,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 238)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 238)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "card",
"structuralHash": "div>h4>p",
"instanceCount": 2,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 238)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 238)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "card",
"structuralHash": "div>div>q>div>a",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "card",
"structuralHash": "q",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(100, 116, 141)",
"padding": "0px 16px 0px 16px",
"borderRadius": "0px",
"border": "0px none rgb(100, 116, 141)",
"fontSize": "26px",
"fontWeight": "300"
},
"instanceCount": 4
}
]
},
{
"kind": "card",
"structuralHash": "span",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(80, 97, 122)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(80, 97, 122)",
"fontSize": "18px",
"fontWeight": "300"
},
"instanceCount": 4
}
]
},
{
"kind": "button",
"structuralHash": "button>div",
"instanceCount": 4,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(255, 255, 255)",
"padding": "32px 24px 32px 24px",
"borderRadius": "4px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "button",
"structuralHash": "div>p>div",
"instanceCount": 1,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
}
]
},
{
"kind": "button",
"structuralHash": "a>div>span",
"instanceCount": 2,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 238)",
"padding": "2px 2px 2px 2px",
"borderRadius": "4px",
"border": "1px solid rgb(229, 237, 245)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "button",
"structuralHash": "div>picture",
"instanceCount": 1,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 238)",
"padding": "0px 0px 0px 0px",
"borderRadius": "2px",
"border": "0px none rgb(0, 0, 238)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
}
]
},
{
"kind": "button",
"structuralHash": "button>svg>span",
"instanceCount": 1,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(83, 58, 253)",
"padding": "0px 0px 0px 0px",
"borderRadius": "4px",
"border": "0px none rgb(83, 58, 253)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 1
}
]
},
{
"kind": "button",
"structuralHash": "button",
"instanceCount": 2,
"variants": [
{
"css": {
"background": "rgb(255, 255, 255)",
"color": "rgb(99, 91, 255)",
"padding": "10px 20px 10px 20px",
"borderRadius": "6px",
"border": "1px solid rgba(0, 0, 0, 0.12)",
"fontSize": "14px",
"fontWeight": "500"
},
"instanceCount": 2
}
]
}
],
"accessibility": {
"remediation": [
{
"fg": "#ffffff",
"bg": "#e3ecf7",
"ratio": 1.19,
"rule": "AA-large",
"suggestion": {
"replace": "fg",
"color": "#000000",
"newRatio": 17.61
}
}
]
},
"cssHealth": {
"sheets": [
{
"url": "https://b.stripecdn.com/mkt-ssr-statics/assets/_next/static/css/5ac76ef56c21b7fe.css",
"totalBytes": 54016,
"usedBytes": 48452,
"unusedBytes": 5564,
"unusedPercent": 10
},
{
"url": "https://b.stripecdn.com/mkt-ssr-statics/assets/_next/static/css/1af56c9f60dfbb03.css",
"totalBytes": 39920,
"usedBytes": 30672,
"unusedBytes": 9248,
"unusedPercent": 23
},
{
"url": "https://b.stripecdn.com/mkt-ssr-statics/assets/_next/static/css/f577e6782212f424.css",
"totalBytes": 66555,
"usedBytes": 43551,
"unusedBytes": 23004,
"unusedPercent": 35
},
{
"url": "https://b.stripecdn.com/mkt-ssr-statics/assets/_next/static/css/6d71d1064c88ecf1.css",
"totalBytes": 259064,
"usedBytes": 75757,
"unusedBytes": 183307,
"unusedPercent": 71
},
{
"url": "https://b.stripecdn.com/mkt-ssr-statics/assets/_next/static/css/57f8c646aef0b9c7.css",
"totalBytes": 18536,
"usedBytes": 8962,
"unusedBytes": 9574,
"unusedPercent": 52
},
{
"url": "https://b.stripecdn.com/mkt-ssr-statics/assets/_next/static/css/f4882a34561e5dbb.css",
"totalBytes": 2115,
"usedBytes": 924,
"unusedBytes": 1191,
"unusedPercent": 56
},
{
"url": "https://b.stripecdn.com/mkt-ssr-statics/assets/_next/static/css/f73a927287a9f564.css",
"totalBytes": 3499,
"usedBytes": 2662,
"unusedBytes": 837,
"unusedPercent": 24
}
],
"totalBytes": 443705,
"usedBytes": 210980,
"unusedBytes": 232725,
"unusedPercent": 52,
"importantCount": 0,
"duplicates": 6133,
"vendorPrefixes": {
"webkit": 69,
"moz": 16,
"ms": 1,
"o": 1
},
"keyframes": [],
"specificity": {
"max": [
1,
6,
2
],
"average": [
0,
1.37,
0.09
],
"count": 2426
},
"issues": [
"6133 duplicate declarations",
"52% unused CSS"
]
}
}Prompt pack
Paste-ready prompts pre-loaded with the stripe.com system. Generators (v0, Lovable, Cursor, Claude Artifacts) and per-component recipes (button, card).
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 Object], [object Object], [object Object] SECTIONS (in order): - cta - pricing-table — heading: "Financial infrastructure to grow your revenue. Accept payments, offer financial " - testimonial — heading: "Financial infrastructure to grow your revenue. Accept payments, offer financial " - pricing-table — heading: "Flexible solutions for every business model." - stats — heading: "The backbone of global commerce" - pricing-table — heading: "Powering businesses of all sizes." - testimonial — heading: "Transform your enterprise with agile financial infrastructure" - testimonial — heading: "Transform your enterprise with agile financial infrastructure" - pricing-table — heading: "Build a foundation for your startup that enables faster growth" - gallery - testimonial — heading: "Make your SaaS platform a complete financial operating system" - testimonial — heading: "Reliable, extensible infrastructure for every stack." - pricing-table — heading: "What’s happening" - pricing-table — heading: "What’s happening" - gallery — heading: "What’s happening" - cta - footer Use Tailwind. Match these tokens exactly. Keep the material language consistent.
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 — heading: "Financial infrastructure to grow your revenue. Accept payments, offer financial " - testimonial — heading: "Financial infrastructure to grow your revenue. Accept payments, offer financial " - pricing-table — heading: "Flexible solutions for every business model." - stats — heading: "The backbone of global commerce" - pricing-table — heading: "Powering businesses of all sizes." - testimonial — heading: "Transform your enterprise with agile financial infrastructure" - testimonial — heading: "Transform your enterprise with agile financial infrastructure" - pricing-table — heading: "Build a foundation for your startup that enables faster growth" - gallery - testimonial — heading: "Make your SaaS platform a complete financial operating system" - testimonial — heading: "Reliable, extensible infrastructure for every stack." - pricing-table — heading: "What’s happening" - pricing-table — heading: "What’s happening" - gallery — heading: "What’s happening" - cta - footer
# 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, rgba(0, 0, 0, 0.03) 0px 1px 2px 0px', 'rgba(50, 50, 93, 0.12) 0px 16px 32px 0px'],
};
```
## Sections
- cta
- pricing-table — heading: "Financial infrastructure to grow your revenue. Accept payments, offer financial "
- testimonial — heading: "Financial infrastructure to grow your revenue. Accept payments, offer financial "
- pricing-table — heading: "Flexible solutions for every business model."
- stats — heading: "The backbone of global commerce"
- pricing-table — heading: "Powering businesses of all sizes."
- testimonial — heading: "Transform your enterprise with agile financial infrastructure"
- testimonial — heading: "Transform your enterprise with agile financial infrastructure"
- pricing-table — heading: "Build a foundation for your startup that enables faster growth"
- gallery
- testimonial — heading: "Make your SaaS platform a complete financial operating system"
- testimonial — heading: "Reliable, extensible infrastructure for every stack."
- pricing-table — heading: "What’s happening"
- pricing-table — heading: "What’s happening"
- gallery — heading: "What’s happening"
- cta
- footerCreate 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 financial " - testimonial — heading: "Financial infrastructure to grow your revenue. Accept payments, offer financial " - pricing-table — heading: "Flexible solutions for every business model." - stats — heading: "The backbone of global commerce" - pricing-table — heading: "Powering businesses of all sizes." - testimonial — heading: "Transform your enterprise with agile financial infrastructure" - testimonial — heading: "Transform your enterprise with agile financial infrastructure" - pricing-table — heading: "Build a foundation for your startup that enables faster growth" - gallery - testimonial — heading: "Make your SaaS platform a complete financial operating system" - testimonial — heading: "Reliable, extensible infrastructure for every stack." - pricing-table — heading: "What’s happening" - pricing-table — heading: "What’s happening" - gallery — heading: "What’s happening" - cta - footer Use Tailwind via CDN, lucide-react for icons, and keep the material language consistent across sections. Do not add extra decorative elements outside this vocabulary.
# Recipe: button
Build one button component that matches this brand.
Palette: #000000, #533afd, #50617a, #061b31, #ffffff, #64748d
Typography: [object Object]
Material: flat
Signals: 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
## Anatomy (detected)
```json
{
"kind": "button",
"structuralHash": "button>div>div>div>div",
"instanceCount": 6,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(0, 0, 0)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 6
}
]
}
```# Recipe: card
Build one card component that matches this brand.
Palette: #000000, #533afd, #50617a, #061b31, #ffffff, #64748d
Typography: [object Object]
Material: flat
Signals: 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
## Anatomy (detected)
```json
{
"kind": "card",
"structuralHash": "h3",
"instanceCount": 6,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(6, 27, 49)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(6, 27, 49)",
"fontSize": "26px",
"fontWeight": "300"
},
"instanceCount": 6
}
]
}
```All artefacts
Every file designlang produced for stripe.com — 64 in total. Download anything.
Run designlang on your own URL.
Same 64-artefact depth as the stripe.com extraction above. No signup, no API key.
npx designlang yoursite.comTry it live