Tokens
Every value in the system is a CSS custom property prefixed --ag-. The source of truth is
tokens/core.tokens.json in the W3C Design Tokens format; this page is generated from it.
Override any token after the pack stylesheet. Country packs override the colour group only.
:root {
--ag-size-container: 60rem;
}Color
| Property | Value | Notes |
|---|---|---|
--ag-color-ink | #1b1b1b | Body text. 16:1 on paper. |
--ag-color-ink-muted | #505050 | Secondary text, hints. 8:1 on paper. |
--ag-color-ink-inverse | #ffffff | Text on dark or primary backgrounds. |
--ag-color-paper | #ffffff | Page background. |
--ag-color-paper-alt | #f3f3f3 | Alternate background for stripes and panels. |
--ag-color-paper-dark | #1b1b1b | Footer and inverse panels. |
--ag-color-border | #c9c9c9 | Decorative borders and dividers. |
--ag-color-border-strong | #767676 | Form control borders. 4.5:1 on paper. |
--ag-color-primary | #1f4e79 | Country-neutral default. Packs override this. Must be 4.5:1 on paper. |
--ag-color-primary-hover | #163a5b | |
--ag-color-on-primary | #ffffff | Text on primary. Build verifies 4.5:1. |
--ag-color-primary-tint | #e8eef5 | Very light primary for selected rows and panels. |
--ag-color-accent | #1f4e79 | Second brand colour. Packs override. Decorative, or a background with on-accent text. |
--ag-color-on-accent | #ffffff | Text on accent. Ink or white, whichever reads better. Build verifies 4.5:1. |
--ag-color-link | #1f4e79 | |
--ag-color-link-hover | #163a5b | |
--ag-color-link-visited | #5b2a86 | |
--ag-color-focus | #ffbf47 | Focus ring. Always paired with an ink outer ring so it survives any background. |
--ag-color-success | #00703c | |
--ag-color-success-tint | #e6f2ec | |
--ag-color-warning | #8a5700 | |
--ag-color-warning-tint | #fdf3e1 | |
--ag-color-error | #b00020 | |
--ag-color-error-tint | #fbe9ec | |
--ag-color-info | #1d70b8 | |
--ag-color-info-tint | #e8f1f8 |
Font
| Property | Value | Notes |
|---|---|---|
--ag-font-family-sans | system-ui, "Noto Sans", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif | System fonts only, zero network cost. Noto Sans is named early because it covers the Latin Extended ranges that Yoruba, Hausa, Igbo, Wolof and Fula need. |
--ag-font-family-mono | ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace | |
--ag-font-size-xs | 0.875rem | 14px. Smallest size allowed for running text. |
--ag-font-size-sm | 1rem | 16px. Body text minimum. |
--ag-font-size-md | 1.125rem | 18px. Lead paragraphs, and body text under data-ag-density=large. |
--ag-font-size-lg | 1.25rem | |
--ag-font-size-xl | 1.5rem | |
--ag-font-size-2xl | 2rem | |
--ag-font-size-3xl | 2.5rem | |
--ag-font-size-4xl | 3rem | |
--ag-font-weight-normal | 400 | |
--ag-font-weight-bold | 700 | |
--ag-font-leading-tight | 1.2 | |
--ag-font-leading-base | 1.55 | Generous for diacritics and low-literacy readers. |
--ag-font-leading-loose | 1.75 |
Space
| Property | Value | Notes |
|---|---|---|
--ag-space-1 | 0.25rem | |
--ag-space-2 | 0.5rem | |
--ag-space-3 | 0.75rem | |
--ag-space-4 | 1rem | |
--ag-space-5 | 1.5rem | |
--ag-space-6 | 2rem | |
--ag-space-7 | 3rem | |
--ag-space-8 | 4rem |
Size
| Property | Value | Notes |
|---|---|---|
--ag-size-target | 3rem | 48px minimum touch target. |
--ag-size-measure | 65ch | Maximum line length for running text. |
--ag-size-container | 72rem | |
--ag-size-control-border | 2px | |
--ag-size-radius | 0.25rem | Buttons and small controls. |
--ag-size-radius-field | 0rem | Text fields, selects and the search box. Square by default. |
--ag-size-radius-surface | 0rem | Cards, panels, alerts and empty states. Square by default. |
--ag-size-focus-ring | 3px |
Breakpoint
| Property | Value | Notes |
|---|---|---|
--ag-breakpoint-sm | 40em | 640px |
--ag-breakpoint-md | 48em | 768px |
--ag-breakpoint-lg | 64em | 1024px |