Color
A3S UI uses neutrals for structure and A3S OS blue for primary actions, focus, links, and selection. The deeper logo blue belongs to identity. Green, amber, and red report outcomes and never replace text, icons, or structure.
Blue focus / selection--a3s-blue <div class="grid w-full gap-3 sm:grid-cols-2 lg:grid-cols-4">
<div class="rounded-lg border border-border bg-background p-4">
<div class="mb-3 h-12 rounded-md border border-border bg-background"></div>
<strong class="text-sm">Canvas</strong>
<code class="mt-1 block text-xs text-muted-foreground">--background</code>
</div>
<div class="rounded-lg border border-border bg-card p-4">
<div class="mb-3 h-12 rounded-md bg-muted"></div>
<strong class="text-sm">Muted surface</strong>
<code class="mt-1 block text-xs text-muted-foreground">--muted</code>
</div>
<div class="rounded-lg border border-border bg-card p-4">
<div class="mb-3 h-12 rounded-md bg-primary"></div>
<strong class="text-sm">A3S primary</strong>
<code class="mt-1 block text-xs text-muted-foreground">--primary</code>
</div>
<div class="rounded-lg border border-border bg-card p-4">
<div class="mb-3 h-12 rounded-md bg-[var(--a3s-blue)]"></div>
<strong class="text-sm">Blue focus / selection</strong>
<code class="mt-1 block text-xs text-muted-foreground">--a3s-blue</code>
</div>
</div>
Semantic tokens
Reserved state colors
Focus / selectionSuccessWarningDanger
<div class="flex w-full flex-wrap gap-3">
<span class="badge bg-[var(--a3s-blue)] text-primary-foreground">Focus / selection</span>
<span class="badge bg-[var(--a3s-green)] text-white">Success</span>
<span class="badge bg-[var(--a3s-warning)] text-white">Warning</span>
<span class="badge bg-destructive text-white">Danger</span>
</div>
Success, warning, and danger resolve to #16845b, #a86412, and #c93d45 in light mode, then #57c795, #e7ad55, and #ef7a82 in dark mode. Do not use these colors to decorate ordinary cards, navigation, or toolbars.
.selection-region {
--ring: var(--a3s-blue);
}
Parameters
Theme switching uses the dark class on <html>. Consumers may override semantic tokens at :root, within .dark, or inside a scoped product container, but must remap primary action, hover, focus, selection surface, and foreground together. Violet and other optional accents never replace the default A3S OS blue contract or semantic state colors.
