Product marks

squircle tiles · favicons · PWA icons

Every AMMO product uses the same black squircle tile with the tricolour band. The glyph and wordmark accent are what change. All marks are served from https://styles.ammo.tools/marks/ with CORS open, so sites can hotlink them.

The styleguide lockup uses the shared tile shape with sg, without a dot, and styleguide beside it in Rockwell.

The main ammo.solutions website is the sole exception: its header uses the graffiti company wordmark. Every other subsite uses its product mark.

Where to use

Subsite headers use this tile. App, marketing and other public headers on subsites use mark.svg, or mark-on-dark.svg on dark UI, beside the product wordmark. Inter is fine for that wordmark in app chrome. Never the graffiti wordmark. Glyphs: .h ammo.host, .t ammo.tools, .s ammo.solutions, plain w Wanda, plain a parent AMMO. Live ammo.host and ammo.tools headers are this pattern.

Graffiti is a footer mark. ammo-logo.svg is the compact signed-in strip and the left logo of the company band. On subsites, it never appears in a header, sidebar or marketing lockup. See Brand assets.

One footer, never both. Signed-in app views use the compact strip only: graffiti mark, © year and AMMO linking to ammo.solutions, theme control, Terms and Privacy. No product cards, no address, KvK or VAT, and no company band. Marketing, logged-out and other non-app pages use the company band only.

URL patterns

PatternCacheUse
/marks/<product>/<file>1 dayLatest version, revalidates daily
/marks/v1/<product>/<file>1 year, immutableVersioned, never changes

Products: ammo-host, ammo-tools, ammo-solutions, wanda, ammo

Product files

ammo.host mark.svg on light
ammo.host mark.svg on dark
mark.svg Master tile, for light backgrounds (64 grid) https://styles.ammo.tools/marks/ammo-host/mark.svg
ammo.host mark-on-dark.svg on light
ammo.host mark-on-dark.svg on dark
mark-on-dark.svg Tile for dark UI: base lifted to #211f1d, stronger edge https://styles.ammo.tools/marks/ammo-host/mark-on-dark.svg
ammo.host mark-white.svg on light
ammo.host mark-white.svg on dark
mark-white.svg Single colour, white. Glyph and band seam knocked out https://styles.ammo.tools/marks/ammo-host/mark-white.svg
ammo.host mark-ink.svg on light
ammo.host mark-ink.svg on dark
mark-ink.svg Single colour, ink #141312. Glyph and seam knocked out https://styles.ammo.tools/marks/ammo-host/mark-ink.svg
ammo.host favicon-16.svg on light
ammo.host favicon-16.svg on dark
favicon-16.svg Dedicated 16px drawing (16 grid). Use below 24px https://styles.ammo.tools/marks/ammo-host/favicon-16.svg
ammo.host lockup-light.svg on light
ammo.host lockup-light.svg on dark
lockup-light.svg Mark plus wordmark for light backgrounds https://styles.ammo.tools/marks/ammo-host/lockup-light.svg
ammo.host lockup-dark.svg on light
ammo.host lockup-dark.svg on dark
lockup-dark.svg Mark plus wordmark for dark backgrounds https://styles.ammo.tools/marks/ammo-host/lockup-dark.svg
ammo.host favicon.ico on light
ammo.host favicon.ico on dark
favicon.ico 16 + 32 + 48 multi-resolution icon https://styles.ammo.tools/marks/ammo-host/favicon.ico
ammo.host favicon-32.png on light
ammo.host favicon-32.png on dark
favicon-32.png 32x32 transparent PNG https://styles.ammo.tools/marks/ammo-host/favicon-32.png
ammo.host apple-touch-icon.png on light
ammo.host apple-touch-icon.png on dark
apple-touch-icon.png 180x180 opaque, full bleed for iOS (native 180px) https://styles.ammo.tools/marks/ammo-host/apple-touch-icon.png
ammo.host icon-192.png on light
ammo.host icon-192.png on dark
icon-192.png PWA any icon, 192x192 transparent (native 192px) https://styles.ammo.tools/marks/ammo-host/icon-192.png
ammo.host icon-512.png on light
ammo.host icon-512.png on dark
icon-512.png PWA any icon, 512x512 transparent (native 512px) https://styles.ammo.tools/marks/ammo-host/icon-512.png
ammo.host maskable-512.png on light
ammo.host maskable-512.png on dark
maskable-512.png PWA maskable, full-bleed ink with safe circle (native 512px) https://styles.ammo.tools/marks/ammo-host/maskable-512.png
ammo.host og-mark-1024.png on light
ammo.host og-mark-1024.png on dark
og-mark-1024.png 1024x1024 tile on #f4f2ee for social and avatars (native 1024px) https://styles.ammo.tools/marks/ammo-host/og-mark-1024.png

HTML head snippet

<link rel="icon" href="https://styles.ammo.tools/marks/ammo-host/favicon.ico" sizes="48x48">
<link rel="icon" href="https://styles.ammo.tools/marks/ammo-host/favicon-16.svg" type="image/svg+xml">
<link rel="icon" href="https://styles.ammo.tools/marks/ammo-host/favicon-32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="https://styles.ammo.tools/marks/ammo-host/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#141312">

site.webmanifest

The manifest itself is served from your site's origin; its icon srcs point at these marks URLs.

{
  "name": "ammo.host",
  "short_name": "ammo.host",
  "icons": [
    { "src": "https://styles.ammo.tools/marks/ammo-host/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "https://styles.ammo.tools/marks/ammo-host/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "https://styles.ammo.tools/marks/ammo-host/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#141312",
  "background_color": "#141312",
  "display": "standalone"
}

Footer product cards

Product cards belong on the company-band footer used by marketing and logged-out pages. The compact signed-in app strip does not include them. A ready-to-use snippet is at /widgets/ammo-product-cards.html.