---
version: "alpha"
name: "wikipedia.org Design System"
description: "Design context extracted from https://www.wikipedia.org/. Theme: light."
colors:
  primary: "#000"
  accent: "#000"
  secondary: "#666"
  background: "new"
  surface: "#f5f5f5"
  surface-alt: "#f5f5f5"
  border: "#ddd"
  text-primary: "#000"
  text-secondary: "#666"
  text-muted: "#999"
typography:
  h1:
    fontFamily: "system-ui, sans-serif"
    fontSize: "2rem"
    fontWeight: "700"
    lineHeight: "1.2"
  h2:
    fontFamily: "system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: "600"
    lineHeight: "1.3"
  h3:
    fontFamily: "system-ui, sans-serif"
    fontSize: "1.25rem"
    fontWeight: "600"
    lineHeight: "1.3"
  body-md:
    fontFamily: "system-ui, sans-serif"
    fontSize: "1rem"
    fontWeight: "400"
    lineHeight: "1.5"
  link:
    fontFamily: "system-ui, sans-serif"
    fontSize: "1rem"
    fontWeight: "500"
    lineHeight: "1.5"
rounded:
  sm: "4px"
  md: "8px"
  lg: "12px"
  xl: "16px"
spacing:
  section: undefined
  card: undefined
  button: undefined
  container: undefined
  grid: undefined
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: undefined
    height: "40px"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "#ffffff"
    typography: "{typography.link}"
    rounded: "{rounded.md}"
    padding: undefined
    height: "40px"
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "#ffffff"
    rounded: "{rounded.md}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: undefined
---

## Overview

generic

This DESIGN.md was generated from https://www.wikipedia.org/. 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: light
- Detected site profile: generic
- Color confidence: 25%
- Button confidence: 10%
- Card confidence: 10%

> Warning: Cheap mode (Cheerio) - Limited design extraction. For complete analysis, run without network restrictions or use --full option. Complex animations detected or JavaScript is required - some styles may be incomplete.

### Captured Inventory Summary

| capture | count |
| --- | --- |
| CSS variables (raw) | 393 |
| CSS variables (deduped) | 393 |
| Color hits | 1 |
| Component color hits | 0 |
| Simple color values | 49 |
| Complex color values | 6 |
| Buttons | 0 |
| Links | 0 |
| Inputs | 1 |
| Layout sections | 0 |
| Background images | 0 |

## Colors

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

- **Primary (#000):** Brand accents, active states, and high-emphasis affordances. Source: fallback, confidence 30%.
- **Accent (#000):** Supporting brand highlights and hover accents.
- **Background (new):** Page background and broad canvas areas. Source: fallback, confidence 40%.
- **Surface (#f5f5f5):** Cards, panels, popovers, and contained sections. Source: fallback, confidence 30%.
- **Surface Alt (#f5f5f5):** Secondary panels and nested surfaces.
- **Border (#ddd):** Dividers, outlines, and subtle separation. Source: fallback, confidence 20%.
- **Text Primary (#000):** Main copy and headings. Source: fallback, confidence 30%.
- **Text Secondary (#666):** Supporting copy. Source: fallback, confidence 20%.
- **Text Muted (#999):** Captions and metadata. Source: fallback, confidence 20%.

### Token Decision Summary

| token | value | source | confidence | main evidence | alternatives |
| --- | --- | --- | --- | --- | --- |
| primary | #000 | fallback | 30% | fallback | none |
| secondary | #666 | fallback | 20% | fallback | none |
| background | new | fallback | 40% | fallback | none |
| surface | #f5f5f5 | fallback | 30% | fallback | none |
| border | #ddd | fallback | 20% | fallback | none |
| text-primary | #000 | fallback | 30% | fallback | none |
| text-secondary | #666 | fallback | 20% | fallback | none |
| text-muted | #999 | fallback | 20% | 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:** 2rem, weight 700, line-height 1.2
- **H2:** 1.5rem, weight 600, line-height 1.3
- **H3:** 1.25rem, weight 600, line-height 1.3
- **Body:** 1rem, weight 400, line-height 1.5
- **Links:** 1rem, weight 500, line-height 1.5

## Layout

- Density: undefined
- Section padding: undefined
- Container width: undefined
- Card padding: undefined
- Button padding: undefined
- Grid gap: undefined
- Max content width: undefined

## Elevation & Depth

drop-shadow

Use flat surfaces unless a component pattern explicitly includes elevation.

## Shapes

- Small radius: 4px
- Medium radius: 8px
- Large radius: 12px
- Extra large radius: 16px
- Full radius: not detected

## Components

### Button

#### Primary Button

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

#### 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

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


### Card

No confident reusable card pattern detected.

Detected 0 large layout section(s), but they were not classified as cards because they appear to be page sections rather than reusable components.

### Input

Inputs use background color new, text #000, border #ddd, radius 4px, padding 8px, height 40px, and font size 1rem.

Recommended Tailwind: `h-[40px] rounded-[4px] border border-[#ddd] bg-[new] px-3 text-sm text-[#000]`

## 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

No background images or gradients were confidently detected. Use the extracted colors as flat backgrounds.

## 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 | #000 | fallback, confidence 30% |
| accent | #000 | fallback to primary |
| secondary | #666 | fallback, confidence 20% |
| background | new | fallback, confidence 40% |
| surface | #f5f5f5 | fallback, confidence 30% |
| surface-alt | #f5f5f5 | fallback to surface |
| border | #ddd | fallback, confidence 20% |
| text-primary | #000 | fallback, confidence 30% |
| text-secondary | #666 | fallback, confidence 20% |
| text-muted | #999 | fallback, confidence 20% |
| text-subtle |  |  |

### All Captured Colors

Showing 49 of 49 captured colors.

#### Brand / Accent

| color | normalized | usage guess | occurrences | weight |
| --- | --- | --- | --- | --- |
| #6485d1 | #6485d1 | css variable | 7 | 14 |
| #36c | #3366cc | css variable | 6 | 12 |
| #fd7865 | #fd7865 | css variable | 5 | 10 |
| #233566 | #233566 | css variable | 5 | 10 |
| #fea898 | #fea898 | css variable | 4 | 8 |
| #f54739 | #f54739 | css variable | 4 | 8 |
| #88a3e8 | #88a3e8 | css variable | 3 | 6 |
| #a6bbf5 | #a6bbf5 | css variable | 3 | 6 |
| #9f3526 | #9f3526 | css variable | 3 | 6 |
| #612419 | #612419 | css variable | 3 | 6 |
| #b6d4fb | #b6d4fb | css variable | 2 | 4 |
| #ffc8bd | #ffc8bd | css variable | 2 | 4 |
| #ca982e | #ca982e | css variable | 2 | 4 |
| #ab7f2a | #ab7f2a | css variable | 2 | 4 |
| #099979 | #099979 | css variable | 2 | 4 |
| #3056a9 | #3056a9 | css variable | 2 | 4 |
| #bf3c2c | #bf3c2c | css variable | 2 | 4 |
| #3c1a13 | #3c1a13 | css variable | 2 | 4 |
| #a799cd | #a799cd | css variable | 1 | 2 |
| #c5b9dd | #c5b9dd | css variable | 1 | 2 |
| #d9d0e9 | #d9d0e9 | css variable | 1 | 2 |
| #c99391 | #c99391 | css variable | 1 | 2 |
| #dcb5b3 | #dcb5b3 | css variable | 1 | 2 |
| #e8cecd | #e8cecd | css variable | 1 | 2 |
| #2cb491 | #2cb491 | css variable | 1 | 2 |
| #80cdb3 | #80cdb3 | css variable | 1 | 2 |
| #1b223d | #1b223d | css variable | 1 | 2 |
| #d74032 | #d74032 | css variable | 1 | 2 |
| #2d2212 | #2d2212 | css variable | 1 | 2 |
| #132821 | #132821 | css variable | 1 | 2 |
| #453217 | #453217 | css variable | 1 | 2 |
| #572c19 | #572c19 | css variable | 1 | 2 |
| rgba(0,24,73,0.027) | #001849 | css variable | 1 | 2 |
| rgba(0,24,73,0.082) | #001849 | css variable | 1 | 2 |
| #edb537 | #edb537 | css variable | 1 | 2 |

#### Background / Surface

No colors captured in this group.

#### Text

No colors captured in this group.

#### Border

No colors captured in this group.

#### Neutral

| color | normalized | usage guess | occurrences | weight |
| --- | --- | --- | --- | --- |
| #72777d | #72777d | css variable | 7 | 14 |
| #a2a9b1 | #a2a9b1 | css variable | 5 | 10 |
| #27292d | #27292d | css variable | 5 | 10 |
| #202122 | #202122 | css variable | 4 | 8 |
| #54595d | #54595d | css variable | 4 | 8 |
| #404244 | #404244 | css variable | 4 | 8 |
| #f8f9fa | #f8f9fa | css variable | 3 | 6 |
| #101418 | #101418 | css variable | 3 | 6 |
| #fff | #ffffff | css variable | 3 | 6 |
| #c8ccd1 | #c8ccd1 | css variable | 2 | 4 |
| #000 | #000000 | css variable | 1 | 2 |
| rgba(0,0,0,0.87) | #000000 | css variable | 1 | 2 |
| rgba(0,0,0,0.65) | #000000 | css variable | 1 | 2 |
| #eaecf0 | #eaecf0 | css variable | 1 | 2 |

#### Transparent

No colors captured in this group.

#### Unknown

No colors captured in this group.

### Complex Color Values

#### Shadow / Complex

| value | usage guess | occurrences | weight |
| --- | --- | --- | --- |
| hsla(0,0%,100%,0.65) | css variable | 2 | 4 |
| new | background/surface | 1 | 4 |
| hsla(0,0%,100%,0.3) | css variable | 1 | 2 |
| #987027}}:root{--color-print--visited:#520 | css variable | 1 | 2 |
| 0 20px 48px 0 rgba(0,0,0,0.2) | css variable | 1 | 2 |
| var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base),var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base)}@media only screen and (prefers-color-scheme:dark){:root{--color-base:#ea | css variable | 1 | 2 |

## CSS Variables

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

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

### Colors

No variables captured in this group.

### 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

No variables captured in this group.

### Other Variables

| variable | value |
| --- | --- |
| --accent-color-base | #36c |
| --animation-delay-medium | -160ms |
| --animation-delay-none | 0ms |
| --animation-delay-slow | -320ms |
| --animation-duration-fast | 1000ms |
| --animation-duration-medium | 1600ms |
| --animation-duration-slow | 2000ms |
| --animation-iteration-count-base | infinite |
| --animation-timing-function-base | linear |
| --animation-timing-function-bouncing | ease-in-out |
| --background-color-backdrop-dark | hsla(0,0%,100%,0.65) |
| --background-color-backdrop-light | rgba(0,0,0,0.65) |
| --background-color-base | #101418 |
| --background-color-base-fixed | #fff |
| --background-color-button-quiet--active | rgba(0,24,73,0.082) |
| --background-color-button-quiet--hover | rgba(0,24,73,0.027) |
| --background-color-content-added | #233566 |
| --background-color-content-removed | #453217 |
| --background-color-destructive | #bf3c2c |
| --background-color-destructive--active | #612419 |
| --background-color-destructive--focus | #6485d1 |
| --background-color-destructive--hover | #9f3526 |
| --background-color-destructive-subtle | #3c1a13 |
| --background-color-destructive-subtle--active | #9f3526 |
| --background-color-destructive-subtle--hover | #612419 |
| --background-color-disabled | #404244 |
| --background-color-disabled-subtle | #27292d |
| --background-color-error | #f54739 |
| --background-color-error--active | #bf3c2c |
| --background-color-error--hover | #d74032 |
| --background-color-error-subtle | #3c1a13 |
| --background-color-error-subtle--active | #9f3526 |
| --background-color-error-subtle--hover | #612419 |
| --background-color-input-binary--checked | #36c |
| --background-color-interactive | #27292d |
| --background-color-interactive--active | #54595d |
| --background-color-interactive--hover | #404244 |
| --background-color-interactive-subtle | #202122 |
| --background-color-interactive-subtle--active | #404244 |
| --background-color-interactive-subtle--hover | #27292d |
| --background-color-inverted | #f8f9fa |
| --background-color-neutral | #27292d |
| --background-color-neutral-subtle | #202122 |
| --background-color-notice-subtle | #27292d |
| --background-color-progressive | #36c |
| --background-color-progressive--active | #233566 |
| --background-color-progressive--focus | #6485d1 |
| --background-color-progressive--hover | #3056a9 |
| --background-color-progressive-subtle | #1b223d |
| --background-color-progressive-subtle--active | #3056a9 |
| --background-color-progressive-subtle--hover | #233566 |
| --background-color-success-subtle | #132821 |
| --background-color-tab-list-item-framed--active | hsla(0,0%,100%,0.65) |
| --background-color-tab-list-item-framed--hover | hsla(0,0%,100%,0.3) |
| --background-color-target-text | #572c19 |
| --background-color-transparent | transparent |
| --background-color-warning-subtle | #2d2212 |
| --background-position-base | center |
| --background-size-search-figure | cover |
| --border-base | var(--border-width-base) var(--border-style-base) var(--border-color-base) |
| --border-color-base | #72777d |
| --border-color-content-added | #233566 |
| --border-color-content-removed | #987027}}:root{--color-print--visited:#520 |
| --border-color-destructive | #f54739 |
| --border-color-destructive--active | #fea898 |
| --border-color-destructive--focus | #6485d1 |
| --border-color-destructive--hover | #fd7865 |
| --border-color-disabled | #54595d |
| --border-color-divider | #a2a9b1 |
| --border-color-emphasized | #eaecf0 |
| --border-color-error | #f54739 |
| --border-color-error--active | #fea898 |
| --border-color-error--hover | #fd7865 |
| --border-color-input--hover | var(--border-color-interactive) |
| --border-color-input-binary | var(--border-color-interactive) |
| --border-color-input-binary--active | var(--border-color-progressive--active) |
| --border-color-input-binary--checked | var(--border-color-progressive) |
| --border-color-input-binary--focus | var(--border-color-progressive--focus) |
| --border-color-input-binary--hover | var(--border-color-progressive--hover) |
| --border-color-interactive | #72777d |
| --border-color-interactive--active | #c8ccd1 |
| --border-color-interactive--hover | #a2a9b1 |
| --border-color-inverted | #101418 |
| --border-color-inverted-fixed | #fff |
| --border-color-muted | #404244 |
| --border-color-notice | #72777d |
| --border-color-progressive | #6485d1 |
| --border-color-progressive--active | #a6bbf5 |
| --border-color-progressive--focus | #6485d1 |
| --border-color-progressive--hover | #88a3e8 |
| --border-color-subtle | #54595d |
| --border-color-success | #099979 |
| --border-color-transparent | transparent |
| --border-color-warning | #ab7f2a |
| --border-color-warning--active | #edb537 |
| --border-color-warning--hover | #ca982e |
| --border-destructive | var(--border-width-base) var(--border-style-base) var(--border-color-destructive) |
| --border-progressive | var(--border-width-base) var(--border-style-base) var(--border-color-progressive) |
| --border-radius-base | 2px |
| --border-radius-circle | 50% |
| --border-radius-pill | 9999px |
| --border-radius-sharp | 0 |
| --border-style-base | solid |
| --border-style-dashed | dashed |
| --border-subtle | var(--border-width-base) var(--border-style-base) var(--border-color-subtle) |
| --border-transparent | var(--border-width-base) var(--border-style-base) var(--border-color-transparent) |
| --border-width-base | 1px |
| --border-width-input-radio--checked | 6px |
| --border-width-thick | 2px |
| --box-shadow-color-alpha-base | rgba(0,0,0,0.87) |
| --box-shadow-color-base | #72777d |
| --box-shadow-color-destructive--focus | #6485d1 |
| --box-shadow-color-inverted | #000 |
| --box-shadow-color-progressive--active | #233566 |
| --box-shadow-color-progressive--focus | #6485d1 |
| --box-shadow-color-progressive-selected | #88a3e8 |
| --box-shadow-color-progressive-selected--active | #b6d4fb |
| --box-shadow-color-progressive-selected--hover | #a6bbf5 |
| --box-shadow-color-transparent | transparent |
| --box-shadow-drop-medium | var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base),var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base)}@media only screen and (prefers-color-scheme:dark){:root{--color-base:#ea |
| --box-shadow-drop-small | var(--box-shadow-outset-small) var(--box-shadow-color-base) |
| --box-shadow-drop-xx-large | 0 20px 48px 0 rgba(0,0,0,0.2) |
| --box-shadow-inset-medium | inset 0 0 0 2px |
| --box-shadow-inset-medium-vertical | inset 0 -2px 0 0 |
| --box-shadow-inset-small | inset 0 0 0 1px |
| --box-shadow-large | var(--box-shadow-outset-large-below) var(--box-shadow-color-alpha-base),var(--box-shadow-outset-large-around) var(--box-shadow-color-alpha-base) |
| --box-shadow-medium | var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base),var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base) |
| --box-shadow-outset-large-around | 0 0 16px 0 |
| --box-shadow-outset-large-below | 0 4px 8px 0 |
| --box-shadow-outset-medium-around | 0 0 8px 0 |
| --box-shadow-outset-medium-below | 0 4px 4px 0 |
| --box-shadow-outset-small | 0 0 0 1px |
| --box-shadow-outset-small-bottom | 0 1px 0 0 |
| --box-shadow-outset-small-start | -1px 0 0 0 |
| --box-shadow-outset-small-top | 0 -1px 0 0 |
| --box-shadow-small | var(--box-shadow-outset-small) var(--box-shadow-color-base) |
| --box-shadow-small-bottom | var(--box-shadow-outset-small-bottom) var(--box-shadow-color-base) |
| --box-shadow-small-top | var(--box-shadow-outset-small-top) var(--box-shadow-color-base) |
| --box-sizing-base | border-box |
| --color-base | #202122 |
| --color-base--hover | #f8f9fa |
| --color-base--subtle | #a2a9b1 |
| --color-base-fixed | #202122 |
| --color-content-added | #80cdb3 |
| --color-content-removed | #fd7865 |
| --color-destructive | #fd7865 |
| --color-destructive--active | #ffc8bd |
| --color-destructive--focus | #36c |
| --color-destructive--hover | #fea898 |
| --color-destructive--visited | #c99391 |
| --color-destructive--visited--active | #e8cecd |
| --color-destructive--visited--hover | #dcb5b3 |
| --color-disabled | #54595d |
| --color-disabled-emphasized | #72777d |
| --color-emphasized | #f8f9fa |
| --color-error | #fd7865 |
| --color-error--active | #ffc8bd |
| --color-error--hover | #fea898 |
| --color-icon-error | #f54739 |
| --color-icon-notice | #72777d |
| --color-icon-success | #099979 |
| --color-icon-warning | #ab7f2a |
| --color-inverted | #101418 |
| --color-inverted-fixed | #fff |
| --color-link | var(--color-progressive) |
| --color-link--active | var(--color-progressive--active) |
| --color-link--focus | var(--color-progressive--focus) |
| --color-link--hover | var(--color-progressive--hover) |
| --color-link--visited | var(--color-visited) |
| --color-link--visited--active | var(--color-visited--active) |
| --color-link--visited--hover | var(--color-visited--hover) |
| --color-link-red | var(--color-destructive) |
| --color-link-red--active | var(--color-destructive--active) |
| --color-link-red--focus | var(--color-destructive--focus) |
| --color-link-red--hover | var(--color-destructive--hover) |
| --color-link-red--visited | var(--color-destructive--visited) |
| --color-link-red--visited--active | var(--color-destructive--visited--active) |
| --color-link-red--visited--hover | var(--color-destructive--visited--hover) |
| --color-neutral | #c8ccd1 |
| --color-notice | #a2a9b1 |
| --color-placeholder | #72777d |
| --color-progressive | #88a3e8 |
| --color-progressive--active | #b6d4fb |
| --color-progressive--focus | #36c |
| --color-progressive--hover | #a6bbf5 |
| --color-subtle | #a2a9b1 |
| --color-success | #2cb491 |
| --color-visited | #a799cd |
| --color-visited--active | #d9d0e9 |
| --color-visited--hover | #c5b9dd |
| --color-warning | #ca982e |
| --cursor-base | default |
| --cursor-base--disabled | default |
| --cursor-base--hover | pointer |
| --cursor-grab | grab |
| --cursor-grabbing | grabbing |
| --cursor-help | help |
| --cursor-move | move |
| --cursor-not-allowed | not-allowed |
| --cursor-resize-nesw | nesw-resize |
| --cursor-resize-nwse | nwse-resize |
| --cursor-text | text |
| --cursor-zoom-in | zoom-in |
| --cursor-zoom-out | zoom-out |
| --filter-invert-icon | 0 |
| --filter-invert-primary-button-icon | 1 |
| --font-family-base | sans-serif |
| --font-family-heading-main | "Linux Libertine","Georgia","Times","Source Serif 4",serif |
| --font-family-monospace | "Menlo","Consolas","Liberation Mono","Fira Code","Courier New",monospace |
| --font-family-monospace--fallback | monospace,monospace |
| --font-family-sans | "Helvetica Neue","Helvetica","Liberation Sans","Arial",sans-serif |
| --font-family-sans--fallback | sans-serif |
| --font-family-serif | "Linux Libertine","Georgia","Times","Source Serif 4",serif |
| --font-family-serif--fallback | serif |
| --font-family-system-sans | -apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Inter","Helvetica","Arial",sans-serif |
| --font-size-large | 1.125rem |
| --font-size-medium | 1rem |
| --font-size-small | 0.875rem |
| --font-size-x-large | 1.25rem |
| --font-size-x-small | 0.75rem |
| --font-size-xx-large | 1.5rem |
| --font-size-xxx-large | 1.75rem |
| --font-weight-bold | 700 |
| --font-weight-hairline | 100 |
| --font-weight-light | 300 |
| --font-weight-normal | 400 |
| --font-weight-semi-bold | 600 |
| --height-toggle-switch | calc(var(--font-size-medium)*2) |
| --line-height-content | 1.625 |
| --line-height-large | 1.75rem |
| --line-height-medium | 1.625rem |
| --line-height-small | 1.375rem |
| --line-height-x-large | 1.875rem |
| --line-height-x-small | 1.25rem |
| --line-height-xx-large | 2.125rem |
| --line-height-xx-small | 1.5714285rem |
| --line-height-xxx-large | 2.375rem |
| --line-height-xxx-small | 1.4285714rem |
| --max-height-chip | 1.375rem |
| --max-width-base | none |
| --max-width-breakpoint-desktop | calc(1680px - var(--size-absolute-1)) |
| --max-width-breakpoint-mobile | calc(640px - var(--size-absolute-1)) |
| --max-width-breakpoint-tablet | calc(1120px - var(--size-absolute-1)) |
| --max-width-button | 28rem |
| --min-height-table-footer | 40px |
| --min-height-table-header | 40px |
| --min-height-text-area | 64px |
| --min-height-toggle-switch | 28px |
| --min-size-icon-medium | 18px |
| --min-size-icon-small | 14px |
| --min-size-icon-x-small | 10px |
| --min-size-input-binary | 20px |
| --min-size-input-chip-clear-button | 20px |
| --min-size-interactive-pointer | 32px |
| --min-size-interactive-touch | 44px |
| --min-size-search-figure | 40px |
| --min-size-toggle-switch-grip | 18px |
| --min-width-breakpoint-desktop | 1120px |
| --min-width-breakpoint-desktop-wide | 1680px |
| --min-width-breakpoint-mobile | 320px |
| --min-width-breakpoint-tablet | 640px |
| --min-width-medium | 256px |
| --min-width-toggle-switch | 42px |
| --mix-blend-mode-base | normal |
| --mix-blend-mode-blend | screen |
| --moz-device-pixel-ratio | 2),(min-resolution:2dppx),(min-resolution:192dpi){hr{border-bottom-width:.5px}}@supports (-webkit-marquee-style:slide){hr{border-bottom-width:1px}}.js-enabled .central-featured,.js-enabled .jsl10n{opacity:0}.jsl10n-visib |
| --opacity-base | 1 |
| --opacity-icon-base | 0.87 |
| --opacity-icon-base--disabled | 0.51 |
| --opacity-icon-base--hover | 0.74 |
| --opacity-icon-base--selected | 1 |
| --opacity-icon-placeholder | 0.51 |
| --opacity-icon-subtle | 0.67 |
| --opacity-low | 0.3 |
| --opacity-medium | 0.65 |
| --opacity-transparent | 0 |
| --outline-base--focus | var(--border-width-base) solid transparent |
| --outline-color-progressive--focus | #36c |
| --position-offset-border-width-base | -var(--border-width-base) |
| --size-0 | 0 |
| --size-100 | 1rem |
| --size-12 | 0.125rem |
| --size-1200 | 12rem |
| --size-125 | 1.25rem |
| --size-150 | 1.5rem |
| --size-1600 | 16rem |
| --size-200 | 2rem |
| --size-2400 | 24rem |
| --size-25 | 0.25rem |
| --size-250 | 2.5rem |
| --size-275 | 2.75rem |
| --size-2800 | 28rem |
| --size-300 | 3rem |
| --size-3200 | 32rem |
| --size-400 | 4rem |
| --size-4000 | 40rem |
| --size-50 | 0.5rem |
| --size-5600 | 56rem |
| --size-6 | 0.0625rem |
| --size-75 | 0.75rem |

## Typography Inventory

| role | font family | size | weight | line height | letter spacing |
| --- | --- | --- | --- | --- | --- |
| h1 | system-ui, sans-serif | 2rem | 700 | 1.2 |  |
| h2 | system-ui, sans-serif | 1.5rem | 600 | 1.3 |  |
| h3 | system-ui, sans-serif | 1.25rem | 600 | 1.3 |  |
| body | system-ui, sans-serif | 1rem | 400 | 1.5 |  |
| link | system-ui, sans-serif | 1rem | 500 | 1.5 |  |

## Button Inventory

### Resolved Button Patterns

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

### All Captured Buttons

Showing 0 of 0 captured buttons.

No data captured.

### Button Interactive States

No data captured.

## 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 0 of 0 captured links.

No data captured.

### Link Interactive States

No data captured.

## Input Inventory

| background | text | border | radius | padding | height | font size |
| --- | --- | --- | --- | --- | --- | --- |
| new | #000 | #ddd | 4px | 8px | 40px | 1rem |

## Layout Inventory

Showing 0 of 0 captured layout sections.

No layout sections captured.

## Extraction Quality Report

- Status: low
- Overall confidence: 21%

### Confidence

| area | confidence |
| --- | --- |
| colors | 25% |
| typography | 40% |
| buttons | 10% |
| cards | 10% |

### Coverage

| area | count |
| --- | --- |
| cssVariables | 393 |
| colors | 49 |
| componentColorHits | 0 |
| buttons | 0 |
| links | 0 |
| inputs | 1 |
| cards | 0 |
| layoutSections | 0 |
| backgroundImages | 0 |

### Output Limits

| area | shown | total | omitted |
| --- | --- | --- | --- |
| cssVariables | 300 | 393 | 93 |

### Quality Notes

- No confident reusable card pattern was detected; large sections were preserved as layout evidence.
- No component color evidence was found, so brand/action colors rely mostly on page-level styles.
- Some inventory sections were limited in the human-readable outputs; full details remain in tokens.json.

### Warnings

- Cheap mode (Cheerio) - Limited design extraction. For complete analysis, run without network restrictions or use --full option.
- Complex animations detected or JavaScript is required - some styles may be incomplete.

## Notes

- Cheap mode (Cheerio) - Limited design extraction. For complete analysis, run without network restrictions or use --full option.
- Complex animations detected or JavaScript is required - some styles may be incomplete.

## Raw Extracted Tokens

### CSS Variables

#### Colors

No variables detected.

#### Typography

No variables detected.

#### Radius

No variables detected.

#### Shadows

No variables detected.

#### Borders

- `--border-style-base`: `solid`
- `--border-style-dashed`: `dashed`
- `--font-weight-hairline`: `100`
- `--line-height-x-small`: `1.25rem`
- `--line-height-small`: `1.375rem`
- `--line-height-medium`: `1.625rem`
- `--line-height-large`: `1.75rem`
- `--line-height-x-large`: `1.875rem`
- `--line-height-xx-large`: `2.125rem`
- `--line-height-xxx-large`: `2.375rem`
- `--line-height-content`: `1.625`
- `--text-decoration-line-through`: `line-through`
- `--text-decoration-underline`: `underline`
- `--border-width-base`: `1px`
- `--border-width-thick`: `2px`
- `--border-width-input-radio--checked`: `6px`
- `--border-color-base`: `#72777d`
- `--border-color-emphasized`: `#eaecf0`
- `--border-color-subtle`: `#54595d`
- `--border-color-muted`: `#404244`
- `--border-color-interactive`: `#72777d`
- `--border-color-interactive--hover`: `#a2a9b1`
- `--border-color-interactive--active`: `#c8ccd1`
- `--border-color-disabled`: `#54595d`
- `--border-color-inverted`: `#101418`
- `--border-color-inverted-fixed`: `#fff`
- `--border-color-progressive`: `#6485d1`
- `--border-color-progressive--hover`: `#88a3e8`
- `--border-color-progressive--active`: `#a6bbf5`
- `--border-color-progressive--focus`: `#6485d1`