Chrome Side Panel Extension • Manifest V3

Inspect, live-edit & extract design tokens.

TokenCraft turns any website into an interactive design playground. Extract real color palettes, typography scales, spacing grids, and shadows in seconds. Tweak live elements with instant undo/redo, then export clean Tailwind CSS, CSS Variables, or JSON.

"Inspect without DevTools clutter. Experiment directly on live pixels."

download Install TokenCraft Free play_circle Try Interactive Demo

verified_user 100% Client-Side Privacy

bolt Zero Build Tools Needed

replay Domain Theme Persistence

Chrome Side Panel • TokenCraft

v1.0.0

TokenCraft

Live CSS & Design Token Editor

Active Tab Synced

Extracted Palette (5) 1-Click Swap

#006565

#0f1115

#008080

#bdc9c8

#f6f3f2

Typography

Space Grotesk

Headings (h1–h6)

WCAG Contrast AAA PASS

7.21 : 1

Accessible ratio

code Export: Tailwind Config

Ready to Copy

100% Local & Zero-Telemetry

4+ Export Formats

Chrome Side Panel API Native

0ms Zero Build Delay

BUILT FOR DEVELOPERS & DESIGNERS

Every styling insight you need, right in your Side Panel.

Stop opening Chrome DevTools tabs just to squint at CSS variables or inspect font names. TokenCraft extracts the entire design DNA in one place.

palette

Live Design Token Extraction

Scans the active DOM and computed styles with viewport-weighted frequency analysis. Surfaces primary, accent, surface, and text colors along with font hierarchies and border radii.

check_circle Color palettes sorted by prominence
check_circle Font families, weights, and scales
check_circle Common spacing units & radii

tune

Live In-Page Visual Tweaks

Tweak any color swatch to propagate changes live across all matching DOM elements instantly. Switch Google Fonts (Inter, Poppins, Roboto, Playfair Display) with a single click.

check_circle Live DOM CSS injection in real-time
check_circle Curated heading & body font pairings
check_circle Dynamic border-radius slider

contrast

WCAG Accessibility Auditor

Instant contrast ratio calculations against background surfaces. Receive clear AA and AAA compliance badges so you know whether your tweaks adhere to web accessibility standards.

check_circle Real-time mathematical contrast ratio
check_circle AA / AAA pass/fail indicators
check_circle Prevents unreadable color combinations

auto_fix_high

Smart Harmonic Palettes

Pick a seed color and automatically generate complementary, analogous, triadic, and complete Tailwind-style 50–900 lightness shade scales ready for production.

check_circle Color wheel harmony algorithms
check_circle Tailwind 50–900 shade generators
check_circle Built-in EyeDropper API screen picker

history

Undo / Redo & Theme Saving

Never worry about messing up a page. Full undo/redo history lets you step through tweaks with confidence. Save customized themes per domain in local Chrome storage.

check_circle Complete Undo and Redo timeline
check_circle Domain-level theme persistence in storage
check_circle 1-click Reset page button

code_blocks

Multi-Format Developer Export

Take your visual tweaks straight to code. Export CSS `:root` variables, `tailwind.config.js` theme extensions, W3C Design Tokens JSON, SCSS variables, or a downloadable HTML style guide.

check_circle Tailwind CSS config copy-paste
check_circle Standard W3C Design Tokens format
check_circle Downloadable HTML visual style guide

INTERACTIVE PREVIEW

Experience TokenCraft in action right here.

Test the color swapper, font pairings, and code generators directly in this live simulation widget.

TokenCraft Demo Sandbox

Simulating Live Page Injection

Preset Color Theme

Click to switch

Heading Font Pairing

Component Curvature 12px

WCAG AA & AAA Check 5.42:1 AAA PASS

Contrast ratio of 5.42:1 against light card surface. Passes WCAG AAA for large text and AA for body copy.

Live Modified Component Sample Page Node

Craft better user interfaces in real time.

When you change colors or fonts inside the TokenCraft side panel, styles update in the active document immediately without page refresh.

Export Preview

:root {
  --primary-color: #006565;
  --primary-radius: 12px;
  --font-heading: 'Space Grotesk', sans-serif;
}

SEAMLESS DEVELOPER HANDOFF

Export to your favorite tech stack in 1 click.

Whether your project uses Tailwind CSS, SCSS, or standard CSS custom properties, TokenCraft generates clean, linted code ready to drop into your codebase.

// tailwind.config.js - Extracted by TokenCraft
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: '#006565',
          secondary: '#008080',
          dark: '#0f1115',
          surface: '#f6f3f2',
          border: '#bdc9c8'
        }
      },
      fontFamily: {
        headline: ['Space Grotesk', 'sans-serif'],
        body: ['Inter', 'sans-serif']
      },
      borderRadius: {
        brand: '12px'
      }
    }
  }
};

WORKFLOW

Four steps from live page to clean code.

Simple, fast, and engineered to stay completely out of your way.

Open Side Panel

Click the TokenCraft toolbar icon or press shortcut to open the native Chrome side panel without obscuring your page.

1-Click Analyze

Hit "Analyze this page". TokenCraft inspects computed styles and generates visual swatches, fonts, and spacing scales.

Tweak & Preview

Swap colors, try Google Font pairings, or adjust curvature. Changes inject live into the active tab with full Undo/Redo.

Copy & Export

Pick your preferred format (Tailwind, CSS Variables, SCSS, JSON), copy the snippet, and paste directly into your project.

COMPATIBLE WITH CHROMIUM-BASED BROWSERS

public Google Chrome (114+)

window Microsoft Edge

shield Brave Browser

explore Arc Browser

adjust Opera / Vivaldi

GET STARTED TODAY

Install TokenCraft for Free.

Available as an unpacked developer package or directly via the Chrome Web Store. No accounts, no subscriptions, no tracking cookies.

check Navigate to chrome://extensions/ in your Chromium browser

check Enable Developer mode in the top-right toggle

check Click Load unpacked and select the extension folder

Chrome Web Store Live code Source on GitHub help_outline Setup Guide & Support Manifest V3 • 100% Client-Side

COMMON INQUIRIES

Frequently Asked Questions

Everything you need to know about how TokenCraft works.

Does TokenCraft modify the actual website permanently? expand_more

No. All modifications are injected temporarily into the active tab's local DOM. When you reload the page or click "Reset page", the website returns to its original state. Your customized color presets can also be saved per domain in your browser's local storage so you can reapply them whenever you revisit.

What permissions does TokenCraft need and why? expand_more

TokenCraft requests only essential permissions: sidePanel (to render in Chrome's native side panel), activeTab & scripting (to inspect computed styles and inject your visual tweaks on the page you are viewing), and storage (to persist your domain theme preferences locally). Zero external networking is used.

Does TokenCraft send my browsing history or data to any server? expand_more

Never. TokenCraft has no analytics scripts, no trackers, and no external servers. 100% of the extraction and live tweaking logic runs locally within your browser's memory and side panel sandbox.

Why does TokenCraft say "Cannot inspect this page" on chrome:// URLs? expand_more

Chromium browsers strictly forbid all browser extensions from inspecting or injecting code into internal system pages (like chrome://, chrome-extension://, or the Chrome Web Store) for browser security. TokenCraft works on all standard http://, https://, and local http://localhost/ development pages.

How can I report a bug or request a feature? expand_more

You can visit our dedicated Support Page or reach out directly to Deepak at lonealphano1@gmail.com. We reply to all user feedback within 24 to 48 hours.