What Design Elements Does Diagram Design Extract from a Website for Onboarding?

Diagram Design extracts color palettes and typography systems from target websites, mapping them to semantic tokens like paper, ink, accent, title, and node-name to ensure generated diagrams inherit the site's visual identity.

The cathrynlavery/diagram-design repository includes an intelligent onboarding flow that automatically harvests design tokens from any target URL. This process eliminates manual configuration by parsing CSS and computed styles to build a complete style-guide.md file that drives the visual output of all 39 diagram types.

Color Palette Extraction and Semantic Mapping

Diagram Design parses the rendered CSS (or screenshot) of the target page to identify six dominant color roles. According to the specification in skills/diagram-design/references/onboarding.md (lines 68‑74), the system assigns these hues to specific semantic tokens:

• Background colors → paper (primary background) and paper-2 (container/card backgrounds)
• Primary text → ink (main body text color)
• Secondary text → muted (captions and supporting text)
• Brand color → accent (the most saturated color used for CTAs, links, and headings)
• Borders → rule (hairlines and dividers)

The extraction algorithm identifies the most frequently used brand color by analyzing call-to-action buttons and link states, ensuring the accent token captures the site's primary brand identity.

Typography System Harvesting

The skill inspects computed font-family values across three typographic layers on the page. As documented in lines 79‑84 of onboarding.md, the system maps these to specific semantic roles:

• <h1> elements → title family (headings and diagram titles)
• <body> text → node-name family (primary labels and node content)
• Monospace elements (<code>, <pre>) → sublabel family (technical annotations and metadata)

For each detected family, the skill records the exact family name, weight, and source URL (such as Google Fonts stylesheets). It validates that fonts can load on the target machine and stores this metadata alongside the color tokens in style-guide.md.

Contrast Validation and Brand Fidelity

After extraction, the workflow runs WCAG AA contrast checks to ensure accessibility compliance. The system verifies that ink contrasts properly against paper and that muted text remains readable on the background. It also confirms that the chosen accent color is indeed the most saturated color in the palette, enforcing the "one-accent" design rule.

Before writing changes, Diagram Design generates a brand-fidelity receipt—a compact summary showing sampled URLs, detected hex values, font families, and fallback flags. This receipt is presented to the user for approval before the diff is applied to skills/diagram-design/references/style-guide.md.

Running the Onboarding Workflow

Trigger the extraction process using the agent prompt:

# Prompt the skill to extract branding from a live site

agent "Onboard diagram‑design to https://example.com"

The skill executes the following sequence:

1. Fetches the page using agent-browser navigate
2. Parses CSS and screenshots to determine the six color roles
3. Reads computed font families for title, body, and monospace elements
4. Presents a diff preview in the style guide

Example Diff Preview

- | `paper`  | `#f5f5f5` | `#2d3142` |
- | `ink`    | `#2d3142` | `#f5f5f5` |
- | `accent` | `#eb6c36` | `#f08a59` |
+ | `paper`  | `#f8f6f0` | `#1a1815` |
+ | `ink`    | `#111111` | `#efeee7` |
+ | `accent` | `#c73a2b` | `#e05440` |

Once approved, the diff is written to style-guide.md and all 39 diagram types immediately reflect the new visual skin.

Summary

• Color extraction captures six semantic roles (paper, paper-2, ink, muted, accent, rule) from the target website's CSS.
• Typography extraction maps three font layers (title, node-name, sublabel) from heading, body, and monospace elements.
• Validation includes WCAG AA contrast checks and saturation verification for the accent color.
• Storage persists all tokens in skills/diagram-design/references/style-guide.md for reuse across all diagram types.
• Traceability is provided through a brand-fidelity receipt shown before finalizing the onboarding diff.

Frequently Asked Questions

What specific color roles does Diagram Design map during onboarding?

Diagram Design maps six specific semantic roles: paper (background), paper-2 (containers), ink (primary text), muted (secondary text), accent (brand color), and rule (borders). These are extracted by parsing the rendered CSS or screenshots of the target page as specified in lines 68‑74 of onboarding.md.

Which typographic elements are captured from the target website?

The system captures three typographic layers: heading fonts from <h1> elements (mapped to title), body text fonts from <body> (mapped to node-name), and monospace fonts from <code> or <pre> tags (mapped to sublabel). The exact family names, weights, and source URLs are recorded for each.

How does Diagram Design ensure accessibility compliance during extraction?

The workflow automatically runs WCAG AA contrast checks after extraction, verifying that ink text contrasts sufficiently against paper backgrounds and that muted text remains readable. It also validates that the accent color is the most saturated color to maintain the one-accent design rule.

Where are the extracted design tokens stored?

All extracted tokens are stored in skills/diagram-design/references/style-guide.md, the central source of truth for the skill's visual configuration. This file contains the complete color palette, typography specifications, and stroke definitions that drive rendering across all 39 diagram types.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}