Surfaces
Eight levels let controls and overlays sit on distinguishable surfaces.
Installation
One prompt for your coding agent to set up Reflow and use this system in Remix.
The problem
In light mode, shadows distinguish white surfaces. In dark mode, raised surfaces are also lighter.
A fixed background can make a dropdown blend into its dialog. In this example, both the invite panel and the menu use surface 5.
surface-5 → surface-5The role menu uses the same fill as the dialog, so its boundary nearly disappears.
The solution
Choose the background token for the substrate, then give nested panels a higher level.
Tokens
Eight background levels work in both themes. In light mode, levels 3–8 share a white fill and elevation comes from the shadow.
Substrate
A floating control sits above the surface that contains it. Compare a two-level elevation over a page, panel, and dialog.
surface-1 → surface-3surface-3 → surface-5surface-5 → surface-7Elevated
Apply the chosen background and elevation shadow to the panel. Choose a stronger contrast between nested surfaces when the contents need a distinct boundary.
Move through levels
Drag either thumb to choose which levels to nest. Each layer is one step above its parent.
surface-1surface-2surface-3surface-4The innermost surface follows the selected range.
Examples
Invite dialog
Give the role menu a separate surface so it is distinguishable from the surrounding panel.
Color picker
A color picker pairs a raised editing panel with a format control. Open the control and switch between color formats.
Reference
| Token | Light | Dark |
|---|---|---|
--rf-surface-1 | #fafafa | #171717 |
--rf-surface-2 | #fcfcfc | #1e1e1e |
--rf-surface-3 | #ffffff | #252525 |
--rf-surface-4 | #ffffff | #2c2c2c |
--rf-surface-5 | #ffffff | #333333 |
--rf-surface-6 | #ffffff | #3a3a3a |
--rf-surface-7 | #ffffff | #414141 |
--rf-surface-8 | #ffffff | #484848 |