No shadow · three lines · one veil
Elevation
There is none. A drop shadow is a picture of depth, and a picture prints as nothing and reads as nothing in high contrast. Structure comes from the line and from the empty space; the Tailwind preset has no shadow scale at all.
Three lines
A hairline separates, a strong line structures, a control line bounds what can be activated. The difference is measured, not felt: the edge of a control must reach 3:1 (criterion 3.3), and the hairline must stay under it so a control can never pass its edge check with the wrong line.
-
--rl-lineThe ordinary hairline, 1px. It carries no information and stays below 3:1 on purpose; a control never uses it as its edge. -
--rl-line-strongA line of structure, 1.5px: the rule under a section heading, the top of a table. -
--rl-line-controlThe edge of a control: button, field, list. Distinct from the hairline for a measured reason: the hairline gives 1.46:1 on the surface, fine for a separator, not for what bounds an interactive element, which criterion 3.3 wants at 3:1. Born in the extension panel, where the defect was measured on twenty-three controls.
| Line | On | Must be | Light | Dark |
|---|---|---|---|---|
line-control | surface | 3:1 at least | 3.55:1 | 3.54:1 |
line-control | sunken | 3:1 at least | 3.17:1 | 3.90:1 |
line-control | bg | 3:1 at least | 3.40:1 | 3.78:1 |
line-strong | bg | 3:1 at least | 17.92:1 | 16.33:1 |
line | surface | under 3:1 | 1.46:1 | 1.28:1 |
The one translucency
The veil under a modal. The one place translucency is allowed: it must show that the dialog sits on the page and not in its place, and it never sits under text of ours.
The page, under the veil.
--rl-backdrop light #14120f8c, dark #00000099