X-ray vision for your website's design DNA.

Drop one React component. It scans your entire page and extracts fonts, type scale, colors, spacing rhythm, grid columns, component boundaries, and accessibility issues. Copy the output into Claude Code, Cursor, or any AI tool.

Click the button below to scan this page right now:

Six layers of insight

Each layer reveals a different dimension of your design system. Toggle them individually or scan everything at once.

Typography extraction

OutlineKit finds every font family and size used on your page, counts how many elements use each, and captures a sample text snippet. Here's what it finds on a typical dashboard:

Color palette extraction

Scans every element's color, backgroundColor, and borderColor. Groups them by usage type and counts occurrences.

Spacing scale detection

Collects every padding and margin value, filters out noise, and reveals your actual spacing scale. Also detects baseline rhythm from vertical gaps between siblings.

Accessibility scanning

Checks every element for common issues: images without alt text, buttons without accessible names, inputs without labels, links without href, and text with low contrast ratio (below 4.5:1 WCAG AA).

Output

The full Design DNA report in markdown. Copy it directly into your AI agent.

Install

npm install useoutlinekit -D

import { Outline } from 'useoutlinekit'

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === "development" && <Outline />}
    </>
  )
}

• React 18+ — uses modern React features
• Client-side only — requires DOM access
• Zero dependencies — no runtime deps beyond React
• ~5.7kb gzipped — tree-shakeable ESM and CJS

Props

All optional. Works with zero configuration.

Types

type DesignDNA = {
  fonts: { family: string; count: number; sizes: string[] }[]
  typeScale: { size: string; px: number; count: number; sample: string }[]
  colors: { value: string; property: 'color'|'background'|'border'; count: number }[]
  spacingScale: { px: number; count: number }[]
  radii: { value: string; count: number }[]
  elements: ScannedElement[]
  gridColumns: number[]
  baselineRhythm: number | null
  a11yIssues: { selector: string; issue: string; severity: 'error'|'warning' }[]
  meta: { url; title; viewport; elementCount; timestamp }
}

type ScannedElement = {
  selector: string; tag: string
  rect: { x; y; width; height }
  depth: number; component: string|null; role: string
}

type LayerType = 'grid'|'typography'|'colors'|'spacing'|'components'|'a11y'

Programmatic API

import { scanDesignDNA, formatDesignDNA } from 'useoutlinekit'

// Scan the page
const dna = scanDesignDNA('body')

// Access structured data
console.log(dna.fonts)        // → [{family: 'Inter', count: 172, sizes: [...]}]
console.log(dna.typeScale)    // → [{size: '28px', px: 28, count: 1, sample: '...'}]
console.log(dna.colors)       // → [{value: '#171717', property: 'color', count: 84}]
console.log(dna.spacingScale) // → [{px: 8, count: 36}, {px: 12, count: 42}]
console.log(dna.a11yIssues)   // → [{selector: '...', issue: '...', severity: 'error'}]

// Generate markdown for agent
const md = formatDesignDNA(dna)
// → "# OutlineKit Design DNA Report\n186 elements..."

Exports: Outline, scanDesignDNA, formatDesignDNA, BlueprintOverlay

Type exports: OutlineProps, OutlineState, LayerType, DesignDNA, ScannedElement

Keyboard shortcuts

~5.7kb gzipped · zero dependencies · React 18+ · MIT