---
title: "#141414 Canvas & 3-Tier Elevation"
description: "Why pure black #000000 is an ergonomic pitfall; analyzing OLED purple smearing, elevation shadow physics, and the 3-tier dark grey scale."
---

# #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:
1. **Contrast Glare**: White text on pitch black hits an extreme 21:1 contrast ratio, causing eye strain and halo glare in dim rooms.
2. **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-bg-color-overlay: #1d1e1f` | Matte diffuse surface | Cards, dialogs, drawers, popovers, toast panels |
| **Elevated** | `--tx-fill-color-light: #262727` | Raised interactive plane | Hover states, active selection |

In dark mode `--tx-fill-color-blank` is `transparent`, so it carries no container colour.

This hierarchy eliminates OLED smearing entirely while preserving room for physical lighting and shadow decay.

:::TuffDemoWrapper{demo="ConceptDarkCanvasDemo"}
:::