TokenCraft: Live CSS & Design Token Editor

Extract design tokens, live-edit fonts and colors on any page, undo/redo tweaks, and export clean CSS, Tailwind, or JSON.

TokenCraft is the ultimate live CSS inspector, design token extractor, and in-browser styling playground for designers, frontend developers, and UI/UX pros. Open TokenCraft in the Chrome Side Panel alongside any webpage to instantly inspect, reverse-engineer, and live-edit fonts, colors, spacing, and styles in real time—then export production-ready code with a single click. ━━━━━━━━━━━━━━━━━━━━━ 🌟 KEY FEATURES ━━━━━━━━━━━━━━━━━━━━━ ⚡ 1-Click Design Token Extraction • Extract complete color palettes (primary, secondary, text, and background colors weighted by visibility). • Inspect typography hierarchy (Google Fonts, system fonts, font sizes, weights, line heights). • Detect layout spacing scales, grid baselines (4px / 8px detection), border radii, and box shadows. • Discover all embedded SVGs, icons, and image assets used on the page. 🎨 Live In-Page Visual Playground • Swap colors live across the entire page with smart hue matching. • Test Google Fonts and system font pairings with instant visual feedback. • Adjust border radii, corner roundness, and interface scale dynamically. • Precision element inspection: click any element on the page to inspect and sample styles. • Built-in Eyedropper tool to grab colors directly from your screen. ♿ Accessibility & Contrast Checker • Instant WCAG AA / AAA compliance calculations for text against background surfaces. • Live color grading so you catch accessibility issues before writing a single line of code. 💡 Smart Palette Generator • Generate harmonious color combinations automatically from any extracted brand color: - Complementary & Triadic palettes - Analogous harmony - Tailwind-style 50–900 shade scales 📦 1-Click Code & Asset Export • Tailwind CSS: Ready-to-use theme.extend configuration object. • Modern CSS: Clean :root { --... } CSS custom properties. • SCSS Variables: Standard SASS token syntax ($...). • W3C Design Tokens (JSON): Standardized tokens formatted for Figma and token pipelines. • Standalone HTML Style Guide: Download a complete interactive style sheet for your team. • Before / After Snapshot: Generate an image comparing original vs modified designs. 🔄 Theme History & Persistence • Full Undo / Redo history for every tweak. • Save custom themes per website—your design experiments persist across page reloads. • 1-click Reset button to restore the page to its original state. ━━━━━━━━━━━━━━━━━━━━━ 👥 WHO IS TOKENCRAFT FOR? ━━━━━━━━━━━━━━━━━━━━━ • Frontend Developers: Quickly grab design tokens and Tailwind configs from design inspirations or staging sites. • UI/UX Designers: Prototype typography and color tweaks directly in production without touching DevTools. • Design Systems Engineers: Audit existing websites for design consistency, rogue colors, and unstandardized spacing. • QA & Accessibility Teams: Verify WCAG contrast ratios in seconds. ━━━━━━━━━━━━━━━━━━━━━ 🔒 PRIVACY & SECURITY FIRST ━━━━━━━━━━━━━━━━━━━━━ • 100% Local Execution: TokenCraft runs entirely inside your browser. • No Tracking: No telemetry, no third-party analytics, and no remote servers. • Safe Permissions: Only interacts with the active tab when you explicitly open the side panel and click "Analyze". ━━━━━━━━━━━━━━━━━━━━━ 🚀 GET STARTED ━━━━━━━━━━━━━━━━━━━━━ 1. Click "Add to Chrome" 2. Pin TokenCraft to your browser toolbar 3. Open any website and click the TokenCraft icon to launch the Side Panel 4. Click "Analyze this page" and start crafting!