Manual design vs. the Colors page
Design controls how the manual website itself looks – the color of the header, headings, links and buttons. The Colors page is content in the manual: it presents the brand palette, with swatches and values, for the people who work with the brand.
The difference at a glance
| Design (site look) | Colors page (brand palette) | |
|---|---|---|
| Purpose | The look of the manual website: header, headings, links, buttons, cards | Documenting the brand palette: swatches, values, ratios, contrast |
| Where in the panel | Design in the left menu | A page of the Colors type in the page list |
| What visitors see | Interface colors – never shown as a palette | Swatches with values to copy |
| Color formats | HEX | For example HEX, RGB, CMYK, Pantone |
| Who changes it | Admin | Anyone allowed to edit pages |
How they are connected
The only link is Your Brand Colors in Design → Colors. Colors you enter there are offered as quick picks in every color field – in Design, on the Colors page and in color sections. The values don’t sync, though. Changing a shade on the Colors page leaves the manual header unchanged, and the other way round.
Recommended workflow
- In Design → Colors, add the brand’s main colors in HEX to Your Brand Colors, for example
#004B87“Blue”. - On the Colors page, create swatches with full values for print and screen, for example Pantone 7686 C, CMYK 100/80/20/5 and HEX
#004B87. See Colors. - Then, in Design, pick the header, link and button colors from the quick picks.
Fonts work the same way
Design → Fonts sets the typeface of the manual website. A Typography page presents the brand fonts and offers them for download. Adobe Fonts loaded in Design are also available in font sections. See Fonts.