Recipes

A palette is simply a set of color steps.

With Recipes, you can turn that palette into a semantic color structure or a more complete system for UI work.

Choose a recipe

ColorBread includes recipe presets for building structured color systems.

When you choose a recipe, the palette is mapped into a usable system of UI roles.

At launch, ColorBread provides a default standard UI recipe in v1.0.0.

Examples of semantic roles include:

Brand
Background
Surface
Text
Border

Each semantic color is mapped to a specific palette step.

Examples:

Brand → Primary 500
Background → Neutral 50
Text → Neutral 900

The Base Color is the starting point of the recipe.

Based on that selection, ColorBread automatically creates Primary and Neutral palettes.

This becomes the foundation for:

With a single color choice, you can build a full system much faster.

Preset Color gives you a set of commonly used starting combinations.

Click one to apply it instantly.

Preview shows how the current recipe looks in a real UI layout.

It helps you estimate the overall mood and direction of the system before applying it.

Bake Recipe saves the recipe result to the Library.

At the same time, Figma Variables and Styles are generated automatically and linked back to the related palettes.