About this block

Brand Colors Grid documents the palette as swatch cards, each with a tall color field, the name, the hex in mono, and a usage line. The swatches render from theme tokens so the cards stay truthful in both modes, and the lede explains the relationship, the listed values are the light set, the dark set inverts.

The colors are one array of name, hex, usage, and swatch class. The usage lines are the documentation, headlines and primary actions tells a partner designer more than the hex does. Hex values are content here, displayed text rather than styling.

When to use

Reach for this block on press and brand pages beside press-kit-downloads, the on page version of the palette PDF in the kit. It also serves design system marketing, a public palette page is a small flex that designers respect and remember.

A natural flow around it on a Marketing Pro page:

Before

• Press kit shelf offering the downloadable version

After

• Logo usage rules completing the brand guardrails
• Footers closing the press page

What you can display

One strong use is the brand palette with usage notes. Other grids:

• Product themes. The preset themes of a customizable product, swatched and named.
• Chart palette. The data visualization ramp with when to use which.
• Partner co brand. The approved colors for co marketing materials.

Tip: name the colors like you mean them, Ink and Paper get respected where Gray 900 gets approximated.