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/index.md.
A3S UI
  • English
  • next
      • A3S PRODUCT DESIGN SYSTEM

      Interfaces that feellike one product.

      Reusable semantics and styling for A3S Office, agent workspaces, and operational consoles, delivered in HTML, Tailwind CSS, and vanilla JavaScript.

      Get started GitHub
      $npm install @a3s-lab/ui@0.2.0
      52
      Component guides
      06
      Foundation systems
      00
      Runtime dependencies
      LIVE SPECIMENINTERACTIVE OFFICE WORKBENCH
      A3S Office Saved
      P
      Project reviewPresentation, saved just now
      Font
      Paragraph
      Insert
      WORKSPACE / RECENT

      Continue where you left off

      3 recent resourcesSaved
      Light
      90%

      From controls to complete workspaces.

      Each guide includes a live specimen, minimal markup, parameters, variants, state behavior, and accessibility notes.

      Forms

      Fields, selects, switches, sliders, and accessible form composition.

      Input and selection12 GUIDES
      Navigation

      Activity rails, breadcrumbs, tabs, pagination, and product sidebars.

      Orientation and wayfinding05 GUIDES
      Overlays

      Dialogs, drawers, menus, popovers, commands, and contextual help.

      Layered interaction07 GUIDES
      Feedback

      Alerts, badges, progress, skeletons, spinners, and toast feedback.

      Status and feedback07 GUIDES
      Data display

      Cards, charts, tables, items, avatars, and structured disclosure.

      Structured content07 GUIDES
      Application patterns

      Application shells, ribbons, toolbars, split panes, and resource grids.

      Application composition10 GUIDES
      Browse the complete component catalog

      Tune A3S UI to your product.

      Choose appearance, accent, radius, and interface density. Changes apply to the entire site and every component preview immediately, then persist for your next visit.

      Appearance
      Accent
      Radius
      Density
      Semantic HTML
      Light + dark
      Responsive + RTL
      Accessible states
      Nunjucks + Jinja

      One system. Every A3S surface.

      Product semantics are encoded once, then shared across document tools, coding-agent interfaces, and observability consoles.

      ACTIONSUCCESSAGENTATTENTIONDANGER
      TYPE SCALEAa

      Geist Sans

      12 / 14 / 16 / 20 / 32 / 64
      SPACING SCALE4812162432
      CONTROL SHAPER06 / R10 / R14

      Three rules for resilient product work.

      Platform first

      Native controls and semantic landmarks remain the foundation. JavaScript is reserved for behavior that the platform does not provide.

      Parameters, not forks

      CSS variables and documented data attributes adapt components without duplicating their structure or accessibility behavior.

      Application density

      The system is tuned for serious workspaces: clear hierarchy, compact chrome, predictable focus, and resilient responsive layouts.

      Build the next A3S interface.

      Install the package, choose a foundation, and copy the semantic markup from any component guide.

      Installation Explore components