Brand Colors Grid
Palette swatch cards with names, hex values, and usage notes per color.
Palette swatch cards with names, hex values, and usage notes per color.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the brand palette with usage notes. Other grids:
Tip: name the colors like you mean them, Ink and Paper get respected where Gray 900 gets approximated.