Extract Design Tokens to Markdown

The CSSOM Scraper Engine

Unlike simple text parsers that only look at HTML markup, Copy Markdown's DESIGN.md engine traverses the active page's CSS Object Model (CSSOM). The CSSOM represents the tree of CSS selectors and properties computed by the browser layout engine.

By querying computed styles dynamically, the extension captures the exact visual styling rules applied to elements on the screen, rather than relying on raw CSS files which might be obscured by minification or complex styling sheets.

How CSS Object Model (CSSOM) Traversal Works

When you activate DESIGN.md mode, the extension executes a local content script that:

1. Identifies and scans up to 1,500 interactive and key layout nodes across the DOM tree.
2. Calls the browser's native window.getComputedStyle() API on target elements to resolve variable-based values, computed heights/sizes, margins, borders, and shadows.
3. Aggregates these values into structured categories (typography scales, color palettes, rounded corner radiuses, and shadow metrics).
4. Cleans duplicate properties to create a normalized layout palette.

Aligning with the @google/design.md Spec

The output file is structured to be compatible with design systems and automation pipelines. We format the extracted tokens to align with the @google/design.md spec, mapping design custom properties into clean, structured Markdown keys.

Here is an example of an extracted token file format:

---
version: alpha
name: target-domain.com
description: "Design tokens, color system, typography scale, component primitives, and layout specifications."
colors:
  primary: "#ed5f45"
  secondary: "#333333"
  surface: "#fafafa"
  ink: "#333333"
  muted: "#808080"
typography:
  fontFamily: "Geist"
  display-xl:
    fontSize: "64px"
    fontWeight: 400
    lineHeight: 1.1
  body-md:
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: "8px"
  md: "12px"
  full: "999px"
shadows:
  sm: "rgba(0, 0, 0, 0.1) 0px 18px 18px 0px"
---

# target-domain.com DESIGN.md

## 1. Visual Theme & Atmosphere
Clean, minimalist aesthetic built for conversion and clarity with energetic brand accents.

## 2. Color Palette & Roles
- Primary / Brand: `#ed5f45`
- Surface: `#fafafa`
- Ink / On-Surface: `#333333`

## 3. Typography Rules
| Role | Family | Size | Weight | Line Height |
|---|---|---|---|---|
| **display-xl** | `Geist` | `64px` | `400` | `1.1` |
| **body-md** | `Geist` | `16px` | `400` | `1.5` |

## 4. CSS Custom Properties (:root)
```css
:root {
  --color-primary: #ed5f45;
  --color-canvas: #ffffff;
  --color-surface: #fafafa;
  --color-ink: #333333;
}
```

Use Cases for Frontend Auditing

This programmatic CSS Object Model (CSSOM) extraction is highly valuable for front-end developers, product owners, and UI/UX designers:

• Competitor Auditing: Quickly extract the colors, spacing scales, and typography profiles of any target website.
• Design System Verification: Check if computed margins, corner border-radiuses, or color codes match your Figma design specs or custom property design system definitions.
• Automated Documentation: Dump design snapshots directly into Notion, Astro components, or code comments.