Layers and elevation
Choose flat, raised, or overlay separation, then coordinate layer order, scrims, modality, and shadows across light and dark themes.
Choose flat, raised, or overlay
- Flat: normal cards, panels, and page sections. Use surface color and borders.
- Raised: non-blocking floating content that needs separation while the page remains available.
- Overlay: prominent portalled content. A shadow increases separation, but behavior determines whether it is modal.
Compare light and dark
In dark themes, surface contrast and borders carry more of the boundary. Shadow remains supporting evidence, not the only edge.
Keep layer order shared
| Layer | Value | CSS variable |
|---|---|---|
base | 0 | --tinyrack-layer-base |
component-raised | 2 | --tinyrack-layer-component-raised |
component-overlay | 3 | --tinyrack-layer-component-overlay |
chrome | 100 | --tinyrack-layer-chrome |
backdrop | 900 | --tinyrack-layer-backdrop |
dropdown | 1000 | --tinyrack-layer-dropdown |
popover | 1100 | --tinyrack-layer-popover |
dialog | 1210 | --tinyrack-layer-dialog |
toast | 1300 | --tinyrack-layer-toast |
tooltip | 1400 | --tinyrack-layer-tooltip |
Keep backdrop below dialog. Do not invent local z-index values that compete with dropdowns, popovers, dialogs, toasts, or tooltips.
Put sticky page furniture such as an app header or toolbar on chrome. It only has to out-paint the content scrolling under it, so it sits below backdrop and a scrim covers it like the rest of the page. Reaching for dropdown instead leaves the header bright while a modal dims everything around it.
Scrim, backdrop, and modality
Use --tinyrack-scrim for a backdrop that separates blocked page content in both themes. Modality also requires focus containment, dismissal behavior, and blocked background interaction. Neither a scrim nor a shadow makes a surface modal by itself.
Choose a shadow
| Shadow | Purpose | Value |
|---|---|---|
raised | Subtle lifted separation | 0 1rem 2.25rem -1rem rgb(0 0 0 / 0.4) |
overlay | Prominent portalled separation | 0 1.5rem 3rem -1.25rem rgb(0 0 0 / 0.4) |
Applied examples and implementation
Use tinyrackLayers and tinyrackShadows in TypeScript, --tinyrack-layer-*, --tinyrack-scrim, and --tinyrack-shadow-* in CSS, or the matching prefixed utilities.