Design Systems
11 issues tagged with this topic.
Typography and color: how type weight changes the palette you need
Color and typography are not independent decisions. Type weight, size, and tracking interact with palette choices in ways that most design systems treat as separate concerns — but they are deeply entangled.
How to document a color palette so the next designer can use it
A palette that exists only in a Figma file is a palette that will be misused the moment the original designer leaves the project. Color documentation is the difference between a palette that lasts and one that drifts.
Dark mode is not just inverted light mode: the design decisions that make it work
Most dark mode implementations are design accidents — light mode with the lightness flipped. Real dark mode design requires different color relationships, different contrast strategies, and different handling of shadows and elevation.
Color naming systems: why the words you use for colors shape how teams use them
How you name a color changes how it gets used. Teams with semantic color names make different — and usually better — design decisions than teams using raw hex values or scale-position names like 'blue-500'.
Monochromatic palette strategy: getting the most out of a single hue
Monochromatic palettes are both harder and more rewarding than they appear. The constraint forces you to work with lightness and saturation as your primary tools — which is how many professional color systems actually work under the surface.
Designing color systems for mobile apps: constraints that change the rules
Mobile app color design operates under constraints that do not apply on desktop or web: smaller touch targets, varied ambient lighting, OLED displays that make pure black meaningful, and OS-level dark mode that must be handled systematically.
Color naming for design systems: tokens that communicate intent
Naming is the invisible architecture of a color system. The names designers give to colors determine how the system scales, how it documents itself, and whether the team that inherits it can use it without reading a manual. Most color naming problems are not aesthetic — they are structural.
Color in brand identity: building a proprietary color system from scratch
Most brands inherit their color systems rather than design them. A brand color that was chosen in an afternoon by a founder who liked how it looked on a moodboard is then stretched to cover digital products, packaging, environmental graphics, and partner materials it was never designed for. Building a proprietary color system from scratch means making explicit decisions about every role the color will play before committing to any of them.
Color maintenance in design systems: keeping palettes consistent as products scale
A design system's color palette is never finished. As products grow, new surfaces require new tokens, edge cases demand new values, and platform constraints introduce divergence between web and native implementations. Color systems that are not actively maintained drift. Within two years, an unmanaged color system typically contains 40-60% more color values than intended, with multiple near-duplicate tokens that no one is sure are still used.
Tints, shades, and tones: how to build a complete color scale for any brand color
The difference between a tint, a shade, and a tone is not just terminology — it reflects three different relationships between a color and its visual context. Understanding how to generate a complete, usable tonal scale from any brand color is one of the foundational skills of modern design systems. Most color tools produce scales that look acceptable but break down under real conditions: text that fails contrast on midrange steps, surfaces that feel muddy rather than elevated, and shades that lose hue fidelity as they darken. Building a reliable color scale requires understanding where each decision compounds.
Color in data visualization: encoding information without misleading your audience
In most design contexts, color is decorative or expressive. In data visualization, color is functional: it encodes information. The same color choice that reads as attractive in a marketing context can systematically mislead an audience in a chart. The rules for visualization color are different from the rules for UI color, different from the rules for brand color, and different from the rules for illustration. Applying the wrong ruleset — as most designers do when they first approach data visualization — produces charts that look designed but communicate poorly.