When you start a new project with Schema, the first thing you'll want to do is make the base styles your own. This means setting your brand colors, typography, and spacing — the foundation that everything else inherits from.
This article walks through the key customization steps in order.
Open the Variables Manager and navigate to the Palette collection. Start with the Primary group — set your main brand color, then work through the shade scale (ultra light through ultra dark, plus hover).
Each shade has a formula in its description field (e.g., $primary(H, S, L=85)) that derives the value from the parent color. If you're using a plugin like Fancy Figma, run it after changing your base color and the shades recalculate automatically. Otherwise, calculate and enter them manually.
Repeat for Secondary, Tertiary, and the other groups as needed. Not every project uses all color groups — leave unused ones at their defaults.
Once your Palette is set, check the Color Assignments collection. Most assignments are nested to Palette values, so they update automatically. Review that backgrounds and text colors align with your design direction. See Color palette and assignments for details.
Navigate to the Typography collection. The two key values are:
Adjust these and recalculate the derived heading sizes (manually or via plugin). Do the same for text sizes if needed.
Then update the font family variables — one for headings, one for body text. Make sure you set them in both Desktop and Mobile modes. After changing the variable values, update the corresponding Figma text styles to use the new families.
See Working with Scales for how to generate and update scale values, and Text Styles for how styles are bound to variables.
The Spacing collection follows the same scale logic as typography — a base value and multiplier that generates the full range from space-4xs to space-6xl. It also includes section-level spacing with its own multiplier.
Review the base values for Desktop and Mobile modes and adjust to match the density and rhythm you're going for.
In the Layout collection, configure: