# 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-v2.pages.dev shows every component live, if you can open it.

How to build a screen:
- Pick the layout from COMPONENTS.md › Layouts (List and Record — always the default version unless the brief asks for the other one; Form, Result, Tablet split) and start from its skeleton.
- Before inventing a flow, look in COMPONENTS.md › Patterns and parts. 37 patterns (choosing, entering data, building a request, working a list, record pages, feedback) say how Antz modules already do it, with skeletons. Build list cards from Card parts and record pages from Detail page parts, in the order those pages give.
- Fill each region with components copied from their examples. Change text and data; keep classes, sizes and colours.
- Motion and haptics: use the one set on the Motion and Haptics pages (sheets 260 ms up / 200 ms down, light tick on picks, success pulse on save, warning buzz on reject or error).
- 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: said once. A label in the card's top row, or the bottom strip on lifted request and approval cards; on record pages, the status bar.
- Main action is Antz green; navy for calls to action that are not the main step; cyan for Add buttons. Success toast is the navy pill with Undo.
- 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.