AMMO styleguide

The components we use. The rules that keep them consistent.

Quiet interface. Clear actions.

Neutral surfaces, compact controls and purposeful colour. Every component below is interactive.

Keep it compact. Short fields, consistent widths, no oversized actions.
Use icons with intent. Leading icons on buttons. Plus, pencil and trash alone for CRUD.
Say only what helps. No filler, redundant labels or decorative status badges.
Show the outcome. Green means saved. Red means destructive. Errors stay next to the action.

Buttons & icons

Rounded corners, a 16px leading icon and only enough width for the label.

Environments

Implementation

<button class="secondary">
  {% heroicon_outline 'adjustments-horizontal' %} SMTP settings
</button>

Fields & autosave

360px field width. 16px between fields. Changes save after a short pause; feedback belongs directly beneath the field.

Layout: static/forms.css · Feedback: projects/save_status.html

Search & refresh

Enter searches immediately. Three characters start a two-second timer. Clearing the field resets the results.

Buttons
Search fields
Confirmation switch
Autosave feedback
Navigation tabs

Refresh every 30 seconds

Behaviour: static/search.js

Tabs

A visible tab shape. No hover underline competing with the selected state. Arrow keys move between tabs.

General

Project name and description belong here.

Destructive confirmation

One compact control. The switch arms the action; a separate click performs it. Switching on never deletes anything.

Shared template: components/confirm_delete.html · Behaviour: static/confirm-delete.js

Feedback

Colour communicates state, with text alongside it.

Saved

Saving…

Could not save. Try again.

Foundations

Colour

#3097efAMMO blue

#6434b9AMMO purple

#ef3340AMMO red

Brand colours are accents. General interface surfaces stay grey. Green is reserved for success.

Typography & dimensions

Headings: Rockwell
Interface: System sans-serif
Field text: 13px
Field height: 34px
Field width: 360px maximum
Button corners: 12px
Leading icon: 16px
Touch actions: 44px minimum

One AMMO, shared patterns

The patterns above are the target for ammo.tools and Wanda. The recent compact controls, confirmation switch, search and autosave conventions take precedence over older variants.

Bring a component into Wanda

Use the same accessible HTML structure, icons and interaction.
Load the portable widget CSS and JavaScript below.
Connect form submission to Wanda’s endpoint and CSRF protection.
Keep permission checks, validation and error handling on the server.

Download CSS Download JavaScript Confirmation HTML

Wanda reference and existing differences

Reviewed Wanda’s DESIGN.md and sidebar template. Both products share Rockwell headings, Heroicons, a slate rail and the three-colour rule. Wanda currently uses #3292ec blue, #522dae purple and #f60001 red, with pill buttons and Figtree figures. Those are source differences, not a second set of recommendations. Port the interaction patterns first; palette consolidation remains an explicit design decision.