Skip to main content
Coreframe builds a complete color system from your brand’s base hues. You provide up to seven seed colors — brand, secondary, neutral, success, warning, error, and info — and Coreframe auto-generates a full palette of shades, maps them to semantic roles, and pushes everything to Figma as native Variables with Light and Dark modes. The result is a layered token architecture that scales from raw palette values all the way down to per-component, per-state color slots.

​
Color generation steps

1

Open Coreframe and go to the Colors tab

Launch the plugin inside your Figma file. Click the Colors tab in the navigation bar to open the color generator.
2

Enter your brand's base colors

You’ll see seven default seed colors: Brand, Secondary, Neutral, Success, Warning, Error, and Info. Click the color swatch next to each name and enter your hex value, or drag the Hue, Saturation, and Brightness sliders. Quick-pick swatches let you jump to a preset instantly.
3

Generate the palette

Click Generate Palette to advance to the Preview step. Coreframe calculates shades across an 11-step scale: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. You can also choose a 5-step (100, 300, 500, 700, 900) or 9-step (100–900) scale from the scale selector.
4

Edit individual swatches (Pro)

Pro users can click any swatch in the palette preview to open an inline color editor. Adjust the hue, saturation, and brightness, or type a hex value directly, then click Apply to override that specific shade.
5

Review semantic tokens and generate

On the Semantic Tokens step, review the automatically generated semantic mappings. Pro users can change any light or dark reference using the dropdowns. Click Generate Color Tokens to create the Color variable collection in Figma with all primitive and semantic variables. To also include component-level variables, click Map Component Tokens instead to proceed to the next step first.
6

Generate component tokens (Pro)

On the Component Tokens step, review the per-component, per-state color mappings. Free users can preview these mappings but the exported variables will include only primitive and semantic tokens. Pro users can customize any mapping and click Generate Component Tokens to include component-level variables in the output.

​
Color token structure

Coreframe organizes color tokens into three layers, each building on the one below it.
  • Base colors — the raw palette generated from your seed hues. These live under primitive/{colorName}/{shade} (e.g., primitive/brand/500, primitive/neutral/200) and are marked hidden from publishing so they stay internal to your system.
  • Semantic tokens — purpose-based aliases that point at palette values (e.g., semantic/foreground/default, semantic/surface/muted, semantic/action/primary). Semantic tokens carry both a Light and a Dark mode value, so toggling modes updates every semantic usage instantly. Editing semantic token mappings is a Pro feature.
  • Component tokens — component-specific slots that reference semantic or primitive values (e.g., color/button/primary/background/default, color/button/primary/text/hover). These live in the Component collection so they stay separate from the core Color collection. Exporting component tokens is a Pro feature.

​
Light and dark mode

When Coreframe creates the Color variable collection, it automatically sets up two modes — Light and Dark. Every semantic and component variable receives a value for both modes. Primitive palette variables share a single value across modes; the semantic layer handles the light/dark switch. To preview dark mode in Figma, select any frame, open the Variables panel, and set the Color collection mode to Dark.
Pro users can map semantic tokens to their base palette for full control over theming. Open the Semantic step, use the dropdown next to each token to swap the light or dark reference, and regenerate.