Brand assets & imagery
real files · no substitutesLogo & product chrome
Subsite headers use the T3 product mark. App, marketing and other public headers on subsites take /marks/<product>/mark.svg (mark-on-dark.svg on dark UI) beside the product wordmark. Inter is fine for that wordmark in app chrome. Live ammo.host and ammo.tools headers are this pattern. Never ammo-logo.svg. See Product marks.
On subsites, the graffiti wordmark is a footer mark. ammo-logo.svg appears in the compact footer on signed-in app views, and as the left logo of the company band on marketing, logged-out and other non-app pages. It is not used in subsite headers, sidebars or lockups beside product names.
The main ammo.solutions website is the sole exception. Its header uses the graffiti company wordmark. All other subsites use their product mark.
The styleguide uses sg without a dot in the shared tile, with styleguide beside it in Rockwell. All logos and h1–h3 headings on the bible use Rockwell; body and controls use system sans.
ammo.tools/marks/ammo-tools/mark.svg
Wanda/marks/wanda/mark.svgRules
T3 in every subsite header. Signed-in app, marketing and public subsite headers use the official tile. Marketing is not a graffiti lockup.
Subsite graffiti belongs in the footer. The compact signed-in strip, and the left logo of the company band. Nowhere else.
One footer. Signed-in app views use the compact strip only. Marketing and logged-out pages use the company band only. Never stack them.
Invert, never redraw. The graffiti file inherits currentColor; dark appearance inverts it with filter: var(--logo-filter). No second file, no recolouring.
For the squircle tiles, favicons and PWA icons used in headers, see Product marks.
Company assets
For Google authentication branding and other services requiring a square brand image.
The graffiti wordmark is transparent and inherits currentColor, so dark mode inverts it with filter: var(--logo-filter) rather than shipping a second file. Use it in the compact signed-in footer and as the company-band left logo. Subsite headers use the T3 tile from Product marks.
Icon discipline
Heroicons outline, fill:none, stroke:currentColor, stroke-width:1.5, aria-hidden, rendered at exactly 16×16px inside controls.
Imagery
We use three kinds of picture, and nothing else. Each has a job; mixing them in one place is what makes a set look untidy.
Product — dark UI, uncropped
Real interface chrome at true aspect ratio. Never cropped, never art-directed, never used as decoration.
Product — email capture
Captured email, shown full bleed. This one is brighter than the interface, so it never sits beside the dark UI screenshots.
Covers — full-bleed plates
Project covers. Muted, edge-to-edge, and always shown at the same 1600×1000 ratio so a list of projects reads evenly.
Rules
Keep the tonal groups apart. Dark UI screenshots and bright marketing plates have a 7× brightness difference. Shown in one grid they read as a mistake, not a set.
Never crop a screenshot. Show the real interface at its true ratio. Decorative crops hide the chrome that makes it evidence.
Covers are one ratio. 1600×1000, always. A project list only scans if every plate is the same shape.
No substitutes. No stock photography, no hand-drawn illustration, no gradient washes, no multi-colour icon sets.
Avoid: stock photography, hand-drawn illustration, gradient washes on surfaces, screenshots used as decoration, multi-colour icon sets.