Marketing style
landing pages · warm light-firstThe AMMO marketing style is the documented exception to the product-UI rules. Where product UI is dark-first with no gradients or shadows, marketing pages use a warm off-white base, gradient accents and card shadows. Both share Rockwell display type and the brand colours.
Tokens: static/marketing/tokens.css and tokens.json (marketing key).
Components: static/marketing/components.css, dark-band.css, footer.css.
Behaviour: static/marketing.js.
Brand family
The AMMO marketing style is a warm, light-first surface shared by all products. Each keeps its own accent colour while sharing layout, type and tone.
Siblings, not twins. ammo.host and ammo.tools share the same warm off-white base, slab-serif display headings, system-sans body and mono for code. Only the accent differs: host uses the blue/purple/red gradient; tools uses a teal-to-blue gradient rooted in #0b8a7a.
One accent per page. The accent appears in buttons, the gradient underline and the pricing badge. Every other surface stays neutral.
Gradients are permitted. Unlike product UI (which forbids gradients), marketing pages use them for the navbar rule, headline underlines and the recommended-card glow. They remain accents, never fills.
Product switch
Toggle data-product="host" or data-product="tools" on the wrapper to swap the accent. The specimens below demonstrate the switch live.
Tokens
These values are extracted from the approved mockups and live in static/marketing/tokens.css. They also appear in tokens.json under the marketing key.
Colours
Brand accents
Per-product accents
| Product | Primary | Darker | Soft | Gradient |
|---|---|---|---|---|
| host | #2f6bff | — | — | blue/purple/red |
| tools | #0b8a7a | #0f6e63 | #dff2ee | teal/blue |
Dark surfaces
Dark panels use values extracted from the night band and AMMO company band in the mockups.
Typography
| Role | Stack | Size | Weight |
|---|---|---|---|
| Display (h1) | Rockwell, "Roboto Slab", Georgia, serif | clamp(44px, 5.6vw, 68px) | 500 |
| Section (h2) | Rockwell, "Roboto Slab", Georgia, serif | clamp(36px, 4.4vw, 54px) | 500 |
| Card (h3) | Rockwell, "Roboto Slab", Georgia, serif | 25px | 500 |
| Body | Inter, system-ui, sans-serif | 16px | 400 |
| Subline | Inter, system-ui, sans-serif | 21px | 400 |
| Code | "JetBrains Mono", ui-monospace | 14.5px | 500 |
Radii
Shadows
| Role | Value |
|---|---|
| Card | 0 20px 40px -24px rgba(20,19,18,.25), 0 2px 6px -2px rgba(20,19,18,.06) |
| Button | 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 18px -6px rgba(47,107,255,.6) |
| Hot card glow | 0 40px 70px -35px rgba(122,63,242,.55) |
Motion
| Token | Value | Use |
|---|---|---|
| --mk-dur-fast | 0.15s | Button hover lift |
| --mk-dur-med | 0.25s | Colour transitions |
| --mk-dur-slow | 0.45s | Card reveal |
| --mk-ease-bounce | cubic-bezier(0.2, 0.9, 0.3, 1.2) | Approval chip pop |
| --mk-ease-phone | cubic-bezier(0.2, 0.9, 0.25, 1.1) | Phone device bounce |
| --mk-ease-chip | cubic-bezier(0.2, 0.9, 0.3, 1.3) | Chip enter animation |
| --mk-ease-pointer | cubic-bezier(0.5, 0, 0.2, 1) | Cursor movement |
| --mk-ease-fly | cubic-bezier(0.55, 0, 0.25, 1) | Flying elements |
Spacing scale
| Token | Value | Use |
|---|---|---|
| --mk-sp-section | 110px | Vertical padding between sections |
| --mk-sp-hero-top | 56px | Hero top padding |
| --mk-sp-hero-gap | 44px | Gap between hero elements |
| --mk-sp-feat-grid | 52px | Feature section grid gap |
| --mk-sp-card-gap | 20px | Gap between feature cards |
| --mk-sp-card-pad | 14px 14px 30px | Feature card internal padding |
| --mk-sp-wrap | 32px | Page side margins |
| --mk-sp-eyebrow | 26px | Space below eyebrow text |
| --mk-sp-subline | 22px | Space above subline |
| --mk-sp-prompt | 32px | Space above prompt box |
Component specimens
Each specimen is a standalone page with no guide CSS. They load only the marketing stylesheets and respond to the guide's theme and product switches. Open any specimen directly for a copyable reference implementation.
Navbar
Sticky header with the gradient bottom line. The 2px rule uses the full brand gradient. On subsites, the header mark is the official T3 product tile (/marks/<product>/mark.svg, mark-on-dark.svg on dark UI) with the product wordmark. Only the main ammo.solutions website uses ammo-logo.svg in its header. Live ammo.host and ammo.tools headers are this pattern.
Hero with prompt box
The eyebrow pill, gradient-underlined headline, subline and prompt box with Copy button. Copy uses navigator.clipboard with a selection fallback; state is announced via role="status".
Demo stage (autoplay)
The host hero stage with terminal, approval card, chip and phone. Step pills sync with the timeline. Pauses on hover and focus-within. ?state=final or prefers-reduced-motion shows the final state.
Demo stage (final state)
The same demo with ?state=final to show the completed animation without motion.
Feature cards
2-up row with illustration area. No numbering on cards. Hover lifts the card.
Night band
Dark reassurance panel. Host: sleep/security message with activity log. Tools: "No." message with security facts. Switches with the product control.
Pricing cards
The highlighted card uses the gradient border glow. Only one card per row is highlighted. Full VAT note below.
Final CTA box
Closing call-to-action with radial glow and prompt box.
Product footer
Column layout with brand, Guides and Site links. Copy verbatim from source.
AMMO company band
The only footer on marketing and logged-out pages. Signed-in app views use the compact strip instead (graffiti mark, © year and AMMO, theme control, Terms, Privacy) and must not stack this band on top of it. The left logo is the graffiti wordmark; subsite headers use the T3 product mark. The main ammo.solutions website is the sole header exception and uses the graffiti company wordmark. Three columns: graffiti logo with heart-flag origin, product cards with "You are here", company links. Company details appear only in the bottom line. The product switch changes which card shows "You are here". A ready-to-use product cards snippet is at /widgets/ammo-product-cards.html.
Card state spec
| State | Background | Border | Outline | Text-decoration | Arrow .go |
|---|---|---|---|---|---|
| Default | rgba(255,255,255,.04) | rgba(255,255,255,.08) | none | none | #7d7970, no transform |
| Hover | rgba(255,255,255,.07) | rgba(255,255,255,.18) | none | none | #7d7970, no transform |
| Focus-visible | unchanged | unchanged | 2px solid #8fb0ff, offset 2px | none | #7d7970, no transform |
| Current (div) | rgba(255,255,255,.04) | rgba(255,255,255,.08) | n/a | n/a | "You are here" pill instead |
Transition: background .2s, border-color .2s. Touch targets: 44px min-height on coarse pointers. The current site's card is a non-link <div> with no hover state.
Copy rules
Guidelines for text on AMMO marketing pages.
Plain words. Write like you speak. Avoid jargon, marketing fluff and superlatives.
Short sublines. The subline under a headline is one to two sentences. It clarifies, never repeats.
No numbering on feature cards. Let the content speak. Numbered lists feel like checklists.
Company is AMMO Solutions. Never use a personal name in legal or company contexts.
Origin is "the Netherlands". Always include "the" (lowercase unless sentence-initial).
Never name a web framework. Say "your app" or "your project", not "your Next.js app".
Contact address is [email protected]. Use this for all general enquiries.
Company details (verbatim from mockups)
| Company name | AMMO Solutions |
| Address | Kloosterdijk 6, 1141 PJ Monnickendam, Netherlands |
| KvK | 68679750 |
| VAT | NL001694241B13 |
| Contact email | [email protected] |
| Security email | [email protected] |
| Copyright | © 2026 AMMO Solutions |
Do's and don'ts
Do
- Use the warm off-white base for light pages
- Keep the gradient accent to buttons, underlines and the navbar rule
- Put the headline, subline and prompt/CTA above the fold at 390px
- Use the AMMO company band as the only footer on marketing and logged-out pages
- Pair dark reassurance bands with light hero sections
- Test at 1280px and 390px in both appearances
Don't
- Use an all-beige page with no contrast
- Add empty dark boxes without content
- Number feature cards (01, 02, 03)
- Use gradients as background fills
- Put content below the fold on the first screen at 390px
- Mix host and tools accents on the same page
- Stack the compact app footer and the company band, or put the company band on a signed-in app view
No empty dark boxes
Dark bands must contain meaningful content. An empty dark rectangle adds visual weight without purpose.
No all-beige pages
Break up the warm base with white cards and a dark band. A uniformly beige page lacks visual hierarchy.
Tight hero spacing
Keep vertical spacing compact: 26px eyebrow margin, 22px subline margin, 32px prompt margin. Do not add decorative whitespace.
Mobile first-screen rule
At 390px viewport width, the headline, subline, prompt box and Copy button must all be visible without scrolling. This is the minimum viable first impression.