---
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 |
| secondary | #533afd | css-variable: --hds-color-accent-border-solid, confidence 94%, evidence: computed color on a |
| background | #ffffff | css-variable: --hds-color-util-bg-min, confidence 94%, evidence: CSS variable --hds-color-surface-bg-quiet |
| surface | #ffffff | css-variable: --hds-color-util-bg-min, confidence 97%, evidence: CSS variable --hds-color-surface-bg-quiet |
| surface-alt | #141516 | fallback, confidence 35% |
| border | #000000 | computed-style: html, confidence 86%, evidence: computed color on [class*="card"] |
| text-primary | #533afd | css-variable: --hds-color-accent-border-solid, confidence 94%, evidence: computed color on a |
| text-secondary | #533afd | css-variable: --hds-color-accent-border-solid, confidence 97%, evidence: computed color on a |
| text-muted | #533afd | css-variable: --hds-color-accent-border-solid, confidence 94%, evidence: computed color on a |
| text-subtle | #62666d | fallback, confidence 35% |

### All Captured Colors

Showing 100 of 147 captured colors. 47 additional item(s) are preserved in `tokens.json`.

#### Brand / Accent

No colors captured in this group.

#### Background / Surface

No colors captured in this group.

#### Text

| color | normalized | usage guess | occurrences | weight |
| --- | --- | --- | --- | --- |
| #533afd | #533afd | css variable | 894 | 3576 |
| #fff | #ffffff | css variable | 414 | 1656 |
| rgb(0, 0, 0) | #000000 | text/content, border/divider, background/surface, card/component surface | 328 | 1412 |
| #2e2b8c | #2e2b8c | css variable | 306 | 1224 |
| #4032c8 | #4032c8 | css variable | 270 | 1080 |
| #95a4ba | #95a4ba | css variable | 216 | 864 |
| #e5edf5 | #e5edf5 | css variable | 198 | 792 |
| #061b31 | #061b31 | css variable | 198 | 792 |
| #273951 | #273951 | css variable | 180 | 720 |
| #d4dee9 | #d4dee9 | css variable | 180 | 720 |
| #b9b9f9 | #b9b9f9 | css variable | 162 | 648 |
| #d6d9fc | #d6d9fc | css variable | 162 | 648 |
| rgb(83, 58, 253) | #533afd | text/content, border/divider, background/surface, link/component action | 182 | 592 |
| #64748d | #64748d | css variable | 126 | 504 |
| #e2e4ff | #e2e4ff | css variable | 126 | 504 |
| #7f7dfc | #7f7dfc | css variable | 126 | 504 |
| #665efd | #665efd | css variable | 108 | 432 |
| #50617a | #50617a | css variable | 108 | 432 |
| #ea2261 | #ea2261 | css variable | 94 | 376 |
| #fed9de | #fed9de | css variable | 94 | 376 |
| #7d8ba4 | #7d8ba4 | css variable | 90 | 360 |
| #f8fafd | #f8fafd | css variable | 90 | 360 |
| #d8351e | #d8351e | css variable | 90 | 360 |
| #e8e9ff | #e8e9ff | css variable | 90 | 360 |
| #7389ff | #7389ff | css variable | 86 | 344 |
| #ff6118 | #ff6118 | css variable | 80 | 320 |
| #f44bcc | #f44bcc | css variable | 80 | 320 |
| #ffe6f5 | #ffe6f5 | css variable | 76 | 304 |
| #fff2d8 | #fff2d8 | css variable | 76 | 304 |
| #ffe5da | #ffe5da | css variable | 76 | 304 |
| #e8a30b | #e8a30b | css variable | 76 | 304 |
| #0d1738 | #0d1738 | css variable | 74 | 296 |
| #45639d | #45639d | css variable | 74 | 296 |
| #1c1e54 | #1c1e54 | css variable | 72 | 288 |
| #a8bfff | #a8bfff | css variable | 70 | 280 |
| #92adff | #92adff | css variable | 70 | 280 |
| #b51145 | #b51145 | css variable | 66 | 264 |
| #5d64fe | #5d64fe | css variable | 62 | 248 |
| #ffd7ef | #ffd7ef | css variable | 58 | 232 |
| #ffd8c6 | #ffd8c6 | css variable | 58 | 232 |
| #ffe1a3 | #ffe1a3 | css variable | 58 | 232 |
| #f5f5ff | #f5f5ff | css variable | 54 | 216 |
| #00b261 | #00b261 | css variable | 54 | 216 |
| #bac8da | #bac8da | css variable | 54 | 216 |
| #362baa | #362baa | css variable | 50 | 200 |
| #f9b900 | #f9b900 | css variable | 48 | 192 |
| #f3432a | #f3432a | css variable | 48 | 192 |
| #273f73 | #273f73 | css variable | 46 | 184 |
| #23356e | #23356e | css variable | 46 | 184 |
| #9b6829 | #9b6829 | css variable | 44 | 176 |
| #5d1c3c | #5d1c3c | css variable | 44 | 176 |
| #483414 | #483414 | css variable | 44 | 176 |
| #a51d85 | #a51d85 | css variable | 44 | 176 |
| #4f2055 | #4f2055 | css variable | 44 | 176 |
| #ab3500 | #ab3500 | css variable | 44 | 176 |
| #56281b | #56281b | css variable | 44 | 176 |
| #839bc8 | #839bc8 | css variable | 42 | 168 |
| #a3b5d6 | #a3b5d6 | css variable | 42 | 168 |
| #a01400 | #a01400 | css variable | 40 | 160 |
| #006f3a | #006f3a | css variable | 40 | 160 |
| #b6f2c7 | #b6f2c7 | css variable | 40 | 160 |
| #fee8eb | #fee8eb | css variable | 40 | 160 |
| #feb9ac | #feb9ac | css variable | 40 | 160 |
| rgb(80, 97, 122) | #50617a | text/content, border/divider | 38 | 154 |
| #c3d3ff | #c3d3ff | css variable | 38 | 152 |
| #0d253d | #0d253d | css variable | 36 | 144 |
| #11273e | #11273e | css variable | 36 | 144 |
| #9a9afe | #9a9afe | css variable | 36 | 144 |
| #3c4f69 | #3c4f69 | css variable | 36 | 144 |
| #e2225f | #e2225f | css variable | 36 | 144 |
| #0f1137 | #0f1137 | css variable | 36 | 144 |
| #161741 | #161741 | css variable | 36 | 144 |
| #cf2cab | #cf2cab | css variable | 36 | 144 |
| #d04900 | #d04900 | css variable | 36 | 144 |
| #1a2c44 | #1a2c44 | css variable | 36 | 144 |
| #e4eaff | #e4eaff | css variable | 34 | 136 |
| #182659 | #182659 | css variable | 34 | 136 |
| #122054 | #122054 | css variable | 34 | 136 |
| #ccdaff | #ccdaff | css variable | 34 | 136 |
| #1c1b5a | #1c1b5a | css variable, shadow/elevation | 40 | 124 |
| #f2f7fe | #f2f7fe | css variable | 30 | 120 |
| #6480b2 | #6480b2 | css variable | 30 | 120 |
| #2c2484 | #2c2484 | css variable | 30 | 120 |
| #c0cee6 | #c0cee6 | css variable | 26 | 104 |
| #f6f7ff | #f6f7ff | css variable | 26 | 104 |
| #d4deef | #d4deef | css variable | 26 | 104 |
| #e3ecf7 | #e3ecf7 | css variable | 22 | 88 |
| #222069 | #222069 | css variable | 22 | 88 |
| #171055 | #171055 | css variable | 22 | 88 |
| #101d4e | #101d4e | css variable | 22 | 88 |
| #191a51 | #191a51 | css variable | 22 | 88 |
| #f96bee | #f96bee | css variable | 18 | 72 |
| #f98bf9 | #f98bf9 | css variable | 18 | 72 |
| #fd6252 | #fd6252 | css variable | 18 | 72 |
| #ffd552 | #ffd552 | css variable | 18 | 72 |
| #b262f9 | #b262f9 | css variable | 18 | 72 |
| #fd5d7c | #fd5d7c | css variable | 18 | 72 |

#### Border

| color | normalized | usage guess | occurrences | weight |
| --- | --- | --- | --- | --- |
| rgb(6, 27, 49) | #061b31 | text/content, border/divider, button/component action, link/component action, card/component surface | 168 | 542 |
| rgb(255, 255, 255) | #ffffff | text/content, border/divider, background/surface, link/component action | 82 | 323 |
| rgb(100, 116, 141) | #64748d | text/content, border/divider, button/component action | 44 | 190 |

#### Neutral

No colors captured in this group.

#### Transparent

No colors captured in this group.

#### Unknown

No colors captured in this group.

### Complex Color Values

#### Shadow / Complex

| value | usage guess | occurrences | weight |
| --- | --- | --- | --- |
| 0px | shadow/elevation | 288 | 576 |
| #ffffff00 | css variable | 144 | 576 |
| #d4dee9bf | css variable | 90 | 360 |
| #1658bc08 | css variable | 36 | 144 |
| #acacff1f | css variable | 36 | 144 |
| 2px | shadow/elevation | 54 | 108 |
| 4px | shadow/elevation | 54 | 108 |
| #4834dbb2 | css variable | 26 | 104 |
| #582be233 | css variable | 22 | 88 |
| #17297080 | css variable | 22 | 88 |
| rgba(255, 255, 255, 0) | background/surface | 28 | 80 |
| 5px | shadow/elevation | 36 | 72 |
| 10px | shadow/elevation | 36 | 72 |
| #0037701a | shadow/elevation | 36 | 72 |
| 20px | shadow/elevation | 36 | 72 |
| -16px | shadow/elevation | 36 | 72 |
| 8px | shadow/elevation | 36 | 72 |
| -2px | shadow/elevation | 36 | 72 |
| #003b890a | shadow/elevation | 36 | 72 |
| #4b31d080 | css variable | 18 | 72 |
| #a8c3de4d | css variable | 18 | 72 |
| #ffffffa6 | css variable | 18 | 72 |
| #ffffff40 | css variable | 18 | 72 |
| #23357a80 | css variable | 18 | 72 |
| #7680f54d | css variable | 18 | 72 |
| #b9b9f999 | css variable | 18 | 72 |
| #ffffff80 | css variable | 18 | 72 |
| #a3a7ff40 | css variable | 18 | 72 |
| #2f458ba6 | css variable | 18 | 72 |
| #b9b9f94d | css variable | 18 | 72 |
| #9a9afe1f | css variable | 18 | 72 |
| #7591b580 | css variable | 18 | 72 |
| color-mix(in srgb,#e5edf5 50%,transparent) | css variable | 18 | 72 |
| #0d173826 | shadow/elevation | 24 | 48 |
| #0d173833 | shadow/elevation | 24 | 48 |
| #23356ea6 | css variable | 12 | 48 |
| rgb(0, 0, 0) rgb(229, 237, 245) | border/divider | 7 | 41 |
| #00377014 | shadow/elevation | 18 | 36 |
| #003b890f | shadow/elevation | 18 | 36 |
| 22px | shadow/elevation | 18 | 36 |
| #061b311f | shadow/elevation | 18 | 36 |
| #003b890d | shadow/elevation | 18 | 36 |
| 0px 20px 80px -16px #00377024,0px 10px 60px -16px #003b890f | shadow/elevation | 18 | 36 |
| 0px 6px 22px 0px #0037701a,0px 4px 8px 0px #003b8905 | shadow/elevation | 18 | 36 |
| 60px | shadow/elevation | 18 | 36 |
| #003b8905 | shadow/elevation | 18 | 36 |
| #27395114 | shadow/elevation | 18 | 36 |
| 80px | shadow/elevation | 18 | 36 |
| 14px | shadow/elevation | 18 | 36 |
| 15px | shadow/elevation | 18 | 36 |
| 0px 16px 32px rgba(50,50,93,.12) | shadow/elevation | 18 | 36 |
| 6px | shadow/elevation | 18 | 36 |
| 0px 15px 40px -2px #0037701a,0px 5px 20px -2px #003b890a | shadow/elevation | 18 | 36 |
| #00377024 | shadow/elevation | 18 | 36 |
| 0px 2px 10px 0px #0037700f,0px 1px 4px 0px #003b890a | shadow/elevation | 18 | 36 |
| 0px 5px 14px 0px #00377014,0px 2px 8px 0px #003b890d | shadow/elevation | 18 | 36 |
| #0037700f | shadow/elevation | 18 | 36 |
| 1px | shadow/elevation | 18 | 36 |
| 40px | shadow/elevation | 18 | 36 |
| #44556699 | css variable | 8 | 32 |
| #0d17380d | css variable | 4 | 16 |
| #45639d99 | css variable | 4 | 16 |
| #0000001a | css variable | 4 | 16 |
| #23356e00 | css variable | 4 | 16 |
| #362baa99 | css variable | 4 | 16 |
| #17105559 | css variable | 4 | 16 |
| #2c248480 | css variable | 4 | 16 |
| #273f7380 | css variable | 4 | 16 |
| color-mix(in srgb,#bac8da 50%,transparent) | css variable | 2 | 8 |
| rgb(0, 0, 0) rgb(24, 38, 89) | border/divider | 1 | 6 |
| rgb(0, 0, 0) rgb(229, 237, 245) rgb(229, 237, 245) | border/divider | 1 | 6 |
| radial-gradient(circle,#f72df3,#533afd 33%,#e5edf5 66%) | border/divider | 1 | 2 |
| radial-gradient(circle,#ffad00,#ff7600 33%,#e5edf5 66%) | border/divider | 1 | 2 |

#### Transparent

| value | usage guess | occurrences | weight |
| --- | --- | --- | --- |
| rgba(0, 0, 0, 0) | background/surface, button/component action, link/component action, card/component surface | 375 | 1552 |
| rgb(0, 0, 0) rgba(0, 0, 0, 0) | border/divider | 1 | 6 |

## CSS Variables

Variables are deduplicated by `name + value`. Technical source metadata remains available in `tokens.json`.

Showing 300 of 1128 captured CSS variables. 828 additional item(s) are preserved in `tokens.json`.

### Colors

| variable | value |
| --- | --- |
| --accent-gradient-color-stop-1 | #bdb4ff |
| --accent-gradient-color-stop-2 | #643afd |
| --accent-gradient-color-stop-3 | #533afd |
| --browser-graphic-dots-color | color-mix(in srgb,#bac8da 50%,transparent) |
| --hds-canary-color-border-focus | #635bff |
| --hds-canary-ui-mini-stroke | #e5edf5 |
| --hds-canary-ui-stroke | color-mix(in srgb,#e5edf5 50%,transparent) |
| --hds-color-accent-border-quiet | #d6d9fc |
| --hds-color-accent-border-quiet | #533afd |
| --hds-color-accent-border-solid | #533afd |
| --hds-color-accent-charm-bg | #533afd |
| --hds-color-accent-charm-gradientEnd | #4032c8 |
| --hds-color-accent-charm-gradientMiddle | #533afd |
| --hds-color-accent-charm-gradientStart | #7f7dfc |
| --hds-color-accent-icon-solid | #533afd |
| --hds-color-accent-icon-solid | #7389ff |
| --hds-color-accent-icon-solidAlt | #533afd |
| --hds-color-accent-icon-solidAlt | #0d1738 |
| --hds-color-accent-surface-solid | #533afd |
| --hds-color-accent-surface-subdued | #e2e4ff |
| --hds-color-accent-surface-subdued | #362baa |
| --hds-color-accent-surface-subduedAlt | #e2e4ff |
| --hds-color-accent-surface-subduedAlt | #533afd |
| --hds-color-accent-text-solid | #533afd |
| --hds-color-accentColorMode-default-icon-gradientEnd | #4032c8 |
| --hds-color-accentColorMode-default-icon-gradientMiddle | #533afd |
| --hds-color-accentColorMode-default-icon-gradientStart | #7f7dfc |
| --hds-color-accentColorMode-default-icon-solidAlt | #533afd |
| --hds-color-accentColorMode-default-icon-solidAlt | #0d1738 |
| --hds-color-accentColorMode-default-surface-subduedAlt | #e2e4ff |
| --hds-color-accentColorMode-default-surface-subduedAlt | #533afd |
| --hds-color-accentColorMode-lemon-border-quiet | #ffe1a3 |
| --hds-color-accentColorMode-lemon-border-quiet | #9b6829 |
| --hds-color-accentColorMode-lemon-icon-gradientEnd | #ff9014 |
| --hds-color-accentColorMode-lemon-icon-gradientMiddle | #ffaf2d |
| --hds-color-accentColorMode-lemon-icon-gradientStart | #ffd552 |
| --hds-color-accentColorMode-lemon-icon-solid | #e8a30b |
| --hds-color-accentColorMode-lemon-icon-solid | #f9b900 |
| --hds-color-accentColorMode-lemon-icon-solidAlt | #e8a30b |
| --hds-color-accentColorMode-lemon-icon-solidAlt | #0d1738 |
| --hds-color-accentColorMode-lemon-surface-subdued | #fff2d8 |
| --hds-color-accentColorMode-lemon-surface-subdued | #483414 |
| --hds-color-accentColorMode-lemon-surface-subduedAlt | #fff2d8 |
| --hds-color-accentColorMode-lemon-surface-subduedAlt | #f9b900 |
| --hds-color-accentColorMode-magenta-border-quiet | #ffd7ef |
| --hds-color-accentColorMode-magenta-border-quiet | #a51d85 |
| --hds-color-accentColorMode-magenta-icon-gradientEnd | #b262f9 |
| --hds-color-accentColorMode-magenta-icon-gradientMiddle | #f96bee |
| --hds-color-accentColorMode-magenta-icon-gradientStart | #f98bf9 |
| --hds-color-accentColorMode-magenta-icon-solid | #f44bcc |
| --hds-color-accentColorMode-magenta-icon-solidAlt | #f44bcc |
| --hds-color-accentColorMode-magenta-icon-solidAlt | #0d1738 |
| --hds-color-accentColorMode-magenta-surface-subdued | #ffe6f5 |
| --hds-color-accentColorMode-magenta-surface-subdued | #4f2055 |
| --hds-color-accentColorMode-magenta-surface-subduedAlt | #ffe6f5 |
| --hds-color-accentColorMode-magenta-surface-subduedAlt | #f44bcc |
| --hds-color-accentColorMode-orange-border-quiet | #ffd8c6 |
| --hds-color-accentColorMode-orange-border-quiet | #ab3500 |
| --hds-color-accentColorMode-orange-icon-gradientEnd | #fd5d7c |
| --hds-color-accentColorMode-orange-icon-gradientMiddle | #fd6252 |
| --hds-color-accentColorMode-orange-icon-gradientStart | #fe8c2d |
| --hds-color-accentColorMode-orange-icon-solid | #ff6118 |
| --hds-color-accentColorMode-orange-icon-solidAlt | #ff6118 |
| --hds-color-accentColorMode-orange-icon-solidAlt | #0d1738 |
| --hds-color-accentColorMode-orange-surface-subdued | #ffe5da |
| --hds-color-accentColorMode-orange-surface-subdued | #56281b |
| --hds-color-accentColorMode-orange-surface-subduedAlt | #ffe5da |
| --hds-color-accentColorMode-orange-surface-subduedAlt | #ff6118 |
| --hds-color-accentColorMode-ruby-border-quiet | #fed9de |
| --hds-color-accentColorMode-ruby-border-quiet | #b51145 |
| --hds-color-accentColorMode-ruby-icon-gradientEnd | #b51145 |
| --hds-color-accentColorMode-ruby-icon-gradientMiddle | #ea2261 |
| --hds-color-accentColorMode-ruby-icon-gradientStart | #fd7184 |
| --hds-color-accentColorMode-ruby-icon-solid | #ea2261 |
| --hds-color-accentColorMode-ruby-icon-solidAlt | #ea2261 |
| --hds-color-accentColorMode-ruby-icon-solidAlt | #0d1738 |
| --hds-color-accentColorMode-ruby-surface-subdued | #fed9de |
| --hds-color-accentColorMode-ruby-surface-subdued | #5d1c3c |
| --hds-color-accentColorMode-ruby-surface-subduedAlt | #fed9de |
| --hds-color-accentColorMode-ruby-surface-subduedAlt | #b51145 |
| --hds-color-action-bg-disabled | #e5edf5 |
| --hds-color-action-bg-disabled | #23356ea6 |
| --hds-color-action-bg-quiet | #e8e9ff |
| --hds-color-action-bg-quiet | #2c2484 |
| --hds-color-action-bg-quietHover | #d6d9fc |
| --hds-color-action-bg-quietHover | #362baa |
| --hds-color-action-bg-solid | #533afd |
| --hds-color-action-bg-solidHover | #4032c8 |
| --hds-color-action-bg-solidHover | #5d64fe |
| --hds-color-action-bg-subdued | #e2e4ff |
| --hds-color-action-bg-subdued | #362baa |
| --hds-color-action-bg-subduedHover | #b9b9f9 |
| --hds-color-action-bg-subduedHover | #533afd |
| --hds-color-action-bg-translucent | #ffffffa6 |
| --hds-color-action-bg-transparent | #ffffff00 |
| --hds-color-action-border-disabled | #d4dee9 |
| --hds-color-action-border-disabled | #273f73 |
| --hds-color-action-border-quiet | #d6d9fc |
| --hds-color-action-border-quiet | #533afd |
| --hds-color-action-border-solid | #533afd |
| --hds-color-action-border-solid | #7389ff |
| --hds-color-action-border-solidHover | #4032c8 |
| --hds-color-action-border-solidHover | #f2f7fe |
| --hds-color-action-border-subdued | #b9b9f9 |
| --hds-color-action-border-subdued | #533afd |
| --hds-color-action-focus-inner-quiet | #fff |
| --hds-color-action-focus-inner-quiet | #0d1738 |
| --hds-color-action-focus-inner-subdued | #f8fafd |
| --hds-color-action-focus-inner-subdued | #122054 |
| --hds-color-action-focus-outer | #533afd |
| --hds-color-action-focus-outer | #92adff |
| --hds-color-action-focus-surface | #ffffff00 |
| --hds-color-action-icon-disabled | #95a4ba |
| --hds-color-action-icon-disabled | #45639d |
| --hds-color-action-icon-navigation-soft | #50617a |
| --hds-color-action-icon-navigation-soft | #a3b5d6 |
| --hds-color-action-icon-navigation-solid | #061b31 |
| --hds-color-action-icon-navigation-solid | #fff |
| --hds-color-action-icon-navigation-subdued | #64748d |
| --hds-color-action-icon-navigation-subdued | #839bc8 |
| --hds-color-action-icon-onQuiet | #533afd |
| --hds-color-action-icon-onQuiet | #92adff |
| --hds-color-action-icon-onSolid | #fff |
| --hds-color-action-icon-onSubdued | #533afd |
| --hds-color-action-icon-onSubdued | #92adff |
| --hds-color-action-icon-onTranslucent | #533afd |
| --hds-color-action-icon-onTranslucent | #92adff |
| --hds-color-action-icon-onTransparent | #533afd |
| --hds-color-action-icon-onTransparent | #7389ff |
| --hds-color-action-icon-solid | #533afd |
| --hds-color-action-icon-solid | #7389ff |
| --hds-color-action-icon-solidAlternate | #533afd |
| --hds-color-action-icon-solidAlternate | #fff |
| --hds-color-action-icon-solidAlternateHover | #2e2b8c |
| --hds-color-action-icon-solidAlternateHover | #7389ff |
| --hds-color-action-icon-solidHover | #2e2b8c |
| --hds-color-action-icon-solidHover | #a8bfff |
| --hds-color-action-text-disabled | #95a4ba |
| --hds-color-action-text-disabled | #45639d |
| --hds-color-action-text-onQuiet | #533afd |
| --hds-color-action-text-onQuiet | #92adff |
| --hds-color-action-text-onSolid | #fff |
| --hds-color-action-text-onSubdued | #533afd |
| --hds-color-action-text-onSubdued | #92adff |
| --hds-color-action-text-onTranslucent | #533afd |
| --hds-color-action-text-onTranslucent | #92adff |
| --hds-color-action-text-onTransparent | #533afd |
| --hds-color-action-text-onTransparent | #7389ff |
| --hds-color-action-text-secondary | #061b31 |
| --hds-color-action-text-secondary | #fff |
| --hds-color-action-text-solid | #533afd |
| --hds-color-action-text-solid | #7389ff |
| --hds-color-action-text-solidAlternate | #533afd |
| --hds-color-action-text-solidAlternate | #fff |
| --hds-color-action-text-solidAlternateHover | #2e2b8c |
| --hds-color-action-text-solidAlternateHover | #7389ff |
| --hds-color-action-text-solidHover | #2e2b8c |
| --hds-color-action-text-solidHover | #a8bfff |
| --hds-color-button-primary-bg | #533afd |
| --hds-color-button-primary-bgDisabled | #e5edf5 |
| --hds-color-button-primary-bgDisabled | #23356ea6 |
| --hds-color-button-primary-bgHover | #4032c8 |
| --hds-color-button-primary-bgHover | #5d64fe |
| --hds-color-button-primary-icon | #fff |
| --hds-color-button-primary-iconDisabled | #95a4ba |
| --hds-color-button-primary-iconDisabled | #45639d |
| --hds-color-button-primary-iconHover | #fff |
| --hds-color-button-primary-text | #fff |
| --hds-color-button-primary-textDisabled | #95a4ba |
| --hds-color-button-primary-textDisabled | #45639d |
| --hds-color-button-primary-textHover | #fff |
| --hds-color-button-secondary-bg | #ffffff00 |
| --hds-color-button-secondary-bgHover | #ffffff00 |
| --hds-color-button-secondary-border | #d6d9fc |
| --hds-color-button-secondary-border | #4834dbb2 |
| --hds-color-button-secondary-borderDisabled | #d4dee9 |
| --hds-color-button-secondary-borderDisabled | #273f73 |
| --hds-color-button-secondary-borderHover | #4032c8 |
| --hds-color-button-secondary-borderHover | #5d64fe |
| --hds-color-button-secondary-borderOnSubdued | #b9b9f9 |
| --hds-color-button-secondary-borderOnSubdued | #4834dbb2 |
| --hds-color-button-secondary-icon | #533afd |
| --hds-color-button-secondary-icon | #7389ff |
| --hds-color-button-secondary-iconHover | #2e2b8c |
| --hds-color-button-secondary-iconHover | #a8bfff |
| --hds-color-button-secondary-text | #533afd |
| --hds-color-button-secondary-text | #fff |
| --hds-color-button-secondary-textDisabled | #95a4ba |
| --hds-color-button-secondary-textDisabled | #45639d |
| --hds-color-button-secondary-textHover | #2e2b8c |
| --hds-color-button-secondary-textHover | #fff |
| --hds-color-button-ui-bg | #e8e9ff |
| --hds-color-button-ui-bg | #2c2484 |
| --hds-color-button-ui-bgHover | #d6d9fc |
| --hds-color-button-ui-bgHover | #362baa |
| --hds-color-button-ui-bgOnSubdued | #e2e4ff |
| --hds-color-button-ui-bgOnSubdued | #362baa |
| --hds-color-button-ui-bgOnSubduedHover | #b9b9f9 |
| --hds-color-button-ui-bgOnSubduedHover | #533afd |
| --hds-color-button-ui-borderDisabled | #d4dee9 |
| --hds-color-button-ui-borderDisabled | #273f73 |
| --hds-color-button-ui-icon | #533afd |
| --hds-color-button-ui-icon | #7389ff |
| --hds-color-button-ui-iconDisabled | #95a4ba |
| --hds-color-button-ui-iconDisabled | #45639d |
| --hds-color-button-ui-iconHover | #2e2b8c |
| --hds-color-button-ui-iconHover | #a8bfff |
| --hds-color-core-brand-100 | #d6d9fc |
| --hds-color-core-brand-100A | #7680f54d |
| --hds-color-core-brand-200 | #b9b9f9 |
| --hds-color-core-brand-25 | #f5f5ff |
| --hds-color-core-brand-25A | #acacff1f |
| --hds-color-core-brand-300 | #9a9afe |
| --hds-color-core-brand-400 | #7f7dfc |
| --hds-color-core-brand-50 | #e8e9ff |
| --hds-color-core-brand-500 | #665efd |
| --hds-color-core-brand-50A | #a3a7ff40 |
| --hds-color-core-brand-600 | #533afd |
| --hds-color-core-brand-700 | #4032c8 |
| --hds-color-core-brand-75 | #e2e4ff |
| --hds-color-core-brand-800 | #2e2b8c |
| --hds-color-core-brand-900 | #1c1e54 |
| --hds-color-core-brand-925 | #1c1e54 |
| --hds-color-core-brand-950 | #161741 |
| --hds-color-core-brand-975 | #0f1137 |
| --hds-color-core-brandDark-100 | #c3d3ff |
| --hds-color-core-brandDark-200 | #a8bfff |
| --hds-color-core-brandDark-25 | #f6f7ff |
| --hds-color-core-brandDark-300 | #92adff |
| --hds-color-core-brandDark-400 | #7389ff |
| --hds-color-core-brandDark-50 | #e4eaff |
| --hds-color-core-brandDark-500 | #5d64fe |
| --hds-color-core-brandDark-600 | #533afd |
| --hds-color-core-brandDark-700 | #362baa |
| --hds-color-core-brandDark-700A | #4834dbb2 |
| --hds-color-core-brandDark-75 | #ccdaff |
| --hds-color-core-brandDark-800 | #2c2484 |
| --hds-color-core-brandDark-800A | #4b31d080 |
| --hds-color-core-brandDark-900 | #222069 |
| --hds-color-core-brandDark-925 | #1c1b5a |
| --hds-color-core-brandDark-925A | #582be233 |
| --hds-color-core-brandDark-950 | #191a51 |
| --hds-color-core-brandDark-975 | #171055 |
| --hds-color-core-error-100 | #feb9ac |
| --hds-color-core-error-400 | #f3432a |
| --hds-color-core-error-500 | #d8351e |
| --hds-color-core-error-600 | #a01400 |
| --hds-color-core-global-transparent | #ffffff00 |
| --hds-color-core-lemon-100 | #ffe1a3 |
| --hds-color-core-lemon-200 | #f9b900 |
| --hds-color-core-lemon-25 | #fff2d8 |
| --hds-color-core-lemon-300 | #e8a30b |
| --hds-color-core-lemon-500 | #9b6829 |
| --hds-color-core-lemon-800 | #483414 |
| --hds-color-core-magenta-100 | #ffd7ef |
| --hds-color-core-magenta-350 | #f44bcc |
| --hds-color-core-magenta-50 | #ffe6f5 |
| --hds-color-core-magenta-500 | #cf2cab |
| --hds-color-core-magenta-600 | #a51d85 |
| --hds-color-core-magenta-800 | #4f2055 |
| --hds-color-core-neutral-0 | #fff |
| --hds-color-core-neutral-100 | #d4dee9 |
| --hds-color-core-neutral-200 | #bac8da |
| --hds-color-core-neutral-200A | #7591b580 |
| --hds-color-core-neutral-25 | #f8fafd |
| --hds-color-core-neutral-25A | #1658bc08 |
| --hds-color-core-neutral-300 | #95a4ba |
| --hds-color-core-neutral-400 | #7d8ba4 |
| --hds-color-core-neutral-50 | #e5edf5 |
| --hds-color-core-neutral-500 | #64748d |
| --hds-color-core-neutral-50A | #a8c3de4d |
| --hds-color-core-neutral-600 | #50617a |
| --hds-color-core-neutral-700 | #3c4f69 |
| --hds-color-core-neutral-800 | #273951 |
| --hds-color-core-neutral-900 | #1a2c44 |
| --hds-color-core-neutral-950 | #11273e |
| --hds-color-core-neutral-975 | #0d253d |
| --hds-color-core-neutral-990 | #061b31 |
| --hds-color-core-neutralDark-100 | #d4deef |
| --hds-color-core-neutralDark-200 | #c0cee6 |
| --hds-color-core-neutralDark-25 | #f2f7fe |
| --hds-color-core-neutralDark-300 | #a3b5d6 |
| --hds-color-core-neutralDark-400 | #839bc8 |
| --hds-color-core-neutralDark-50 | #e3ecf7 |
| --hds-color-core-neutralDark-500 | #6480b2 |
| --hds-color-core-neutralDark-600 | #45639d |
| --hds-color-core-neutralDark-700 | #273f73 |

### Typography

No variables captured in this group.

### Radius

No variables captured in this group.

### Shadows

No variables captured in this group.

### Spacing / Sizes

No variables captured in this group.

### Borders

| variable | value |
| --- | --- |
| --hds-button-border-width | 1px |
| --hds-canary-dashed-border | 1px dashed #e5edf5 |
| --hds-canary-layout-content-maxWidth-borders | calc(1264px + 2px) |
| --hds-size-input-popover-border-width | 0px |
| --hds-space-button-border | 1px |
| --hds-space-core-border-lg | 2px |
| --hds-space-core-border-md | 1.25px |
| --hds-space-core-border-none | 0px |
| --hds-space-core-border-sm | 1px |
| --hds-space-input-border-default | 1.25px |
| --section-container-border-inline | none |
| --startups-card-border-gradient-bg | radial-gradient(circle,#f72df3,#533afd 33%,#e5edf5 66%) |
| --startups-card-border-gradient-bg | radial-gradient(circle,#ffad00,#ff7600 33%,#e5edf5 66%) |

### Other Variables

No variables captured in this group.

## Typography Inventory

| role | font family | size | weight | line height | letter spacing |
| --- | --- | --- | --- | --- | --- |
| h1 | sohne-var, "SF Pro Display", sans-serif | 44px | 300 | 1.1500000000000001 | -0.88px |
| h2 | sohne-var, "SF Pro Display", sans-serif | 32px | 300 | 1.1 | -0.64px |
| h3 | sohne-var, "SF Pro Display", sans-serif | 26px | 300 | 1.12 | -0.26px |
| body | sohne-var, "SF Pro Display", sans-serif | 32px | 300 | 1.1 | -0.64px |
| link | sohne-var, "SF Pro Display", sans-serif | 16px | 400 | normal | normal |

## Button Inventory

### Resolved Button Patterns

The component section above identifies primary, secondary, ghost, and link button patterns when confidently detected.

### All Captured Buttons

Showing 5 of 5 captured buttons.

| label | tag | selector | variant | background | text | border | radius | padding | height | font | hover |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Produtos​ | button | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | link | rgba(0, 0, 0, 0) | rgb(6, 27, 49) | 0px none rgb(6, 27, 49) | 4px | 12px 0px 12px 0px | 40px | 14px / 400 | none detected |
| Soluções | button | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | link | rgba(0, 0, 0, 0) | rgb(100, 116, 141) | 0px none rgb(100, 116, 141) | 4px | 12px 0px 12px 0px | 40px | 14px / 400 | Color -> rgb(79, 96, 120); Border -> 0px none rgb(79, 96, 120) |
| Desenvolvedores | button | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | link | rgba(0, 0, 0, 0) | rgb(100, 116, 141) | 0px none rgb(100, 116, 141) | 4px | 12px 0px 12px 0px | 40px | 14px / 400 | Color -> rgb(80, 97, 121); Border -> 0px none rgb(80, 97, 121) |
| Recursos | button | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | link | rgba(0, 0, 0, 0) | rgb(100, 116, 141) | 0px none rgb(100, 116, 141) | 4px | 12px 0px 12px 0px | 40px | 14px / 400 | Color -> rgb(78, 95, 119); Border -> 0px none rgb(78, 95, 119) |
| Plano de preços | a | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | link | rgba(0, 0, 0, 0) | rgb(100, 116, 141) | 0px none rgb(100, 116, 141) | 4px | 12px 0px 12px 0px | 38px | 14px / 400 | Color -> rgb(79, 96, 121); Border -> 0px none rgb(79, 96, 121) |

### Button Interactive States

| label | variant | selector | state | background | text | border | radius | padding | height | differences |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Produtos​ | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | default | rgba(0, 0, 0, 0) | rgb(6, 27, 49) | 0px none rgb(6, 27, 49) | 4px | 12px 0px 12px 0px | 40px | none detected |
| Produtos​ | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | hover | rgba(0, 0, 0, 0) | rgb(6, 27, 49) | 0px none rgb(6, 27, 49) | 4px | 12px 0px 12px 0px | 40px | none detected |
| Produtos​ | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | focus | rgba(0, 0, 0, 0) | rgb(6, 27, 49) | 0px none rgb(6, 27, 49) | 4px | 12px 0px 12px 0px | 40px | none detected |
| Produtos​ | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | active | rgba(0, 0, 0, 0) | rgb(6, 27, 49) | 0px none rgb(6, 27, 49) | 4px | 12px 0px 12px 0px | 40px | none detected |
| Soluções | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | default | rgba(0, 0, 0, 0) | rgb(100, 116, 141) | 0px none rgb(100, 116, 141) | 4px | 12px 0px 12px 0px | 40px | none detected |
| Soluções | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | hover | rgba(0, 0, 0, 0) | rgb(79, 96, 120) | 0px none rgb(79, 96, 120) | 4px | 12px 0px 12px 0px | 40px | Color -> rgb(79, 96, 120); Border -> 0px none rgb(79, 96, 120) |
| Soluções | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | focus | rgba(0, 0, 0, 0) | rgb(69, 87, 111) | 0px none rgb(69, 87, 111) | 4px | 12px 0px 12px 0px | 40px | Color -> rgb(69, 87, 111); Border -> 0px none rgb(69, 87, 111) |
| Soluções | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | active | rgba(0, 0, 0, 0) | rgb(6, 27, 49) | 0px none rgb(6, 27, 49) | 4px | 12px 0px 12px 0px | 40px | Color -> rgb(6, 27, 49); Border -> 0px none rgb(6, 27, 49) |
| Desenvolvedores | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | default | rgba(0, 0, 0, 0) | rgb(100, 116, 141) | 0px none rgb(100, 116, 141) | 4px | 12px 0px 12px 0px | 40px | none detected |
| Desenvolvedores | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | hover | rgba(0, 0, 0, 0) | rgb(80, 97, 121) | 0px none rgb(80, 97, 121) | 4px | 12px 0px 12px 0px | 40px | Color -> rgb(80, 97, 121); Border -> 0px none rgb(80, 97, 121) |
| Desenvolvedores | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | focus | rgba(0, 0, 0, 0) | rgb(70, 88, 112) | 0px none rgb(70, 88, 112) | 4px | 12px 0px 12px 0px | 40px | Color -> rgb(70, 88, 112); Border -> 0px none rgb(70, 88, 112) |
| Desenvolvedores | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | active | rgba(0, 0, 0, 0) | rgb(6, 27, 49) | 0px none rgb(6, 27, 49) | 4px | 12px 0px 12px 0px | 40px | Color -> rgb(6, 27, 49); Border -> 0px none rgb(6, 27, 49) |
| Recursos | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | default | rgba(0, 0, 0, 0) | rgb(100, 116, 141) | 0px none rgb(100, 116, 141) | 4px | 12px 0px 12px 0px | 40px | none detected |
| Recursos | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | hover | rgba(0, 0, 0, 0) | rgb(78, 95, 119) | 0px none rgb(78, 95, 119) | 4px | 12px 0px 12px 0px | 40px | Color -> rgb(78, 95, 119); Border -> 0px none rgb(78, 95, 119) |
| Recursos | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | focus | rgba(0, 0, 0, 0) | rgb(68, 86, 110) | 0px none rgb(68, 86, 110) | 4px | 12px 0px 12px 0px | 40px | Color -> rgb(68, 86, 110); Border -> 0px none rgb(68, 86, 110) |
| Recursos | link | button.hds-button.hds-navigation-menu__trigger.hds-button--transparent | active | rgba(0, 0, 0, 0) | rgb(6, 27, 49) | 0px none rgb(6, 27, 49) | 4px | 12px 0px 12px 0px | 40px | Color -> rgb(6, 27, 49); Border -> 0px none rgb(6, 27, 49) |
| Plano de preços | link | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | default | rgba(0, 0, 0, 0) | rgb(100, 116, 141) | 0px none rgb(100, 116, 141) | 4px | 12px 0px 12px 0px | 38px | none detected |
| Plano de preços | link | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | hover | rgba(0, 0, 0, 0) | rgb(79, 96, 121) | 0px none rgb(79, 96, 121) | 4px | 12px 0px 12px 0px | 38px | Color -> rgb(79, 96, 121); Border -> 0px none rgb(79, 96, 121) |
| Plano de preços | link | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | focus | rgba(0, 0, 0, 0) | rgb(70, 88, 112) | 0px none rgb(70, 88, 112) | 4px | 12px 0px 12px 0px | 38px | Color -> rgb(70, 88, 112); Border -> 0px none rgb(70, 88, 112) |
| Plano de preços | link | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | active | rgba(0, 0, 0, 0) | rgb(7, 28, 50) | 0px none rgb(7, 28, 50) | 4px | 12px 0px 12px 0px | 38px | Color -> rgb(7, 28, 50); Border -> 0px none rgb(7, 28, 50) |

## Link Inventory

### Resolved Link Patterns

Use the typography link token for general links, and the captured inventory below for site-specific link treatments.

### All Captured Links

Showing 4 of 4 captured links.

| text | tag | selector | href | color | decoration | font size | font weight | hover |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Link 1 | a | a.hds-link.navigation-menu-home-link | https://stripe.com/ | rgb(83, 58, 253) | none | 16px | 400 | Color -> rgb(46, 43, 140); Border -> 0px none rgb(46, 43, 140) |
| Plano de preços | a | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | https://stripe.com/br/pricing | rgb(6, 27, 49) | none | 14px | 400 | none detected |
| Entrar | a | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | https://dashboard.stripe.com/login | rgb(6, 27, 49) | none | 14px | 400 | none detected |
| Comece agora | a | a.hds-button.hds-button--primary | https://dashboard.stripe.com/register | rgb(255, 255, 255) | none | 16px | 400 | none detected |

### Link Interactive States

| text | selector | href | state | color | decoration | border | font size | font weight | differences |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Link 1 | a.hds-link.navigation-menu-home-link | https://stripe.com/ | default | rgb(83, 58, 253) | none | 0px none rgb(83, 58, 253) | 16px | 400 | none detected |
| Link 1 | a.hds-link.navigation-menu-home-link | https://stripe.com/ | hover | rgb(46, 43, 140) | none | 0px none rgb(46, 43, 140) | 16px | 400 | Color -> rgb(46, 43, 140); Border -> 0px none rgb(46, 43, 140) |
| Link 1 | a.hds-link.navigation-menu-home-link | https://stripe.com/ | focus | rgb(46, 43, 140) | none | 0px none rgb(46, 43, 140) | 16px | 400 | Color -> rgb(46, 43, 140); Border -> 0px none rgb(46, 43, 140) |
| Link 1 | a.hds-link.navigation-menu-home-link | https://stripe.com/ | active | rgb(46, 43, 140) | none | 0px none rgb(46, 43, 140) | 16px | 400 | Color -> rgb(46, 43, 140); Border -> 0px none rgb(46, 43, 140) |
| Plano de preços | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | https://stripe.com/br/pricing | default | rgb(6, 27, 49) | none | 0px none rgb(6, 27, 49) | 14px | 400 | none detected |
| Plano de preços | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | https://stripe.com/br/pricing | hover | rgb(6, 27, 49) | none | 0px none rgb(6, 27, 49) | 14px | 400 | none detected |
| Plano de preços | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | https://stripe.com/br/pricing | focus | rgb(6, 27, 49) | none | 0px none rgb(6, 27, 49) | 14px | 400 | none detected |
| Plano de preços | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | https://stripe.com/br/pricing | active | rgb(6, 27, 49) | none | 0px none rgb(6, 27, 49) | 14px | 400 | none detected |
| Entrar | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | https://dashboard.stripe.com/login | default | rgb(6, 27, 49) | none | 0px none rgb(6, 27, 49) | 14px | 400 | none detected |
| Entrar | a.hds-button.hds-navigation-menu__trigger.hds-button--transparent | https://dashboard.stripe.com/login | focus | rgb(6, 27, 49) | none | 0px none rgb(6, 27, 49) | 14px | 400 | none detected |
| Comece agora | a.hds-button.hds-button--primary | https://dashboard.stripe.com/register | default | rgb(255, 255, 255) | none | 0px none rgb(255, 255, 255) | 16px | 400 | none detected |
| Comece agora | a.hds-button.hds-button--primary | https://dashboard.stripe.com/register | focus | rgb(255, 255, 255) | none | 0px none rgb(255, 255, 255) | 16px | 400 | none detected |

## Input Inventory

No input was detected.

## Layout Inventory

Showing 8 of 8 captured layout sections.

| selector | background | border | radius | padding | size | reason |
| --- | --- | --- | --- | --- | --- | --- |
| .hds-navigation-menu__item.navigation-item | rgba(0, 0, 0, 0) | 0px none rgb(0, 0, 0) | 0px | 0px | 137px x 40px | no visible reusable card styling, too short to be a reusable card |
| .hds-navigation-menu__item.navigation-item | rgba(0, 0, 0, 0) | 0px none rgb(0, 0, 0) | 0px | 0px | 109px x 40px | no visible reusable card styling, too short to be a reusable card |
| .hds-navigation-menu__item.navigation-item | rgba(0, 0, 0, 0) | 0px none rgb(0, 0, 0) | 0px | 0px | 243px x 44px | no visible reusable card styling, too short to be a reusable card |
| .hds-button.navigation-cta-button | rgb(83, 58, 253) | 0px none rgb(255, 255, 255) | 4px | 15.5px 20px 16.5px | 243px x 40px | too short to be a reusable card |
| section | rgb(255, 255, 255) | 0px none rgb(0, 0, 0) | 0px | 0px 16px | 1440px x 889px | viewport-scale layout area |
| .logo-carousel__item | rgba(0, 0, 0, 0) | 0px none rgb(0, 0, 0) | 0px | 0px | 172px x 72px | no visible reusable card styling, too short to be a reusable card |
| .modular-solutions-bento-card__border-color | rgba(0, 0, 0, 0) | 0px none rgb(0, 0, 0) | 0px | 0px | 1076px x 1076px |  |
| .payments-graphic__checkout-payment-methods-item | rgba(0, 0, 0, 0) | 0px none rgb(0, 0, 0) | 0px | 11px 8px | 241px x 33px | no visible reusable card styling, too short to be a reusable card |

## Extraction Quality Report

- Status: medium
- Overall confidence: 72%

### Confidence

| area | confidence |
| --- | --- |
| colors | 48% |
| typography | 88% |
| buttons | 78% |
| cards | 75% |

### Coverage

| area | count |
| --- | --- |
| cssVariables | 1128 |
| colors | 147 |
| componentColorHits | 156 |
| buttons | 5 |
| links | 4 |
| inputs | 0 |
| cards | 5 |
| layoutSections | 8 |
| backgroundImages | 6 |

### Output Limits

| area | shown | total | omitted |
| --- | --- | --- | --- |
| colors | 100 | 147 | 47 |
| cssVariables | 300 | 1128 | 828 |

### Quality Notes

- Some inventory sections were limited in the human-readable outputs; full details remain in tokens.json.

### Warnings

- No warnings generated.

## Notes

- No warnings generated.

## Raw Extracted Tokens

### CSS Variables

#### Colors

- `--hds-color-core-neutral-975`: `#0d253d`
- `--hds-color-accent-border-solid`: `#533afd`
- `--hds-color-accentColorMode-ruby-icon-solid`: `#ea2261`
- `--hds-color-util-brand-900`: `#1c1e54`
- `--hds-color-action-bg-subduedHover`: `#b9b9f9`
- `--hds-color-accentColorMode-magenta-surface-subduedAlt`: `#ffe6f5`
- `--hds-color-input-text-label`: `#273951`
- `--hds-color-input-text-selected`: `#273951`
- `--hds-color-input-text-popover`: `#273951`
- `--hds-color-button-ui-iconHover`: `#2e2b8c`
- `--hds-color-core-brandDark-800A`: `#4b31d080`
- `--hds-color-input-text-placeholder`: `#7d8ba4`
- `--hds-color-core-lemon-500`: `#9b6829`
- `--hds-color-util-bg-min`: `#fff`
- `--hds-color-core-neutral-50A`: `#a8c3de4d`
- `--hds-color-util-neutral-50`: `#e5edf5`
- `--hds-color-accentColorMode-lemon-surface-subdued`: `#fff2d8`
- `--hds-color-input-selector-text-range`: `#665efd`
- `--hds-color-accentColorMode-magenta-icon-gradientMiddle`: `#f96bee`
- `--hds-color-core-neutralDark-25`: `#f2f7fe`
- `--hds-color-action-bg-translucent`: `#ffffffa6`
- `--hds-color-util-accent-magenta-100`: `#ffd7ef`
- `--hds-color-util-accent-orange-50`: `#ffe5da`
- `--hds-color-input-icon-solidAlternate`: `#533afd`
- `--hds-color-heading-subdued`: `#64748d`
- `--hds-color-heading-solid`: `#061b31`
- `--hds-color-accent-charm-bg`: `#533afd`
- `--hds-color-util-bg-quiet`: `#f8fafd`
- `--hds-color-button-secondary-textDisabled`: `#95a4ba`
- `--hds-color-core-neutralDark-700`: `#273f73`

#### Typography

- `--hds-font-input-text-md-lineHeight`: `1.3`
- `--hds-font-heading-xs-lineHeight`: `1.2`
- `--hds-font-heading-md-letterSpacing`: `-0.01em`
- `--hds-font-quoteAttribution-md-weight`: `300`
- `--hds-font-text-lg-letterSpacing`: `0em`
- `--hds-font-heading-md-weight`: `300`
- `--hds-font-heading-xl-lineHeight`: `1.03`
- `--hds-font-input-groupHeading-weight`: `300`
- `--hds-font-text-lg-lineHeight`: `1.4`
- `--hds-font-input-description-lineHeight`: `1.3`
- `--hds-font-family`: `"sohne-var","SF Pro Display",sans-serif`
- `--hds-font-text-xxl-letterSpacing`: `-0.02em`
- `--hds-font-heading-sm-weight`: `300`
- `--hds-font-heading-hero-lg-lineHeight`: `1.2`
- `--hds-font-input-label-lg-weight`: `400`
- `--hds-font-heading-xl-size`: `3rem`
- `--hds-font-input-text-sm-size`: `0.75rem`
- `--hds-font-text-xxs-lineHeight`: `1.45`
- `--hero-font-lang-large`: `3rem`
- `--hds-font-text-sm-size`: `0.875rem`
- `--hds-font-input-text-lg-letterSpacing`: `0px`
- `--hds-font-text-xxl-weight`: `300`
- `--hds-font-text-xs-weight`: `300`
- `--hds-font-heading-hero-md-size`: `2.25rem`
- `--hds-font-heading-lg-letterSpacing`: `-0.02em`
- `--hds-font-input-text-lgTextarea-lineHeight`: `1.4`
- `--hds-font-input-description-letterSpacing`: `0px`
- `--hds-font-input-label-lg-size`: `1rem`
- `--hds-font-heading-xxs-letterSpacing`: `0em`
- `--hds-font-heading-hero-md-letterSpacing`: `-0.02em`

#### Radius

- `--hds-space-core-radius-none`: `0px`
- `--hds-space-core-radius-round`: `99999px`
- `--hds-space-core-radius-lg`: `16px`
- `--hds-space-button-radius-sm`: `2px`
- `--hds-space-core-radius-xs`: `2px`
- `--hds-space-core-radius-xl`: `32px`
- `--hds-space-core-radius-md`: `6px`
- `--hds-space-core-radius-sm`: `4px`
- `--hds-space-button-radius-lg`: `4px`
- `--navigation-border-radius`: `6px`
- `--hds-space-core-radius-none`: `0px`
- `--hds-space-core-radius-round`: `99999px`
- `--hds-space-core-radius-lg`: `16px`
- `--hds-space-button-radius-sm`: `2px`
- `--hds-space-core-radius-xs`: `2px`
- `--hds-space-core-radius-xl`: `32px`
- `--hds-space-core-radius-md`: `6px`
- `--hds-space-core-radius-sm`: `4px`
- `--hds-space-button-radius-lg`: `4px`
- `--navigation-border-radius`: `6px`
- `--hds-space-core-radius-none`: `0px`
- `--hds-space-core-radius-round`: `99999px`
- `--hds-space-core-radius-lg`: `16px`
- `--hds-space-button-radius-sm`: `2px`
- `--hds-space-core-radius-xs`: `2px`
- `--hds-space-core-radius-xl`: `32px`
- `--hds-space-core-radius-md`: `6px`
- `--hds-space-core-radius-sm`: `4px`
- `--hds-space-button-radius-lg`: `4px`
- `--navigation-border-radius`: `6px`

#### Shadows

- `--hds-shadow-sm-top-offset-y`: `5px`
- `--hds-shadow-sm-bottom-offset-y`: `2px`
- `--hds-shadow-xs-top-blur`: `10px`
- `--hds-color-shadow-sm-top`: `#00377014`
- `--hds-shadow-xs-bottom-blur`: `4px`
- `--hds-color-shadow-lg-top`: `#0037701a`
- `--hds-shadow-xs-top-offset-y`: `2px`
- `--hds-shadow-sm-bottom-offset-x`: `0px`
- `--hds-shadow-xl-bottom-offset-x`: `0px`
- `--hds-shadow-xl-bottom-offset-y`: `10px`
- `--hds-shadow-lg-bottom-blur`: `20px`
- `--hds-shadow-xl-bottom-spread`: `-16px`
- `--hds-color-shadow-xl-bottom`: `#003b890f`
- `--hds-shadow-sm-bottom-spread`: `0px`
- `--hds-shadow-md-top-blur`: `22px`
- `--hds-space-input-focus-shadowOuter`: `4px`
- `--hds-color-shadow-md-top`: `#0037701a`
- `--hds-color-util-aura-h241Shadow`: `#1c1b5a`
- `--hds-shadow-md-bottom-blur`: `8px`
- `--hds-shadow-lg-bottom-offset-x`: `0px`
- `--hds-color-shadow-popoverBottom`: `#061b311f`
- `--hds-color-shadow-sm-bottom`: `#003b890d`
- `--hds-shadow-xl`: `0px 20px 80px -16px #00377024,0px 10px 60px -16px #003b890f`
- `--hds-shadow-sm-top-offset-x`: `0px`
- `--hds-shadow-md`: `0px 6px 22px 0px #0037701a,0px 4px 8px 0px #003b8905`
- `--hds-shadow-lg-bottom-offset-y`: `5px`
- `--hds-shadow-sm-top-spread`: `0px`
- `--hds-shadow-md-bottom-spread`: `0px`
- `--hds-shadow-xl-top-spread`: `-16px`
- `--hds-shadow-lg-bottom-spread`: `-2px`

#### Borders

- `--hds-color-accent-border-solid`: `#533afd`
- `--hds-font-input-text-md-lineHeight`: `1.3`
- `--hds-font-heading-xs-lineHeight`: `1.2`
- `--navigation-inline-end`: `16px`
- `--hds-font-heading-xl-lineHeight`: `1.03`
- `--hds-font-text-lg-lineHeight`: `1.4`
- `--hds-font-input-description-lineHeight`: `1.3`
- `--hds-color-action-border-solidHover`: `#4032c8`
- `--hds-space-input-border-default`: `1.25px`
- `--hds-font-heading-hero-lg-lineHeight`: `1.2`
- `--hds-font-text-xxs-lineHeight`: `1.45`
- `--hds-space-button-border`: `1px`
- `--hds-color-util-action-border-max`: `#2e2b8c`
- `--hds-color-input-popover-border`: `#ffffff00`
- `--hds-font-input-text-lgTextarea-lineHeight`: `1.4`
- `--hds-color-input-tile-border-pressed`: `#2e2b8c`
- `--hds-space-core-border-lg`: `2px`
- `--hds-color-input-border-error`: `#d8351e`
- `--hds-color-action-border-disabled`: `#d4dee9`
- `--hds-font-heading-xxs-lineHeight`: `1.2`
- `--hds-color-util-action-border-solid`: `#533afd`
- `--hds-color-util-action-border-quiet`: `#b9b9f9`
- `--hds-color-surface-border-quiet`: `#e5edf5`
- `--hds-color-input-border-selected`: `#d4dee9bf`
- `--hds-color-input-border-default`: `#d4dee9bf`
- `--hds-color-util-border-subdued`: `#d4dee9`
- `--hds-color-action-border-quiet`: `#d6d9fc`
- `--hds-space-core-border-none`: `0px`
- `--hds-font-text-xl-lineHeight`: `1.4`
- `--hds-space-core-border-md`: `1.25px`