BrandScan
Turns a live website into reusable visual tokens and structured brand signals.
An internal accelerator that replaces manual brand discovery with an automated crawl. Produces a structured brand board and exportable design tokens from any live website.
Product design, extraction workflow, asynchronous processing, and interface design
Current build
Replaces manual visual inspection with extracted colours, typography, contrast checks, and design tokens.
Working website crawl · Extracted colour and typography results · Extracted component results · Download sample token output
What the system is meant to change.
For
Teams starting from an existing website or brand that need the visual system turned into reusable implementation tokens.
Replaces
When a project starts with an existing brand, the visual system lives in screenshots, designers' memories, and buried CSS files. Extracting the actual colours, fonts, and contrast ratios is tedious, inconsistent, and easy to get wrong.
Produces
A structured brand board with extracted colours, typography, contrast audit scores, component crops, and exportable implementation tokens.
Turn the live interface into a structured, reviewable design-system draft.
BrandScan crawls a target website using headless Chromium via Playwright, extracts computed colours, font families, sizes, contrast ratios, and component samples, then runs an async Celery job to structure them into an editable brand board. Results are stored in Cloudflare R2.
Live website
Visual extraction
Design tokens
Design constraints
- 01Extract computed visual properties rather than relying only on source CSS declarations.
- 02Separate crawling from asynchronous structuring and export.
- 03Preserve page and component context for extracted visual signals.
- 04Make the result editable before it becomes implementation tokens.
Engineering decisions
- 01Computed styles: Extraction observes the rendered page so inherited and runtime styles are not missed.
- 02Frequency with context: Repeated values are useful, but page location and component samples help explain what each token means.
- 03Asynchronous structuring: Crawling, extraction, board generation, and export remain separate processing stages.
- 04Editable before export: Users can resolve noise and duplicates before producing JSON, CSS, or Tailwind tokens.
System behaviour and reliability
- 01A target site is crawled using headless Chromium.
- 02Computed visual properties are extracted and normalised.
- 03An asynchronous job assembles an editable brand board.
- 04Structured results are stored for export.
- 05Crawl and processing stages remain separate failure boundaries.
- 06Exports are generated from stored structured results rather than transient page state.
Evaluation approach
- 01Compare extracted tokens with manually verified source styles.
Interface views for the workflow and its decisions.
Current crawl results and export structure from the working BrandScan workflow.
The current review surface groups extracted colour, typography, contrast, and component results from a website crawl.
The reviewed output is converted into reusable JSON, CSS, and Tailwind-friendly implementation tokens.
What exists now, what remains limited, and what comes next.
This separation is intentional: planned evaluation and reliability work is not presented as completed evidence.
Current evidence
Limitations
- 01Extraction quality depends on how consistently the source site exposes its visual system.
Next validation
- 01Test extraction across a wider range of component and stylesheet patterns.
Send the current workflow, source material, report, or product idea.
A polished specification is not required. The rough version is enough to establish the problem boundary and useful next step.