Componentsv2.189.0
Iconsv1.19.0
MCPv0.8.61
Tokensv0.34.3
Density
Guidelines for applying density and spacing across Customer.io interfaces.
Our product needs to be dense enough to surface the content customers need without overwhelming people. When two spacing values would both work, lean toward the more generous one. Apply density at the surface level and keep it consistent within each surface.
Defaults
| Element | Default |
|---|---|
| Body text | text-product-p |
| Small text | text-product-ps for metadata and helper text; text-product-pxs for timestamps and captions |
| Headings | text-product-h1 through text-product-h4 |
| Actions | space-100 between buttons |
| Content | space-300 padding, use space-200 for more dense surfaces |
| Form density | space-100 label-to-input gap, space-300 between fields |
| Numbers | Tabular numerals. Right-align in tables. |
| Table columns | Left-align text, center-align icon-only columns |
| Table overflow | Truncate with tooltip over wrap, except where reading the full value matters |