BreonWilliams

<p>Image to Design Tokens is a privacy-focused tool for designers and developers who need to extract color palettes from images and generate design system tokens.</p>
<h4>Key Features</h4>
<ul>
<li>Browser-Only Processing – Images are processed locally in the browser using the Canvas API and are never uploaded to a server.</li>
<li>Light and Dark Mode Tokens – Generates design tokens for both light and dark modes with contrast ratio indicators.</li>
<li>Color Extraction – Uses the median cut algorithm with a bias toward preserving saturated accent colors.</li>
<li>Live Preview – Preview how generated tokens appear in a sample user interface before exporting.</li>
<li>Contrast Checking – Displays WCAG contrast ratio calculations to help evaluate accessibility.</li>
<li>Export – Copy generated CSS custom properties to the clipboard.</li>
<li>Save Palettes – Store up to 5 palettes locally using browser localStorage.</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Upload or drag-and-drop an image (such as a screenshot, logo, or visual reference)</li>
<li>The tool extracts dominant colors using the median cut algorithm</li>
<li>Design tokens are generated for both light and dark modes</li>
<li>Review contrast ratio indicators and preview the tokens</li>
<li>Copy the generated CSS custom properties</li>
</ol>
<h4>Generated Tokens</h4>
<ul>
<li>Background (bg)</li>
<li>Surface</li>
<li>Border</li>
<li>Text</li>
<li>Heading</li>
<li>Muted Text</li>
<li>Primary (accent or brand color)</li>
<li>On Primary (text displayed on the primary color)</li>
</ul>
<h3>Additional Information</h3>
<p>This plugin can be used alongside other tools. For example, Promptless WP can consume exported design tokens as part of a broader page layout workflow.</p>


Image to Design Tokens

Extract color palettes from images and generate design tokens for light and dark modes. All processing happens in your browser.

sulaimandauda

<p><strong>Theme.json Design Manager</strong> provides a user-friendly admin interface for managing design tokens that are automatically merged into your theme’s <code>theme.json</code> Global Styles pipeline. No code editing required.</p>
<h4>Features</h4>
<ul>
<li><strong>Color Palette</strong> — Define semantic color tokens with live contrast previews. Generates <code>--wp--preset--color--{slug}</code> CSS custom properties.</li>
<li><strong>Spacing Scale</strong> — Create spacing tokens with drag-to-reorder support. Generates <code>--wp--preset--spacing--{slug}</code> CSS custom properties.</li>
<li><strong>Typography Scale</strong> — Set font size tokens with optional fluid <code>clamp()</code> support. Generates <code>--wp--preset--font-size--{slug}</code> CSS custom properties.</li>
<li><strong>Border Radius</strong> — Define radius presets. Generates <code>--wp--custom--border-radius--{slug}</code> CSS custom properties.</li>
<li><strong>Shadow Presets</strong> — Create box-shadow tokens with live previews. Generates <code>--wp--preset--shadow--{slug}</code> CSS custom properties.</li>
<li><strong>Hide Defaults</strong> — Optionally hide theme/core default presets from the editor for a clean, curated design system. CSS custom properties are preserved.</li>
<li><strong>Reserved Slug Protection</strong> — Automatically detects and renames color slugs (e.g. “text”, “link”) that conflict with WordPress core CSS marker classes, preventing color override issues in the editor.</li>
<li><strong>Diagnostics Tab</strong> — View runtime data including stored tokens, merged palette by origin, generated CSS variables, preset classes, and settings at a glance.</li>
</ul>
<h4>How It Works</h4>
<p>The plugin stores design tokens in the WordPress database and merges them into the theme’s Global Styles via the <code>wp_theme_json_data_theme</code> filter. Tokens use WordPress’s native slug-based merge system — matching slugs are replaced, new slugs are appended.</p>
<p>All changes are <strong>fully reversible</strong>. Deactivating the plugin restores original theme styles.</p>
<h4>Developer-Friendly</h4>
<ul>
<li><strong>Filter hooks</strong> for extending tokens before merge (<code>gdtm_tokens_before_merge</code>)</li>
<li><strong>Action hooks</strong> after save (<code>gdtm_after_save</code>) and for custom tab content (<code>gdtm_after_tab_content</code>)</li>
<li><strong>Admin tab filter</strong> (<code>gdtm_admin_tabs</code>) for registering additional tabs</li>
</ul>


Theme.json Design Manager

Manage design tokens — colors, spacing, typography, border radius, and shadows — that integrate with WordPress Global Styles via theme.json.

Image to Design Tokens vs Theme.json Design Manager