For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.1.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.1.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.1.0/en/foundations/spacing.md.
A3S UI
  • English
  • v0.1.0

      • Spacing

      The spacing system uses a 4px base unit. Dense application chrome uses 4–12px gaps; content and page regions use 16–32px gaps.

      Live previewHTML · CSS · JavaScript
      4pxspace-1
      8pxspace-2
      12pxspace-3
      16pxspace-4
      24pxspace-6
      32pxspace-8

      Scale

      StepValueTypical use
      14pxIcon-to-label micro gap
      28pxAdjacent controls
      312pxToolbar and field gaps
      416pxCard padding and grid gaps
      624pxSection spacing
      832pxPage regions

      Layout parameters

      Application components expose continuous values as CSS variables:

      VariableDefaultComponent
      --app-shell-navigation-size15remApp Shell
      --workspace-header-height3.5remWorkspace Header
      --settings-navigation-size14remSettings Layout
      --resource-grid-min12remResource Grid
      --resource-grid-gap1remResource Grid
      --split-pane-min-height18remSplit Pane

      Use these parameters instead of overriding internal grid selectors.