Foundations
Elevation
Surface colour and shadow together tell that a layer sits in front of the page. In light mode shadows give depth; in dark mode lighter surface colours do.
How it works
Section titled “How it works”The interface has four levels. Each has a surface colour and, where needed, a shadow:
| Level | Surface | Shadow | Examples |
|---|---|---|---|
| Sunken | surface-sunken |
none | Code blocks, preview stage |
| Layer | surface-layer-1, surface-layer-2 |
none | Sidebar, dialog action band; tab and progress tracks, skeleton |
| Page | surface-default |
none | The page itself |
| Raised | surface-raised |
shadow-raised |
Cards, panels |
| Anchored popup | surface-raised + 1 px border-overlay ring |
shadow-popup |
Dropdowns, context menus, popovers, confirm popovers, link previews, option and suggestion lists, month and year grids, the DataTable column panel |
| Side drawer | surface-raised + 1 px border-overlay ring, round free corners |
shadow-panel |
Drawer (all four sides), bottom and top sheet |
| Blocking layer | surface-raised + 1 px border-overlay ring |
shadow-overlay |
Dialogs, alert dialogs, search palette |
| Overlay | surface-raised + 1 px border-overlay ring / surface-inverse |
shadow-overlay |
Toasts, tooltips |
Surface values of the default neutral pack. A neutral preset or a brand’s own neutral ramp keeps the same steps in its own hue.
| Surface | Light | Dark |
|---|---|---|
surface-sunken |
neutral 100 #F5F5F5 |
neutral 900 #171717 |
surface-default |
neutral 75 #F7F7F7 |
neutral 850 #1E1E1E |
surface-raised |
neutral 0 #FFFFFF |
neutral 800 #262626 |
surface-layer-1 |
neutral 100 #F5F5F5 |
neutral 800 #262626 |
surface-layer-2 |
neutral 150 #EDEDED |
neutral 750 #303030 |
surface-layer-3 |
neutral 200 #E5E5E5 |
neutral 700 #404040 |
surface-hovered |
neutral 100 #F5F5F5 |
neutral 750 #303030 |
surface-selected |
neutral 150 #EDEDED |
neutral 700 #404040 |
border-subtle |
neutral 150 #EDEDED |
neutral 750 #303030 |
border-default |
neutral 200 #E5E5E5 |
neutral 700 #404040 |
Every floating surface uses one recipe: a raised fill, a 1 px border-overlay ring that takes no space, and a shadow by role. border-overlay is a soft grey in light mode and 10 % white in dark mode, where it shows the edge better than a shadow.
Shadows are hard to see in dark mode. So shadow-raised is empty in dark mode and the lighter surface colour carries the depth, while shadow-popup, shadow-panel and shadow-overlay are drawn darker. Layers that block the page, such as dialogs, sit on a surface-scrim backdrop, which blurs the page by blur-surface-scrim (4 px) where the browser supports it.
Shadows
Section titled “Shadows”In Tailwind use the shadow-xs, shadow-raised, shadow-popup, shadow-panel and shadow-overlay utilities. shadow-xs gives only a hairline of depth: form fields, the secondary button and keyboard keys use it. In light mode shadow-raised and shadow-overlay have two layers: a close, crisp shadow and a far, soft one. Tailwind’s default shadows are switched off.
| Token | Light mode | Dark mode |
|---|---|---|
--bigbang-shadow-xs | 0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) |
--bigbang-shadow-raised | 0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) |
--bigbang-shadow-overlay | 0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549) | 0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963) |
--bigbang-shadow-popup | 0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549) | 0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804) |
--bigbang-shadow-panel | 0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549) | 0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804) |
--bigbang-shadow-glass | 0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549) | 0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549) |
Special surfaces
Section titled “Special surfaces”| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-surface-translucentFrosted header bar over scrolling content | rgba(252, 252, 252, 0.8509803921568627)rgba(252, 252, 252, 0.8509803921568627)rgba(252, 252, 252, 0.8509803921568627) | rgba(30, 30, 30, 0.8509803921568627)rgba(30, 30, 30, 0.8509803921568627)rgba(30, 30, 30, 0.8509803921568627) | |
--bigbang-color-surface-scrimBackdrop behind dialogs and the palette | rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804) | rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963) | |
--bigbang-color-surface-checkerCheckerboard of the component preview stage | #fafafa#fafafa#fafafa | #101010#101010#101010 |
On a glass Provider the chrome levels keep their place in the stack but change material: the fill becomes a translucent tint over a blurred backdrop (blur-surface-glass, 16 px in light and 20 px in dark mode), the ring becomes a light rim and hairline, and the shadow becomes shadow-glass. Dialogs take the higher-contrast tint. Raised cards and the page stay solid. See Material.
| Token | Light mode | Dark mode |
|---|---|---|
--bigbang-shadow-glass | 0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.1607843137254902), 0px 2px 6px -2px rgba(0, 0, 0, 0.10196078431372549) | 0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549)0px 8px 32px -8px rgba(0, 0, 0, 0.47843137254901963), 0px 0px 0px 0.5px rgba(255, 255, 255, 0.10196078431372549) |
--bigbang-blur-surface-glass | 16px16px16px | 20px20px20px |
--bigbang-blur-surface-glass-clear | 6px6px6px | 8px8px8px |
Stacking order
Section titled “Stacking order”Layers that overlap stack in the same order on every screen. The list below runs from bottom to top; a layer never rises above one listed higher.
| Order | Layer | Example |
|---|---|---|
| 1 | Content | Page, cards, tables |
| 2 | Sticky regions | Top bar, table header, bottom action bar |
| 3 | Drawer | Side menu on narrow screens, side panel |
| 4 | Popup | Menu, popover, select list |
| 5 | Dialog | Confirmation and form dialogs, with the surface-scrim backdrop behind |
| 6 | Notification | Toast; shows even while a dialog is open |
| 7 | Tooltip | Always on top, short-lived |
Components never write their own z-index; popups are rendered at the end of the page and take their order from the list above. Until stacking tokens (layer.*) are added, this table is the source.
Guidelines
Section titled “Guidelines”Pick the level by role
Section titled “Pick the level by role”bg-surface-raised ring-1 ring-line-overlay shadow-popupshadow-[0_10px_30px_rgba(0,0,0,.3)]