Reeforge

The Brief

Give design and engineering teams one accessible, privacy-respecting toolkit to build color systems and audit any live site's design and performance.

The Challenge

Teams building a design system either hand-pick color shades without checking contrast, or reach for scattered single-purpose tools: one for color, another to inspect a competitor's CSS, a third for image weight, a fourth for Lighthouse, none sharing a common color engine or workflow.

Extracting a design system from an existing site is normally manual work: opening dev tools, hunting through stylesheets, and guessing at tokens instead of reading them straight from the rendered page.

Our Approach

We built Reeforge around one shared OKLCH color engine and shipped it as four focused tools: Forge for WCAG-checked color ramps, Extract for pulling a live site's tokens into a Design.md, Images for auditing on-page assets, and Speed for Lighthouse scores, all client-side with no accounts or tracking.

The companion browser extension reads a page's computed styles rather than just its delivered CSS, so Extract captures what actually renders, not just what shipped in the stylesheet.

• Forge: 11-stop (50-950) color ramps from one hex input, with WCAG contrast ratios and matching text colors
• Extract: pulls color, typography, spacing, radii, shadows, and breakpoints from any URL into a downloadable Design.md
• Images: audits up to 28 on-page images for real file size, format, and missing alt text
• Speed: runs Google PageSpeed Insights for Core Web Vitals on mobile and desktop
• Exports to CSS variables, Tailwind v4 theme blocks, SCSS, or JSON

Scope of Work

• ▸Four-tool design-system web app (Forge, Extract, Images, Speed)
• ▸Shared OKLCH color engine with WCAG contrast checking
• ▸Browser extension reading rendered computed styles
• ▸CSS / Tailwind v4 / SCSS / JSON export pipeline
• ▸Fully client-side architecture with no accounts or analytics

The Outcome

Reeforge gives design and engineering teams one place to forge accessible color systems, reverse-engineer any site's design tokens, and audit its images and performance, without sending data to a server or juggling four separate tools.

Because Forge runs entirely client-side, teams can build and export a full color ramp with zero setup and zero data leaving the browser.

Want results like this? Book a consultation