Total documents
1,247
12% from last month
Overview & Philosophy
Global spacing compression toggle. Adding the data-density="compact" attribute to any container element tightens the entire subtree: tables display more rows, form inputs pack denser, and cards reduce padding. The markup and selectors remain identical — only internal spacing tokens scale down.
Try it
Toggle the switches below to see density in action. Global affects the whole page. Scoped affects only the Form section below — notice how the surrounding table, stat card, and intro stay comfortable while the form shrinks.
Form — input padding shrinks
Table — reacts to density
| Document | Standard | Status | Updated |
|---|---|---|---|
| Quality Manual | ISO 9001 | Approved | 2025-12-01 |
| Risk Register | ISO 27001 | In Review | 2025-11-28 |
| Internal Audit Plan | ISO 9001 | Draft | 2025-11-22 |
| Supplier Evaluation Procedure | ISO 9001 | Approved | 2025-11-15 |
| Information Security Policy | ISO 27001 | Approved | 2025-11-10 |
| Document Control Procedure | ISO 9001 | Approved | 2025-11-08 |
Stat card — outer padding shrinks
Activation
Three activation paths — see density.md for the full spec.
<!-- Global -->
<html data-density="compact">
<!-- Scoped -->
<main data-density="compact">
<!-- Default (no attribute / dense) -->
<html>Buttons do NOT react (accessibility)
Buttons keep their full hit-target size in compact mode — WCAG 2.5.5 recommends ≥44px. Density shrinks chrome and content, never controls.