Brand

Variants

Pair each variant with the surface family it was tuned for. Mixing them — e.g. variant 1 on a dark surface — collapses contrast on either NEU or WO and breaks the wordmark.

Variant 1 — cyan + dark

neuwo-logo-1.svg

For light surfaces. NEU in --color-blue, WO in near-black. Use on print collateral, light-mode partner decks, and any white background.

Variant 2 — white + dark

neuwo-logo-2.svg

For brand-cyan surfaces — CTA bands, swatches, branded social tiles. NEU drops out to white so it doesn't disappear into the cyan, while WO holds the dark anchor.

Variant 3 — cyan + white

neuwo-logo-3.svg

For solid dark panels — CTA banners, footer surfaces, modal sheets. Cyan NEU keeps the brand recognition, white WO carries the readability.

Variant 4 — white + cyan In header

neuwo-logo-4.svg

For the page background itself — the slightly darker shade beneath every panel. White NEU dominates against the body, cyan WO becomes the brand accent. Currently wired into the site header.

Usage rules

A short list of what to do and what to avoid when placing the wordmark.

SVG at common sizes

Same source file (favicon.svg) at the four sizes the OS will most often render it.

1 · Inline stroke icons

Authored as <svg> in the markup — no sprite sheet, no icon font. Every icon uses fill="none" and stroke="currentColor" so a single declaration in the parent (or inheriting from --color-text) drives the colour everywhere. Sizes cluster around three values and stroke weights around 1.5 for body and 2 for emphasis. Stroke icons are never used as decorative artwork — if it isn’t a UI affordance, reach for the solution glyphs or an illustration.

<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="1.5"
     stroke-linecap="round" stroke-linejoin="round"
     aria-hidden="true">
  <path d="..." />
</svg>

Used by: the header (dropdown chevrons, hamburger toggle), the skip-link jump-arrow, the team-card links, the announcement-bar dismiss, the API-demo run spinner, the form-check checkmark, every footer social icon, and the blog-post body. Authored inline at each callsite — there’s no central icon component yet, so when an icon is reused in three places it gets duplicated three times. If a fourth use lands, that’s the cue to lift it into a Nunjucks include or a sprite.

2 · Solution glyphs

Five multi-colour SVGs in src/public/icons/solutions/, one per offering. Branded artwork rather than UI affordances — they ship with their own colours baked in (cyan, green, navy) so they don’t inherit currentColor. Used on the landing-page solutions grid as the headline visual for each card, and as supporting graphics in the header dropdowns.

The five solution glyphs

/public/icons/solutions/<slug>.svg

Used by: the landing-page solutions section, the per-solution hero on each /solutions/…/ page, and (smaller) the header Solutions / Advertisers / Developers dropdowns. Each glyph is a single SVG with embedded colour stops; never recolour them — if a different colour treatment is needed, that’s a request for a new variant, not a CSS override. Sizes range from 1.5 rem (dropdown) to 4 rem (card hero) to 5.5 rem (solution-page hero).

1 · Hero signal canvas

The dotted “signal” trails crawling along the landing-page hero are a single <canvas class="hero__signals"> element animated in src/js/hero-signals.js. Each “signal” is a head dot trailing 80 dimming segments along the grid; signals turn at intersections with a 30 % chance per cell and respawn off-screen. Colours read live from CSS variables (--signal-trail-r/g/b, --signal-trail-multiplier, --signal-dot) so the palette is theme-driven, not hard-coded.

2 · Blob fields

Floating colour washes behind hero and section backdrops. Each blob is an absolutely-positioned div with a single radial-gradient from a brand colour at low opacity to fully transparent — not a filter: blur() on a solid shape, which would destroy GPU performance. Each blob carries its own 40 s “ease-in-out infinite alternate” keyframe that drifts position by a few percent so the field feels alive without ever finishing a discrete loop the eye can latch onto.

Used by: the landing-page hero (/), and as a smaller-scale backdrop on the design-system header pattern previews. Reach for this whenever a section needs a hint of the brand without a hard-edged shape — never as the primary content.

3 · Ad placement renders

Nine SVG illustrations in src/public/solutions/monetisation-platform/, each a stylised render of an ad placement (in-screen, interstitial, double-medrec, vertical, top-in-screen, etc). Used inside the placement-tabs component on the monetisation-platform page; switching tabs swaps which SVG is shown. They’re intentionally diagrammatic — no real-page chrome, just enough geometry to communicate where the ad lives.

Placement library

/public/solutions/monetisation-platform/neuwo-placement--*.svg

Used by: the placement-tabs component on /solutions/monetisation-platform/ — one tab per file, switched by src/js/placement-tabs.js. Don’t reuse outside this context — the diagrammatic style is tied to the “here’s where this ad goes” story; if you need to point at a placement elsewhere on the site, link to the monetisation page rather than embedding the SVG standalone.

4 · Photographic accents

The production site uses photography sparingly — the rest of the system leans on flat colour, gradients, and SVG, so a real photograph reads as a deliberate pause. Contextual Audiences uses a real-world content shot beside the live classification demo, Bid Enrichment uses a sample article snapshot, and the landing-page Lumi-AI section uses a supercomputer backdrop. The Monetisation Platform card pairs light and dark UI screenshots so the right shot can be served per surface. The image files themselves live in the marketing repo, not in this design-system reference.