Guidance / For developers
For developers
Build from these files. They are generated with this site, so they always match it.
Download
The kit holds every file below plus the fonts, sample images and Antz logos they use. Keep the folder together: the colour file loads the fonts from its assets folder.
Files
| File | What it holds | Open |
|---|---|---|
| AGENTS.md | Start here when an AI tool builds Antz screens: what to read and the rules | Open |
| COMPONENTS.md | Every component and layout with ready HTML for each variant and state | Open |
| components.json | The same, for tools | Open |
| tokens.css | Every colour, size, corner and shadow, named as in Figma | Open |
| tokens.json | The same values for other tools | Open |
| antz.css | The component styles the examples use | Open |
| STANDARDS.md | The full written rules | Open |
| decisions.json | The settled design decisions | Open |
How to use
- Load tokens.css, then antz.css.
- Start a screen from a layout skeleton in COMPONENTS.md and fill it with component examples; change the content, keep the styles.
- Use the named colour variables; never type a colour or size by hand.
- If you have the Figma frame for the screen, match it exactly; this system fills the gaps around it.
- Any Material Symbols Rounded icon may be used when it fits the meaning; the icon page lists the common ones.
- Anything marked temporary is not designed in Figma yet: report it as a departure.