# Building with the Alert Enterprise brand
For AI agents and the people directing them. Read `llms.txt` for the index and `llms-full.txt` for the complete guidelines. This file covers how to produce output that passes review.
## 1. Load the system, do not copy values
For any HTML output (pages, prototypes, emails rendered in a browser, slides built in HTML), link the two stylesheets and write markup with the classes:
```html
Granted
```
Style your own layout with the custom properties, never with raw hex, px or curves:
```css
.hero { background: var(--ae-gradient-violet); color: var(--ae-text-on-brand); padding: var(--ae-space-16) var(--ae-layout-margin); }
.hero h1 { font: var(--ae-type-display); letter-spacing: var(--ae-type-display-tracking); }
```
When the target cannot load CSS (PowerPoint, Word, Figma, native code), read values from `tokens/dist/tokens.json` (DTCG) or `tokens/dist/tokens.flat.json`.
Dark: set `data-theme="dark"` on `` or on any container. Every role flips; primitives do not.
## 2. Aeonik on everything
Every output uses Aeonik. Before producing a document, deck or image on a machine, check the font is installed (macOS: `ls ~/Library/Fonts | grep -i aeonik`; Windows: `Get-ChildItem $env:LOCALAPPDATA\Microsoft\Windows\Fonts -Filter Aeonik*`). If it is missing, run `bash scripts/install-aeonik.sh` or `scripts/install-aeonik.ps1`; both verify against `assets/fonts/fonts.json`. For HTML, link `assets/fonts/aeonik.css` (or `css/components.css`, which declares it). For PPTX and DOCX, set the theme fonts to Aeonik and embed fonts in the file. For anything handed to a person who may not have the font, offer `assets/fonts/Aeonik.zip`.
## 3. Components
| Need | Markup |
| --- | --- |
| Primary action (one per view) | `