Dark PaletteEn
Why pure black
#141414 Canvas & 3-Tier Elevation
During the initial rise of dark mode, many apps naively defaulted to pure black (#000000) claiming power savings. In practice, this created severe ergonomic regressions.
Why Pure Black #000000 is an Ergonomic Pitfall
Pure #000000 carries two fatal flaws:
- Contrast Glare: White text on pitch black hits an extreme 21:1 contrast ratio, causing eye strain and halo glare in dim rooms.
- Elevation Destruction: Shadows physically represent areas where ambient diffuse light is obstructed. If the background is already zero luminance, drop shadows vanish completely, flattening spatial hierarchies.
OLED Purple Smearing
On OLED and AMOLED panels, #000000 powers off subpixels entirely.
When scrolling, powering those diodes back on takes tens of milliseconds. This latency produces a distracting purple ghosting / smearing trail along the trailing edges of cards and text, inducing motion sickness.
Elevation Physics Require Luminance Headroom
To express a card floating above a canvas, the card's cast shadow must dip below the background luminance: $$\text{Luminance}(\text{Shadow}) < \text{Luminance}(\text{Canvas})$$ The canvas requires minimal baseline luminance to register ambient occlusion and cast shadows, providing genuine three-dimensional depth.
The TuffEx 3-Tier Dark Elevation Hierarchy
Tuff adopts #141414 (warm deep carbon) as its foundation, organizing elevation into three calibrated tiers:
| Elevation Tier | Token & Hex | Perceptual Role | Typical Surface |
|---|---|---|---|
| Canvas | --tx-bg-color: #141414 | Light-absorbing deep canvas | Window background, workspace base |
| Container | --tx-fill-color-blank: #1c1c1e | Matte diffuse surface | Setting cards, sidebar, table rows |
| Elevated | --tx-fill-color-light: #252528 | Raised interactive plane | Hover states, active selection, popovers |
This hierarchy eliminates OLED smearing entirely while preserving room for physical lighting and shadow decay.