Surface Elevation

Surface elevation is the method designers use to communicate which interface elements sit closer to the user in three dimensional space. Light themes achieve this easily with drop shadows that simulate light casting from above. Dark themes break that model completely. Dark surfaces absorb rather than reflect so those shadows vanish into the background leaving the UI looking like a flat pancake. The fix is to invert the logic. Instead of darkening raised surfaces you lighten them. Each step in the hierarchy uses a surface color with higher lightness value. The base page background uses the darkest value. Cards inputs and inline elements step up one level to a slightly lighter gray with a hint of your brand hue. Menus and sidebars go lighter again. Complex overlays like modals push further and tooltips or floating action buttons occupy the lightest surface in the scale. A typical five step progression runs from #0E0E12 at level zero to #31313A at level four. This matches the system Google codified in Material Design and it works because the human visual system interprets brighter areas against dark backgrounds as raised. You can still add a faint dark shadow at the base and a near invisible white highlight at the top edge but those are supporting actors. The surface color carries the show. This approach also preserves battery on OLED phones since most pixels stay closer to black. The entire system must live inside semantic tokens so that updates to one primitive ripple correctly across every component in both themes.

Surface elevation is not inversion. Stop flipping your light theme colors and calling it a night. That path leads to radioactive accents muddy brand colors and text that fails WCAG checks as the muted text token quietly drops below 4.5 to 1. It is not using pure black for your base surface no matter how tempting it looks in Figma at 4 a.m. Pure black #000000 creates an optical sinkhole with no depth cues and turns every edge into a harsh razor that causes halation on small text. It is not ignoring contrast math or skipping the token layer. Teams that hardcode values instead of using semantic tokens like color.surface.elevated end up with drift that makes their product look schizophrenic after six months of updates. The dark mode design article from Brainy Papers lays out exactly why this has to happen inside tokens not inside individual components. It is not a decorative choice or something you A B test for cool factor. It is core infrastructure for any interface that wants to feel premium in low light conditions and it requires its own dedicated design pass separate from the light theme.

For a concrete example examine GitHubs dark dimmed theme released in 2021 and refined through 2025. Their base surface sits at #0d1117 for elevation zero. Elevated cards and pull request panels use #161b22. Higher elements like the file tree sidebar hit #21262d with modals reaching #30363d. This creates clear separation without relying on heavy borders or lost shadows. Each jump is roughly 4 to 6 percent lightness in perceptual space which keeps the brand feeling consistent. Stripe adopted an almost identical scale for their 2024 dashboard refresh. Their brand blue accents sit on these tuned surfaces without looking electric because the team desaturated them by 15 percent exactly as the color in dark mode section recommends. The result passes contrast at every level from body text to subtle placeholders. Linear the project management tool went one step further. They tied their elevation scale to OKLCH color space so the perceived difference stays consistent even when you swap brand colors for different customer workspaces. Their command bar at elevation level three uses a value that tests at 12 to 1 contrast with primary text. The voxel diagram included in the original dark mode paper visualizes this perfectly with five stacked blocks each climbing in brightness toward the top of the screen. The users eye naturally flows upward through the hierarchy instead of getting lost in a sea of pure black. Figma incorporated the same thinking in their 2023 dark mode. Their right sidebar properties panel is deliberately lighter than the canvas so it feels like a floating tool rather than a printed sticker. These examples prove the five step scale is not theory. It ships in production at scale.

Use surface elevation any time your product includes overlapping or raised components and you plan to ship dark mode as a first class feature rather than a half baked toggle. This covers nearly every SaaS dashboard built after 2020 from Notion to ClickUp to Vercel to Linear. It is especially important for mobile experiences on OLED displays where the battery savings of 30 to 60 percent only materialize when the surfaces stay dark enough. Always pair the elevation scale with a full semantic token system so components reference color.surface.raised instead of raw hex codes. This prevents the half inverted UI failure mode where some modals stay light while the rest of the app goes dark. Test every implementation at 30 percent screen brightness in a completely dark room on real devices because emulator screens lie about banding and contrast. The brightness test catches problems no design file review will ever see. Do not bother with surface elevation for single surface products like reading apps or terminal emulators where the entire point is flatness and zero visual noise. Skip the technique if your team has not committed to proper contrast auditing and token governance because a broken dark theme damages accessibility and brand trust faster than any other shortcut. The 2026 user expectation section makes it clear that customers now treat missing or bad dark mode as a reason to pick a competitor. The accessibility checklist paper reinforces that these choices must be deliberate not reactive.

Surface elevation turns dark mode from an accessibility checkbox into a properly engineered depth system that respects both physics and human vision.