Design Tokens
Design & UXThe named values behind a design system — colors, spacing, font sizes, radii — stored as variables so a single change updates every screen instead of every…
Design & UX
Color System
Color Palette | Brand Color System
Lukas HorvathCo-founder
What is Color System?
A color system, also called a color palette or brand color system, is a defined set of colors used across a brand and product, with rules for how each is applied. It typically includes primary brand colors, neutrals, semantic colors (success green, error red, warning yellow), and tints and shades of each. A color system lives in design tokens so the same values power Figma, the website, the app, and emails — and a single change updates everything.
Why it matters
Most brands ship with three brand colors. Six months later, the live site has eleven. Designers needed a slightly darker shade. A developer hardcoded a hover state. Marketing approved a campaign with a one-off accent. The brand quietly turns into mush. A color system stops the drift. There is one navy. There is one accent. There is one error red. Every shade is named, tokenized, and accessible (passing WCAG contrast). The brand stays sharp without anyone having to police it ticket by ticket.
How it works
A designer defines the palette in tiers. Primitives are the raw color values ("blue-500: #1E40AF"). Semantic tokens map those primitives to roles ("color-action-primary: blue-500," "color-text-default: gray-900," "color-error: red-600"). Component tokens map semantic colors to specific components like buttons or alerts. Every color combination is checked for accessibility — body text needs at least a 4.5:1 contrast ratio against its background. Dark mode gets its own semantic layer pointing at appropriate primitives, often a near-black background and softened brand colors. The tokens live in Figma variables and in code via a build tool like Style Dictionary. New brand palette next year? Update the primitives once. Every screen, every email, every product component follows automatically.
Related terms
Design System
Design & UXA shared set of components, design tokens, and rules a team uses to design and build a product, so every page looks coherent and no one is reinventing a button…
Visual Identity
Design & UXThe visual half of a brand — logo, typography, color, imagery, iconography, motion — the parts of the brand you can actually see, designed as a coherent system…
Brand Identity
Design & UXThe full system that defines how a brand looks, sounds, and behaves — name, logo, type, color, tone, story — not just the logo, but everything that makes the…
Typography
Design & UXThe craft of choosing and arranging type on a website — fonts, sizes, weights, line height, letter spacing, line lengths — to make content readable, scannable,…
Dark Mode
Design & UXAn alternate color theme that uses dark backgrounds and light text — easier on the eyes in low light, increasingly expected by users, and impossible to add…
Accessibility
Design & UXDesigning and building a website so people with disabilities — vision, hearing, motor, cognitive — can actually use it, not just open it, and so the rest of…
User Interface
Design & UXThe visible part of a digital product — the buttons, menus, forms, layout, typography, icons, modals — that a person actually touches, clicks, and reads to get…