GitHub extraction sample

---
version: "alpha"
name: "github.com Design System"
description: "Design context extracted from https://github.com/. Theme: light."
colors:
  primary: "#fff"
  accent: "#fff"
  secondary: "#666"
  background: "var"
  surface: "#f5f5f5"
  surface-alt: "#f5f5f5"
  border: "#ddd"
  text-primary: "#fff"
  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: "#111111"
    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: "#111111"
    rounded: "{rounded.md}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: undefined
---

## Overview

generic

This DESIGN.md was generated from https://github.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: 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) | 1 |
| CSS variables (deduped) | 1 |
| Color hits | 7 |
| Component color hits | 0 |
| Simple color values | 2 |
| Complex color values | 2 |
| 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 (#fff):** Brand accents, active states, and high-emphasis affordances. Source: fallback, confidence 30%.
- **Accent (#fff):** Supporting brand highlights and hover accents.
- **Background (var):** 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 (#fff):** 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 | #fff | fallback | 30% | fallback | none |
| secondary | #666 | fallback | 20% | fallback | none |
| background | var | fallback | 40% | fallback | none |
| surface | #f5f5f5 | fallback | 30% | fallback | none |
| border | #ddd | fallback | 20% | fallback | none |
| text-primary | #fff | 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 var, text #fff, border #ddd, radius 4px, padding 8px, height 40px, and font size 1rem.

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

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

### All Captured Colors

Showing 2 of 2 captured colors.

#### Brand / Accent

No colors captured in this group.

#### Background / Surface

No colors captured in this group.

#### Text

| color | normalized | usage guess | occurrences | weight |
| --- | --- | --- | --- | --- |
| #fff | #ffffff | text/content | 2 | 10 |
| #bbb | #bbbbbb | text/content | 2 | 10 |

#### Border

No colors captured in this group.

#### 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 |
| --- | --- | --- | --- |
| var | text/content, background/surface | 2 | 9 |
| green | text/content | 1 | 5 |

## CSS Variables

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

Showing 1 of 1 captured CSS variables.

### 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 |
| --- | --- |
| --tab-size-preference | 4 |

## 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 |
| --- | --- | --- | --- | --- | --- | --- |
| var | #fff | #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 | 1 |
| colors | 2 |
| componentColorHits | 0 |
| buttons | 0 |
| links | 0 |
| inputs | 1 |
| cards | 0 |
| layoutSections | 0 |
| backgroundImages | 0 |

### Output Limits

No output limits were hit.

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

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

No variables detected.