Brand documentation · v2.1.1-AAA · WCAG 2.2 Level AAA via Easy Read mode
Brand Guidelines · Volume 01

How we look,
how we sound,
how we hold up.

Valve Warehouse Australia is a supply authority. The brand exists to reinforce three things: inventory depth, technical accuracy, and same-day dispatch. This document protects them.

Version 2.1.1-AAA · April 2026
Status Locked & production-ready
Compliance WCAG 2.2 AAA
Stack Bootstrap 5.3 + SCSS tokens
Section 01 · Foundation

What we are,
and what we aren't.

Valve Warehouse Australia is a supply authority. We sell to licensed plumbers, hydraulics engineers, facilities teams, and trade accounts across Australia. Our credibility is built on three things: inventory depth, technical accuracy, and same-day dispatch. The identity exists to reinforce those three things — never to decorate around them.

Three principles

The brand promise, reduced

01
Stocked deep

Every major manufacturer, every thread standard, every pressure rating. The catalogue is the product.

02
Shipped fast

Same-day dispatch from Victoria to every postcode. Speed is the service layer on top of inventory.

03
Known by trade

Built for people who know what a PRV is. We don't explain the basics — we stock the right one.

Audience

Who we write for

Our primary reader is a working tradesperson, typically between jobs on a ute or in a workshop. They are time-poor, technically fluent, and tired of being sold to. Respect their expertise — don't perform.

Section 03 · Colour

Six theme roles,
strict semantics.

Colour is a system, not a palette. Every value maps to a Bootstrap theme variable and a real meaning on the site — primary actions, secondary accents, stock states. Tap any hex value to copy.

Deep Meridian
$primary · Authority, navbar, hero, body text
#0A1F2E HEX 10·31·46 RGB PMS 2767 C PANTONE
Brass
$secondary · Premium accent, trade tier, brass band
#C9A961 HEX 201·169·97 RGB PMS 7563 C PANTONE
Verdigris
$success · Highlight badge & text
Button uses #1F5A3F (AAA for white text)
#2E7D5B HEX #1F5A3F BTN PMS 349 C PANTONE
Slate
$info · Info / status, neutral notices
#446083 HEX 68·96·131 RGB PMS 7546 C PANTONE
Aged brass
$warning · Caution / non-destructive notice
Subtle bg only — solid fill fails AAA with white text
#B88A2E HEX 184·138·46 RGB PMS 124 C PANTONE
Signal
$danger · Alert badge & text
Button uses #9A2E25 (AAA for white text)
#B8392E HEX #9A2E25 BTN PMS 7621 C PANTONE
Porcelain
$light · Surfaces, cards, well backgrounds
#FAFAF7 HEX 250·250·247 RGB 11-0601 TPG PANTONE
Midnight
$dark · Footer, deepest backgrounds, top bars
#06151F HEX 6·21·31 RGB Black 6 C PANTONE
Section 04 · Tint & shade scales

Nine stops,
four hues.

For every brand colour we maintain a 100→900 scale. The 500 stop is the canonical brand value. Lighter stops drive subtle backgrounds and borders; darker stops drive emphasis text and active states.

Navy scale · $primary
100#E7EBEE
200#C5CCD3
300#A8B5C0
400#7A8FA0
500#4F6A82
600#2A4256
700★#0A1F2E
800#091B29
900#06131E
Brass scale · $secondary
100#F9F3E3
200#F1E5C0
300#E2CC93
400#D5BA77
500★#C9A961
600#A88B4B
700#876E38
800#6B5628
900#4F3F1B
Slate scale · $info
100#EDF1F6
200#D5DEEA
300#A8BCD1
400#7A9BB5
500#5A7B98
600★#446083
700#34506E
800#28405A
900#1C3148
Pewter scale · neutrals
100#FAFAF7
200#F5F5F3
300#E5E5E0
400#C8C9C5
500#8A9098
600#677581
700#4A5A68
800#2A3A48
900#06151F

★ marks the canonical brand value used in --bs-primary, --bs-secondary, --bs-info respectively.

Section 05 · Typography

Three families,
one system.

Barlow Condensed for display and headings — echoes the logo's industrial weight. Barlow for body — warm, legible, highly readable in long form. JetBrains Mono for technical specifications — SKU codes, part numbers, measurements, pressure ratings. All three are available free through Google Fonts.

Display · Barlow Condensed 700 clamp(2.25rem, 5vw, 3.75rem)
Every valve.
Every pressure.

For hero headlines, category signage, packaging lock-ups, and any moment that needs to feel like a printed catalogue cover. Always uppercase, letter-spacing 0.005em, line-height 0.95.

Heading · Barlow 600 1.5rem (24px)
Victoria's deepest valve inventory, dispatched same-day.

For section headings, product titles, card headers. Sentence case, negative tracking. Use weights 500, 600, 700 for hierarchy within the family.

Body · Barlow 400 1rem (16px)

Stocked deep across seventeen categories. Ball, gate, check, pressure-reducing, thermostatic, solenoid. Every fitting, every thread standard, every pressure rating from domestic mains to heavy industrial.

For all running body text — product descriptions, emails, technical specifications, blog posts. Line-height 1.65 for long-form legibility.

Technical · JetBrains Mono 500 0.875rem (14px)
SKU-VW-BV-1200  ·  BRASS BALL VALVE  ·  1/2" BSP  ·  20 BAR

Reserved for SKU codes, order numbers, measurements, part specifications, and any machine-readable string. Never use for body copy.

Section 06 · Voice

How we write.

Australian trade English is plain, direct, and slightly understated. We write for people who already know the trade — we don't explain, oversell, or perform enthusiasm. The inventory does the persuasion.

Three voice principles
01
Specific beats impressive

"Dispatched from Victoria at 2pm" beats "fast shipping". Concrete detail is the proof.

02
Understated beats loud

Never use exclamation marks. Never write in all caps outside of headlines or logos.

03
Respect beats sell

Assume the reader knows the trade. Don't explain what a PRV is. Stock the right one.

Vocabulary
We say
  • Stocked deep.
  • Dispatched same-day from Victoria.
  • Every major manufacturer.
  • Trade accounts welcome.
  • The valve you need, in stock.
  • Ask us about spec match.
We do not
  • Your plumbing partner!
  • Australia's best prices.
  • Quality you can trust.
  • Call us today for a quote!
  • No valve too big or too small.
  • We're the experts.
Section 07 · Copy in context

Examples from real
customer moments.

The voice lives or dies in these touchpoints — stock alerts, shipping updates, backorder notices, welcome emails. When in doubt, cut adjectives. When still in doubt, cut the whole sentence.

Product page · stock status
Do

In stock — 1,240 units. Dispatched same-day if ordered before 2pm AEST.

Specific number, concrete cutoff, no hype.

Don't

Great news! Plenty in stock and ready to ship fast!

No numbers, two exclamation marks, treats the tradesperson like a retail shopper.

Backorder notice
Do

Backorder — next shipment arriving 8 May. We'll dispatch your order the same day it lands.

Real date, clear action, no apology theatre.

Don't

So sorry! This item is temporarily unavailable but we're working hard to get it back in stock soon.

Padded with emotion, vague on timing, apologetic without useful information.

Trade account welcome
Do

Your trade account is active. Trade pricing applies to every SKU in the catalogue.

Confirms the fact, names the benefit, ends.

Don't

Welcome aboard! We're so excited to have you as part of the VWA family!

Family language, exclamation mark, no actual information about what changed.

Homepage hero
Do

Every valve. Every pressure. Every trade. Australia's deepest valve inventory, dispatched same-day from Victoria.

Rhythm, scope, proof. Tells you what they do and where.

Don't

Welcome to VWA — your one-stop shop for all your plumbing needs!

Generic, meaningless, indistinguishable from every other trade site.

Section 08 · Components

Live in the wild.

Reference examples of the brand applied to the highest-traffic UI components on the site: buttons, stock-status badges, inline alerts, and forms. Every example below is a real Bootstrap component — you can right-click and inspect to copy markup directly.

Buttons

Primary · Brass · Outline

Default state
Sizes
Stock status badges

Four states, semantic colour

Inline pill badges
In stock · 1,240 Low stock · 12 Shipping · 342 Backorder · 0
Alerts

Inline status messaging

In stock — dispatched today

Your order of 24 brass ball valves will ship from Victoria by 2pm AEST.

Low stock — 6 units remaining

Order soon to secure current batch. Next reorder: Friday.

Shipping — expected 23 April

Tracking number has been sent to your registered email.

Backorder — 5 to 7 business days

Manufacturer restock confirmed. We'll dispatch the same day stock lands.

Forms

Trade input pattern

Login form (extracted from homepage)
Section 09 · Token reference

For the build team.

The complete SCSS token file is the single source of truth. The snippet below is the override layer used at runtime via Bootstrap CSS custom properties. For production, compile _vwa-tokens.scss with Bootstrap source instead of using the CDN.

Bootstrap theme overrides (CSS custom properties)
:root {
  /* Theme colors — AAA-tuned for buttons where white text sits on */
  --bs-primary:   #0A1F2E;  /* Deep Meridian · 16.82:1 with white */
  --bs-secondary: #C9A961;  /* Brass · 7.47:1 with navy */
  --bs-success:   #1F5A3F;  /* Verdigris-dark · 8.10:1 with white (button) */
  --bs-info:      #446083;  /* Slate · Shipping */
  --bs-warning:   #B88A2E;  /* Aged brass · Low stock */
  --bs-danger:    #9A2E25;  /* Signal-dark · 7.52:1 with white (button) */
  --bs-light:     #FAFAF7;  /* Porcelain */
  --bs-dark:      #06151F;  /* Midnight */

  /* Body & text — all pairs AAA on white AND porcelain */
  --bs-body-color:      #0A1F2E;
  --bs-secondary-color: #3A4752;  /* 9.12:1 on porcelain, AAA */
  --bs-tertiary-color:  #445360;  /* 7.57:1 on porcelain, AAA */
  --bs-border-color:    #E5E5E0;

  /* Typography */
  --bs-body-font-family: 'Barlow', -apple-system, sans-serif;
  --bs-font-monospace:   'JetBrains Mono', ui-monospace, monospace;
  --bs-body-font-size:   0.9375rem;
  --bs-body-line-height: 1.65;

  /* Brand-specific (not in Bootstrap) */
  --vwa-brass-800:     #665226;  /* Link hover, 7.50:1 AAA */
  --vwa-input-border:  #6B7A85;  /* 4.42:1, exceeds §1.4.11 */
}
Compliance summary
WCAG 2.2 results · v2.1.1-AAA
Body navy on white 16.82 : 1 AAA
Body secondary on porcelain 9.12 : 1 AAA
Tertiary text on porcelain 7.57 : 1 AAA
Brass ⇄ Navy (button) 7.47 : 1 AAA
Link hover (brass-800) 7.50 : 1 AAA
Danger button (signal-dark) 7.52 : 1 AAA
Input border (UI §1.4.11) 4.42 : 1 AAA-UI
Alert borders (all 6) 3.25–4.82 : 1 AAA-UI
Focus ring vs white 16.82 : 1 AAA-UI
Hand-off checklist · v2.1.1-AAA
  • Compile _vwa-tokens.scss v2.1.1-AAA + Bootstrap source
  • Self-host the three Google Fonts (no CDN dependency in prod)
  • Serve both voices: default (trade) and Easy Read (?voice=plain)
  • Publish /glossary/ and /accessibility/ pages
  • QA on iPhone SE (375px) and 12-inch laptop (1280px)
  • Run Lighthouse, axe DevTools, and WAVE sweeps
  • Manual keyboard-only and screen-reader pass (NVDA + VoiceOver)
Utility classes · colour

The Bootstrap colour utilities,
applied to the VWA system.

Every theme token above is exposed through Bootstrap 5.3's standard utility classes. Use these in markup whenever possible — they keep the system tokens as the single source of truth, and they automatically inherit any palette change made in _vwa-tokens.scss.

For the canonical reference see Bootstrap utilities · Colors and Helpers · Color & background. The tables below show only the live render of each utility against the v2.1.1-AAA tokens — every pairing has been audited for AAA contrast.

Text colour utilities · .text-*
Class Live render Use for
.text-primary Sample text Brand emphasis links and highlighted content
.text-primary-emphasis Sample text Strongest brand emphasis on light bg
.text-secondary Sample text Brass accents — use sparingly
.text-success Sample text Confirmation, positive state
.text-success-emphasis Sample text Strongest confirmation, e.g. on subtle bg
.text-danger Sample text Errors, alerts, destructive
.text-danger-emphasis Sample text Strongest error tone, on subtle bg
.text-warning Sample text Caution — never on white text
.text-warning-emphasis Sample text Caution on subtle warning bg
.text-info Sample text Neutral status, dispatch info
.text-info-emphasis Sample text Strongest neutral on subtle bg
.text-body Sample text Default body — same as no class
.text-body-emphasis Sample text Highest contrast body — headings, leads
.text-body-secondary Sample text Supporting copy, captions
.text-body-tertiary Sample text Hints, placeholders, light meta
.text-black Sample text True black — rarely used
.text-white Sample text Reverse-on-dark — always pair with dark bg
.text-black-50 Sample text ⚠ Fails AAA on white (3.40:1) — avoid for text
.text-white-50 Sample text ⚠ Use only for decorative, non-essential text
Background utilities · .bg-*

Solid backgrounds. When using as a fill behind text, prefer the .text-bg-* helpers below — they automatically pair the right foreground colour.

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
Color & background helpers · .text-bg-*

The recommended pattern for badges and pill-shaped status markers — for most theme colours. .text-bg-* sets background and a contrasting foreground in one class. Two helpers in this set fail AAA at the system's 7:1 floor and should not be used — see the note below.

.text-bg-primary .text-bg-secondary .text-bg-success .text-bg-danger .text-bg-warning .text-bg-info .text-bg-light .text-bg-dark
AAA constraint · do not use

.text-bg-warning pairs aged brass #b88a2e with white at 3.13:1 — fails AAA. .text-bg-secondary pairs brass #c9a961 with white at 2.25:1 — also fails. Both helpers exist in Bootstrap because their default palette values can carry white text; the VWA palette values can't.

Use the subtle triad instead.bg-warning-subtle .text-warning-emphasis .border .border-warning-subtle hits 7.72:1 AAA. The same pattern works for secondary. See the next demo block for both.

Subtle triads · .bg-*-subtle + .border-*-subtle + .text-*-emphasis

The three classes are designed to compose. Every triad is AAA-verified — see §6 Voice & the alert reference in §8 Components for application examples.

Primary triad · informational primary alert
Secondary triad · brass-tinted accent panel
Success triad · 1,240 in stock · dispatched same-day
Danger triad · backorder · next ship date 8 May
Warning triad · low stock · 12 remaining
Info triad · shipping · estimated arrival 26 April
DO

Reach for .text-bg-* when filling a badge or pill — Bootstrap picks the AAA-correct foreground for you.

DO

Combine the three subtle classes (bg-*-subtle + border-*-subtle + text-*-emphasis) for inline status messages and alerts.

DO

Use .text-body-secondary and .text-body-tertiary for hierarchy in body copy — both pass AAA on white and porcelain.

DON'T

Don't use .text-warning or .text-secondary on white surfaces for body text — both fail AAA. Use the -emphasis variants on the matching subtle bg instead.

DON'T

Don't use .text-black-50 or .text-white-50 for any text that conveys information — they fail AAA contrast and are reserved for purely decorative type.

DON'T

Don't combine .bg-* with arbitrary .text-* classes by hand — the text-bg-* helper exists to prevent accidental contrast failures.

Section 10 · Accessibility

WCAG 2.2 Level AAA,
with a clear scope.

VWA publishes this brand system as WCAG 2.2 Level AAA conformant via the supplemental-version pathway permitted by the standard. The main site keeps the trade voice. Everyone who needs plain-language content reaches it through a persistent toggle in the top bar: Easy Read. This section documents exactly what's covered, exactly what's out of scope, and the testable ratios behind the claim.

The scope in plain terms

What AAA means here

IN

§1.4.6 Contrast (Enhanced) — all text pairings hit 7:1 or higher. Large display type clears 4.5:1.

IN

§1.4.11 Non-text Contrast — input borders, alert borders, and all functional UI boundaries hit 3:1 or higher.

IN

§2.4.11 & §2.4.12 Focus Not Obscured — focus indicator is never partially or fully obscured by fixed headers, cookie banners, or overlays.

IN

§2.4.13 Focus Appearance — 3px ring with 2px contrasting offset. Navy on light surfaces, brass on dark surfaces.

IN

§2.5.8 Target Size — every interactive element has a minimum 44×44 CSS pixel touch target.

IN

§3.1.5 Reading Level, §3.1.3 Unusual Words, §3.1.4 Abbreviations — satisfied by the Easy Read supplemental version (see Section 11).

OUT

Native video or audio — the catalogue doesn't use either, so §1.2.3–1.2.9 don't apply.

OUT

Third-party embedded content (external maps, social widgets, live chat) — not used; would be assessed separately if added.

OUT

User-generated content — there isn't any. If product reviews are added later, §3.1.5 would need a content-moderation policy.

OUT

PDFs and downloaded spec sheets — separate AAA audit needed per document.

OUT

External links — we can't audit what's on the other side of the link.

How it's satisfied

The two layers of the AAA claim

WCAG 2.2 §5.2.5 permits a "supplemental version" pattern: when the primary version can't meet a content-level criterion, a conforming alternate version reached from every page satisfies the standard for the site as a whole. VWA uses this pattern deliberately — it's the only way to hold the trade voice and meet AAA at the same time.

Layer 1 · Colour + UI

Everything visual is AAA everywhere

Both voices share the same token file. The homepage in trade voice and the homepage in Easy Read mode use the same navy, the same brass, the same focus rings, the same target sizes. Accessibility isn't a different skin — it's the same skin applied to different copy.

Layer 2 · Voice & content

Easy Read satisfies §3.1.5

The default trade voice is written for licensed plumbers. The Easy Read version of every page is rewritten to a Year 9 reading level, expands every abbreviation on first use, and links every unusual word to a glossary definition. The toggle is session-sticky — once you turn it on, it stays on.

The conformance claim

What we publish and where

The full accessibility statement lives at /accessibility/, linked from every footer. It names: the conformance target (WCAG 2.2 AAA via supplemental version), the last audit date, the tools used (Lighthouse, axe DevTools, WAVE, manual NVDA and VoiceOver passes), known limitations, and a contact for reporting issues. This is required under EN 301 549 for any site that claims AAA, and is a good-faith requirement under Section 508 and the Disability Discrimination Act 1992 (Australia).

Section 11 · Easy Read voice

A second voice,
for the same brand.

Easy Read is the parallel voice that satisfies the content-level AAA criteria (§3.1.3, §3.1.4, §3.1.5). It's not a different brand. It's the same brand, written to a Year 9 reading level. Every trade page has an Easy Read twin reachable via the toggle in the top bar. Both versions carry the same navy, the same brass, the same restraint — just different words.

Three writing principles

How Easy Read differs

01
Expand every abbreviation

First use of any acronym includes the full term. "PRV" becomes "pressure-reducing valve (PRV)". After the first expansion in a section, the abbreviation alone is fine.

02
Short sentences, plain words

One idea per sentence. Maximum 20 words where possible. Replace Latin-origin jargon with Germanic everyday words — "dispatch" becomes "send", "inventory" becomes "stock".

03
Link every unusual word

Trade terms like "thermostatic mixing valve" stay — tradespeople recognise them — but get linked to a glossary definition on every first use in a section.

Side-by-side worked examples

The same message, both voices

Homepage · hero headline
Trade voice

Every valve. Every pressure. Every trade. Australia's deepest valve inventory, dispatched same-day from Victoria.

Three-beat rhythm, confident, understated.

Easy Read

We stock valves for every trade in Australia. We have the widest range in the country. We send your order the same day from Victoria.

Three plain sentences, no rhetorical devices, same facts.

Stock status
Trade voice

In stock — 1,240 units. Dispatched same-day if ordered before 2pm AEST.

Specific number, concrete cutoff, trade shorthand.

Easy Read

We have 1,240 of these in stock. Order before 2pm today and we will send it today. (AEST is Australian Eastern Standard Time.)

Same number, expanded abbreviation, no shorthand.

Backorder notice
Trade voice

Backorder — next shipment arriving 8 May. We'll dispatch your order the same day it lands.

Real date, clear action, no padding.

Easy Read

This item is out of stock. The next lot arrives on 8 May. We will send your order on the same day the lot arrives.

"Backorder" replaced, one idea per sentence, same promise.

Product description
Trade voice

Brass ball valve, full-bore lever. 1/2" BSP. 20 bar WP. DR brass. WaterMark certified.

Pure spec string — a tradesperson scans this in two seconds.

Easy Read

A brass ball valve with a full-size opening and a lever handle. The thread is 1/2 inch BSP (British Standard Pipe). Working pressure is 20 bar. The body is DR brass (dezincification-resistant). This product is WaterMark certified for Australian plumbing.

Every abbreviation expanded, one fact per sentence. Same information.

Do & do not

Writing for Easy Read

DO

Expand every acronym on first use in a section. "TMV" becomes "thermostatic mixing valve (TMV)".

DO

Replace Latin-origin words with short everyday ones. "Dispatch" → "send". "Inventory" → "stock". "Utilize" → "use".

DO

Keep sentences under 20 words where possible. Break longer thoughts into two shorter ones.

DO

Link every trade term to its glossary entry on first use per page.

DO

Keep specific numbers. "1,240 in stock" stays exactly as is. Numbers are accessible.

DON'T

Strip specific details for simplicity. "1,240 units" should never become "lots of stock".

DON'T

Add emotional softeners. "We're so sorry to say" is still out of scope — Easy Read is plain, not apologetic.

DON'T

Explain WaterMark certification in body copy. Link to the glossary entry instead.

DON'T

Change the product names or SKU codes. Proper nouns stay intact — WCAG specifically exempts them.

DON'T

Use Easy Read as an excuse to be condescending. Plain language is not simple-minded language.

Mechanics

How the toggle works

Where

A persistent pill in the top bar, right of the phone number. Reads "Easy read ↻ Trade mode" — the active state on the left, the alternate on the right.

How it persists

URL parameter ?voice=plain plus a session cookie. Session-sticky across pages. Bookmarkable. Shareable. Works without JavaScript when served from the server.

What's linked

Every trade term in Easy Read mode links to the glossary at /glossary/. First-use in each section; further mentions stay clean.

Glossary

What's in /glossary/

The glossary ships with ~20 seed entries covering the abbreviations and trade terms that appear in the homepage and catalogue mockup (PRV, TMV, BSP, WP, DR brass, WaterMark, AS/NZS, AEST, backorder, thermostatic mixing valve, pressure-reducing valve, ball valve, gate valve, check valve, solenoid valve, full-bore, reduced-bore, compression fitting, NPT thread, hydraulics). Definitions are written to Year 9 reading level. The team expands the glossary over time as new categories and SKUs are added to the catalogue — the structure is designed to grow.

Copied