# AMMO ยท Styleguide > The AMMO design system: a quiet, compact, dark-first interface language with > neutral surfaces and purposeful colour, shared by ammo.tools and Wanda. Start with AGENTS.md for the rules, and tokens.json for the values. ## Essentials - [AGENTS.md](https://styles.ammo.tools/AGENTS.md): normative rules, required metrics, accessibility and what not to do. - [tokens.json](https://styles.ammo.tools/tokens.json): complete token list with light and dark values, generated from the stylesheet. - [app.css](https://styles.ammo.tools/static/app.css): the stylesheet. Load it and use its custom properties. ## Reference - [Colour](https://styles.ammo.tools/color/): 7 semantic roles, brand accents, the 3px tri-colour rule, state pairs, focus ring. - [Typography](https://styles.ammo.tools/typography/): Rockwell / system sans / mono, the measured scale, field metrics. - [Components](https://styles.ammo.tools/components/): buttons and icons, fields with autosave, tabs, destructive confirm, feedback. - [Navigation](https://styles.ammo.tools/navigation/): breadcrumbs, pagination and steps. - [Data display](https://styles.ammo.tools/data/): tables, stats, avatars and a no-JS accordion. - [Tags](https://styles.ammo.tools/tags/): compact labels keyed to functional colour. - [Alerts](https://styles.ammo.tools/alerts/): semantic alert states and progress. - [Layout](https://styles.ammo.tools/layout/): radii by role, spacing, app shell, measured metrics. - [Marketing](https://styles.ammo.tools/marketing/): testimonials, pricing and feature cards. - [Artifacts](https://styles.ammo.tools/artifacts/): landing page, pitch deck, poster, email, newsletter, signup form. - [Brand assets](https://styles.ammo.tools/brand-assets/): logo lockups, icon discipline, imagery. ## Portable widgets - [ammo-widgets.css](https://styles.ammo.tools/widgets/ammo-widgets.css): framework-independent AMMO controls. - [ammo-widgets.js](https://styles.ammo.tools/widgets/ammo-widgets.js): tabs, search and confirmation behaviour. - [confirmation.html](https://styles.ammo.tools/widgets/confirmation.html): the destructive confirm markup. ## Notes - Dark is the default appearance. `data-theme="light"` on `` gives the paired light set. - Rockwell is display-only and self-hosted. Never set body copy in it. - Brand colours are accents. General interface surfaces stay grey.