Debug

Visual debugging overlays for grid alignment, baseline rhythm, and element boundaries

Grid Overlay

<!-- Shows the 8px unit grid. Add the class to any container. -->
<div class="ui-debug-grid demo-box" style="--demo-h: var(--ui-row-6)"></div>

Row Grid

<!-- Shows both 8px unit lines and stronger row (16px) lines. -->
<div class="ui-debug-grid-rows demo-box" style="--demo-h: var(--ui-row-6)"></div>

Baseline

<!-- Horizontal baseline grid for verifying text alignment. -->
<div class="ui-debug-baseline demo-box" style="--demo-h: var(--ui-row-6)"></div>

Outline

A
B
C
<!-- Outlines all child elements to reveal layout boundaries. -->
<div class="ui-debug-outline">
  <div class="ui-row ui-row--sm">
    <div class="ui-p-1">A</div>
    <div class="ui-p-1">B</div>
    <div class="ui-p-1">C</div>
  </div>
</div>