# Alert Enterprise Brand Guidelines 0.2.0
This file is generated from guidelines/index.html and tokens/src/tokens.mjs by scripts/build-agents.mjs. It is the complete brand guidelines in Markdown, followed by the token reference and the rules. Paths are relative to the repository root.
How to use it: follow every "Must". Use the CSS custom properties (--ae-*) and component classes (.ae-*) named here instead of raw values. Use logo files from assets/logo unchanged.
---
## Identity
Our logo is a coral shield beside the Alert Enterprise name. Place it on white, black or purple.
### Direction
Alert Enterprise is a security company that looks like modern software: frosted glass over soft color, large clear type, clean product screens. Locks, shields and badges are welcome. Old-fashioned styling is not.
- **Do** use frosted glass, soft gradients and real product screens.
- **Don't** use dark control rooms, glowing blue grids, clip art or all caps.
> **Must.** Show security subjects with a modern software look. rule: modern-software
> **Must.** One language across our whole portfolio. Mobile credentials, visitor management, identity governance and physical access share the same colors, type, shapes, glass, motion and icons. Products differ by name and by the icons they use, never by their own palette or styling. rule: one-language
### Logo
Three backgrounds our logo can sit on.
> **Must.** Place our logo on white, black or brand purple (#5F51D5) only. rule: logo-grounds
### Try a background
Pick a color to see if our logo can go on it.
### Shield
Four parts. Only the left fold has a gradient.
- **Fold.** Coral fading into red.
- **Face.** Solid coral, #FF5233.
- **Base.** Solid coral, curving into the fold.
- **Cut.** Always white.
### Clear space and smallest size
Leave empty space around our logo as wide as its shield. Drag to find the smallest allowed size.
> **Must.** Keep clear space equal to shield width on all four sides. Minimum logo width: 120 pixels on screen, 30mm in print. Shield alone: 16 pixels. rules: logo-clearspace, logo-minimum
### What not to do
- Do not stretch or squash.
- Do not recolor our shield.
- Do not rotate.
- Do not place on coral or other colors.
- Do not place on a busy photo.
- Do not add shadows or effects.
- Do not type our name in place of our logo.
- Do not fade our logo.
### Small spaces: browser tabs, app icons, avatars
The shield stands in for the full logo when there is no room for the name. Shown at the size each one is actually used.
- **Browser tab**16 and 32 pixels. The coral shield on its own.[SVG](assets/logo/ae-shield-coral.svg) [32](assets/logo/app-icons/ae-shield-32.png) [64](assets/logo/app-icons/ae-shield-64.png)
- **Phone home screen**180 pixels, rounded by the phone.[180](assets/logo/app-icons/ae-shield-180.png) [192](assets/logo/app-icons/ae-shield-192.png)
- **App icon**White shield on purple, with room around it so nothing is cut off.[512](assets/logo/app-icons/ae-app-icon-512.png) [1024](assets/logo/app-icons/ae-app-icon-1024.png)
- **Profile picture**Slack, Teams, social. The shield centred, with clear space.[512](assets/logo/app-icons/ae-shield-512.png)
> **Must.** Use the shield alone, never a shrunken full logo and never letters. On dark app surfaces use the white shield on purple; everywhere else use the coral shield. rule: small-space-mark
`` · `` · web app manifest: 192 and 512, plus the purple version as maskable.
### Which file to use
These files stay sharp at any size.
| | Version | Use on | File | |
| --- | --- | --- | --- | --- |
| | **Coral shield, ink name** | White. Default choice. | ae-logo-full-coral-ink.svg | [Download](assets/logo/ae-logo-full-coral-ink.svg) |
| | **Coral shield, white name** | Black and brand purple. | ae-logo-full-coral-white.svg | [Download](assets/logo/ae-logo-full-coral-white.svg) |
| | **One color, ink** | One-color print, fax, embossing, etching. | ae-logo-full-allblack.svg | [Download](assets/logo/ae-logo-full-allblack.svg) |
| | **One color, white** | One-color white, on purple or on a darkened photo. | ae-logo-full-allwhite.svg | [Download](assets/logo/ae-logo-full-allwhite.svg) |
| | **Shield, coral** | App icons, website tab icons, profile pictures, slide corners. Show our full logo first. | ae-shield-coral.svg | [Download](assets/logo/ae-shield-coral.svg) |
| | **Shield, one color** | Ink or white outline, for one-color work. | ae-shield-allblack.svg | [Download](assets/logo/ae-shield-allblack.svg) |
---
## Naming
How to write our company and product names.
### Company name
Always **Alert Enterprise**: two words, both capitalized. **AE** is fine internally and where space is tight, but not in customer writing on first mention.
| Write | Not |
| --- | --- |
| **Alert Enterprise** | AlertEnterprise · Alertenterprise · Alert enterprise · ALERT ENTERPRISE · Alert |
| **Alert Enterprise's** (possessive) | AE's, in customer writing |
> **Must.** The company is always "Alert Enterprise", two words. rule: company-name
### How the names fit together
Four levels, one language.
> **Must.** Only Alert Enterprise has a logo. Products are set in Aeonik beside the shield, never given their own mark, colors or typeface. rules: one-language, product-names
### Products
Guardian is our platform. Products sit on it and use plain descriptive names. Write them exactly as shown.
| Write | What it is | Not |
| --- | --- | --- |
| **Guardian** | Our platform. Everything runs on it. | Enterprise Guardian · AE Guardian · the Guardian platform |
| **PIAM** | Physical identity and access management: who may go where, and for how long. | Guardian PIAM in running text · PIAM platform |
| **Visitor Management** | Inviting, clearing and checking in visitors. | Visitor Identity Management · VIM · visitor mgmt |
| **Healthcare VIM** | Visitor management for hospitals, connected to patient records. | Patient Visitor Management · Hospital VIM |
| **Wallet Mobile Credentials** | Badges in Apple, Google and Samsung wallets. | Mobile Wallet Credentials · NFC Wallet Mobile Credentials · mobile wallet credentialing |
| **SOC Insights** | Security operations intelligence. | SOC Insights & Response · SOC Insights+ |
| **AI Agent** | The assistant that answers questions and acts inside Guardian. | Guardian AI Security Agent · AI agent for physical security |
| **Asset Governance** | Control of company assets alongside identities. | Asset Management · Asset Governance Platform |
| **Employee Badge in Apple Wallet****Corporate Badge in Google Wallet****Company ID in Samsung Wallet** | The wallet credential names set by Apple, Google and Samsung. | Apple Wallet badge · Google badge · Apple employee badge |
> **Must.** Everything below a product is a capability, described in plain words rather than named like a product: emergency mustering, building management, workspace intelligence, identity intelligence, policy-based access control, kiosks, the ServiceNow integration. rule: product-names
> **Open items.** Our website still uses several of the "not" spellings, and names the AI assistant six different ways. The AI Agent name needs a decision before it is used in customer material.
### Partners and hardware
Alert Enterprise makes software. Badge readers, locks and cards are made by partners such as HID, Wavelynx and LEGIC. When hardware appears in writing, screens or images, name its maker, and spell partner names their way.
> **Must.** Never say or suggest that Alert Enterprise makes hardware. rule: software-company
---
## Co-branding
Showing our logo next to a partner's logo.
### Side by side
Our logo first, a thin line, then our partner's logo. Both should look equally tall.
- **Do** spell partner names exactly as partners do.
- **Don't** put our name on a partner's product.
### Apple Wallet and Google Wallet buttons
Use official buttons only, exactly as supplied.
- **Add to Google Wallet**One line. The default.[SVG](assets/wallet-buttons/google/google-add-to-wallet-primary-black.svg) · [PNG](assets/wallet-buttons/google/google-add-to-wallet-primary-black.png)
- **Add to Google Wallet, compact**Two lines, when space is tight.[SVG](assets/wallet-buttons/google/google-add-to-wallet-condensed-black.svg) · [PNG](assets/wallet-buttons/google/google-add-to-wallet-condensed-black.png)
- **Add to Apple Wallet**From Apple. 576 by 178, transparent.[PNG](assets/wallet-buttons/apple/apple-add-to-wallet-black.png)
- **Google:** black only, at least 48 pixels tall, with 8 pixels of clear space. As large as any other button beside it.
- **Apple:** clear space of one tenth its height. Keep it secondary to our own message, and show it next to a pass. In an iOS app, use the system button instead of this image.
- **Both:** never recolor, stretch, rotate, dim or animate. Use each market's language version; other languages are in the full kit.
[All Google languages (SVG)](assets/wallet-buttons/_source/google-add-to-wallet-svg.zip) Full usage rules
---
## Color
Purple is our main color. Coral is an accent, used sparingly. Text is near-black. Green, amber, red and blue mean status only, such as granted or denied.
### Brand colors
Click a color to copy its code.
**Purple**
Hex: #5F51D5 · RGB: 95 81 213 · CMYK: 55 62 0 16 · Use: main
**Coral**
Hex: #FF5233 · RGB: 255 82 51 · CMYK: 0 68 80 0 · Use: accent
**Gradient red**
Hex: #F9423A · RGB: 249 66 58 · CMYK: 0 73 77 2 · Use: gradients only
**Ink**
Hex: #262626 · RGB: 38 38 38 · CMYK: 0 0 0 85 · Use: text
> **Must.** Use gradient red (#F9423A) only inside gradients, never as a solid color. rule: f9423a-gradient-only
### Lighter and darker shades
Click a shade to copy it.
### Softer versions
When a brand color is too strong, use it at 80, 60, 40 or 20 percent. No other amounts.
### Purple first, coral sparingly
One card, done right and wrong.
Requested by Priya Raman 2
- **Do** use purple for a main button and coral for one small detail.
Requested by Priya Raman
- **Don't** fill large areas with coral or put small white text on it. It is hard to read.
> **Must.** Use coral sparingly: our shield, one highlight, part of an icon, one chart line. Never use coral for errors. Errors are red (#E0425C). rules: coral-marks, coral-is-not-danger
### Where each color goes
Switch between Light and Dark at top right to see these change.
| Used for | Color |
| --- | --- |
### Is it readable?
Pick a text color and a background to check readability.
---
## Gradients
Brand gradients are soft and cloud-like, with color glowing from more than one point. Never a straight fade from one color to another.
### Gradients
Click one to try it below.
### Try it
Drag either circle to move its color. Copy the code for use on a web page.
### Soft, not straight
- **Do** let color glow from different corners.
- **Don't** run a straight line from one color to another.
---
## Typography
Our typeface is Aeonik: Bold for headlines, Regular for text, Light for very large type. Use DM Sans only if Aeonik cannot be used.
### Get Aeonik
Use Aeonik for all Alert Enterprise materials: documents, presentations, email, websites, video and print. Install it, and embed it when saving presentations and documents.
Double-click each .otf and choose Install Font, or run: bash install/install-aeonik.sh MustUse Aeonik for all company materials, and embed it when saving presentations and documents. rule: aeonik-everywhere
### Aeonik
A clean, modern typeface that works for headlines and for long text.
### Three weights
Type in any line to try it. Drag to resize.
| Weight | Number | Use |
| --- | --- | --- |
| Light | 300 | Very large type only. Never for small text. |
| Regular | 400 | Body text and subheadings. |
| Bold | 700 | Headlines, buttons and emphasis. |
Only these three weights exist. Do not use Medium or Semibold.
### Aeonik and its backup
DM Sans is a free font that looks close to Aeonik. Use it only when Aeonik cannot be used.
### Scale
Fourteen text sizes, from largest headline to smallest note. Click any line to type your own words.
### Writing tips for type
- Sentence case for headings, buttons, labels and menus. Title case only for product names.
- Align body text to the left. Keep lines to about 45 to 75 characters.
- Large headlines are set slightly tighter. Only small labels above a heading are in capitals.
- Numbers in tables line up in straight columns.
- Badge numbers and codes use a fixed-width font. Sentences never do.
---
## Space
Spacing comes in set sizes, from 4 pixels up to 128. Use these sizes, not values in between.
### Scale
### Too tight, too loose
Drag to change spacing inside this card.
Facilities · Building 4
---
## Corners and shapes
Buttons have slightly rounded corners; cards, a little more. Our brand shape is the shield: one large rounded corner.
### Rounded corners
> **Should.** Buttons and text boxes: 8 pixels. Cards: 16 pixels. Pop-up windows: 24 pixels. Fully round ends are for tags and switches, not buttons.
### Shield shape
Three small corners and one large one. Drag to see how much that large corner matters.
### Where it goes
- Image masks
- Feature tiles
- Swatches
> **Must.** Use shield shapes for color samples, photos and feature tiles. Never on buttons or text boxes. rule: shield-shape-not-controls
---
## Layout
Pages use twelve equal columns. Turn on Grid at top right to see them.
### Columns
A common layout: a narrow column for headings, a wide one for content.
### Screen sizes and widths
Each bar marks a screen width where layouts adjust.
| What | Width |
| --- | --- |
| A column of text | About 68 characters |
| Pages and documents | 1120 pixels |
| Product screens and dashboards | 1440 pixels |
---
## Shadows and glass
Shadows are soft and slightly purple. Most things have no shadow at all.
### Shadow levels
| Level | For |
| --- | --- |
| 0 | Cards and tables. Usual choice. |
| 1 | Small raised details, such as a selected tab |
| 2 | Menus and product screenshots |
| 3 | Notifications and cards when you point at them |
| 4 | Pop-up windows |
| brand | Main button in a title area |
### Glass
Frosted glass panels over photos and gradients. Switch the background to compare.
> **Must.** Use glass only over photos or gradients. On a plain background it just looks gray. Never stack glass on glass. rule: glass-on-image
### Glass in use
A floating menu, a search panel, a card and buttons, all in glass. Move your pointer over it.
`.ae-glass`, `.ae-glass--clear`, `.ae-glass-bar`, `.ae-btn--glass`, `.ae-cmdk`
---
## Motion
Movement should explain what changed. Things slow down as they arrive and speed up as they leave. A small bounce is saved for confirmations, such as access granted.
### Ways of moving
Click one to see it move.
### Side by side
Five ways of moving, over equal distance and time.
### How long things take
Click to feel each one.
| What moves | How long | How |
| --- | --- | --- |
| Hover, press, color change | fast · 140ms | standard |
| Toggle, check, select | base · 220ms | spring |
| Menu, tooltip, toast in | slow · 360ms | enter |
| Anything leaving | base · 220ms | exit |
| Pop-up windows and panels | slow · 360ms | enter |
| Animating our shield and icons | draw · 900ms | draw |
### Reduced motion
Some people turn on "reduce motion" on their device. For them, movement becomes a quick fade and nothing repeats. Reduce motion, at top right, shows how that looks.
> **Must.** Respect reduce-motion settings. rule: reduced-motion
---
## Animations
Animations for videos, presentations and product screens, each one playing on a light and a dark background.
> **Must.** One pass, along one axis, and nothing bounces back. Things arrive, settle and stay. rule: reduced-motion
---
## Buttons and controls
Buttons, text boxes, switches and other pieces used in Alert Enterprise products. Try them. Turn on Developer details for code names.
### Buttons
Buttons in each state: resting, pointed at, pressed, reached with the keyboard, loading and unavailable.
`.ae-btn` with `--tonal`, `--outline`, `--text`, `--danger`; sizes `--sm`, `--lg`; `--icon`. Busy is `aria-busy="true"`.
### Text boxes
Type an email address without an @ and click away to see an error.
`.ae-field` wraps a label, control, help and error. Set `aria-invalid="true"` and the error replaces the help.
### Choices
Checkboxes, round options, switches, and tabs.
`.ae-check`, `.ae-radio`, `.ae-switch` style native inputs, `.ae-segmented` and `.ae-tabs` use `aria-pressed` or `aria-selected`.
### Status labels
Colored labels showing granted, denied, pending and other states. Wording is fixed; see Terminology.
`.ae-badge` in seven tones, with `--dot` and `--live`. Status words are fixed: see Terminology.
> **Badge issued.** Priya Raman can add it to Apple Wallet from the email she just received.
> **Door offline.** Lobby A turnstile 2 has not reported since 09:42.
### Pop-ups and notifications
A confirmation window, a notification and a hint that appears when you point at a button.
`.ae-dialog` is a native ``. `.ae-toast` appears bottom right. `.ae-tip` reads `data-tip`.
### Waiting and loading
Match the wait to what is happening. Pick by how long it takes and whether we know the length.
`.ae-spinner`, `.ae-skeleton`, `.ae-progress`, `.ae-ring`, `.ae-stepper`, `aria-busy="true"`
| How long | Show | Why |
| --- | --- | --- |
| Under a moment | Nothing | A flash of a spinner is worse than a short wait. |
| A second or two, loading content | Skeleton | Shows the shape of what is coming, so the page does not jump. |
| A second or two, after a click | Spinner in the button | Keeps the response where the person is looking. |
| Longer, length known | Progress bar | People wait longer when they can see the end. |
| Longer, length unknown | Spinner with a line of text | Say what is happening: "Checking with the reader". |
| Much longer | Let them leave | Tell them we will notify them when it is done. |
> **Must.** Never show more than one waiting indicator for the same wait. A skeleton, a spinner and a progress bar together read as three separate problems. rule: one-wait-indicator
> **Should.** Keep the layout still. A skeleton takes the space its content will take, so nothing jumps when it arrives.
### Tables
Click a column heading to sort. Click a row to select it.
`.ae-table`. Click a header to sort, a row to select. Numeric columns take `.num`, codes take `.mono`.
| Name | Department | Badge | Status | Doors |
| --- | --- | --- | --- | --- |
---
## Product screens
Guardian screens built from the pieces above. Click rows, filters, buttons and the search box. Activity is simulated.
---
## Icons
Two-color line icons: purple outlines, coral details. Original and new sets appear together for comparison. Each icon can draw itself on.
### Drawing rules
Follow these when drawing a new icon.
Recipe and catalogue: `assets/icons/icons.json`. New icons: `scripts/build-icons.py`. Check: `python3 scripts/check-icons.py`.
### icon-shield-lock
Click an icon above to see it larger.
> **Must.** Use icons in purple and coral. Single-color icons are only for small spaces such as menus and buttons. rule: icons-two-tone
---
## Photography
Real people, bright and natural. Office life mixed with industries Alert Enterprise serves. Brand colors in frame help.
- Office, candid
- Construction
- Agriculture, utilities
- Energy
- Industrial
- Badged workforce
- Physical access
- Security operations
### Adding color and text to photos
- Photo on its own. Usual choice.
- Darkened at bottom, so white text reads clearly.
- Glass label over a photo.
- Cropped to our shield shape.
### Choosing a photo
- Real people doing real work, looking at their work rather than at a camera.
- Industry settings (energy, utilities, construction, airports, healthcare) balanced with office life.
- Badges, lanyards, turnstiles and phones are good. Any readers or locks shown should be plain or clearly made by a partner.
- Natural light, warm and saturated. No blue-tinted "cyber" stock imagery and no hooded hackers.
- No faces cropped at the eyes and no posed handshakes.
---
## Charts
A chart answers one question. Purple carries the data, coral marks a point worth noticing, and green, amber and red mean status.
### Color order
Use these in order. Past the fourth, group the rest as Other.
> **Must.** Green, amber and red mean granted, expiring and denied. Never use them to tell one ordinary series from another. rule: coral-is-not-danger
### Which chart
Start from the question. Pick one to see it in our colors and type.
### Getting it wrong, and right
### Numbers and labels
- Group thousands with a comma. Write 12,482, never 12482 or 12.5k in a table.
- Round counts to whole numbers. Keep one decimal for rates, and only where it changes a decision.
- Name the unit once, in the title or the axis, and never on every bar.
- Say the period in words: last seven days, this month, since Monday.
- Give every chart a title that states the finding, not the field name. "Weekend traffic drops by three quarters" beats "Events by day".
- Put the number in a sentence wherever one number will do. A chart of one value is a waste of a chart.
### Charts in reports and slides
- One chart per point. If it needs two readings, it is two charts.
- Keep labels small and gray, grid lines faint, and leave out borders and background fills.
- Label lines directly at their ends instead of a legend when there are three or fewer.
- Charts inherit the page. On a dark slide the same chart keeps its colors and flips its labels.
---
## Voice
Plain, specific and calm. Our readers are busy security and facilities teams. Say what happened, or what a button does, in as few words as possible.
### Principles
- **State the fact.** Name who, which door, what time. "Lobby A turnstile 2 is offline", not "An issue was detected".
- **Label, don't explain.** A setting says what it does. Why it exists belongs in documentation.
- **No technical jargon on screen.** Customers should not see engineering words such as endpoint, cache or webhook.
- **No slogans in products.** Headings describe; they do not sell.
- **Name the manufacturer** when hardware is involved. Alert Enterprise is a software company.
- **Use the same status words.** See Terminology below.
### Before and after
- Not: "Reader runs in keyboard-wedge mode. A fast burst of characters ending in Enter counts as a tap." Write: "Tap a badge on the reader."
- Not: "A tone for each verdict" Write: "Plays a different sound for Valid, Check and Denied."
- Not: "Your tap confirms it." Write: "Plug in the reader before signing in."
- Not: "Access isn't just a door. It's an identity." Write: "When someone leaves, their badges stop working."
- Not: "Seamlessly empower your workforce with frictionless access." Write: "Employees add their badge to Apple Wallet from the invitation email."
- Not: "Who came" Write: "Attendees"
### Check your writing
Paste some text to flag words and phrases to avoid. It catches common problems; still read it yourself.
### Style details
- Capitalize only the first word of headings and buttons. Product names keep their capitals.
- No em dashes or en dashes. Use a comma, a colon, parentheses or a second sentence.
- Use numerals (3, not three) in products. Use 24-hour time on screens (09:42) and 12-hour time in email and marketing.
- Dates: 22 Sep 2026 on screens, September 22, 2026 in writing, 2026-09-22 in file names.
- Buttons are verbs naming a result: "Revoke badge", not "OK" or "Submit".
- Errors say what happened and what to do next, in that order, without apology.
- No emoji in product, documents or email.
---
## Terminology
Use one word for one thing. Words to avoid are marked in red.
- **Identity**: A person known to our software: employee, contractor, visitor or vendor. Say "user" only for someone who signs in.
- **Credential**: Anything that proves identity at a reader: a plastic card, a mobile credential, a PIN. General term.
- **Badge**: A credential issued to a person, physical or in a wallet. "Employee Badge in Apple Wallet" is the product name. Avoid "pass" for employee badges.
- **Access level**: A named set of doors and schedules granted to an identity.
- **Access request**: A request for an access level, with a requester, an approver and a decision.
- **Visitor**: A person on site for a limited time, invited by a host. Visitors get a visitor pass, not a badge.
- **Host**: Employee responsible for a visitor.
- **Reader**: Device at a door that reads credentials. Made by partners such as HID, Wavelynx and LEGIC. Never imply AE makes readers.
- **PACS**: Physical access control system: software and hardware that run doors. Spell it out on first use.
- **Issue**: Give someone a badge or credential. Prefer "Issue badge" to "Provision".
- **Revoke**: End a credential permanently. Distinct from **suspend**, which is reversible.
- **Event**: A record of something that happened: access granted, access denied, a door forced open.
- **Status words**: Granted, Denied, Pending, Expiring, Expired, Active, Inactive, Suspended, Revoked, Online, Offline. Capitalized as badges, lowercase in sentences.
- **Admin page**: AE Verify settings and management screen. Avoid "console".
- **USB reader**: Small desktop badge reader made by rf IDEAS. Avoid "dongle".
---
## Accessibility
Our products and materials should be easy to read and use, including people with low vision and people who use a keyboard instead of a mouse. We follow the WCAG 2.2 AA accessibility standard.
### Readable color pairs
Text and background pairs used in our products, checked for readability in light and dark.
| Scheme | Pair | Use | Ratio | Needs | Result |
| --- | --- | --- | --- | --- | --- |
### Requirements
- Text stands out clearly from its background. Large text can be a little lighter.
- Anything clickable shows a purple outline when reached by keyboard.
- Buttons are big enough to tap easily.
- Never rely on color alone. Status labels always include a word.
- State lives in native attributes and ARIA (`disabled`, `aria-pressed`, `aria-selected`, `aria-invalid`, `aria-busy`).
- Movement can be turned down, and nothing flashes.
---
## Downloads
Seven downloads: logos, Aeonik, icons, photography, gradients, wallet buttons and code.
> **Must.** Use these files as they are. Never redraw, retype, recolor or restretch anything in them. rule: logo-no-edit
Single files are listed inside each download.
---
## Using AI tools
AI assistants such as Claude or ChatGPT can follow these guidelines and produce work that already looks like Alert Enterprise.
### Three ways to use them
Give your assistant the address of this page and ask for what you need. It reads the rules itself.
For assistants that cannot open links. One copy, then ask for a document, slide or page.
Colors, spacing, rules and assets are published in formats software can read.
### Ask for what you want
Examples that work.
Click any example to copy it.
### What an assistant knows
Once it has these guidelines, it will follow them without being told each time.
- Our colors, type, spacing, shapes, shadows and gradients, with the exact values.
- The rules, including which ones are firm and which are preferences.
- Which color pairs are readable, already measured.
- Where to find our logo, icons, fonts and photographs, and which file to use.
- How we write, and the words we avoid.
---
## Updates
These guidelines are updated over time. Changes are listed below with a date.
### Who to ask
- Matt Bennett owns these guidelines. Send questions and suggestions to him.
- Values change in `tokens/src/tokens.mjs`, then `node tokens/build.mjs` and `node scripts/build-agents.mjs`. A change that fails a contrast check does not ship. Versions: a renamed or removed value is a major version, an addition is a minor, a small adjustment is a patch.
### Open items
- **Products**: Add a complete list of product names.
- **Photography**: Confirm web and partner rights for our photos.
- **Hosting**: Decide where these guidelines are published and who can see them.
### What changed
- **0.2.0**: 22 Sep 2026. New modern look: frosted glass, soft gradients, larger headlines and product screens in app windows. Plain-language rewrite.
- **0.1.1**: 22 Sep 2026. Company name set as two words. Aeonik downloads and installers added.
- **0.1.0**: 22 Sep 2026. First version.
---
# Appendix: Alert Enterprise tokens 0.2.0
GENERATED by `tokens/build.mjs` from `tokens/src/tokens.mjs`. Edit the source, then rebuild.
Every token is a CSS custom property prefixed `--ae-`. Load `tokens/dist/tokens.css` and read roles, not primitives. Set `data-theme="dark"` on any element for the dark roles, or `data-theme="auto"` on `` to follow the system.
## Color primitives
### purple
The primary brand color. Purple leads: grounds, primary actions, links, focus.
| Token | Value |
|---|---|
| `--ae-purple-50` | `#F1EFFC` |
| `--ae-purple-100` | `#E4E0FA` |
| `--ae-purple-200` | `#C7BFF4` |
| `--ae-purple-300` | `#A99EEE` |
| `--ae-purple-400` | `#8B7DE8` |
| `--ae-purple-500` | `#5F51D5` |
| `--ae-purple-600` | `#4A3EC1` |
| `--ae-purple-700` | `#3A2FA0` |
| `--ae-purple-800` | `#2B2478` |
| `--ae-purple-900` | `#1B174D` |
| `--ae-purple-950` | `#0E0B2E` |
### coral
The secondary brand color, and the color of the shield. Coral marks; it does not fill.
| Token | Value |
|---|---|
| `--ae-coral-50` | `#FFF0ED` |
| `--ae-coral-100` | `#FFDDD5` |
| `--ae-coral-200` | `#FFB8A8` |
| `--ae-coral-300` | `#FF8F7A` |
| `--ae-coral-400` | `#FF6B4E` |
| `--ae-coral-500` | `#FF5233` |
| `--ae-coral-600` | `#F9423A` |
| `--ae-coral-700` | `#D02F1F` |
| `--ae-coral-800` | `#A3240F` |
| `--ae-coral-900` | `#6B1A0C` |
### ink
Neutrals. 700 (#262626) is the brand text color.
| Token | Value |
|---|---|
| `--ae-ink-0` | `#FFFFFF` |
| `--ae-ink-50` | `#F6F6F8` |
| `--ae-ink-100` | `#ECECEF` |
| `--ae-ink-200` | `#D9D9D9` |
| `--ae-ink-300` | `#B5B5BE` |
| `--ae-ink-400` | `#8A8A96` |
| `--ae-ink-500` | `#5A5A68` |
| `--ae-ink-600` | `#3B3B47` |
| `--ae-ink-700` | `#262626` |
| `--ae-ink-800` | `#1A1A24` |
| `--ae-ink-900` | `#111118` |
| `--ae-ink-950` | `#0A0A12` |
### green
Success, granted, valid, online.
| Token | Value |
|---|---|
| `--ae-green-50` | `#E8F6F0` |
| `--ae-green-100` | `#C9EBDD` |
| `--ae-green-500` | `#1F9D6E` |
| `--ae-green-600` | `#17825B` |
| `--ae-green-700` | `#106446` |
### amber
Warning, pending, expiring, needs review.
| Token | Value |
|---|---|
| `--ae-amber-50` | `#FEF6E7` |
| `--ae-amber-100` | `#FCE8BF` |
| `--ae-amber-500` | `#F2B341` |
| `--ae-amber-600` | `#C98A14` |
| `--ae-amber-700` | `#8F600A` |
### red
Danger, denied, revoked, offline. Distinct from coral on purpose: coral is the brand, red is a verdict.
| Token | Value |
|---|---|
| `--ae-red-50` | `#FDECEF` |
| `--ae-red-100` | `#F9CFD7` |
| `--ae-red-500` | `#E0425C` |
| `--ae-red-600` | `#C22A45` |
| `--ae-red-700` | `#951C33` |
### blue
Information and neutral system notices.
| Token | Value |
|---|---|
| `--ae-blue-50` | `#EBF2FE` |
| `--ae-blue-100` | `#CFE0FD` |
| `--ae-blue-500` | `#4A8BF5` |
| `--ae-blue-600` | `#2F6FDB` |
| `--ae-blue-700` | `#2253A8` |
### Tints
Brand colors at the four sanctioned 20% steps, mixed on white.
| Token | Value |
|---|---|
| `--ae-purple-tint-80` | `#7F74DD` |
| `--ae-purple-tint-60` | `#9F97E6` |
| `--ae-purple-tint-40` | `#BFB9EE` |
| `--ae-purple-tint-20` | `#DFDCF7` |
| `--ae-coral-tint-80` | `#FF755C` |
| `--ae-coral-tint-60` | `#FF9785` |
| `--ae-coral-tint-40` | `#FFBAAD` |
| `--ae-coral-tint-20` | `#FFDCD6` |
| `--ae-ink-tint-80` | `#515151` |
| `--ae-ink-tint-60` | `#7D7D7D` |
| `--ae-ink-tint-40` | `#A8A8A8` |
| `--ae-ink-tint-20` | `#D4D4D4` |
## Roles
Roles resolve per scheme. Components read roles, never primitives.
| Role | Light | Dark |
|---|---|---|
| `--ae-bg` | `#FFFFFF` | `#0E0B2E` |
| `--ae-bg-muted` | `#F6F6F8` | `#141038` |
| `--ae-bg-sunken` | `#ECECEF` | `#08061C` |
| `--ae-surface` | `#FFFFFF` | `#15113A` |
| `--ae-surface-raised` | `#FFFFFF` | `#1E1950` |
| `--ae-surface-brand` | `#5F51D5` | `#5F51D5` |
| `--ae-surface-brand-soft` | `#F1EFFC` | `#231D5C` |
| `--ae-surface-inverse` | `#0E0B2E` | `#FFFFFF` |
| `--ae-text` | `#262626` | `#F4F3FB` |
| `--ae-text-2` | `#5A5A68` | `#B9B5D6` |
| `--ae-text-3` | `#8A8A96` | `#8C87B0` |
| `--ae-text-on-brand` | `#FFFFFF` | `#FFFFFF` |
| `--ae-text-on-inverse` | `#FFFFFF` | `#262626` |
| `--ae-text-brand` | `#4A3EC1` | `#A99EEE` |
| `--ae-text-link` | `#4A3EC1` | `#A99EEE` |
| `--ae-line` | `#E6E4F0` | `rgba(255, 255, 255, 0.10)` |
| `--ae-line-strong` | `#CFCCE0` | `rgba(255, 255, 255, 0.20)` |
| `--ae-line-focus` | `#5F51D5` | `#A99EEE` |
| `--ae-action` | `#5F51D5` | `#8B7DE8` |
| `--ae-action-hover` | `#4A3EC1` | `#A99EEE` |
| `--ae-action-press` | `#3A2FA0` | `#C7BFF4` |
| `--ae-action-text` | `#FFFFFF` | `#0E0B2E` |
| `--ae-action-soft` | `#F1EFFC` | `#2A2366` |
| `--ae-action-soft-hover` | `#E4E0FA` | `#342B7A` |
| `--ae-action-soft-text` | `#3A2FA0` | `#E4E0FA` |
| `--ae-mark` | `#FF5233` | `#FF6B4E` |
| `--ae-mark-soft` | `#FFF0ED` | `#3A1A22` |
| `--ae-mark-text` | `#D02F1F` | `#FF8F7A` |
| `--ae-success` | `#1F9D6E` | `#3DBB8B` |
| `--ae-success-soft` | `#E8F6F0` | `#0F2E26` |
| `--ae-success-text` | `#106446` | `#7FD9B6` |
| `--ae-warning` | `#F2B341` | `#F2B341` |
| `--ae-warning-soft` | `#FEF6E7` | `#33280F` |
| `--ae-warning-text` | `#8F600A` | `#F7CD7C` |
| `--ae-danger` | `#E0425C` | `#F0647B` |
| `--ae-danger-soft` | `#FDECEF` | `#3A1622` |
| `--ae-danger-text` | `#951C33` | `#F7A2B1` |
| `--ae-danger-strong` | `#C22A45` | `#F0647B` |
| `--ae-danger-on` | `#FFFFFF` | `#0E0B2E` |
| `--ae-info` | `#4A8BF5` | `#6FA3F8` |
| `--ae-info-soft` | `#EBF2FE` | `#132447` |
| `--ae-info-text` | `#2253A8` | `#A9C7FB` |
| `--ae-scrim` | `rgba(14, 11, 46, 0.48)` | `rgba(4, 3, 16, 0.64)` |
## Gradients
Organic only. Every gradient is two or more offset radial fields over a base color. No linear-gradient in brand work.
- `--ae-gradient-ember`: The cover arc and the shield. Coral to red with a violet edge. Use once per surface.
- `--ae-gradient-dusk`: Purple into coral. The brand pair in one field. Section openers and hero grounds.
- `--ae-gradient-violet`: Purple on purple. The default brand ground when flat purple is too heavy.
- `--ae-gradient-lilac`: The light brand field. Behind product screenshots and quiet heroes.
- `--ae-gradient-night`: The dark ground. Purple light rising out of 950.
- `--ae-gradient-mesh`: The signature SaaS field: four soft light sources over purple 950. Hero backdrops, openers, behind glass.
- `--ae-gradient-aurora`: The light mesh. Behind product screenshots and glass on light pages.
- `--ae-gradient-signal`: Coral to coral. For the single highest-attention moment, such as an alert hero.
## Typography
Display and text: 'Aeonik', 'DM Sans', system-ui, sans-serif. Mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace.
Aeonik comes in three cuts: Light (300), Regular (400) and Bold (700). Use only these weights.
| Style | Size | Line | Weight | Tracking | Shorthand |
|---|---|---|---|---|---|
| hero | 112px | 0.94 | 700 | -0.045em | `font: var(--ae-type-hero)` |
| display-xl | 80px | 1 | 700 | -0.035em | `font: var(--ae-type-display-xl)` |
| display | 64px | 1.02 | 700 | -0.03em | `font: var(--ae-type-display)` |
| h1 | 48px | 1.06 | 700 | -0.025em | `font: var(--ae-type-h1)` |
| h2 | 36px | 1.12 | 700 | -0.02em | `font: var(--ae-type-h2)` |
| h3 | 28px | 1.18 | 700 | -0.015em | `font: var(--ae-type-h3)` |
| h4 | 22px | 1.25 | 700 | -0.01em | `font: var(--ae-type-h4)` |
| subhead | 20px | 1.35 | 400 | -0.005em | `font: var(--ae-type-subhead)` |
| body-lg | 18px | 1.5 | 400 | 0em | `font: var(--ae-type-body-lg)` |
| body | 16px | 1.5 | 400 | 0em | `font: var(--ae-type-body)` |
| body-sm | 14px | 1.45 | 400 | 0em | `font: var(--ae-type-body-sm)` |
| caption | 12px | 1.4 | 400 | 0.005em | `font: var(--ae-type-caption)` |
| eyebrow | 12px | 1.2 | 700 | 0.12em | `font: var(--ae-type-eyebrow)` |
| label | 14px | 1.2 | 700 | 0em | `font: var(--ae-type-label)` |
| code | 13px | 1.5 | 400 | 0em | `font: var(--ae-type-code)` |
## Space
A 4px base. Use the named steps; never a value between them.
`--ae-space-0` 0px · `--ae-space-1` 4px · `--ae-space-2` 8px · `--ae-space-3` 12px · `--ae-space-4` 16px · `--ae-space-5` 20px · `--ae-space-6` 24px · `--ae-space-8` 32px · `--ae-space-10` 40px · `--ae-space-12` 48px · `--ae-space-16` 64px · `--ae-space-20` 80px · `--ae-space-24` 96px · `--ae-space-32` 128px · `--ae-space-px` 1px · `--ae-space-0_5` 2px
## Radius
Small radii for controls, larger for containers. The pill is for chips and toggles, not buttons.
`--ae-radius-none` 0px · `--ae-radius-xs` 4px · `--ae-radius-sm` 6px · `--ae-radius-md` 8px · `--ae-radius-lg` 12px · `--ae-radius-xl` 16px · `--ae-radius-2xl` 24px · `--ae-radius-pill` 999px
## Shape
The shield: three small corners and one large one, bottom right. The brand shape. Measured off the 2023 swatches.
- `--ae-shape-shield` = `6% 6% 70% 6% / 7% 7% 78% 7%`. Swatches, image masks, feature tiles, avatars of places. Never on a control.
- `--ae-shape-shield-soft` = `8px 8px 40% 8px / 8px 8px 45% 8px`. Cards that carry the brand gesture without the full curve.
- `--ae-shape-shield-flip` = `6% 70% 6% 6% / 7% 78% 7% 7%`. Mirrored, top right. Only when a shield would point off the page.
## Elevation
Five levels, tinted purple. Level 0 is flat and is the default.
- `--ae-elevation-0`: `none`
- `--ae-elevation-1`: `0 1px 2px rgba(14, 11, 46, 0.06), 0 1px 3px rgba(14, 11, 46, 0.08)`
- `--ae-elevation-2`: `0 2px 4px rgba(14, 11, 46, 0.05), 0 6px 16px rgba(14, 11, 46, 0.08)`
- `--ae-elevation-3`: `0 4px 8px rgba(14, 11, 46, 0.06), 0 16px 32px rgba(14, 11, 46, 0.12)`
- `--ae-elevation-4`: `0 8px 16px rgba(14, 11, 46, 0.08), 0 32px 64px rgba(14, 11, 46, 0.18)`
- `--ae-elevation-brand`: `0 8px 24px rgba(95, 81, 213, 0.32)`
## Motion
Controls use fast or base. Panels use slow. Draw is for the shield and icon line work.
Enter decelerates, exit accelerates. Spring is for confirmations only: a grant, a toggle, a check.
- `--ae-duration-instant`: 80ms
- `--ae-duration-fast`: 140ms
- `--ae-duration-base`: 220ms
- `--ae-duration-slow`: 360ms
- `--ae-duration-slower`: 560ms
- `--ae-duration-draw`: 900ms
- `--ae-ease-standard`: `cubic-bezier(0.2, 0, 0, 1)`
- `--ae-ease-enter`: `cubic-bezier(0.05, 0.7, 0.1, 1)`
- `--ae-ease-exit`: `cubic-bezier(0.3, 0, 0.8, 0.15)`
- `--ae-ease-spring`: `cubic-bezier(0.34, 1.36, 0.64, 1)`
- `--ae-ease-draw`: `cubic-bezier(0.65, 0, 0.35, 1)`
## Contrast
| Scheme | Pair | Use | Ratio | Minimum | Result |
|---|---|---|---|---|---|
| light | text on bg | body text | 15.13 | 4.5 | pass |
| light | text-2 on bg | secondary text | 6.78 | 4.5 | pass |
| light | text-3 on bg | placeholder and disabled text, large or non-essential only | 3.41 | 3 | pass |
| light | text-link on bg | links | 7.64 | 4.5 | pass |
| light | text-on-brand on surface-brand | text on the purple ground | 5.79 | 4.5 | pass |
| light | action-text on action | primary button label | 5.79 | 4.5 | pass |
| light | action-soft-text on action-soft | tonal button label | 8.83 | 4.5 | pass |
| light | mark-text on mark-soft | coral badge label | 4.61 | 4.5 | pass |
| light | success-text on success-soft | success badge label | 6.43 | 4.5 | pass |
| light | warning-text on warning-soft | warning badge label | 5.08 | 4.5 | pass |
| light | danger-text on danger-soft | danger badge label | 7.39 | 4.5 | pass |
| light | danger-on on danger-strong | destructive button label | 5.66 | 4.5 | pass |
| light | info-text on info-soft | info badge label | 6.5 | 4.5 | pass |
| light | line-focus on bg | focus ring against the page | 5.79 | 3 | pass |
| light | mark on bg | coral as a graphic mark, never as small text | 3.23 | 3 | pass |
| dark | text on bg | body text | 17.23 | 4.5 | pass |
| dark | text-2 on bg | secondary text | 9.62 | 4.5 | pass |
| dark | text-3 on bg | placeholder and disabled text, large or non-essential only | 5.61 | 3 | pass |
| dark | text-link on bg | links | 7.97 | 4.5 | pass |
| dark | text-on-brand on surface-brand | text on the purple ground | 5.79 | 4.5 | pass |
| dark | action-text on action | primary button label | 5.6 | 4.5 | pass |
| dark | action-soft-text on action-soft | tonal button label | 10.68 | 4.5 | pass |
| dark | mark-text on mark-soft | coral badge label | 7 | 4.5 | pass |
| dark | success-text on success-soft | success badge label | 8.69 | 4.5 | pass |
| dark | warning-text on warning-soft | warning badge label | 9.63 | 4.5 | pass |
| dark | danger-text on danger-soft | danger badge label | 8.16 | 4.5 | pass |
| dark | danger-on on danger-strong | destructive button label | 6.16 | 4.5 | pass |
| dark | info-text on info-soft | info badge label | 8.93 | 4.5 | pass |
| dark | line-focus on bg | focus ring against the page | 7.97 | 3 | pass |
| dark | mark on bg | coral as a graphic mark, never as small text | 6.75 | 3 | pass |
| Brand pair | Ratio | AA text | AA large |
|---|---|---|---|
| white on purple 500 | 5.79 | yes | yes |
| ink 700 on white | 15.13 | yes | yes |
| white on coral 500 | 3.23 | no | yes |
| ink 700 on coral 500 | 4.69 | yes | yes |
| purple 500 on white | 5.79 | yes | yes |
| coral 500 on white | 3.23 | no | yes |
| white on purple 950 | 18.99 | yes | yes |
## Rules
- **one-language** (must): Every product area shares one design language: same colors, type, shapes, glass, motion and icons. Mobile credentials, visitor management, identity governance and physical access all look like Alert Enterprise. Products are distinguished by name and by which icons they use, never by their own palette, typeface or visual style. No sub-brand colors, no per-product logos unless brand architecture grants one.
- **company-name** (must): The company is always "Alert Enterprise": two words, both capitalized. Never AlertEnterprise.
- **logo-grounds** (must): The lockup appears on white, black, or purple 500 only.
- **logo-clearspace** (must): Keep clear space around the lockup equal to the shield width on all sides.
- **logo-minimum** (must): Lockup at least 120px wide on screen and 30mm in print. Shield alone at least 16px.
- **small-space-mark** (must): In small spaces (browser tabs, app icons, profile pictures) use the shield alone, never a shrunken full logo and never initials. Coral shield by default; white shield on a purple ground for app icons, with clear space so rounding does not cut it.
- **logo-no-edit** (must): Never recolor, stretch, outline, rotate, add effects to, or retype the lockup. Use the supplied files.
- **purple-leads** (must): Purple is the primary color: primary actions, links, focus and brand grounds.
- **coral-marks** (must): Coral marks, it does not fill. Use it for the shield, a single highlight, an icon secondary stroke, or one data series. Never for body text and never as a large flat field behind text.
- **f9423a-gradient-only** (must): #F9423A is for gradients only. Never a flat fill.
- **coral-is-not-danger** (must): Coral is the brand; red (#E0425C) is the verdict. Never use coral to mean error, denied or revoked.
- **organic-gradients** (must): Gradients are organic: offset radial fields. No linear-gradient in brand work.
- **one-primary** (should): One primary (filled purple) action per view. Everything else is tonal, outline or text.
- **tint-steps** (should): When a brand color is too strong, step it in 20% increments (80, 60, 40, 20). No other percentages.
- **aeonik** (must): Aeonik Bold for headlines, Aeonik Regular for copy, Aeonik Light only at display sizes. Only weights 300, 400 and 700 exist; never set 500, 600 or 800.
- **aeonik-everywhere** (must): Set all Alert Enterprise materials in Aeonik: documents, decks, email, web, video, print. Install it from assets/fonts (Aeonik.zip, scripts/install-aeonik.sh or .ps1), link assets/fonts/aeonik.css on web pages, and embed it in PPTX and DOCX. DM Sans only where Aeonik cannot be installed or embedded.
- **no-center-body** (should): Body text is left aligned. Center only a single short line.
- **icons-two-tone** (must): Icons are two-tone line work: purple primary, coral secondary, 2.6 stroke on a 48 grid, round caps and joins.
- **shield-shape-not-controls** (must): The shield shape is for swatches, image masks and feature tiles. Never on buttons, inputs or chips.
- **glass-on-image** (must): Glass only over imagery or gradients. Never glass on a flat page, never glass on glass.
- **modern-software** (must): Alert Enterprise is a security company that looks like modern software. Security subjects (locks, shields, doors, badges, cameras) are welcome, drawn and styled the modern way: glass over the mesh and aurora gradients, large Aeonik type, generous space, clean product screens. Avoid dated treatment: dark control rooms, neon blue glow, binary code, hooded figures, stock cyber art.
- **software-company** (must): Alert Enterprise is a software company. Never show, write or imply that AE builds readers, locks or any hardware. Name the manufacturer (HID, Wavelynx, LEGIC) when hardware appears.
- **product-names** (must): Guardian is the platform. Products are PIAM, Visitor Management (Healthcare VIM for hospitals), Wallet Mobile Credentials, SOC Insights, AI Agent and Asset Governance. Anything smaller is a capability, described in plain words, not named like a product. Only Alert Enterprise has a logo; product names are set in Aeonik beside the shield.
- **wallet-names** (must): Write "Employee Badge in Apple Wallet" and "Corporate Badge in Google Wallet", with that capitalization.
- **one-wait-indicator** (must): One waiting indicator per wait. Under a moment, show nothing. A second or two loading content, show a skeleton shaped like the content. A second or two after a click, show a spinner inside the control. Longer with a known length, show a progress bar; unknown, a spinner with a line saying what is happening.
- **reduced-motion** (must): Honor prefers-reduced-motion: replace travel and draw with a fade of 140ms or less.
- **contrast** (must): Text meets WCAG 2.2 AA: 4.5:1 for body, 3:1 for 24px+ or 19px+ bold, 3:1 for focus rings and meaningful graphics.