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

> Diagram Design extracts color palettes and typography from websites, mapping them to semantic tokens to ensure diagrams inherit your site's visual identity for seamless onboarding.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: how-to-guide
- Published: 2026-08-22

---

**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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md).

## Running the Onboarding Workflow

Trigger the extraction process using the agent prompt:

```bash

# 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

```diff
- | `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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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.