Palette Designer

Create cohesive color systems for your next digital product.

Source Colors

Generated Scales

Typography Scale

Define a harmonious type system for your platform.

Font Family

Base Size

Scale Ratio

Type Scale

Token	Size	LH	Preview

✦ AI Pro Tip

Select a ratio to see suggestions.

Spacing System

Spacing tokens on a 4px base. Handy for annotating designs and for developer handoff.

Name Size (16px base) Pixels Visual

Component Library

20 building blocks for your AI coding platform.

Design → Code

Paste your Figma Personal Access Token once and the plugin will use it to read any file you share.

20 Components

Enterprise Library

400+ production-ready components across 12 business domains. Click any component to open the Playground and push to Figma.

12 domains 400+ components Playground ready

Component

Domain · Category

Preview

Data sections: toggle to show/hide

Button

60 variants · 5 types × 3 sizes × 4 states

Push to Figma as Component

Creates a component set with all variants & states on the current page.

Code

Token Sync

Push DTCG tokens into Figma Variables (Primitives + Semantic).

primitive.json · color ramps, spacing, radius

semantic.json · light mode aliases

themes/dark.json · dark mode overrides

Domain Libraries

9 enterprise-grade domain token sets. Select a domain to preview its palette and push to Figma.

Effect Styles

Drop shadows from Untitled UI, ready to copy or paste into Figma.

Border Radius

Define and manage consistent corner radius tokens.

⬡

Radius Tokens

Coming soon: set a corner radius scale and push it to Figma variables.

Grid Layouts

Responsive column grids for Desktop, Tablet & Mobile. Paste annotated frames straight into Figma.

Container Grid Layouts

Icons

Solar icons · free, no sign-in required