Recipe
Learn what a recipe is in ColorBread
A recipe is the structure used to turn colors into a system.
If a palette is a set of color steps, a recipe is the layer that gives those colors meaning and organizes them into roles.
You can think of it like a recipe in cooking: the ingredients matter, but the structure is what makes the result usable.
Primitive Colors
A recipe starts by defining Primitive Colors.
Examples:
Primary
Neutral
Each primitive color is based on its own palette.
Examples:
Primary Palette
Neutral Palette
Accent Palette
Semantic Colors
Next, the recipe defines Semantic Colors.
These are the colors used directly in the UI.
Examples:
Brand
Background
Surface
Text
Border
Each semantic color is linked to a specific step in a palette.
Examples:
Brand → Primary 500
Background → Neutral 50
Text → Neutral 900
Why recipes are useful
Recipes make it easier to:
- Keep UI color roles consistent
- Change the system without rebuilding everything
- Structure light and dark mode more easily
- Expand the design system over time
The recipe system in ColorBread
In ColorBread, you first generate a palette, then apply a recipe to build a complete color system.
The overall flow looks like this:
Base Color
→ Generate a Palette
→ Apply a Recipe
→ Build a Semantic Color structure
→ Create Figma Variables