# For AI agents building Antz mobile or tablet UI

Read in this order before generating any screen:

1. `COMPONENTS.md` — every component (when to use, variants, states, behaviour, content rules, specs) with ready HTML examples for each variant and state, plus a skeleton for each layout. Generated from the same source as the Antz Design website, so it is always current. `components.json` holds the same data for tools.
2. `tokens.css` (or `tokens.json`) — the only allowed values.
3. `antz.css` — the component classes the examples use. Load it with `tokens.css`.
4. `STANDARDS.md` — the rules behind the system, with ids to cite.
5. The website https://antz-design-system.pages.dev shows every component live, if you can open it.

How to build a screen:
- Pick the layout from COMPONENTS.md › Layouts (List, Record — owned or request, Form, Result, Tablet split) and start from its skeleton.
- Fill each region with components copied from their examples. Change text and data; keep classes, sizes and colours.
- Icons: `<span class="az-i">material_symbol_name</span>` (Material Symbols Rounded, font in `assets/`). Any glyph from that family may be used when it fits the meaning.
- Add button: `.az-fab` sits above a bottom navigation bar; add `.az-fab--no-nav` on screens without one.
- Examples use named colour variables (`var(--Primary)`); keep them. Image paths like `assets/leopard-thumb.jpg` mean the `assets/` folder next to these files; logos are in `brand/`. Copy the file or use its full path.
- If an example wraps the component in a centred box with padding, that box is only the preview stage; drop it.
- Neutral placeholder text in the examples ("Label", "Value") is for you to replace with real content.

## Hard rules

- Figma is the source. If you have the Figma frame for the screen, copy it 1:1. Without one, build from this kit; it fills the gaps and never overrides a frame.
- Tokens only: no raw hex, no size off the type ladder (no 13, 15, 700), Inter only, icons from Material Symbols Rounded.
- Phone 390 with 16 side padding; tablet 834 with 20. Tablet screens are designed for tablet, not stretched.
- Fields 56 tall. Main action 56. Decision buttons 48. Confirm buttons 56.
- One container level. No card inside a card. Border or shadow, never both.
- No explaining sentences, no decorative chips or badges, no uppercase eyebrows, no emoji.
- Status: pill always; the bottom status strip only on request/approval cards.
- Sample people: plain English names.
- Anything marked temporary in COMPONENTS.md (or listed in STANDARDS.md §12) is not designed in Figma yet: use it, and report it as a departure, never as standard.
- A choice the standards leave to the designer (§11 context rules) is stated in your output with the reason you chose it.

## Vocabulary

| Word | Means |
| --- | --- |
| Primary tabs | Count tabs or underline tabs |
| Secondary tab | The pill switch |
| Chips | The smallest tab style, "All - 22" |
| TAB | The tablet app (iPad), not a tab control |
| Dark header | The OnSecondaryContainer detail header |
| Strip | The status bar along the bottom of a request card |
| Entity cards | Animal, site, section, enclosure cards (only animal and site are sourced so far) |

## Output checklist

- [ ] Every colour and size maps to a token.
- [ ] Every component maps to a COMPONENTS.md entry (name it).
- [ ] The screen starts from a COMPONENTS.md layout skeleton (name it).
- [ ] Phone and tablet differences from §2 / §11 applied.
- [ ] Gaps used are listed as departures.