BROWSER-ONLY / ONE DESIGN SYSTEM

See the impact. Ship with confidence.

Find where brand colors live, spot changes between website versions, solve measurable contrast constraints, design chart palettes, and package your decisions for development—all locally.

Files are processed on your device. No account or custom server required.

1 Stylesheets16 Colors58 Uses
Sample site loaded. Import your own files to inspect their colors.
01 / BRAND IMPACT EXPLORER

Know what a color touches.

Explore explicit CSS color usage and highlight matching selectors in a sandboxed static preview. Unlike a global replace, every source declaration remains independently reviewable.

Import website styles

Upload CSS, or a ZIP containing static HTML/CSS. Source files never leave your browser.

This is the Northstar sample, not a real client website.

Impact summary

Exact source lines, selectors and proposed responsibilities.

13literal uses of #3766AC
.nav-action spansample.css:1 · color · text
.eyebrowsample.css:1 · color · text
.hero h1 emsample.css:1 · color · text
.primary-btnsample.css:1 · background · primary
.form-onesample.css:1 · background · background
.work-intro smallsample.css:1 · color · text
.work-intro h2 emsample.css:1 · color · text
.card-nosample.css:1 · color · text
.card-symbol i+isample.css:1 · border · border
.card-symbol-three isample.css:1 · background · surface
.card asample.css:1 · color · text
.contact smallsample.css:1 · color · text
.contact-ctasample.css:1 · background · primary
VISUAL IMPACT

Before / highlighted

Outlines are best-effort source-selector matches, not proof of browser cascade or inherited style attribution.

Original static preview
Matching CSS selectors

Preview unavailable for this HTML/CSS. You can still inspect the declaration inventory.

ONE COHESIVE WORKFLOW

Create → Inspect → Compare → Repair → Export

Need to migrate CSS declarations too? Use CSS Migration Lab. Want an isolated before-and-after static site comparison? Visit Website Theme Doctor. For images, use Image Contrast Lab. For CSS conflicts, token health, typography and responsive review, use Style Intelligence. Every tool runs in the browser and uses the same semantic color roles.