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

      • Shape and elevation

      Shape communicates hierarchy: controls use compact radii, content surfaces use medium radii, and complete application shells use the largest radius. Shadows are reserved for floating or overlapping surfaces.

      Live previewHTML · CSS · JavaScript
      Control
      --radius-md
      Surface
      --radius-xl
      Shell
      --a3s-radius

      Radius

      TokenDefaultUse
      --radius-smbase minus 4pxBadges and tiny controls
      --radius-mdbase minus 2pxButtons, inputs, navigation items
      --radius-lgbase radiusToolbars and side navigation
      --radius-xlbase plus 4pxCards and panels
      --a3s-radius16pxApp shells and product frames

      Elevation

      TokenUse
      --shadow-xsInput and card edge separation
      --a3s-shadow-softHovering resource cards and compact overlays
      --a3s-shadowModal dialogs and large floating panels

      Borders are the default separator. Do not add shadows to every card; elevation must correspond to an actual layering change.