Media
5 items
Description
Extract any site’s design system: palette, type, spacing. Export CSS, Tailwind v4 (OKLCH), SCSS & JSON tokens + WCAG audit. Stylewright is a CSS and design-token extractor that turns any website into a reusable design system. Click the icon on any page to extract its color palette, typography scale, spacing, radius, shadows, and gradients — then export them as CSS variables, a Tailwind v4 @theme block in OKLCH (or v3 config), SCSS, TypeScript tokens, W3C design tokens, or an AI prompt (DESIGN.md) you can paste into Claude Code, Cursor, or Copilot. It also runs a free WCAG contrast audit on the colors it finds. A cleaner alternative to CSS Peeper and CSS Scan, built for developers and designers who clone, rebuild, redesign, or audit a UI. WHY STYLEWRIGHT IS DIFFERENT Most extractors dump every value a page uses. Stylewright is built for output quality. A REAL PALETTE, NOT A COLOR DUMP Near-identical colors are merged the way the eye sees them (perceptual CIEDE2000 color science) and named like a proper scale — blue-500, neutral-900 — instead of 40 almost-identical hexes. Type sizes, spacing, and radius snap to clean, named scales too. Colors come in hex and OKLCH, the perceptually uniform space Tailwind v4 uses. FREE WCAG CONTRAST AUDIT Stylewright rates the text-on-background color pairs it extracts against WCAG AA and AAA, right in the panel — and writes the results into the DESIGN.md export, so the contrast story travels with your tokens for your AI agent to act on. EXPORTS THAT FIT YOUR STACK - CSS variables (:root custom properties) - Tailwind v4 @theme in OKLCH — and Tailwind v3 config - SCSS variables - TypeScript — a typed, as-const tokens module (tokens.ts) - W3C DTCG design tokens — standards-correct; works with Style Dictionary, Tokens Studio, Figma - DESIGN.md AI prompt — hand your whole design system to an AI coding assistant so generated UI matches the source ELEMENT INSPECT Click any element and copy its CSS. 100% LOCAL AND PRIVATE Every scan runs in your browser. No accounts, no servers, no analytics — page content never leaves your device. FREE VS PRO Free: element CSS copy, full palette / type / spacing view, the WCAG contrast audit, and CSS-variable export. Pro — $19 once, no subscription (unlike CSS Peeper or Site Palette's monthly plans): Tailwind v4 OKLCH, SCSS, TypeScript tokens, W3C JSON tokens, and the DESIGN.md AI export. PERFECT FOR - Rebuilding or cloning a site's look in a modern stack - Migrating styles to Tailwind v4, SCSS, TypeScript, or design tokens - Giving AI coding tools (Claude Code, Cursor) an accurate design brief - Auditing a design system for color contrast and consistency Install Stylewright and extract your first design system in seconds.