Editor | Kromalume

Keyboard Shortcuts

Add New Color A

Randomize Palette

SPACE R

Rotate Roles T

Export Code E

Save to Cloud CTRL + S

Undo / Redo

CTRL+Z SHIFT+Z

1 Swatches

2 Gradient

3 Simulation

Shortcuts are disabled while editing text fields or color inputs.

Remove Token?

This action is permanent. All associated roles, shades, and simulation tokens will be purged from the current palette.

Engine Connected

Create high-fidelity design tokens with perceptual uniformity.

Quick Tags:

Formats

Integrations

Text Color → Background ↓
	×

No colors yet

Your palette is currently empty. Start by adding colors manually or let the engine generate a baseline for you.

Pro Tip: Press Space to randomize

Asset	Type	Status
Hero_Header.svg	Vector	Ready
Auth_Flow.json	Lottie	Review

Spacing Scale

Adjust the base spacing scale in REM. The visual blocks represent the relative proportion of each tier.

Borders & Focus

Define your border widths and interactive focus ring parameters.

Border Width Tiers

Focus Ring Styling

Ring Width

Ring Offset

Accessibility Preview

Use the sliders to adjust how components highlight during keyboard navigation.

System Typography

Heading Family

Body Family

Size Scale (rem)

Weight Scale

System Shadows

System Gradients

Gradient Type

Angle

Active Colors

Click to toggle which colors are included in this gradient.

Saved Gradient Swatches

System Shapes

Extract Website

Enter a URL to extract its dominant design tokens.

Extract Image

Drop image here Or click to browse

Export Tokens

Export Filters

Tokens include OKLCH to RGB conversions for fallback support.

ESC

↑↓ Navigate ENTER Select

Kromalume

Layout & Grid

Container Max Width

Grid Columns

Gutter (Gap)

Side Margin

The grid system automatically synchronizes with your **Spacing Tokens**. Changes here will update your exported CSS variables and WordPress `theme.json` layout settings.

Assign Color

Currently editing:

Keyboard Shortcuts

Remove Token?

Typography System

Border System

Spacing System