The problem: given a URL, produce a design token set — colors, type scale, spacing rhythm, border radii, logo — good enough that a generic app re-skinned with those tokens reads as belonging to that brand.
This sounds like a scraping problem. It is mostly not. Scraping gets you a pile of CSS values in about an hour. Turning that pile into a usable token set is where the actual work is, and it took me several iterations to get right. Here is the approach that ended up working.
Why the naive version fails
The obvious first attempt: load the page, walk the DOM, collect every computed style, count frequencies, take the top values.
I built this. It produces garbage, for a reason that is obvious in retrospect. Frequency counting is dominated by whatever element type is most numerous on the page, which is almost always body text and its containers. You get seven shades of near-black, #ffffff, one grey, and a 16px font size. Technically accurate. Completely useless for making something look like the brand, because a brand's identity lives in its accents — the button color, the display heading, the one saturated hue used sparingly — and accents are by definition rare.
