Blue Quest Design System

A working design system for Blue Quest Group — a Brisbane-based water-treatment company commercialising a pre-coat dynamic membrane filtration technology (Purus product range).

This folder is the canonical Blue Quest brand kit for design work: tokens, type, colour, logos, icons, product renders, photography rules, content tone, and a high-fidelity UI kit for the marketing website.

What is Blue Quest?

A once-in-a-generation water-treatment technology. Membrane purity at sand-filter economics.

Blue Quest Group is an Australian water-treatment company commercialising a pre-coat dynamic membrane — a self-renewing hydrate-gel filter that delivers 10 nm separation at 1,000 LMH and 1.8 bar. The chemistry was invented at one of Queensland's leading universities, published in Nature, and is now exclusively licensed to Blue Quest. The modular system is patent-pending. Engineering and assembly happen in Windsor, Brisbane.

The product line — Purus

Validated trials

ALS Laboratories–validated work on real water for CS Energy (Kogan Creek dam — 93% particulate reduction, ~10% OPEX improvement), Evolve Group (manufacturing chiller — $50k+/mo OPEX saved, 10 m head pressure restored), Terella Brewing, and Surf Lakes.

Sources

This design system is derived from a single attached codebase: Blue Quest Group (a Cloudflare Workers / WordPress preview project, hosted at https://bq-preview.mairsy71.workers.dev).

The codebase carries its own brand reference at Blue Quest Group/Brand/Design_System/, which I treated as the source of truth — Brand_Guidelines.md, css/tokens.css, css/components.css, the 16-icon set, three product renders, and a full logo lockup family were lifted directly. The live HTML mockups at Blue Quest Group/Website/mockups/ were the source of truth for visual treatment, layout rules, and component composition.

No Figma was attached. If a Figma design context exists separately, link it next and I'll align this kit to it.

Index — what's in this folder

README.md                  ← this file
SKILL.md                   ← Agent-Skill manifest (cross-compatible with Claude Code)
colors_and_type.css        ← Tokens + semantic type roles (use this in HTML)

assets/
  logo/                    ← Primary, mono, reversed, mark, favicon — SVG + PNG
  icons/                   ← 16-icon stroke set, 24x24 viewBox, currentColor
  product-renders/         ← Purus 50.2, 100.5, 100.20 — SVG + PNG
  case-studies/            ← Existing case-study artwork (PNG)
  social-templates/        ← Pre-built stat / case-study social cards (SVG)
  banners/                 ← Display banner sizes (SVG)

reference/
  tokens.css               ← Verbatim copy of the codebase's tokens.css
  components.css           ← Verbatim copy of the codebase's components.css

ui_kits/
  website/                 ← React JSX UI kit for the marketing site
    index.html             ← Interactive prototype (home → product → contact)
    *.jsx                  ← Components (Nav, Hero, ProductCard, CaseCard, etc.)
    README.md

preview/                   ← Design-system tab cards (registered as assets)

CONTENT FUNDAMENTALS

The Blue Quest voice is editorial, technical, confident, investor-grade. It is not a "we're passionate about water" voice. Long sentences are fine when they earn it; short sentences land the punch.

Voice

• Confident without superlatives. Specific, not boastful.
• Technical but readable. The audience is engineering and procurement leads.
• Pioneering — this is a once-in-a-generation technology, and the copy carries that weight.
• Investor-grade — honest about qualifications ("indicative", "company forecast", "no independent audit performed"). The honesty is the credibility signal.

Tone

• Numbers earn their place: 10 nm · 1,000 LMH · 1.8 bar · 6-log · 77% recovery · <12 month payback.
• Casing: sentence case in headlines. Title case only for proper nouns and product names (Purus 50.2, Purus 100.5, Purus 100.20).
• Australian English throughout — metres, tonnes, litres, centre, favourite. Em-dash with spaces.
• Units: kL/day at unit level, m³/day at plant level, ML/day at utility/pilot scale.
• Person: third-person mostly. "We" sparingly, in About / careers contexts. "You" only in CTAs ("Ready to see your numbers?").
• No emoji. No exclamations. No emoji-as-icon hacks.

The italic-serif accent — the signature device

In otherwise sans-serif copy, one or two words per headline are styled in italic Cormorant Garamond, usually in royal blue. This is the Blue Quest typographic move and the single most recognisable element of the voice.

Examples lifted from the live mockups:

• "A once-in-a-generation water-treatment technology."
• "Membrane purity at sand-filter economics."
• "A self-renewing hydrate gel."
• "The first technology that doesn't compromise."
• "From Australian laboratory to global water."
• "Independently validated. On real water."
• "Engineered in Brisbane."
• "Built for the toughest water duties."

Use sparingly — one or two words per headline, never on supporting copy.

Yes, write like this

• "1,000 LMH at 1.8 bar — gravity-class power draw."
• "Hardware seeds the relationship; gel chemistry compounds; engineering and service hold the customer."
• "It will never go down."
• "Ready to see your numbers?"

No, avoid

• "Solutions provider for your water needs." (vague)
• "We're passionate about water." (corporate filler)
• "Best-in-class filtration." (unprovable superlative)
• "Disrupting the water space." (jargon-as-substance)
• Any hyperbolic claim not backed by ALS-validated data.

The hard rule on the university

Never name the originating university in customer-facing material. Use "a leading Queensland university" or "one of Queensland's leading universities". Internal docs can reference the source; anything that ships externally follows the generic phrasing. (Rule introduced in Brand_Guidelines v2.1, May 2026.)

The public/internal line

Customer-facing material talks about what the technology does for buyers (specs, case studies, payback). Investor material covers raise specifics, forecasts, and Indonesian expansion strategy. Do not mix. See Blue Quest Group/Brand/Design_System/CONTENT_LIBRARY.md for the canonical list of what's public vs. internal-only.

VISUAL FOUNDATIONS

The Blue Quest visual system is editorial technical: deep navy authority, royal-blue actions, aqua flow accents, and italic-serif punctuation. Two co-existing treatments — investor/digital (navy-dominant) and editorial (cream-dominant).

Colour

Two treatments. Both correct; choose by audience.

• Treatment A — Investor / digital. Navy + royal + aqua, white surfaces. Used for the website hero, the Commercialisation Plan covers, the logo backdrop. Navy carries 60–70% of visual weight.
• Treatment B — Editorial. Cream (#F2EBDA) page background with navy body and royal italic accents. Used for the Information Memorandum and long-form white papers — never the website body.

Workhorse rules:

• Royal Blue (#1E5BC6) is the action colour — primary buttons, links, key stat numbers, italic accent words.
• Aqua (#5DBCD2) is the flow accent — big stats on dark backgrounds, chart series, eyebrows, decoration.
• Red (#E63946) is reserved for the logo and rare high-energy moments — never as a body or section background. The logo carries enough red on its own.
• Cream is editorial / print only. The website body is white or --bq-paper.
• Semantic: Success #10B981 · Warning #F59E0B · Danger #EF4444. Info maps to Royal.

Type

A four-family stack. Each has a distinct job; no substitution within a job.

Modular scale 1.25× from a 16px base — see colors_and_type.css. Slightly negative tracking on display (-0.02em); wider tracking on eyebrows and labels (+0.08em).

Spacing & rhythm

4px base unit, 1–32 step scale. Sections pad var(--bq-space-16) on mobile, var(--bq-space-24) on desktop. Container max-widths: 1280px (default) and 880px (narrow / editorial).

Backgrounds

• No gradients in body content. The only gradient in the system is the hero — linear-gradient(135deg, navy-deep → navy) at 135°. Nowhere else.
• No textures, no patterns, no hand-drawn illustrations. The brand is engineered, not whimsical.
• Section background rotation across a page: white → paper (#F8FAFC) → white → navy → white. This is the rhythm used on the home page; copy it for new pages.
• Full-bleed imagery is reserved for product photography and case-study hero shots (when those exist — see Photography below).

Borders, radii, shadows

• Corner radii are restrained. Buttons 6px (--bq-radius-md), cards 12px (--bq-radius-xl), pills 9999px (full). No 24px+ "soft" radii; this is not a consumer fintech.
• Borders are 1px solid var(--bq-mist) (#E2E8F0) on cards; 1.5px on form inputs and outlined buttons.
• Shadow system is navy-tinted (not black) at four levels — sm/md/lg/xl. Shadows show up only on hover or for elevation; flat surfaces stay flat.

Animation & motion

• Easing: ease-out only. Three durations — 0.15s (micro), 0.25s (default), 0.4s (slow). No bounce, no spring, no easing curves with overshoot.
• Hover transitions: colour shift + 1px translate-Y up + shadow-md on cards/buttons. Subtle and brief.
• No fades, no scroll-triggered reveals, no parallax. Static layouts with crisp hover/press states.

Hover states

• Primary button: royal → royal-hover (#1648A8) + translateY(-1px) + shadow-md.
• Secondary button: navy → navy-deep.
• Ghost button: background fills with aqua-pale, text shifts to royal-hover.
• Card: border mist → aqua + shadow-md + translateY(-2px).
• Nav link: text colour navy → royal.

Press / active states

• No shrink-on-press; no scale transforms. Active state is a darker shade (royal → royal-hover) and the lift is removed.

Focus

• Visible focus ring on every interactive element: outline: 3px solid var(--bq-aqua) with outline-offset: 2px. WCAG AA contrast must hold. Never remove the outline without replacing it.

Transparency & blur

• Used only on dark hero backgrounds — the stat strip's top border is rgba(255,255,255,0.15); the footer's border-top is rgba(255,255,255,0.08). No backdrop-blur. No glassmorphism.

Layout rules

• Sticky nav at the top — white surface, mist bottom border, no shadow.
• Hero is one fixed pattern: eyebrow / big number + headline split / lede / CTA row / 4-up stat strip across the bottom.
• Stats live in two contexts: inline on dark (aqua numerals) or stat card on aqua-pale (navy numerals).
• Case studies use a 2-column card on aqua-pale: narrative left, big-number right, mono caption underneath, success-pill validator tag.

Photography & imagery — what the brand wants

• Three official product renders (Purus 50.2 / 100.5 / 100.20) — already in assets/product-renders/. Always shown on a navy background.
• Real-environment site photography of Purus units on customer sites (CS Energy Kogan Creek, Evolve, eventual NTB pilot sites) — commission, not yet shot.
• Lab + manufacturing photography at the Windsor, Brisbane facility — commission, not yet shot.
• People in PPE on site — engineering credibility. Commission, not yet shot.

Colour vibe of imagery: cool, daylight-balanced, low-grain, high-detail. Not warm. Not stylised. Not painterly.

Avoid (visual)

• Bluish-purple gradients (this is a navy + aqua brand, not a SaaS pastel one).
• Stock "water" imagery — drops on leaves, blue waves, pristine droplets.
• Emoji as iconography. Emoji at all.
• Pictogram clusters or "cards with rounded left-border accent".
• Hand-drawn SVG illustrations.
• Overly polished CGI of unrealistic factory scenes.

ICONOGRAPHY

Blue Quest ships a bespoke 16-icon set tuned for the water-treatment domain. They live in assets/icons/.

The set

arrow-right · bolt · chart-up · check · clock · dollar · drop · drop-clean · filter · flow · gear · industry · leaf · membrane · mining · recycle · shield

Specifications

• Format: SVG, individual files
• Viewbox: 24×24
• Style: Stroke-based, 1.75 stroke width
• Colour: stroke="currentColor" — icons inherit text colour from their parent. Set color on the container, not on the SVG.
• Display sizes: 24px inline · 32px in lists · 48px in vertical feature cards (where the icon sits inside a 48×48 aqua-pale rounded tile)

Usage rules

• Use the bespoke set first. If a needed glyph isn't in the set, request a new icon in the same stroke style — don't substitute Lucide / Heroicons inline; consistency of stroke weight is part of the brand.
• No emoji. Anywhere. The brand is engineering-credible.
• No unicode glyphs as icons (✓, →, ★, etc.) — use the SVG equivalents from the set. The arrow-right icon replaces →; check replaces ✓.
• No icon fonts. The CSS font ecosystem is reserved for the four typefaces.
• Inline SVG colour mode: wrap icons in elements that set color to the desired stroke colour. The 48×48 "icon tile" pattern uses background: var(--bq-aqua-pale); color: var(--bq-royal); on the tile.

What we don't have yet

• A few semantic glyphs that may be needed for future pages: download, play, external-link, chevron, menu (hamburger), close (x), search, mail, phone, linkedin. Flag these to the user — they need to be commissioned in the same stroke style.

Logo

Primary lockup: dot-ring mark + "BLUE QUEST" royal-blue wordmark. The mark is ~40 dots (royal / red / aqua / gray) in a circle that opens to the right with the dots dispersing outward — particles being filtered out of water.

Variants in assets/logo/:

Rules:

• Minimum clear space = the height of the mark itself.
• Minimum width: 140px digital / 32mm print.
• Never stretch, recolour, rotate, drop-shadow, place over busy photography without a backdrop, or recreate from text.

UI Kits

Only one product surface exists in the codebase — a marketing website (mockups + WordPress theme starter). There is no separate mobile app, dashboard, or internal tool in scope.

SKILL.md

SKILL.md makes this folder loadable as an Agent Skill in Claude Code. Drop the folder into a .claude/skills/ directory and invoke as blue-quest-design.

Caveats & known gaps

• No Figma was attached. If one exists, link it and I'll align tokens, spacing, and components against it.
• Fonts are loaded from Google Fonts, not bundled. Brand_Guidelines confirms all four families are free Google Fonts — no fonts/ folder needed. If self-hosting is required for the production site (Cloudflare may not always have outbound to Google), let me know and I'll bundle the woff2 files.
• Photography is unshot. Site, lab, and customer photography are all "commission, not yet shot" per Brand_Guidelines §9. The kit uses product renders and aqua-pale media placeholders in their place.
• Some semantic icons are missing (download, play, menu, close, external-link, search, mail, phone, linkedin). Flagged above.
• Indonesian / NTB content is internal-only. Per CONTENT_LIBRARY, the Indonesian operation does not yet exist; do not put it on the public website.

v1.0 · Built 2026-05 from Blue Quest Group codebase v2.0 / v2.1 Brand_Guidelines.