Surface Elevation Model

A surface elevation model replaces shadows with lightness steps in dark mode. Background sits at the bottom. Surface holds most content. Surface elevated lifts cards and sidebars. Surface overlay handles modals and sheets. The concept exists because shadows vanish against dark backgrounds leaving interfaces looking like flat grey soup without structural tiers.

Each step is small. Three to five lightness points in OKLCH is enough to signal depth. Chroma drops as you rise through the stack so higher surfaces feel cleaner and closer to the viewer. The model becomes load bearing structure. Every component maps to one tier. Text contrast decisions depend entirely on where that surface lives in the stack.

A surface elevation model is not two tiers called background and surface. It is not fake depth created with heavy borders or blurred glass. The common mistake is copying light mode elevation logic directly. Light mode gets free depth from white cards on gray plus cheap shadows. Dark mode gets none of that. Teams that skip the third and fourth tiers create the flat porridge effect users hate.

It is also not arbitrary aesthetic choices. These four tiers are not mood board experiments. They are engineered for legibility at every possible text over surface combination. Skip the math and your contrast audit will pass WCAG while failing real humans at midnight.

Linear uses the tightest four tier model in the industry. Their background sits at 10 percent lightness. Surface jumps to 14 percent. Elevated cards land at 18 percent. Overlays reach 22 percent. All with a consistent 30 degree warm hue and progressively lower chroma. The steps are so narrow the UI reads as one dark field yet every card feels genuinely raised. Stripe copies this model for their dense financial dashboards where data must remain scannable at every level.

GitHub added a dimmed variant that warms the entire stack. Their default cool dark felt tiring for long sessions. The warmer elevation model reduced eye strain without changing contrast ratios much. Notion keeps three tiers with almost zero chroma across surfaces creating a calm almost monochrome reading environment. Each company proves the model is not decorative. It is the skeleton that makes dark UIs readable.

Deploy a surface elevation model on any product meant for extended use in dark environments. It earns its keep when users complain about flatness or eye fatigue. Avoid it on simple landing pages where a binary background and surface is plenty. The tradeoff is added complexity in your token file and more variables to maintain. Yet the payoff is immediate legibility without relying on shadows that do not work.

If your team lacks time to audit every component against all four tiers then stick to binary and commit brutally like Vercel. Half implementing four tiers creates more problems than it solves. Full commitment turns the model into a superpower.

Four tight surface tiers replace shadows that disappear and give dark interfaces real readable depth without a single drop shadow.