Brand

The logo is the one thing in this system a consumer may not restyle. Everything else here — colour, type, spacing — is a token you compose with. The mark is a fixed object: you place it, you size it, you give it room, and that is the whole permitted range.

The mark

Two blue forms turning around a shared centre. It stands alone wherever the name is already present or the space is too small for words — the app icon, the favicon, the avatar in a review row, the embed badge.

The mark is one object in two fixed colours, and it does not change with the background. There is no ink version and no white version, because the two blues carry enough of their own contrast to hold on light and dark alike. That is the single most useful property of this artwork: one file, everywhere.

The third tile is the one failure case: the mark's own dark blue is Scout Blue, so on a Scout Blue ground half the artwork disappears.

The lockup

The mark plus the wordmark, used wherever the name has to be readable — the site header, a document cover, a partner page, an email signature.

• The mark is fixed; only the wordmark changes. That is why lockup.svg sets the wordmark to currentColor — inline it and the name inherits the ink around it, in both themes, from one file.
• lockup-ink.svg and lockup-white.svg exist for <img>, email and anywhere CSS cannot reach. Pick by the background you are placing it on, not by the current theme.
• The gap between mark and wordmark is part of the artwork, not a layout decision — which is why the lockup ships as one file and is never assembled from two.
• The wordmark is never set live. The delivered file carries outlined paths. Typing “Sporting Scouter” next to the mark in DM Sans Bold produces something close enough to look like a mistake and far enough to be one.
• Never lock the mark to another logo. Co-branding is two logos separated by clear space and a hairline rule — never a combined mark.

Stacked

The same two elements, mark above wordmark, at 705 : 525 — 1.34:1. It exists for spaces the horizontal lockup cannot survive: an app store tile, a square avatar, a sponsor board, a portrait document cover. It is not a stylistic alternative — use the horizontal lockup unless the space forces the stacked one.

Clear space

Clear space is measured in X, where X is half the mark’s height. Nothing enters that zone — not type, not a rule, not a photograph edge, not another logo. At the minimum sizes below, X is small enough that the constraint costs you almost nothing; at display sizes it is what stops the mark reading as part of a headline.

X = half the mark height — the mark, not the lockup. For a 48px mark, that is 24px on every side.

Minimum size

Every minimum below is a height, because the mark is taller than it is wide and height is what governs legibility.

On backgrounds

Misuse

Six things that will happen if this section does not exist.

Colour

The wordmark in the delivered files is #3D3D3D, a shade off the system’s #333333 ink. Inline lockup.svg and currentColor resolves the difference; the <img> files keep the brand value.

Writing the name

Organisers & partners

Most people who touch this mark do not work here — they are organisers embedding a rating on their own event site. The embed ships the lockup for them, correctly sized and correctly spaced, which is the whole reason it ships as one file.

• The embed is used as delivered. Restyling it, removing the lockup, or detaching the link back to the event page ends the right to use it.
• “Rated on Sporting Scouter” is accurate. “Certified by”, “Approved by” and “Official partner” are not. We publish what athletes said; we do not certify events, and no rating implies a relationship.
• A screenshot of a rating is fine. An edited one is fraud. The number, the count and the date travel together — a score without its review count is unfalsifiable.
• The mark is never anyone else’s favicon, app icon or avatar, and it never appears in a partner’s own lockup.

File set

Three icon files, three jobs. favicon.svg scales and themes; favicon.ico is the legacy fallback for browsers that ignore SVG; apple-touch-icon.png is opaque on purpose — iOS composites a home-screen icon onto its own rounded card and discards alpha, so a transparent PNG gets a black square behind it. No other sizes are needed: every current browser and OS derives the rest from these three.

The complete set — fourteen files, and nothing else lives in /assets/brand/. The names are load-bearing: the embed, the site header and the OG tags all reference them, so renaming a file is a breaking change. If a filename is not in this table, it does not exist — do not reason by analogy from the lockup names, because the mark has no -ink or -white variant and never will.

What every delivered file must satisfy

• No live text. The wordmark is outlined paths, so it renders without DM Sans installed.
• A viewBox on every SVG, so the file scales. No hard-coded width without one.
• No baked-in background. A rectangle behind the artwork ties the file to one surface colour — the delivered dark lockup shows exactly this failure.
• role="img" and an accessible name reading “Sporting Scouter” — the mark is content wherever it is the only thing naming us.
• No embedded raster, no filters, under 4KB. The embed budget is 12KB for script, styles and mark together.