How to Extract Usable Design Tokens from Any Website Using Smart Heuristics

A developer tackled the challenge of reverse-engineering a brand's design tokens — including colors, typography, and spacing — from any given URL without direct access to source files. Simple DOM scraping and frequency counting proved ineffective, as it over-represented common elements like body text while missing accent colors that define brand identity. The solution involved scoring each element by visual prominence, factoring in rendered area, viewport position, and semantic role such as buttons and headings, to surface the colors that matter most. Color clusters were then computed in a perceptually uniform color space like OKLCH to avoid misleading groupings, with a dynamic threshold rather than a fixed number of clusters. Finally, role assignment — identifying primary, background, text, and surface tokens — relied on heuristics like contrast ratio and chroma levels, with unassigned colors left unlabeled rather than incorrectly categorized.