Wikipedia extraction sample

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