Stripe extraction sample

---
version: "alpha"
name: "stripe.com Design System"
description: "Design context extracted from https://stripe.com/. Theme: dark."
colors:
  primary: "#533afd"
  accent: "#533afd"
  secondary: "#533afd"
  background: "#ffffff"
  surface: "#ffffff"
  surface-alt: "#141516"
  border: "#000000"
  text-primary: "#533afd"
  text-secondary: "#533afd"
  text-muted: "#533afd"
typography:
  h1:
    fontFamily: "sohne-var, \"SF Pro Display\", sans-serif"
    fontSize: "44px"
    fontWeight: "300"
    lineHeight: "1.1500000000000001"
    letterSpacing: "-0.88px"
  h2:
    fontFamily: "sohne-var, \"SF Pro Display\", sans-serif"
    fontSize: "32px"
    fontWeight: "300"
    lineHeight: "1.1"
    letterSpacing: "-0.64px"
  h3:
    fontFamily: "sohne-var, \"SF Pro Display\", sans-serif"
    fontSize: "26px"
    fontWeight: "300"
    lineHeight: "1.12"
    letterSpacing: "-0.26px"
  body-md:
    fontFamily: "sohne-var, \"SF Pro Display\", sans-serif"
    fontSize: "32px"
    fontWeight: "300"
    lineHeight: "1.1"
    letterSpacing: "-0.64px"
  link:
    fontFamily: "sohne-var, \"SF Pro Display\", sans-serif"
    fontSize: "16px"
    fontWeight: "400"
rounded:
  sm: "2px"
  md: "4px"
  lg: "5px"
  xl: "6px"
spacing:
  section: "0px"
  card: "0px"
  button: "10px 20px 10px 20px"
  container: "1298px"
  grid: "40px 16px"
components:
  page:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-md}"
  surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-secondary}"
    rounded: "{rounded.md}"
    padding: "{spacing.card}"
  surface-alt:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.text-muted}"
    rounded: "{rounded.md}"
    padding: "{spacing.card}"
  divider:
    backgroundColor: "{colors.border}"
    height: "1px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.link}"
    rounded: "{rounded.md}"
    padding: "10px 20px 10px 20px"
    height: "40px"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "#ffffff"
    typography: "{typography.link}"
    rounded: "{rounded.md}"
    padding: "10px 20px 10px 20px"
    height: "40px"
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "#ffffff"
    rounded: "{rounded.md}"
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    rounded: "0px"
    padding: "0px"
---

## Overview

Dark SaaS interface with near-black backgrounds, muted typography, subtle borders, compact controls, and restrained accent colors.

This DESIGN.md was generated from https://stripe.com/. The YAML front matter is the normative token layer for coding agents. The markdown below explains how and why to apply those tokens.

- Detected theme: dark
- Detected site profile: dashboard
- Color confidence: 48%
- Button confidence: 78%
- Card confidence: 75%

### Captured Inventory Summary

| capture | count |
| --- | --- |
| CSS variables (raw) | 13800 |
| CSS variables (deduped) | 1128 |
| Color hits | 1260 |
| Component color hits | 156 |
| Simple color values | 147 |
| Complex color values | 75 |
| Buttons | 5 |
| Links | 4 |
| Inputs | 0 |
| Layout sections | 8 |
| Background images | 6 |

## Colors

The palette is resolved from semantic CSS variables first and computed styles second.

- **Primary (#533afd):** Brand accents, active states, and high-emphasis affordances. Source: css-variable: --hds-color-accent-border-solid, confidence 94%, evidence: computed color on a.
- **Accent (#533afd):** Supporting brand highlights and hover accents. Source: css-variable: --hds-color-accent-border-solid, confidence 86%, evidence: computed color on a.
- **Background (#ffffff):** Page background and broad canvas areas. Source: css-variable: --hds-color-util-bg-min, confidence 94%, evidence: CSS variable --hds-color-surface-bg-quiet.
- **Surface (#ffffff):** Cards, panels, popovers, and contained sections. Source: css-variable: --hds-color-util-bg-min, confidence 97%, evidence: CSS variable --hds-color-surface-bg-quiet.
- **Surface Alt (#141516):** Secondary panels and nested surfaces.
- **Border (#000000):** Dividers, outlines, and subtle separation. Source: computed-style: html, confidence 86%, evidence: computed color on [class*="card"].
- **Text Primary (#533afd):** Main copy and headings. Source: css-variable: --hds-color-accent-border-solid, confidence 94%, evidence: computed color on a.
- **Text Secondary (#533afd):** Supporting copy. Source: css-variable: --hds-color-accent-border-solid, confidence 97%, evidence: computed color on a.
- **Text Muted (#533afd):** Captions and metadata. Source: css-variable: --hds-color-accent-border-solid, confidence 94%, evidence: computed color on a.
- **Text Subtle (#62666d):** Lowest emphasis text and disabled-adjacent copy.

### Token Decision Summary

| token | value | source | confidence | main evidence | alternatives |
| --- | --- | --- | --- | --- | --- |
| primary | #533afd | css-variable | 94% | color on a: rgb(83, 58, 253) (weight 199; computed color on a) | #e2e4ff (805), #ea2261 (774) |
| accent | #533afd | css-variable | 86% | color on a: rgb(83, 58, 253) (weight 199; computed color on a) | #e2e4ff (818), #ea2261 (786) |
| secondary | #533afd | css-variable | 94% | color on a: rgb(83, 58, 253) (weight 199; computed color on a) | #e2e4ff (793), #ea2261 (767) |
| background | #ffffff | css-variable | 94% | --hds-color-surface-bg-quiet: #fff (weight 72; CSS variable --hds-color-surface-bg-quiet) | #e5edf5 (403), #533afd (271) |
| surface | #ffffff | css-variable | 97% | --hds-color-surface-bg-quiet: #fff (weight 72; CSS variable --hds-color-surface-bg-quiet) | #e5edf5 (492), #533afd (334.8) |
| surface-alt | #141516 | fallback | 35% | fallback | none |
| border | #000000 | computed-style | 86% | color on [class*="card"]: rgb(0, 0, 0) (weight 281; computed color on [class*="card"]) | #533afd (1144.6), #061b31 (523.7) |
| text-primary | #533afd | css-variable | 94% | color on a: rgb(83, 58, 253) (weight 199; computed color on a) | #061b31 (1169), #ffffff (1110) |
| text-secondary | #533afd | css-variable | 97% | color on a: rgb(83, 58, 253) (weight 199; computed color on a) | #061b31 (1282.6), #000000 (1166) |
| text-muted | #533afd | css-variable | 94% | color on a: rgb(83, 58, 253) (weight 199; computed color on a) | #061b31 (1158), #000000 (1060) |
| text-subtle | #62666d | fallback | 35% | fallback | none |

Use this table to understand the resolver's final interpretation. Full raw candidates and all evidence remain available in `tokens.json`.

## Typography

- **H1:** 44px, weight 300, line-height 1.1500000000000001, letter-spacing -0.88px
- **H2:** 32px, weight 300, line-height 1.1, letter-spacing -0.64px
- **H3:** 26px, weight 300, line-height 1.12, letter-spacing -0.26px
- **Body:** 32px, weight 300, line-height 1.1, letter-spacing -0.64px
- **Links:** Use rgb(83, 58, 253), 400 weight, none decoration, 16px size.

## Layout

- Density: comfortable
- Section padding: 0px
- Container width: 1298px
- Card padding: 0px
- Button padding: 10px 20px 10px 20px
- Grid gap: 40px 16px
- Max content width: 1298px

## Elevation & Depth

Mostly flat, with little or no shadow usage.

Use flat surfaces unless a component pattern explicitly includes elevation.

## Shapes

- Small radius: 2px
- Medium radius: 4px
- Large radius: 5px
- Extra large radius: 6px
- Full radius: not detected

## Components

### Button

#### Primary Button

Use for inline or low-chrome actions.

Default:

- Background color: rgba(0, 0, 0, 0)
- Background image: none
- Text: rgb(6, 27, 49)
- Border: 0px none rgb(6, 27, 49)
- Border radius: 4px
- Padding: 12px 0px 12px 0px
- Height: 40px
- Font weight: 400

Hover:

- Detected, but no visual differences from default state.

Recommended Tailwind: `inline-flex items-center text-current underline-offset-4 hover:underline`

#### Secondary Button

Not confidently detected. Infer from the closest detected button pattern.

#### Ghost Button

Not confidently detected. Infer from the closest detected button pattern.

#### Link Button

Use for inline or low-chrome actions.

Default:

- Background color: rgba(0, 0, 0, 0)
- Background image: none
- Text: rgb(6, 27, 49)
- Border: 0px none rgb(6, 27, 49)
- Border radius: 4px
- Padding: 12px 0px 12px 0px
- Height: 40px
- Font weight: 400

Hover:

- Detected, but no visual differences from default state.

Recommended Tailwind: `inline-flex items-center text-current underline-offset-4 hover:underline`


### Card

Use interactive card patterns with background color rgba(0, 0, 0, 0), border 0px none rgb(0, 0, 0), radius 0px, padding 0px, and shadow none.

Hover: not detected or unchanged.

Recommended Tailwind: `rounded-none border-0 shadow-none bg-[rgba(0,_0,_0,_0)] p-6`

### Input

No input was detected. If needed, infer conservatively from card border, button radius, and body typography.

## Do's and Don'ts

Do:

- Use the YAML front matter tokens as the source of truth.
- Preserve the same theme, spacing density, border radius style, and typography scale.
- Preserve extracted background image or gradient layers with their fallback colors.
- Use component token references when generating reusable UI.
- If a token is missing, infer conservatively from the resolved tokens and raw variables below.

Don't:

- Do not introduce unrelated visual styles or arbitrary accent colors.
- Do not contradict extracted component values with generic Tailwind aliases.
- Do not classify large page sections as reusable cards.
- Do not ignore low confidence warnings.

## Background Images

### Card Background

- Selector: [class*="card"]
- Background color: rgba(0, 0, 0, 0)
- Background image: radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)
- Size: auto
- Position: 0% 0%
- Repeat: repeat
- Approximate rendered size: 753px x 753px

### Component Background

- Selector: [class*="background"]
- Background color: rgba(0, 0, 0, 0)
- Background image: radial-gradient(50% 50%, rgb(255, 207, 94) 41.35%, rgba(255, 207, 94, 0) 100%)
- Size: auto
- Position: 0% 0%
- Repeat: repeat
- Approximate rendered size: 713px x 426px

### Component Background

- Selector: [class*="background"]
- Background color: rgba(0, 0, 0, 0)
- Background image: radial-gradient(50% 50%, rgba(83, 58, 253, 0.8) 62.5%, rgba(83, 58, 253, 0) 100%)
- Size: auto
- Position: 0% 0%
- Repeat: repeat
- Approximate rendered size: 683px x 439px

### Component Background

- Selector: [class*="background"]
- Background color: rgba(0, 0, 0, 0)
- Background image: radial-gradient(50% 50%, rgba(243, 99, 243, 0.8) 53.85%, rgba(243, 99, 243, 0) 100%)
- Size: auto
- Position: 0% 0%
- Repeat: repeat
- Approximate rendered size: 698px x 415px

### Component Background

- Selector: [class*="background"]
- Background color: rgba(0, 0, 0, 0)
- Background image: linear-gradient(rgb(255, 255, 255) 41.35%, rgba(255, 255, 255, 0))
- Size: auto
- Position: 0% 0%
- Repeat: repeat
- Approximate rendered size: 692px x 314px

### Section Background

- Selector: section
- Background color: rgba(255, 255, 255, 0.8)
- Background image: radial-gradient(66.35% 66.35%, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0) 100%), none
- Size: auto, auto
- Position: 0% 0%, 0% 0%
- Repeat: repeat, repeat
- Approximate rendered size: 0px x 0px
- Nearby text: Comece agoraFale com a equipe de vendas

## Color Inventory

This section lists captured colors before aggressive semantic filtering. Use the resolved palette above for main decisions, and this inventory when matching specific UI details.

### Resolved Palette

| token | value | source |
| --- | --- | --- |
| primary | #533afd | css-variable: --hds-color-accent-border-solid, confidence 94%, evidence: computed color on a |
| accent | #533afd | css-variable: --hds-color-accent-border-solid, confidence 86%, evidence: computed color on a |
| secon