Interface: Layout

Rule

Principles

  • MUST: Deliberate alignment (grid/baseline/edges/optical centers)
  • MUST: Verify mobile, laptop, ultra-wide (simulate at 50% zoom)
  • MUST: Respect safe areas via env(safe-area-inset-*)
  • MUST: No unwanted scrollbars — fix overflows
  • SHOULD: Optical alignment: ±1px when perception beats geometry
  • SHOULD: Balance icon/text lockups (stroke, weight, size, spacing, color)

Viewport

  • MUST: h-dvh not h-screen (respects mobile browser chrome)
  • MUST: Fixed elements respect safe-area-inset-*

Z-Index

MUST use fixed scale — no arbitrary values like z-[999]:

LayerTailwindCSS Variable
Basez-0—
Dropdownz-10--z-dropdown: 100
Stickyz-20—
Modalz-30--z-modal: 200
Toastz-40--z-toast: 400
Tooltipz-50--z-tooltip: 300

Avoiding Z-Index

  • SHOULD: Use isolate (Tailwind) to create stacking context without z-index:
<div className="isolate">
  {/* New stacking context, no global z-index conflict */}
</div>