Schema's color system is split into two variable collections: Palette and Color Assignments. Palette holds the raw color values. Color Assignments maps those values to semantic roles used across your design.
The Palette collection contains raw colors organized into seven groups:
Each color group follows a consistent shade scale: ultra light, light, medium, dark, ultra dark, and hover. This gives you a full tonal range for every brand color without having to define each value from scratch.
The Palette collection has two modes: Light and Dark. Both modes use the exact same variable names, but with inverted values. This is what makes the light/dark switch work - when you toggle modes on a frame, every color reference resolves to the correct value for that context. You don't need to maintain separate designs.
To switch modes, select a frame and apply palette → dark in the variables panel.
Open the Variables Manager and navigate to the Palette collection. Start with the Primary group and set your main brand color. Then work through the shade scale.
Each shade variable has a formula built into its description field - for example, $primary(H, S, L=85) - that derives the shade from the parent color's hue and saturation. If you're using a plugin like Fancy Figma, these formulas are picked up automatically. Change your primary color, run the plugin, and every shade in the group recalculates. See Working with Scales for more on this workflow.
Repeat for Secondary, Tertiary, and the other groups as needed. Not every project uses all groups - you can leave unused ones at their defaults or remove their scoping so they don't appear in the Figma UI.
The Color Assignments collection is the semantic layer. Rather than applying specific brand colors throughout your design, assignments map colors to how they're actually used on a website - backgrounds and text in light and dark contexts.