Pump House

Four rules everything else hangs off.

Before any brand element ships, it has to pass these. If a decision contradicts one of the four, the principle wins.

Peer. Direct. Australian.

Pump House writes the way a property manager talks to another property manager who's already busy. No SaaS cheer. No headline-as-feeling. Say what happened, what's next, and stop. AU English everywhere (colour, organise, realise). No em dashes. ASCII apostrophes only. Sentence case headings. Lowercase form labels.

"Pump House" in Pretendard Bold 700. Two-tone.

"Pump" sits in Coal #1A0E0A. "House" sits in Pump orange #C8542A. No punctuation. The colour is the signature; the word "House" is the brand mark. Mixed case, letter-spacing -0.03em. Below 14px the wordmark is illegible and the mark should be used instead.

The two-tone treatment is deliberate differentiation from "wordmark + small coloured circle" patterns common in Australian brands (Camera House being the closest). The whole word is the signature; no glyph required.

The five-spoke valve handwheel.

Mark study E. Heavier outer rim, lighter spokes, calm centre hub. Five spokes because real fire main wheels have five. Reads as a brand mark and as a recognisable valve at the same time. Always sits in Signal red on light surfaces; in Cream on Signal surfaces. Never in any other colour.

Scale.

Below 40px, stroke weights step up so the rim doesn't disappear. The 16px favicon and 24px sizes use thicker strokes.

Mark drift guard.

Valves are a category symbol for the fire safety trade. The mark therefore overlaps with generic valve imagery by design. The brand does not claim the valve as a category symbol or assert ownership over valve diagrams. What the brand owns is the specific Study E composition (rim 11, spokes 6, hub 7, 5 spokes, Signal red) used as a logo.

When a non-Pump House valve illustration or photo appears on the same surface as the mark, count how many of these four specs the other valve matches: 5 spokes, circular handwheel, red colour, Signal red specifically. The match count decides the separation rule.

Full decision tree and worked examples in brand-identity/pump-house/section-18-mark-drift-guard.md. The brand stays in its lane: depicting valves is fine for anyone; the specific Study E composition is the limit of the claim.

The mark and the wordmark do not sit together.

The separation principle: mark for action, wordmark for identity. Mark appears where the brand is in motion or at icon scale. Wordmark appears where the brand is being named. There is no canonical lockup. The two elements speak in different registers and never share a row.

Including the report cover, where v4 had both. v5 removed it. The wordmark stands alone in printed deliverables.

Four mark surfaces. Six wordmark surfaces.

If a surface is not in this table, the brand does not appear on it. Adding a new surface requires updating this list and the principle in section 01.04.

The Ember palette. Twelve colours plus Signal.

Three families. Fire carries the brand. Warm neutrals carry the body. Olive and Slate stay cool so success and info don't bleed into the brand temperature. Signal red is reserved for the mark only and is not for general use.

Pretendard + JetBrains Mono. No serif pair.

Pretendard loads via jsDelivr CDN. Korean-origin (Toss, Naver, much of the polished Korean tech stack). Carries UI, body, headings. Picked over Geist because Geist has become the AI / dev-tool default font of 2024-2026 (Vercel, v0, Cursor) and any tech-adjacent viewer reads a Geist-set product as "another AI startup". Pretendard is rare in Western tech and signals impeccable taste without shouting.

JetBrains Mono carries data, dates, eyebrows, and labels. A serif pair would borrow voice from a media or editorial brand; Pump House is an operational tool. Stay with one family.

Four animations. Each one has a job.

No decorative motion anywhere. If an animation cannot be named in one verb (loading, progress, success, capacity) it does not ship. Every animation respects prefers-reduced-motion at the OS level. Turn Reduce Motion on, and this page freezes.

Empty. Loading. Error. Success. Warning.

Every page that fetches or mutates needs all four of these designed. Copy in the voice from section 02.

UI artefact, not brand mark.

The yellow AS1851 tag that lives on every fire main valve and hose reel is a load-bearing object for property managers. Pump House owns a digital version of it as a UI element. The tag appears on the asset detail page, on the report inside-page, and (only) as the loading screen empty version with "PENDING" stamped over it. The tag is never the brand mark. The brand mark is the valve, section 04.

Strip colour follows asset status: Pump for current, Ember for overdue. Spark is reserved for the "pending" stamp overlay only.

Spacing, radius, shadow.

Three scales the dev needs to build anything from the book. Without these, every component drifts to its own padding and the system breaks within a week. Use these values; do not invent intermediate steps.

Spacing.

Multiples of 4. Used for padding, margin, and gap.

Radius.

Borders soften only where they need to. Default is sharp.

Shadow.

The brand prefers borders over shadows. Use shadow sparingly.

Shadows are warm-tinted (Coal hue at low alpha) for consistency with the warm palette.

lucide-react. Twelve essential glyphs.

Library: lucide-react. 1100+ icons. MIT. Tree-shakeable, around 12 KB gzipped for typical usage. The Tailwind community's de-facto. Reads as 2025-considered.

Icon system.

Default size 20 px (matches body text x-height). Stroke width 2 (lucide default; do not customise). Colour inherits via currentColor.

Essential set.

The twelve most-used in the app. Other lucide icons are available; these are the ones the team should know by name.

Import per-icon for tree-shaking:

import { Building, Calendar, FileText } from 'lucide-react'

The valve mark is a brand glyph, not an icon. Do not use it in lucide's place. If you must add a custom icon (lucide doesn't have it), follow the same rules: 2-stroke, 24 x 24 viewBox, currentColor only.

Seven primitives the rest of the system builds on.

Each primitive lists variants, sizes, and states. If a screen needs something outside this set, add it to the book first.

Button.

Input, Label, Field.

Card.

Modal / Dialog.

Tabs.

Status pill.

Toast.

Dual-mode from launch.

Toggle in the top-left of this book. Flip the switch to feel how the brand behaves at night. Property managers run inspections at 6am with the curtains drawn and review reports at 11pm in bed; the product should be comfortable in low light.

Roles shift. Palette stays.

The literal palette never changes. Coal is always #1A0E0A. Bone is always #F5F1E8. What changes between modes is which palette colour fills which role. In light mode, Bone is the page; in dark mode, the page is a new deep coal and the original Coal becomes the card surface. The values are constants; the assignments shift.

Two new tokens.

Dark mode introduces three colours that don't exist in the light palette. They never appear in light mode.

Lifts, explained.

Pump, Ember, and Signal lift roughly ten percent in dark mode for legibility on dark surfaces. Glow and Spark stay as-is because they're already bright enough. The mark keeps its shape; only its colour shifts. The lifts are subtle enough that a screenshot in light mode and a screenshot in dark mode still read as the same brand.

First load.

The book follows the OS preference (prefers-color-scheme) on first visit. The toggle in the top-left overrides it; the choice persists across sessions via localStorage.

For the dev.

When wiring this into the Next.js app, the implementation is:

:root[data-mode="dark"] {
  --paper:  #0E0805;
  --cream:  #1A0E0A;
  --linen:  #3A2A1F;
  --coal:   #F5F1E8;
  --smoke:  #C9C0B2;
  --pump:   #E26D3D;
  --ember:  #B53A2A;
  --signal: #D62E32;
}

Plus a small toggle component, a localStorage read on mount, and data-mode on the html element. The half-wired @media (prefers-color-scheme: dark) block currently in globals.css should be removed and replaced with the explicit [data-mode="dark"] selector. Closes audit round 1 finding 10.

Approximate Pantone equivalents. Verify before lock.

The three reds (Pump, Ember, Signal) sit in the part of the spectrum CMYK reproduces unreliably. Use the Pantone equivalents below for any print artefact. Spot colour is preferred over process build for the mark wherever budget allows. Verify against a Pantone chip book before any print run.

Safe text and background pairings.

WCAG 2.1 AA requires 4.5:1 contrast for normal text and 3:1 for large text (18px bold or 24px regular and above). The pairings below have been calculated; verify any new pairing with a contrast checker before shipping. Ash on Bone is borderline; do not use Ash for body copy, only for labels and metadata.

What we know is unfinished.

Five risks and gaps surfaced during v1. Each is named so it doesn't get forgotten and can be closed deliberately rather than by drift. Three of the five have been closed since v1 issue, one by feature shipment (dark mode) and two by sidecar resolution docs (Signal vs Pump device test, CMYK and Pantone reference). One remains pending a field shoot.

How we got here.