DRAFT — internal review only · not for public distribution · 21 May 2026

Blue Quest Group · pre-launch review

The Blue Quest brand, ready for your review.

One link for the team. A working draft of the marketing site, and the full design system behind it — colour, type, components, logo, and the rules that hold it together. Click through, and send your notes before we go public.

View the site draft Explore the design system
The site draft

The marketing site, in progress.

This is the live work-in-progress build of the Blue Quest Group website, hosted on Cloudflare. It is not final — layout, copy and imagery are still moving. Open it, walk the pages, and note anything that needs a change.

Live preview · Cloudflare

Blue Quest Group website

Home, product and contact pages. Built on the design system shown below. Best viewed on desktop while we finish the responsive pass.

Open the live site → bq-preview.mairsy71.workers.dev
Blue Quest Group
The design system

Every piece of the system, on one page.

Thirty reference cards covering the full Blue Quest visual language. Each one opens in a new tab. Use these to sense-check the site draft above — if something on the site doesn’t match a card here, that’s a note worth raising.

Colour

5 cards
Brand palette — digital Treatment A: investor / digital. Navy-dominant, royal actions, aqua accent. Open card → Brand palette — editorial Treatment B: editorial / IM. Cream-dominant — print and long-form only. Open card → Neutrals Text and surface greys — ink, slate, fog, mist, paper. Open card → Colour on dark How navy backgrounds carry aqua, white and mist. Open card → Semantic colours Success, warning, danger and info states. Open card →

Type

5 cards
Display type Space Grotesk, 700 weight, −0.02em tracking — headings and big stats. Open card → Body type Inter, 400–700 — all running text, UI and forms. Open card → Editorial accent Cormorant Garamond italic — the signature one-or-two-word accent. Open card → Eyebrows & labels Space Grotesk 600, uppercase, +0.08em tracking. Open card → Mono JetBrains Mono — spec data, technical metadata and tags. Open card →

Components

11 cards
Buttons Primary, secondary, outline and ghost — with size variants. Open card → Navigation Sticky white nav with a mist bottom border. Open card → Vertical card Icon tile, heading and body — the workhorse feature card. Open card → Product card Navy media well with a spec eyebrow and body copy. Open card → Case-study card Narrative, a giant number and the ALS validator pill. Open card → Stat card A big number on an aqua-pale surface. Open card → Stat band Inline stats on a dark background, aqua numerals. Open card → CTA band The closing call-to-action section. Open card → Pills & badges Capability tags and status badges. Open card → Pull-quote Cormorant italic pull-quote on cream. Open card → Form fields Input, select and textarea — 1.5px border, royal focus ring. Open card →

Brand

6 cards
Logo & lockups Primary lockup plus mono, reversed and mark-only variants. Open card → Iconography The bespoke stroke-icon set — 24×24, 1.75 stroke, currentColor. Open card → Product renders The three Purus configurations, always shown on navy. Open card → Hero treatment The fixed hero pattern — gradient, headline split, stat strip. Open card → Imagery rules What the brand wants in photography — and what to avoid. Open card → Social templates Pre-built stat and case-study social cards. Open card →

Spacing & surfaces

3 cards
Spacing scale 4px base unit — the 1–32 step scale. Open card → Radii Restrained corners — pills go full, nothing beyond 16px. Open card → Shadows Navy-tinted elevation — four levels, sm to xl. Open card →

The written brand guidelines

The full system in words — voice, the public-versus-internal line, colour treatments, iconography rules and known gaps. Worth a read before you give notes.

Read the guidelines →