UI/UX Design
12 issues tagged with this topic.
Color in motion: designing animated color transitions and when timing matters
Animating color is not simply moving from one hex value to another. The path a color takes between two states — through which intermediate values, at what speed — determines whether the transition reads as intentional or accidental. Most UI color animations use linear interpolation in RGB, which produces desaturated midpoints and timing that feels unnatural to the human visual system. Designing motion-aware color requires understanding how color spaces affect interpolation and how animation timing curves change perceived color speed.
Color consistency across devices: why the same hex looks different everywhere
A designer specifies #2563EB on a calibrated display. The developer sees a slightly different blue on their laptop. The client reports it looks wrong on their phone. The same hex value, different appearance. This is not a bug — it is color management working as intended, exposing the gap between color as a number and color as a perceptual experience. Display calibration, color profiles, and rendering environments create a physical layer beneath the digital layer that most designers never see until a client complaint forces them to look. Understanding the basics makes hex choices more deliberate and client conversations more productive.
Color and typography: why your font color matters as much as your typeface
Most typographic decisions focus on family, weight, and size. Color is treated as an afterthought — a near-black on white, or white on dark. But the color of text shapes its perceived weight, warmth, authority, and legibility in ways that typeface choice cannot override. A slightly warm off-black reads friendlier than pure #000000. A slightly desaturated heading color reads more refined than a vivid brand hue. The relationship between text color and surrounding surface color determines whether your hierarchy reads instantly or has to be decoded. This issue covers the decisions most designers leave implicit.
Color accessibility beyond contrast ratios: the full picture
WCAG contrast ratios are the measurable, testable part of color accessibility. They are not the whole picture. A design can pass all contrast checks and still be inaccessible: links indistinguishable from body text without underlines, focus indicators lost in border-radius aesthetics, color as the sole indicator of form validation errors, status lights that rely entirely on red/green distinction. Accessibility in color is a design principle, not a checklist. This issue covers the five most common color accessibility failures that no automated tool catches.
Dark mode color design: more than inverting your palette
Dark mode is not light mode with the colors flipped. Surfaces need to be layered in lightness rather than collapsed into uniform dark gray. Saturated colors that work on white backgrounds become neon and harsh on dark ones. Text hierarchy that relied on color weight needs a different strategy. This issue covers the structural decisions that determine whether a dark mode feels polished and restful or strained and inconsistent.
Warm vs cool neutrals: the decision that defines your UI's personality
Neutral colors — whites, grays, and off-whites — make up the largest visible surface area in most interfaces. They are rarely thought of as a design decision, often defaulting to a framework's preset grays. But the temperature of your neutrals — whether they lean warm (yellow, red, amber undertones) or cool (blue, green, gray undertones) — shapes the emotional register of the entire product. This issue breaks down how to choose, commit to, and apply neutral temperature consistently.
Color in animation: how motion changes color perception
Animated color transitions are not just aesthetic choices — they carry meaning, communicate state, and affect user perception of speed, quality, and intent. A color that reads perfectly in a static mockup can feel wrong in motion: too fast and it creates anxiety, too slow and the interface feels sluggish, in the wrong color space and the midpoint is a visual mudslide. This issue covers how animation timing, color space, and transition intent work together.
The 60-30-10 rule: how it works in digital design and when to break it
The 60-30-10 rule originated in interior design as a proportion guide for distributing three colors across a room: 60% dominant, 30% secondary, 10% accent. It migrated into graphic design and digital UI as a practical heuristic for color proportion that consistently produces visually balanced results. Like most design rules, it is useful when you understand the principle behind it and limiting when followed mechanically. This issue covers the theory, the application, and the valid exceptions.
Color in email design: HTML constraints, dark mode, and brand consistency
Email HTML is a design environment frozen in the early 2000s. Rendering support across email clients (Gmail, Outlook, Apple Mail, Yahoo) is fragmented enough that CSS properties available in every modern browser may produce completely different results — or no result at all — in email. Color in email is subject to its own set of constraints, from background-color rendering failures in Outlook to dark mode color inversion in Apple Mail. This issue covers the practical constraints and the workarounds that work across clients.
Color for data storytelling: palettes that inform without deceiving
Data visualization color has a different design goal than brand or UI color. In branding, color communicates personality. In data, color communicates meaning. A palette that communicates meaning must be distinguishable, maintain legibility across rendering environments, avoid implying value judgments when none exist, and remain functional for color-blind viewers. Most data visualization color failures come from applying brand palette logic to data encoding — using too few distinguishable values, applying sequential palettes to categorical data, or creating color salience that misleads the audience about data importance.
The case for off-white: why pure white fails in UI and what to use instead
Pure white (#FFFFFF) is the default background for most digital interfaces, but it is rarely the best choice. The human visual system perceives pure white on a high-brightness screen as a light source — a phenomenon called halation — which creates eye fatigue over extended reading sessions. Off-white backgrounds (slightly warm, cool, or neutral whites with 2-5% lightness reduction) are consistently rated as more comfortable for extended use and are used by virtually every product known for reading quality: Kindle, iBooks, Bear, Notion, Linear. Understanding why off-white works — and which off-white to choose — is a practical skill for product designers.
Color in spatial computing: luminance, depth, and legibility in XR environments
Spatial computing — AR, VR, and mixed reality — introduces color design constraints that are fundamentally different from flat screen design. The rendering environment (headset optics, variable lighting conditions, binocular depth perception, foveated rendering) creates new requirements around luminance management, surface transparency, chromatic aberration, and legibility. As Apple Vision Pro, Meta Quest, and similar platforms mature, color for spatial interfaces is an emerging specialty within product design. This issue covers the foundational constraints and the design principles that follow from them.