# Tokens and sizing ## Three layers ```text --zenbu-ref-* available context-free values --zenbu-sys-* theme/density-aware semantic intent --zenbu--* local component aliases ``` Application CSS consumes semantic roles. Component CSS may define local aliases that fall back to semantic roles. Reference colors are restricted to token and theme definitions. ## Five-step scale Controls, text, icons, gaps, and padding use: ```text xs sm md lg xl ``` Every sized control host exposes: ```css --zenbu-control-height --zenbu-control-padding-block --zenbu-control-padding-inline --zenbu-control-gap --zenbu-control-font-size --zenbu-control-line-height --zenbu-control-icon-size ``` Styled components consume these automatically. Plain components expose them to application CSS. ## Density Set density once at the application root: ```html ``` Density remaps semantic control sizes and padding. It does not require component-specific selectors. ## Typography roles Prefer semantic type roles for page CSS and use `zen-text` / `zen-heading` where a reusable type contract is useful. Font sizes remain in `rem`; line heights remain unitless.