Why pure white creates fatigue
Display screens emit light directly into the eye, unlike printed paper which reflects ambient light. At typical display brightness (200-400 nits), a pure white (#FFFFFF) screen surface is significantly brighter than most ambient lighting conditions. The eye adapts its pupil size and neural gain to the average luminance of the scene — when a large white surface dominates the display, the pupil contracts for the overall brightness, making other elements in the interface (text, icons, colored elements) harder to resolve at their true contrast. The result is a persistent low-level effort to read that accumulates over hours of use. This is not unique to people with photosensitivity — it is a normal visual system response to high-luminance large-area light sources. Reducing background luminance by 2-6% (from #FFFFFF to #F5F4F0 or similar) significantly reduces the luminance-adaptation load on the visual system.
Choosing warm vs cool off-white
The temperature of the off-white background is the most visible design decision in the choice. Warm off-whites (hue 30-60° in HSL, saturation 8-20%) create the aesthetic most associated with editorial, books, paper, and analog warmth. Products that use warm off-white: Notion (warm cream), Bear (warm parchment), physical book typography apps. Warm off-whites pair naturally with warm-toned brand systems (amber, coral, honey accents) and warm-weight typefaces (humanist sans-serifs, old-style serifs). Cool off-whites (hue 200-230° in HSL, saturation 4-12%) create an aesthetic associated with precision, technology, and clinical environments. Products using cool off-white: GitHub (very slightly cool white), Linear, many developer tools. Cool off-whites pair with cool-toned brand systems (cobalt, azure accents) and geometric typefaces. The choice follows the brand temperature, not a universal preference.
Off-white in multi-surface UI systems
Most digital interfaces use multiple background levels: a base background, a raised surface (cards, modals), and a recessed area (inputs, sidebars). The off-white system typically defines 2-3 near-white values at slightly different lightness levels. A common pattern: base background at #F5F4F0 (L:96%, warm), raised card surface at #FFFFFF or #FAF9F7 (slightly lighter, or pure white for card lift), recessed input background at #EEEDE8 (slightly darker, distinguishes input from card). The three-level system communicates surface hierarchy through lightness alone, without color or shadow, which is the approach used by Linear, Notion, and many premium digital products. Define the off-white surface system as a set of design tokens (surface-base, surface-raised, surface-recessed) and apply it consistently — ad hoc background color decisions create visual inconsistency across the product.
Dark mode off-black: the same principle inverted
Dark mode backgrounds follow the same principle as off-white: pure black creates problems, and a dark-but-not-black background is more comfortable and more versatile. Pure black backgrounds make it impossible to distinguish surface elevation — if the base and card surfaces are both pure black, there is no way to separate them without borders or heavy shadows. The standard dark mode surface system uses lightness steps: base at L:10-12%, raised surface at L:14-16%, raised-hover at L:18-20%. These small steps are sufficient to communicate hierarchy. Temperature in dark mode: cool dark backgrounds (slight blue or neutral tint) are the most common and feel most natural for technology contexts. Warm dark backgrounds (slight brown or amber tint) are used by some reading applications for night mode. Apple's system dark background (#1C1C1E) has a very slight warm tint that prevents it from feeling cold — a deliberate choice that makes it comfortable for extended use.
Practical implementation: getting the hex right
A small set of off-white hex values covers most use cases. For warm background systems: #FAF8F5 (very light, barely warm — good base for light-sensitive users), #F5F3EF (clearly warm, editorial — the Notion register), #F0EDE8 (noticeably warm, parchment — reading apps and book-like contexts). For cool background systems: #F7F8FC (very slightly blue, clean), #F2F4F8 (clearly cool, developer tool register), #EBEEF5 (distinctly cool, clinical/tech). For neutral background: #F7F7F7 (reduced-brightness neutral, common in product catalogs and app interfaces). The key principle in all cases: the color should look like 'white' to a casual viewer, not like a colored background. If someone describes the background as 'cream' or 'blue,' the saturation is too high. The target is the point where the background reads as white but feels more comfortable than pure white.
