A fictional plumbing website demonstration by Work Covered. No plumbing service or emergency response is provided.

Brand system · Direction One

Cairn & Copper — identity and tokens

The working system behind the demonstration homepage. Cairn stands for solidity and guidance; Copper for craft, warmth and precision. Neither is illustrated literally: the system expresses them through material, light, typography and one physical idea — a drop held at a seam, and water returning to stillness.

Wordmark and device

Newsreader for the name, with the ampersand set in the italic and in copper. The device is the held drop: a circle interrupted only at its point of attachment, above a single still line. Everything is vector; nothing is rendered by an image model.

Cairn & Copper Plumbing Co.
Cairn & Copper
Cairn & Copper Plumbing Co.
Cairn & Copper
Favicon at 32 pixelsTouch icon

Device at 64, 32 and 16 px, and the favicon on slate. Minimum sizes: device 16 px; compact wordmark 120 px wide; full wordmark 180 px wide. Clear space: the height of the device on every side.

Colour

Slate and chalk carry the page. Copper is a material accent used for rules, stops and the device — never as a gold substitute across headings and buttons. Still water is the only signal tone, reserved for focus and safety guidance. All text pairs used on the site clear WCAG AA.

Typography

Display — Newsreader 400 · headlines, statement copyWater, exactly where it belongs.
Display italic — Newsreader 400 italic · the film line, the ampersandThe first sign. The right response.
Text — Hanken Grotesk 400 / 500 · body, interface, buttonsClear first questions. Availability confirmed before attendance. The work and the likely next step explained. Tested before completion.
Label — Hanken Grotesk 500 · uppercase, tracked 0.14 emProposed service standard for this demonstration

Scale: h1 clamp(2.5rem, 5.4vw, 4.6rem); h2 clamp(1.9rem, 3.4vw, 2.9rem); h3 clamp(1.3rem, 2vw, 1.6rem); body 1.0625rem / 1.55; labels 0.78rem. Measure 64 characters. Both faces are self-hosted, subset WOFF2 files under the SIL Open Font License.

Motion

Principles

  • Every movement does a job: guides attention, confirms a choice, or reinforces the water idea.
  • One ripple, once. A control that is activated shows a single ring that settles — never a bounce.
  • Settle easing: cubic-bezier(.2,.7,.2,1). Feedback 180 ms; reveals 520 ms; the journey line 1600 ms, once.
  • The hero film is decorative, silent, poster-first, pausable, and paused when out of view.
  • Reduced-motion users get the still and no animation; nothing essential depends on motion.

Not used

  • Scroll-hijacking, parallax or every-section fade-ups.
  • Mouse-following glows, floating cards, animated pipe diagrams.
  • Decorative animation once the reader is in the main content.
  • Dissolves between film clips — straight cuts with matched motion only.

Voice and imagery

Voice

  • Calm under pressure, precise, plain-spoken. Human without being informal.
  • Say what would happen next; never promise what cannot be confirmed.
  • Scotland through material, weather and light — never tartan, thistles, castles or "bonnie".
  • Avoid: "plumbing you can trust", "no job too small", "we've got you covered", "five-star", "premium plumbing solutions".

Imagery

  • Cool northern daylight, one warm highlight on copper, honed slate, chalk walls, clear water.
  • Macro and material over people and vans. Real fittings, correctly assembled.
  • Every generated image labelled "Illustrative concept imagery — not a completed customer project".
  • No stock plumbers, flooded kitchens, before-and-after sliders or badges.

Cairn & Copper Plumbing Co. is an invented identity for a Work Covered demonstration. No company-name, trademark or domain clearance has been carried out. This page uses Umami analytics with sampled session replays and aggregate heatmaps. Privacy details.