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/color.md.
A3S UI
  • English
  • next

      • Color

      The A3S palette separates semantic roles from product accents. Components consume semantic tokens, while Office-like resources use blue, green, orange, or purple accents to communicate document and agent types.

      Live previewHTML · CSS · JavaScript
      Background--background
      Surface--card
      Primary--primary
      A3S blue--a3s-blue

      Semantic tokens

      RoleLightDarkUse
      --background#f7f7f8#101118Application canvas
      --foreground#17181a#f2f3f5Primary content
      --card#ffffff#171820Raised or grouped surfaces
      --muted#f2f3f5#1e2028Subtle fills and controls
      --muted-foreground#71757d#a4a8b2Supporting text
      --border#e2e4e8#2a2d35Dividers and boundaries
      --primary#242424#f2f3f5Primary actions
      --ring#2864e8#6ca3ffKeyboard focus
      --destructive#d84b4f#f27777Destructive actions and errors

      Product accents

      Live previewHTML · CSS · JavaScript
      Document / primarySpreadsheet / successPresentationAgent / intelligenceDanger

      Use product accents as local component variables, not as hard-coded foreground colors. Text still needs sufficient contrast in both themes.

      .my-resource {
  --resource-accent: var(--a3s-green);
}

      Parameters

      Theme switching uses the dark class on <html>. Consumers can override any semantic token at :root, within .dark, or inside a scoped product container. Keep the token names stable so components and documentation previews stay synchronized.