Valve Warehouse Australia
brand system index.

Landing & search

The pages a buyer first lands on, plus the catalogue and search surfaces that fan out from there.

• Homepage

  The landing page. Hero with rotating valve subcategories, dashboard-style live stock cards, 17-tile category grid, and the spec-match callout.

  vwa_homepage.html
  View →

• Catalogue

  Full catalogue surface with filters, product grid, and pagination. Currently a hybrid products-grid + filter page.

  vwa_catalogue.html
  View →

• Search results

  Multi-section search results — products, brands, materials, knowledge base. Demonstrates how a single query fans out across the IA.

  vwa_search_results.html
  View →

The catalogue spine

Two demonstrated category-page patterns (type-led and standard-led) and one subcategory page. The remaining 3 categories and 42 subcategories follow these templates.

• Valves category page

  Type-led pattern. 10 subcategory cards (Ball / Butterfly / Check / Control & Safety / Float / Gate / Needle / Solenoid / Spray Nozzles / Taps), by-size and by-material facet rows, brand strip.

  vwa_category_valves.html
  View →

• Couplings category page

  Standard-led pattern. 5 connection-standard cards (Bauer / Camlock / Minsup Claw / Nitto Quick Connect / Storz & CFA) with stylised mechanism silhouettes, by-application facet row, demoted material section.

  vwa_category_couplings.html
  View →

• Ball Valves subcategory

  Subcategory page demonstrator. Educational intro distinguishing siblings, sticky filter sidebar (7 axes including the Grade group for DR/Standard brass), 12 product cards in a grid, sibling tile-row.

  vwa_subcategory_ball_valves.html
  View →

The cross-cutting axis

Materials sit alongside Categories under Catalogue. A buyer drilling Fittings → Brass & Copper Pipe Fittings reaches the same SKUs as one drilling Materials → Brass → Fittings.

• Materials index

  All 18 stocked materials — Adhesive, Aluminium, Black Steel, Brass, Carbon Steel, Ductile Iron, Galvanised, NY Glass, Nylon, Plastic, PE, PP, PU, PVC, Rubber, Stainless Steel, Steel, Teflon. Quick-comparison table + full card grid.

  vwa_materials.html
  View →

• Brass material detail

  Material-detail demonstrator covering both grades inline (DR-brass spec / Standard-brass spec / when not brass — three application sections), full spec tables, AS standards, mixed-grade product list.

  vwa_material_brass.html
  View →

Manufacturer surfaces

VWA stocks across 12 brands. The directory and a single instance demonstrate the pattern.

• Brand directory

  All 12 brand cards — Banjo, Holman, NORMA, Caleffi, Watts, Reliance, Apex, Burrowes, Yarra Brass, Hardwick & Sons, Murray Industrial, Philmac.

  vwa_brand_index.html
  View →

• Philmac brand page

  Single brand detail demonstrator — heritage strip, capability matrix, products stocked, brand voice. Template for the other 11.

  vwa_brand_philmac.html
  View →

The leaf surface

Where every navigation path lands.

• Product detail

  DR brass ball valve SKU. Product imagery, full spec sheet, approval badges, related products, stock status, add-to-cart with quantity controls.

  vwa_product_detail.html
  View →

Cart, checkout, account

The transactional surfaces — cart with partial-backorder logic, post-checkout confirmation, B2B trade account application.

• Shopping cart

  Line items split by stock state — in stock vs partial backorder. Demonstrates the shipping-split UX where one order ships immediately and the rest dispatches when stock arrives.

  vwa_cart.html
  View →

• Order confirmation

  Order placed page with dispatch timeline, shipment tracking reference, line-item recap, and "what happens next".

  vwa_order_confirmation.html
  View →

• Trade account application

  29-field B2B trade account form. Demonstrates the AAA form pattern — 4.42:1 input borders, aria-required, role="alert" error pattern, ≥44px touch targets.

  vwa_trade_application.html
  View →

News, articles, glossary

Long-form content — news index, a single article instance, and the trade glossary.

• News & articles index

  Editorial directory with 8 article cards across categories (Industry / Standards / Materials / Trade business). Three-tier visual hierarchy with feature article + full-width prose articles.

  vwa_blog_index.html
  View →

• Article — DR brass

  Long-form technical article on DR brass (CW602N). Hero, 600-word body, pull-quote, AS 2345 / AS-NZS 4020 specifications, related products, comments-disabled-trade-only sign-off.

  vwa_blog_post.html
  View →

• Trade glossary

  Alphabetised reference of trade terminology — BSP, DR brass, WaterMark, TMV, NPSH, etc. Demonstrates the dual-voice toggle on technical content.

  vwa_glossary.html
  View →

404, 500, 503

The three error surfaces — page not found, server error, and maintenance / unavailable. Voice-toggle preserved through all states.

• 404 — page not found

  Friendly recovery page with quick-links to the catalogue, materials index, brands, and the spec-match service.

  vwa_404.html
  View →

• 500 — server error

  Apologetic error page with retry guidance and direct phone contact. Designed to look like maintenance, not catastrophe.

  vwa_500.html
  View →

• 503 — maintenance

  Planned-downtime / unavailable page. Phone contact, expected return time, status-page link.

  vwa_503.html
  View →

Documentation pages

Three pages that document the brand system itself — accessibility statement, dual-voice toggle reference, and the physical-collateral applications book.

• Accessibility statement

  W3C-style AAA accessibility statement. Conformance claim against WCAG 2.2 §5.2.5 supplemental-version pathway, technical specifications, known limitations, how-to-report.

  vwa_accessibility.html
  View →

• Easy Read pattern reference

  Implementation reference for the dual-voice toggle. URL parameter + cookie persistence, voice-block markup pattern, before-paint initialiser, validation script.

  vwa_easy_read_pattern.html
  View →

• Physical brand applications

  Coffee-table-book style document — trade vans, business cards, dispatch labels, packaging, signage. Shows how the navy + brass system translates off-screen.

  vwa_physical_brand.html
  View →

Tokens, design rationale, brand book

The non-page deliverables — design tokens as SCSS source, written design documentation, the brand guidelines as a viewable HTML book + a print-ready PDF, and a zip of everything.

• Brand guidelinesHTML

  The brand-book document — palette, typography, components, voice, applications. ~140KB, ~30 pages of content.

  vwa_brand_guidelines.html
  View →

• Brand guidelinesPDF

  Print-ready PDF export of the brand book. 21 pages, 308 KB.

  vwa_brand_guidelines.pdf
  Open →

• Design tokensSCSS

  SCSS source for the design system — palette v2.0.0-AAA (36/36 contrast pairings pass), typography scale, spacing rhythm, component primitives. ~530 lines.

  _vwa-tokens.scss
  Open →

• Design documentationMD

  Written design rationale — every component spec, IA structure, breadcrumb rules, voice-block system, AAA form pattern, version history. ~830 lines, currently at v4.15.

  DESIGN.md
  Open →

• Complete system bundleZIP

  All 29 files packaged together — every HTML page including this index, the SCSS source, design documentation, and brand guidelines PDF. ~660 KB compressed.

  vwa-brand-system.zip
  Download →