← All UI styles
Material Elevation
The earlier Material: 4dp corners, white cards, and shadow doing the layering.
ElevationsystemAdmin toolsLegacy Android productsFamiliar consumer UI
Construction · Elevation
Height is the only signal: a two-part ambient shadow that grows with importance, and no borders or gradients at all.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Material Elevation style. Small 4dp corners on white cards, with a single soft elevation shadow marking what floats. Color is a saturated indigo used for actions and nothing else. Build
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- 4dp corners
- elevation shadow
- white cards on grey
- indigo action color
What this style refuses
- large pill radii
- borders on cards
- tinted surfaces
- flat shadowless layouts
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#fafafa#121212Surface
#ffffff#1e1e1eBorder
#e0e0e0#333333Text
#212121#edededMuted text
#5f5f5f#a0a0a0Accent
#3f51b5#8c9effOn accent
#ffffff#0a0f33Shape and type
Radius4 / 4 / 8 px
Bordernone
Shadowsoft
Displaysystem-ui
Bodysystem-ui
Monoui-monospace
Type scale11 · 12 · 14 · 16 · 20 · 30 px
Weights400 / 500 / 500
Line height1.45
Tracking0.01em
Spacing8px grid · regular
Surfaceflat
Accentfilled
Separatorhairline
Labelsuppercase
Blurnone
Measured contrast — body 15.43:1 light, 16:1 dark; secondary text 6.12:1 and 7.16:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Material Elevation
*
* The earlier Material: 4dp corners, white cards, and shadow doing the layering.
*
* One complete product screen, rendered from the token object below —