Get started
Design tokens
The measured foundation shared by the components and these docs.
Color
Primary#05152f
--ajs-primarySidebar#0f172a
--ajs-sidebarForeground#1e293b
--ajs-foregroundMuted#64748b
--ajs-mutedBackground#f1f5f9
--ajs-backgroundCard#ffffff
--ajs-cardSubtle#f9f9fb
--ajs-subtleBorder#cbd5e1
--ajs-borderDivider#e2e8f0
--ajs-dividerSuccess#16a34a
--ajs-successDanger#dc2626
--ajs-dangerTypography · Switzer
The reference uses a 13px base with a compact 10 / 11 / 12 / 13 / 14 / 16 / 18 / 20px scale. These docs use the same scale for component content.
The details make the difference.20 / 28 · Page title
The details make the difference.18 / 27 · Section title
The details make the difference.16 / 24 · Panel title
The details make the difference.14 / 21 · Field label
The details make the difference.13 / 19.5 · Body
The details make the difference.12 / 18 · Supporting text
The details make the difference.10 / 15 · Metadata
Geometry
Field
50px high · 6px radius
Button
40px high · pill radius
Sidebar
275px wide · 40px rows
Dialog
600px maximum width
Table
13px radius · 12px cells
Tabs
3px active underline
Override once, reuse everywhere
css
:root {
--ajs-primary: #05152f;
--ajs-sidebar: #0f172a;
--ajs-font: "Switzer", ui-sans-serif, system-ui, sans-serif;
}