Colors
A dark, a light, an accent, and rules for what reads on each.
A brand in braaand doesn't have a "primary" and a "secondary" color. It has a dark, a light, an accent, and a set of rules for which text color reads well on which background. That's what lets a layout flip from a dark background to a light one and still look right.
The roles
| Role | Used for |
|---|---|
| dark / light | Your main dark and light backgrounds |
| accent on dark / accent on light | Your accent color, tuned for each background |
| text on dark / text on light | Default text on each background |
| heading / subheading / body | Optional text overrides, per background |
| button text | The text color on a button |
Why two of everything
A color that looks great on a dark background can be unreadable on a light one. Keeping a version for each lets you tune both. A yellow accent might become a deeper mustard on white so it still has enough contrast.
How layouts use them
A layout is set to a dark or a light background and picks the matching color for each piece of text on its own. Flip it in the editor and every text color, highlight, and button updates at once. Layouts never point at a specific color, they point at a role, and the role becomes the right color when it renders. See how your brand flows in.
Every scheme has two surfaces
Because every role comes in an on-dark and an on-light version, a color scheme really describes two surfaces: the canvas itself, and the inverted surface inside it — the light card in a dark design, the highlight box behind a headline. Custom schemes can set the inverted surface's colors explicitly (the contrast colors in the Scheme Builder — the same colors highlighted text uses). Elements opt onto that second surface by setting their color to Inverted (more here) — so a sign inside a dark design gets dark text on a light card, and stays correct on every scheme you flip to.