Open a VI manual delivered by most traditional design agencies, and the “Brand Standard and Secondary Colors” page often looks like this: 2 primary color swatches on the left, 6 colorful secondary swatches on the right, a row of CMYK, RGB, and HEX values underneath, followed by an emotive explanation (“Blue represents technology and wisdom; orange represents energy and innovation…”).
Guidelines that provide only a palette without defining “roles and proportions” almost inevitably get out of control in practice: colleague A uses a large bright orange background with blue text for a brochure, while colleague B spreads all 6 secondary colors evenly across an exhibition backdrop like a rainbow. Although every color comes from the VI manual, the combinations look nothing like the same brand.
1. Move from a “display of color swatches” to “Semantic Color Roles”
Drawing on the design token approach in modern UI/UX design systems, brand color guidelines that can genuinely guide implementation must clearly specify each color's function and maximum share of a single composition:
| Color role category | Recommended share of a single composition | Specific permitted locations | Strictly prohibited misuse |
|---|---|---|---|
| Neutral Surfaces | 60%–75% | Main page backgrounds, card backgrounds, dark-gray body text, and fine dividers (such as pure white #FFFFFF, warm gray #F7F8FA, and deep charcoal #111827) |
Never replace large reading-area backgrounds with highly saturated colors |
| Primary Brand Color | 15%–25% | Brand logo, backgrounds behind main headings in key modules, primary visual color blocks on covers, and the framework of key graphics | Avoid splitting the area 1:1 with highly saturated secondary colors in the same composition |
| Accent / CTA Color | 5%–10% | Primary website calls to action (CTAs), highlights for key growth figures, and important corner badges | Must not exceed 10% of the entire composition, or it will completely lose its function as a visual focal point |
| Data & Status Palette | For use within charts only | Only for multidimensional data charts (bar/pie charts) in financial reports/white papers, or system status indicators | Never use the red, yellow, or purple secondary colors reserved for charts as the main background of a poster |
2. Include 3 sets of “correct vs. incorrect” color combination examples
At the end of the color section in the VI manual, show 3 actual layouts (a light-mode long-form illustrated article, a dark-mode launch-event key visual, and a business briefing on a white background). Clearly mark the fixed combinations of background color, main headline color, body text color, and accent button color so that staff without a design background can apply them without mistakes.
