Interface: Layout
Rule
Principles
- MUSTDeliberate alignment (grid/baseline/edges/optical centers)
- MUSTVerify mobile, laptop, ultra-wide (simulate at 50% zoom)
- MUSTRespect safe areas via
env(safe-area-inset-*) - MUSTNo unwanted scrollbars — fix overflows
- SHOULDOptical alignment: ±1px when perception beats geometry
- SHOULDBalance icon/text lockups (stroke, weight, size, spacing, color)
Viewport
- MUST
h-dvhnoth-screen(respects mobile browser chrome) - MUSTFixed elements respect
safe-area-inset-*
Z-Index
MUST use fixed scale — no arbitrary values like z-[999]:
| Layer | Tailwind | CSS Variable |
|---|---|---|
| Base | z-0 | — |
| Dropdown | z-10 | --z-dropdown: 100 |
| Sticky | z-20 | — |
| Modal | z-30 | --z-modal: 200 |
| Toast | z-40 | --z-toast: 400 |
| Tooltip | z-50 | --z-tooltip: 300 |
Avoiding Z-Index
- SHOULDUse
isolate(Tailwind) to create stacking context without z-index:
<div className="isolate">
{/* New stacking context, no global z-index conflict */}
</div>