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

      A3S UI uses four radii: 4, 6, 8, and 12px. Static surfaces stay flat. A surface earns a shadow only when it floats above content or remains anchored while content passes underneath it.

      Live preview

      Tiny


      4px

      Control


      6px

      Surface


      8px

      Overlay


      12px

      Radius

      TokenDefaultUse
      --radius-sm / --a3s-radius-xs4pxBadge interiors and tiny controls
      --radius-md / --a3s-radius-sm6pxButtons, inputs, and navigation items
      --radius-lg / --a3s-radius-md8pxCards, toolbars, and stable surfaces
      --radius-xl / --a3s-radius-lg12pxDialogs, drawers, popovers, and preview frames

      Pills are reserved for status, compact filters, switch tracks, and circular actions. They are not the default shape for ordinary buttons or cards.

      Shadows

      TokenValueUse
      --a3s-shadow-control0 1px 2px rgb(0 0 0 / 4%), 0 1px 6px rgb(0 0 0 / 3%)Selected controls and quiet preview boundaries
      --a3s-shadow-soft0 8px 16px -4px rgb(0 0 0 / 20%)Menus, popovers, and floating panels
      --a3s-shadow0 20px 20px -8px rgb(0 0 0 / 24%)Modal dialogs

      Dark mode increases opacity instead of adding bright borders. Static cards, shells, catalogs, transcripts, and setting rows do not receive shadows. Use either a clear boundary or floating elevation on one edge by default, not both as duplicate emphasis.