Primary palette

Summary

The primary palette page, presented as a bar chart: nine colour columns of different heights where the height signals how often each colour is used, each footed with a code name and Hex, RGB, CMYK, and Pantone values.

Visual description

Standard layout: cream left column with section number "2.5.1 Primary palette" and two short paragraphs explaining the palette and that bar height indicates usage frequency; navigation list lower-left with Colour bolded. The white panel holds nine vertical colour bars of varying heights reading left to right: orange (H), red-orange (1A), pale mint (2A), dark teal-green (2C, tallest), light blue (5A), aubergine (7D), pale cream (10A), pale green (NB), and black (GD). Beneath each bar a small pill shows its code and a swatch, with Hex, RGB, CMYK, and Pantone values listed below. A footnote row at the bottom explains the X naming convention (AA lightest to D darkest within a grouping) and how to use the Hex/RGB, CMYK, and Pantone values. The cream footer carries copyright, title, and "Version 01".

Key takeaway

Turning a flat swatch list into a usage-frequency bar chart, so the page communicates not just which colours exist but how dominant each should be (tall teal and black for backgrounds and text, short accents above). It is a single visual encoding two facts (identity and proportion) without extra copy. The four-value spec block under each swatch is thorough and production-ready.

Reuse notes

A reusable primary-palette page, strongest where a brand wants to signal colour proportions, not just options. The bar-height-as-frequency idea is a clean alternative to a uniform swatch row. Reproduce the full Hex/RGB/CMYK/Pantone block per colour for any guideline meant for real production. Pairs with the extended-palette and pairings pages that follow.