The Density specimen shows a data workbench with compact controls, tables and directly labelled data.
Use compact on an Official control or its container for 24px controls with
14px text and 20px leading. A container applies the same density to its nested
controls. Text controls use a 36px baseline below sm and 32px from sm.
<div class="compact d:flex gap:2">
<button class="btn" type="button">Filter</button>
<input class="input" type="search" aria-label="Search assets" />
</div>TeaCSS 0.8.1 removes the global scaling variable. Adjust --spacing, the root
font size or browser zoom when needed. Keep labels readable and test keyboard
focus and touch targets at the chosen density. Use neutral colors for structure,
state roles for status, and a shared category dictionary for data colors.
Continue with Report.