Brand color systems and design tokens

0:00 Brand color systems

Think of a brand you can recognize from across a room, before you can read a single word. Often, it's the color. A particular red, a particular teal, a particular purple. That kind of recognition isn't luck. It comes from choosing a signature color carefully, defining it precisely for every medium, and using it consistently for years. In this lecture, you'll learn how a brand color system is structured, how to choose a signature color, how to specify colors for screens and print, how to build ramps and an accessible pairings matrix, and how design tokens carry the system from Figma into code. By the end, you'll build a color system that works on a phone, a box and a billboard.

0:53 Why a system

Why a system, not just a palette? Because a brand palette has to work everywhere, for everyone, in many hands. Screens, print, fabric, signage, partner materials, dark mode, and people with low vision. A mood board of pleasant colors can't do that. A system can. Think of a paint company's color card for a house. It doesn't just say blue. It gives the exact mix, where to use each shade, and which trims go with which walls. A brand color system does the same, so any designer, printer or developer can get it right without guessing.

1:35 Structure

Here's the structure. A primary or signature color: the recognizable brand color, usually one, sometimes two. Secondary colors: two to four, supporting variety in layouts, campaigns and illustrations. An accent: one, for calls to action and highlights. Neutrals: three to six, for text, backgrounds and borders. And functional colors: success, warning, error and info, for digital products. Here's the key idea. The signature color must appear consistently and prominently enough to become associated with the brand, while secondary colors add range without overpowering it. Signature, not wallpaper.

2:13 Choosing the signature

How do you choose the signature color? Five considerations. Differentiation: how does it compare with competitors on your landscape board? Personality fit: do its hue, saturation and value express the personality sliders? Practicality: can it be reproduced consistently on screens, in print, on fabric and on signs? Very vivid screen colors may be impossible to match in CMYK. Accessibility: can it carry text, or will it need a darker or lighter variant? And cultural context: are there associations in your key markets that help or hinder? Then specify it everywhere: hex, RGB, CMYK from a printer proof, a spot color if you use one, and its token name.

3:00 Ramps and pairings

Now ramps and pairings. For each main color, create a ramp, for example from fifty, the lightest, to nine hundred, the darkest. That gives designers light backgrounds and dark text versions that are still on brand. Perceptual color tools help the steps look evenly spaced. Then build an approved pairings matrix: every text color against every background, checked against WCAG two point two, with four point five to one for normal text and three to one for large text. Mark which pairs are approved. Designers then choose from approved pairs instead of testing each time, and failures stop creeping back.

3:43 Worked example 1: a yoga studio's lilac

Worked example one, simple. A yoga studio in London uses a soft lilac everywhere, including for text on white. It looks gentle, but body text fails contrast badly. The designer keeps lilac as the signature, because clients recognize it, and builds a ramp. Lilac one hundred becomes a background tint. Lilac five hundred stays for large shapes. And lilac eight hundred, much darker, becomes the brand text color on white, and it passes. The pairings matrix makes the rule clear: lilac five hundred never carries small text. The studio keeps its recognizable color and gains a readable website.

4:26 Worked example 2: a Dubai property creator

Worked example two, a business scenario with illustrative details. A property content creator in Dubai uses gold, black and white, just like every luxury competitor. Gold text on white fails contrast, and the screen gold prints muddy on brochures. The new system: a warm sand base, a deep teal signature that stands apart, and a restrained brass accent used only for large graphics or on dark backgrounds. For print, the brass gets a spot or metallic specification, proofed physically, because automatic conversion won't match. For digital, everything becomes semantic tokens with light and dark modes. The result feels premium, looks different from competitors, and works on screens, paper and signs.

5:14 Watch me do it: color tokens

Watch me do it. I'm setting up tokens in Figma. I create a primitives collection with my ramps: teal fifty to nine hundred, navy nine hundred, sand fifty and coral five hundred. Then a semantic collection with light and dark modes. Color text default points to navy nine hundred in light and a warm off-white in dark. Color background canvas points to sand fifty in light and navy nine hundred in dark. Color action primary points to coral five hundred in both. I apply only semantic variables to the templates. Then I export the tokens as JSON for our developer, who transforms them into CSS variables. The lesson shows both formats. One source of truth, from design to code.

6:06 Color in print

Let's talk about print, because this is where brand colors go wrong. Screens mix light, and print mixes ink, so some bright screen colors, especially vivid blues, greens and oranges, can't be matched in standard CMYK. Automatic conversions can be noticeably off. So proof physically. Ask your printer for a proof on the actual paper stock. For critical colors, consider a spot color system, like Pantone, and specify it in the guidelines. And remember materials. The same color looks different on coated paper, uncoated paper, fabric and acrylic signage. Add material-specific notes when a brand uses many surfaces.

6:49 Common mistakes

Common mistakes. Choosing colors because the founder likes them, not for differentiation or personality. Copying the category's color, so the brand disappears. Too many colors with no roles. Using the signature color for everything. Using brand colors as text without checking contrast. Trusting automatic CMYK conversions. Typing hex values by hand in every file. And forgetting dark mode. The fix is a system: roles, ramps, a pairings matrix, specs for every medium, and semantic tokens that designers and developers share.

7:24 Recap and try this now

Let's recap. A brand color system has roles: signature, secondary, accent, neutrals and functional. Choose the signature for differentiation, personality, practicality, accessibility and cultural fit, and specify it for every medium. Build ramps, an approved pairings matrix against WCAG two point two, and print specs proofed physically. Then carry it all into semantic design tokens with light and dark modes, shared between Figma and code. Try this now. Build a color system for a brand, with roles, a ramp for the signature color, a pairings matrix checked with a contrast tool, and at least six semantic tokens.