Working with agents

copy the prompt · read the tokens

Point an agent at the system in three lines. The prompt routes to the source of truth; it deliberately does not restate the rules, so it cannot drift from them.

Copyable prompt

Build this UI with the AMMO design system.
Read https://styles.ammo.tools/AGENTS.md, then https://styles.ammo.tools/tokens.json.
Use the CSS custom properties — never hard-code a hex. Dark is the default.

Works in any agent that can fetch a URL. If it cannot browse, paste the contents of AGENTS.md and tokens.json instead.

The files it points at

/AGENTS.md — the normative rules: required metrics, colour and type constraints, accessibility, and what not to do.
/tokens.json — every token with its light and dark value, generated from the stylesheet so it cannot drift.
/llms.txt — an index of every page, so an agent reads only what it needs.

Before you write code

Read the tokens first. Link /static/app.css and use the custom properties. Never hard-code a hex that exists as a token.
Pick the appearance before the layout. Dark is the default; data-theme="light" gives the paired light set. Every role is defined for both.
Reuse a documented pattern. If a component exists in this guide, copy its markup and behaviour rather than inventing a variant.

Constraints an agent must hold

Accent economy. One accent per screen. Brand colours are signals, never surface washes.
Compact metrics. 32px buttons, 34px fields at 360px maximum, 13px field text, radii of 12 / 8 / 4px by role, 44px minimum for touch actions.
Status colour never travels alone. Every state pairs its colour with text.
Behaviour is part of the brand. Autosave reports beneath the field; search runs at three characters after a two-second timer; refresh intervals are explicit; destructive actions arm on one control and commit on a second.
Icons are Heroicons outline at exactly 16×16px inside controls, stroke-width:1.5, aria-hidden.
Rockwell for logos and all h1–h3 headings. Body and interface text is system sans at 15px / 1.55.
Product chrome. App, marketing and public subsite headers use the T3 product mark. The main ammo.solutions website is the sole exception and uses the graffiti company wordmark in its header. The graffiti wordmark (ammo-logo.svg) is the compact signed-in footer and the company-band left logo — never a subsite header. Signed-in apps use the compact footer; marketing and logged-out pages use the company band alone. Never stack them. The styleguide is https://styles.ammo.tools/.

Portable widgets

For surfaces outside this repository, these files carry the same behaviour with no build step. Override the --ammo-* variables to match the host theme.

ammo-tabs.css ammo-widgets.css ammo-widgets.js confirmation.html

Tabs opt in with data-ammo-tabs on a role="tablist"; panels are matched by aria-controls. Search forms use role="search". The destructive control needs a server-side action and CSRF token of your own.

What an agent must not do

Do not add a second accent hue, a gradient wash, or a drop shadow to a flat surface.
Do not enlarge controls beyond the compact metrics, or add decorative status badges.
Do not lower contrast on hover, or remove a focus ring.
Do not invent a component the guide already documents.