Brand guidelines · For partners, clients & collaborators
Turn speed into sales. Keep the brand sharp.
Everything you need to represent Whoosh correctly: logos, colours, typography, voice, and the rules for using our data. If it's not in here, ask us before you ship it.
Sourced from the Whoosh design system · Figma, Notion & getwhoosh.ai · July 2026
Seven absolutes
If you read nothing else, follow these. Everything below is the deep dive.
#AA5FFA owns CTAs, links and the standard mark. Nothing replaces it.
Always paired with the mark, always carrying the ® on external lockups.
Inter Display for headings, Inter for everything else. No substitutes.
Navy wordmark on light, white on dark. Striped marks only at large sizes.
Radii are fixed. Flat surfaces, no heavy shadows.
Commas, full stops, or parentheses in anything a customer will read.
Product UI, mono client logos, real headshots, or big metric callouts.
One mark, twenty official files
Find the right file and have it in one click. Every download is generated from the production vector artwork.
Naming: Whoosh [Full] [Striped] [Color] [Dark] Logo.svg · Full adds the wordmark, Striped switches the mark fill, Dark sets the wordmark in navy for light backgrounds.
Which file, where
Clear space
Keep clear space equal to the width of one bar of the M on all four sides. Nothing enters this zone.
Minimum sizes
- Mark: 24 × 24 px on screen · 8 mm in print
- Full lockup: 100 px wide on screen · 25 mm in print. Below that, switch to the mark alone.
- Striped variants: never below 80 px (mark) or 240 px (lockup) wide. The stripes break apart visually.
Never
Seven colours, no improvising
Exact values, and what each colour is allowed to do. Click a swatch for the hex, or the chips for other formats.
Pairings in practice
Text rules
- On white:
#0F303Bor#121D25. Never purple body text (contrast is too low). - On dark: white.
The two darks are different
#121D25 is the near-black used in mono logo treatments. #0F303B is the navy used for backgrounds, secondary buttons and dark wordmarks. Pick one per surface, and never mix them on the same screen.
Inter Display & Inter
The scale, the weights, and nothing else. Both faces are free at rsms.me/inter; hover any row to copy its CSS.
Inter Display
88 / 700 Never lose a purchase to a slow page
Inter Display
52 / 600 Speed challenges we help you with
Inter Display
32 / 600 App overload
Inter
17 / 400 Whoosh integrates natively with Shopify, learns how your shoppers browse, and preloads what they're about to click. Faster pages, lower bounce rates, higher conversions.
Inter
14 / 400 Real-user data from the Chrome UX Report, updated monthly.
Inter
16 / 500–600 Start Free Trial
Weights
700 hero H1 only · 600 H2, H3, primary buttons · 500 emphasis and sub-labels · 400 body and captions. Never more than three weights on one screen.
Loading & fallback
Request only weights 400–700 with font-display: swap. If Inter fails, fall through to Roboto → Segoe UI → Helvetica. This page runs that exact stack.
Smart enough to earn trust, simple enough to be understood
How Whoosh sounds, and how to hear when it's off. Five pillars govern every sentence we publish.
Clear
We translate complexity into understanding. If a sentence can be simpler without losing meaning, it should be.
Sounds like direct, structured, plain-English. Never vague, buzzword-heavy, needlessly technical.
Intelligent
Credible and sharp. Expertise shows in precision and relevance, not complexity.
Sounds like knowledgeable, precise, commercially aware. Never academic, arrogant, engineer-first.
Confident
Conviction without exaggeration. Confidence is strongest when paired with proof.
Sounds like certain, calmly authoritative, outcome-driven. Never hesitant, overhyped, salesy.
Helpful
Always on the merchant's side. Even problems are explained constructively.
Sounds like supportive, practical, action-oriented. Never condescending, alarmist, blaming.
Modern
Contemporary and relevant. Current, clean and sharp, never trendy for its own sake.
Sounds like fresh, clean, efficient. Never stiff, bloated, corporate-for-the-sake-of-it.
More expert than casual. More clear than clever. More confident than excited. More helpful than pushy.
The tone spectrum
Where Whoosh sits on each dimension, from the brand voice spec.
Say it like this
Our proprietary asynchronous resource prioritisation algorithm optimises critical rendering paths.
We load the right things first so your store feels instant.
Revolutionary AI that transforms your store like never before!
Improves load speed where it actually impacts conversions.
Preloads assets using predictive models.
Pages feel instant because we load what users are about to click.
Your store performance has experienced a negative deviation in key metrics.
Some key performance metrics have dropped, which may affect speed and user experience.
Words we use
Words we avoid
Plus "powerful" and "innovative" without proof. Generic phrases weaken trust.
The formatting rule
No em dashes in external copy. Anything a customer, prospect, or the public will read uses commas, full stops, or parentheses instead. Applies to web, email, listings, social, support, and AI-generated content.
Words you can ship verbatim
Approved headlines, taglines and boilerplate. Copy them exactly; consistency is the point.
"Never lose a purchase to a slow page"
Primary tagline: Turn speed into sales. · App Store sub-tagline: Speed that sells.
Boilerplate · Short
Whoosh is an AI-powered Shopify speed optimisation app that uses real shopper behaviour to improve load times, Core Web Vitals, and conversions.
Boilerplate · Medium
Whoosh is an AI-powered speed optimisation app built for Shopify. It intelligently orchestrates how third-party apps load, uses behavioural AI for predictive preloading, and tracks real-user performance tied directly to business outcomes. Faster stores, lower bounce rates, higher conversions.
Boilerplate · Long
Whoosh helps Shopify merchants turn speed into revenue. Using behavioural AI and real-user data, Whoosh intelligently optimises how third-party apps and scripts load, preloads pages shoppers are about to visit, and monitors Core Web Vitals in real time. Unlike static speed tools, Whoosh adapts to each store's traffic patterns, delivering improvements where they matter most. Setup takes minutes, no code required.
Canonical phrases · click to copy
Value props · priority order
Clean, technical, outcome-oriented
What pictures we use, and the ones we never do. Four families cover everything.
Real dashboard and storefront captures, legible at thumbnail size, with 15–24px rounded corners, flat on a brand-coloured backdrop or in a device frame.
Monochrome, ~28px tall, rendered in navy or desaturated. Current trust strip: TileCloud, NAKIE, FRANKIE4, Shopify Partner, LE.SHOP, Yabby.
Natural treatment. No filters, no greyscale, no borders. Sit next to a quote in Inter Display 32/500 with a bold name and a muted role line.
Large numbers as visual elements, set in Inter Display 40–88px with a single-line caption. The pattern below is the reference.
Never
Outlined, never filled
Quiet line icons that inherit text colour and never decorate. Feather-derived, ~290 icons in the Figma library.
Construction
24px artboard, 16px inner frame. Stroke 1.5–2px, rounded caps and joins.
Colour
Inherits the current text colour. Never tinted brand colours unless inside a coloured chip or status badge.
Sizes
24px default · 32px in feature cards · 16px inline. Always ≥8px from adjacent text. Never scale a 16px icon up.
Third-party marks
Partner and source logos (Google, Shopify, Akamai…) render as given. They are brand glyphs, not UI icons.
Flat, rounded, unhurried
The component language of getwhoosh.ai, for anything you build with us: decks, co-branded pages, embedded surfaces.
Cards & surfaces
- Radius: 15px cards · 24px large panels
- Padding: 24–32px inside cards
- Spacing unit: 12px. Use multiples: 12, 24, 36, 48, 60.
- Surfaces: white on light ·
#0F303B/#14161Aon dark - Shadows: none, or barely-there
0 1px 6px rgba(0,0,0,.06)
Header pattern
A centred white pill navigation floating on a coloured hero: logo left, links centre, CTAs right. The rail on this page is the docs-adapted version of the same idea.
Motion
Every entrance uses one curve. From opacity 0, scale 0.9, y +80px, over 2s, staggered 0.1–0.5s. Don't invent new choreography.
duration: 2s · stagger: 0.1–0.5s
Quote numbers without breaking trust
Whoosh's credibility is built on real data. These rules are mandatory in any co-marketing, PR, or partner content.
Get the files
Everything downloadable here is generated from the production vector artwork. For anything else, ask the team.
Downloads
Per-file SVG and PNG buttons live on each tile in the logo chapter. Fonts are free at rsms.me/inter.
Brand surfaces
Unsure about something?
Ask before you publish. And if this guide ever disagrees with the live site, the live site wins.