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.