01Brand & visual system
Plumbing Sacramento, California
Machined.
Warm.
Plainspoken.
A working trade catalog for a modern craft business: warm paper, hard ink, copper as the material of the trade, and a single flag red reserved for action. The country shows up in the material and the manufacturing language, never in a graphic of a flag.
02Logo & brandmark
A flat monogram, built like a part.
The mark is a squared enamel-pin monogram: DHS knocked out of an ink field, a copper keyline standing in for the metal, a copper bench rule, and one small signal square for the single action the brand ever raises its voice for. No bevels. No gloss. No decorative gradient. It is drawn as vector geometry, so it reproduces the same at sixteen pixels or on a truck door.
Construction
The letters are constructed, not set. Squared terminals and a chamfered D read as machined stock from a catalog, and the geometry stays crisp with no font dependency. The three faint horizontal bands inside the field are the quiet three-stripe motif called for in the direction. Someone eventually notices. Nobody has to.
Primary, full colorReduced, small sizeElements
- FldInk field, the enamel body of the pin.
- KeyCopper keyline, one point four units, the metal edge.
- LtrDHS knocked out in bone, cap height twenty-four on a sixty-four grid.
- RulCopper bench rule under the letters.
- ActOne signal square. The only red the mark carries.
Lockups on light and ink grounds
Note: these lockups now show the fixed-color raster mark, so the live recoloring between grounds described here no longer applies to the shipped asset.
DHS PlumbingSacramento · CSLB 1156850
DHS PlumbingSacramento · CSLB 1156850DHS PlumbingSacramento, CaliforniaDHS PlumbingSacramento, CaliforniaWordmark only
One-color reproduction
For embroidery, laser engraving, and single-run truck vinyl, the mark collapses to a single ink. The field drops out, the keyline and letters share one hue, and the red disappears. It still reads as the same object.
Note: the tiles below use the fixed-color raster mark, so the live recoloring between grounds described above no longer applies to the shipped asset.
App icon & favicon
Below forty-eight pixels the mark uses the reduced cut: the bench rule, the red square, and the field bands drop away, and the letters grow to hold their weight. The badge silhouette carries recognition at favicon scale.
1624324864Master raster exports — the glyph as shipped
Worth saying plainly: the mark actually running in production — every page header and footer on the live site — is not the enamel-pin monogram drawn above. It's a simpler house-roofline glyph with the DHS wordmark knocked into its body. The exports below, from brand/master brandmaeks/, are the current source files for that glyph. This is a real gap between what this document draws and what ships, flagged here rather than quietly resolved one way or the other.
03Clear space & minimum size
Give it room to be a part, not a sticker.
Clear space equals one half of the mark height on every side, measured from the badge edge. Nothing sets inside that margin: no type, no rule, no photograph edge. When the mark sits beside the wordmark, the space between them is the width of the D.
04Logo misuse
Six ways to make it wrong.
The old glossy, gradient, beveled icon renders sitting in brand/logo/ are every one of these mistakes at once. They should be retired. The mark is flat, palette-locked, and undistorted, always.
05Color system
Full palette, four named roles.
Warm bone carries roughly sixty-five percent of every surface. Ink drenches two sections per page at most. Copper is the material accent. Signal red is action only, and never exceeds about five percent of a viewport. Every value is OKLCH with a hex fallback. Never #000 or #fff.
Dark mode
Light is the canonical brand: the scene is a homeowner in a garage at 8am with sun through the door. Dark is a tuned palette for night reading, not an inversion. Photography loses six percent brightness and nothing else.
Tip: use the Ink toggle at the top of the page to preview both.
Contrast, verified
| Pair | Ratio | Verdict |
|---|---|---|
| --ink on --bone | 14.4:1 | AAA. Default body text. |
| --ink-muted on --bone | 6.2:1 | AA for all sizes. Secondary copy. |
| --signal on --bone | 6.5:1 | AA. Safe for CTA labels and links. |
| --bone on --signal | 6.5:1 | AA. Safe for filled red buttons. |
| --copper on --bone | 3.6:1 | Non-text and large text (24px+) only. Never body copy. |
| --copper-lift on --ink-deep | 7.4:1 | AA. Copper is safe as text on dark. |
| --bone on --ink | 14.4:1 | AAA. |
| --signal-lift on --ink-deep | 6.0:1 | AA. |
Enforcement: copper is a material, not a text color, on light grounds. Any use of copper on bone below 24px fails review.
06Typography
Two families that read as two.
Display and headings are Monument Grotesk, machined without being cold. Body is Founders Grotesk Text, genuinely warm at reading sizes. The spec voice is a cut of the heading family, so the page still reads as two typefaces. The specimen below is set in the free Google pair, Archivo and Public Sans, standing in for the licensed primaries.
Scale
| Step | Size | Line | Tracking |
|---|---|---|---|
| Display XL | clamp(3rem, 1.55rem + 6.4vw, 7rem) | 0.92 | -0.03em |
| Display L | clamp(2.5rem, 1.6rem + 4vw, 4.5rem) | 0.98 | -0.025em |
| H1 | clamp(2.25rem, 1.6rem + 2.9vw, 3.5rem) | 1.05 | -0.02em |
| H2 | clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem) | 1.12 | -0.015em |
| H3 | clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem) | 1.25 | -0.01em |
| Body L | clamp(1.06rem, 1rem + 0.28vw, 1.19rem) | 1.6 | 0 |
| Body | 1rem | 1.65 | 0 |
| Small | 0.875rem | 1.55 | 0 |
| Spec label | 0.75rem | 1.4 | 0.12em, upper |
Body measure caps at 68ch, long-form at 72ch. Body is never below 16px on mobile. Headings weight 500 by default, 700 only for the hero and section openers.
Allowed The spec voice appears only for
- Phone numbers
- Prices, ranges, and estimates
- Measurements, model numbers, GPM ratings, pipe diameters
- License numbers and permit references
- Service-area lists and ZIP codes
- Dates and reading times on blog cards
- Small uppercase eyebrow labels, at most one per page
Never The spec voice in
- Body copy
- Headlines
- Button labels
Rejected outright: Inter, DM Sans, Poppins, Montserrat, Oswald, Bebas Neue, and the AI-landing-page defaults. The contractor template and the AI template both live there.
07Brand gradients
The policy is almost no gradients.
This system has no decorative screen gradients. No gradient text, no blue-to-purple or blue-to-teal fields, no mesh backgrounds. Exactly two gradients are sanctioned, and both are functional. One earns its place on screen. The other exists only on paper and metal.
Sanctioned, on screen: the photography scrim
A single ink-deep-to-transparent scrim, bottom to top, laid over hero photography so text stays legible. It is a legibility tool, never a decorative wash. It only appears where type sits on an image.
Plumbing you only have to think about once.
Text holds a 14:1 ratio against the scrim base. The image reads underneath.
linear-gradient(to top, ink-deep .92, ink-deep .55 at 30%, transparent 62%)
Physical only: copper foil stamp
An optional metallic copper foil for business cards and truck lettering. It simulates the sheen of stamped foil under light. It is a print and material finish, never rendered as a background on a webpage.
Print & physical only. Not a screen gradient.
On screen, copper is always the flat --copper token. The foil sheen exists so a printer has a target, not so a page has decoration.
Rules of use
- DoUse the ink-deep-to-transparent scrim only where type sits directly on hero photography, for legibility.
- DoKeep the scrim a legibility tool. Text holds the documented 14:1 contrast ratio against the scrim base.
- DoReserve the copper foil effect for print and physical materials only: business cards, truck lettering.
- Don'tUse any gradient as pure decoration. No gradient text, no blue-to-purple or blue-to-teal fields, no mesh backgrounds.
- Don'tRender the copper foil sheen as a background on a webpage. On screen, copper is always the flat --copper token.
- Don'tIntroduce a third gradient of any kind. Exactly two are sanctioned, both functional, not decorative.
08Voice & tone
Machined. Warm. Plainspoken.
Written the way a good tradesperson talks to a homeowner they respect: direct, unhurried, and specific. Confident and calm, with no hype and no gimmicks.
Machined
Precise before it is friendly. Specific numbers, named parts, real timeframes. A claim is nothing; evidence is the point.
Warm
We and you, never our team of highly trained professionals. It admits limits, because admitting a limit builds more trust than a boast.
Plainspoken
Short declarative sentences. The headline carries the meaning; the supporting line is one sentence. If a sentence works, it does not become a paragraph.
Do
- Write short declarative sentences.
- Use specific numbers, timeframes, and named parts.
- Say we and you. Never our team of highly trained professionals.
- Admit limits. We don't do septic, here's who we'd call, is a trust-builder.
- Let the headline carry the meaning and keep the supporting line to one sentence.
Do not
- Use superlatives: #1, best in town, unbeatable, world class, premier.
- Use fake urgency: act now, limited spots, offer ends soon.
- Use exclamation marks. Zero across the entire site.
- Use em dashes. Commas, colons, semicolons, and periods only.
- Restate a heading in the first line beneath it.
- Write a paragraph where a sentence works.
Voice in place
Plumbing you only have to think about once.
Tankless water heaters, sewer lines, and whole-home repipes across the Sacramento region. Straight pricing, clear explanations, and work that holds up.
Phone helper: We'll call you back, usually within two hours during business hours.
Error: We need a phone number to call you back. Ten digits is fine.
Every error names the cause and the fix. Nothing scolds.
VOICE PROFILE
=============
Author: DHS Plumbing
Goal: Site copy, marketing, and customer-facing communication for a Sacramento-area tankless water heater and plumbing company
Confidence: High — documented in this section, confirmed against real site copy sitewide
Source Set
- This document's own Voice & tone rules (section 08)
- prototype/index.html hero: "Plumbing you only have to think about once."
- prototype/about.html: "We got tired of fixing other people's shortcuts." / "The standard we hold."
- prototype/services-tankless-water-heaters.html: "Endless hot water, sized for your house and your water." / "No tank. It heats the water the moment you ask for it." / "We publish the range. Most companies won't." / "The unit isn't the problem." / "Sized right, and it shows."
Rhythm
- Short declarative sentences, deliberate fragments for punch ("Sized right, and it shows.")
- Headline carries the meaning; supporting line is exactly one sentence, never a paragraph
Compression
- Dense, not explanatory. States the position and moves on
- Specific numbers/measurements over adjectives (GPM, BTU, license numbers, timeframes)
Capitalization
- Conventional. No forced lowercase. Uppercase spec voice reserved narrowly for phone numbers, prices, measurements, license numbers, service-area lists, dates, and at most one eyebrow label per page, never body copy, headlines, or buttons
Parentheticals
- Not a documented pattern in this voice. Avoid introducing one
Question Use
- Rare, direct, functional when used ("Where do you want to go next?"). Never a curiosity hook or bait question
Claim Style
- Evidence-first and specific, not superlative ("We publish the range. Most companies won't." is a comparative claim backed by an actual behavior)
- Willing to admit limits as a trust move
Preferred Moves
- Two-sentence hero pattern: outcome-focused headline, then one clarifying sentence
- Direct address: "we" and "you," never "our team of highly trained professionals"
- Concrete process statements as proof ("Camera first, quote second.")
Banned Moves
- Exclamation marks (zero, anywhere)
- Em dashes (commas, colons, semicolons, periods only)
- Superlatives ("#1," "best in town," "unbeatable," "world class," "premier")
- Fake urgency ("act now," "limited spots," "offer ends soon")
- Restating a heading in the first line beneath it
- Corporate filler ("our team of highly trained professionals")
CTA Rules
- Primary CTA: plain, specific action verb phrase ("Book an Appointment," "Request an Estimate"), never generic ("Submit," "Click Here")
- Secondary CTA: the phone number as a direct action ("Call (916) 769-2116")
- One primary CTA per section, never competing CTAs
Channel Notes
- Site/web: full spec-voice rules apply as documented above
- Email: same voice; hero section now mandatory per md/email-template.md
- Social: shorter-form, same no-exclamation-marks/no-fake-urgency discipline
- Press/media: same plainspoken register, AP-style dateline for releases per md/system md/presskit.md
09Material & form
Printed, not glassy.
Depth comes from paper-tone steps and hairlines, not from shadows. Two-pixel radius on everything interactive. Full hairline borders, never a thick colored edge on one side. Essentially no shadows.
Buttons and inputs
Radius 2px. No pills. Signal fill for the one primary action, hairline outline for secondary.
Hairline-divided list
- 01Camera first, quote second.
- 02Written price before any work starts.
- 03Tankless sized for Sacramento water.
- 04Permitted, inspected, photographed.
Rows separated by 1px --rule. No cards, no shadows.
Iconography
One hand-drawn family at 1.75px stroke on a 24px grid. Ink by default, copper on hover or active. No filled and outline mixing. No emoji anywhere in the interface. The five reference marks below are the seed of the set. The full eighteen-icon library, in thin and heavy weights, is cataloged in section 14, Plumbing icon library.
The two shadows we allow
Elevation is a paper step plus a hairline, everywhere but two functional cases: the mobile sticky action bar, and the open chat panel.
10The thirteen-stripe motif
Count them, eventually.
The one deliberate patriotic motif, and nothing else. Thirteen short vertical rules: twelve in hairline, the seventh in signal red. It is never captioned or explained. It works because it is quiet.
Usage rule
Exactly once per page, as the major structural break before the closing call to action. On the homepage it may appear a second time above the community section. Never three times. Never as decoration inside a card. Never animated. Never captioned.
Also permitted, sparingly
The enamel-pin DHS monogram on its field of ink stripes, once in the footer and once in the trust bar. The words Built in Sacramento set in the spec voice. Nothing else.
Banned: waving flags, eagles, stars-and-stripes fields, red-white-and-blue gradients, flag-draped photos.
11Motion
Motion clarifies. It never decorates.
Only transform and opacity move. Color may transition for state. Never width, height, top, or left, and never transition-all. Every demo below is gated behind reduced-motion, where it resolves instantly to its final state. Ten further studies, all built on the brandmark itself, are cataloged in section 15, Animated brandmarks.
Curves & durations
| Interaction | Duration |
|---|---|
| Button and link feedback | 140ms |
| Nav dropdown / mega panel | 200ms |
| Mobile drawer, chat panel | 280ms |
| Scroll reveal | 500ms · 40ms stagger |
| Hero entrance wipe | 700ms, first load |
| Exit of anything | 60 to 70% of enter |
Signature 3 · the before/after slider
A clip-path inset driven directly by pointer position, with pointer capture and zero easing during the drag. Easing applies only after release. This is the one interaction on the site that is genuinely fun, placed where proof of work belongs.
Drag the handle, or focus it and use the arrow keys.
12Photography direction
Real hands, real Sacramento light.
Imagery does narrative work here. Five required shot families, warm and slightly desaturated, real grain preserved, three crop ratios and no more. The blocks below are tonal placeholders, not final photography.
1. The material
Macro of hands on copper: a solder joint mid-flame, a wrench on a fitting, a fresh cut of pipe. Shallow depth of field. The hero of the brand.
2. The finished install
A tankless unit mounted clean and square on a stucco garage wall, lines dressed, labeled, tidy. This photograph sells more tankless jobs than any paragraph.
3. Sacramento, real
A Fair Oaks driveway under a valley oak. A granite curb in Rocklin. A ranch house in Carmichael in low late-afternoon sun. Recognizably here, not generic suburb.
4. The people
Owner and crew, eye contact, natural posture, working clothes, at a job. No crossed arms in front of a van. No studio white background.
5. The work in progress
A camera-inspection monitor showing a real pipe interior. A trench, backfilled and raked clean. An open wall during a repipe.
Treatment
Warm and slightly desaturated. No blue grade, no HDR, no heavy clarity or halos. Preserve real grain; if a shot is clean, add two percent to match the paper. Crops: 3:2 landscape, 4:5 portrait, 21:9 full-bleed. Three crops, no more.
Every hero holds its text
Every hero image needs a tonally calm region for the text column. Crop for that, or reshoot. No embedded signage, price stickers, or competing typography inside the frame. Alt text is part of the voice.
13Caption lockups
The badge, stamped as a caption.
The transparent white-ink mark from Photography direction, set against a flat Signal-red field, doubles as a caption tag on imagery: a corner stamp, a lower-third bar, or a standalone chip. One recipe, three placements.
Corner tag
A small stamp in one corner of a photograph, for grid thumbnails and card imagery where the caption only needs a few words.
Tankless install · Fair Oaks
Full-width caption bar
A lower-third bar spanning the full photograph width, for hero images and gallery leads where the caption carries more weight.
Sewer line repipe · Rocklin
Standalone chip
The lockup on its own, off any photograph, so its default proportions are visible without a background underneath to lean on.
Whole-home repipe · Elk Grove
Mark sized to match the label box height, 3px gap between mark and label, var(--s-2) var(--s-3) padding (0.5rem / 0.75rem)
Rules of use
- DoUse the corner tag for grid thumbnails and card imagery, where the caption only needs a job type or a location in a few words.
- DoUse the full-width bar for hero and gallery-lead images, where the caption carries a longer line and earns its own strip.
- DoKeep the mark at 24px or larger. Below that, the house-glyph cutout stops reading as a shape.
- Don'tStamp either lockup over a busy or high-contrast region of a photo without the ink-deep scrim documented in Brand gradients (section 07) underneath it first.
14Legal & colophon
The source of truth.
15Plumbing icon library
Drawn stock, not a font.
Eighteen marks built by hand for the trade DHS actually works in, drawn in the same squared, machined language as the badge: rounded terminals, few paths, no decoration past what the concept needs. Every icon shares the droplet, flame, wrench, ruler, and gauge already shown in Material & form, redrawn here at two weights so the whole set scales as one family instead of two.
Thin · 1.1px stroke
Heavy · 2px stroke
When to use which weight
- ThinInline UI: form fields, list rows, dense toolbars, anywhere the icon sits next to body text at sixteen to twenty pixels.
- HeavyStandalone marks: section dividers, empty states, service cards, printed leave-behinds and truck decals, anywhere the icon carries the point by itself.
Still the same rules
Ink by default, copper on hover or active, on both weights. No fill anywhere and never mix a filled icon into an outline set. No emoji in the interface, ever. Every icon sits on the same 24px grid so thin and heavy line up edge to edge, and neither weight introduces a shape the other doesn't have. Same drawing, different stroke, exactly like a type weight.
16Animated brandmarks
Ten studies, one badge.
Every state below is built on the same brandmark image used throughout this document. Nothing new is drawn. Only transform and opacity move, on the same duration and curve tokens documented in section 11, and each state is tied to a real interface moment instead of shown for its own sake. Hover or focus a tile to preview it. Reduced motion resolves every one straight to its resting state.
500ms · ease-enter · first paint of a card, modal, or hero mount
140ms · ease-move · header and footer brand lockups
140ms · ease-move · the mark wrapped as a link, on press
140ms · ease-enter · header brand link, keyboard focus
DHS Plumbing
Sacramento, California
500ms · 40ms stagger · ease-enter · hero brand lockup, first load
200ms · ease-move · the swap to the reduced cut near the 48px breakpoint
200ms · ease-enter · footer and trust-bar placements, section 10
1.8s loop · ease-move · one live "technician en route" indicator, never more than one on screen
2.4s loop · ease-move · page skeleton only, removed the instant real content is ready
500ms · ease-enter · the enamel-pin mark ahead of the stripe motif, once per page
Still the same rules
Transform and opacity only, the same as every motion documented in section 11. Never width, height, top, or left, and never transition-all. The mark never rotates or tilts in any of these states, the same prohibition that governs it at rest in section 04.
Where these do not belong
Studies 08 and 09 are the only two that loop, and both are reserved for a genuine ongoing status, never decoration. At most one dispatch pulse on screen at a time. A loading hold disappears the moment real content paints. The other eight fire once, on a real interface event, and settle.
ProposalUnder review
A circular droplet mark, for review.
A separate concept, proposed for review rather than adopted into the system above. A circular badge, built from new geometry rather than the dhsMark or dhsMarkMini symbols, animates a single water drop through six beats — detach, fall, impact, rebound, reform, rest — then loops back into itself. It is not one of the ten canonical studies cataloged in section 15, Animated brandmarks, and it is not in use anywhere on the live site. Water is rendered in copper rather than blue, to stay inside the documented palette rather than introduce a new brand color.
4s loop · ease-move crossfades, ease-enter impact pulses · six beats: detach, fall, impact crown, rebound, reform, rest
Two disclosed exceptions
Section 15 reserves autoplaying loops for a genuine ongoing status, never decoration — studies 08 and 09 only. This mark breaks that rule on purpose: it plays continuously with no interface event behind it, because the brief was to show a complete six-beat story rather than a single interaction state. Section 04 also lists glow among the standing misuses. The impact beat carries one soft copper-lift glow layer behind the splash; its blur radius is fixed once in CSS and only its opacity animates, in and out, alongside the crown. Neither exception is proposed for the static primary mark. Both are scoped to this one animated concept, for review.
Not yet part of the system
This loop sits outside the numbered sections above. It does not renumber or displace any of the ten dhsMark studies in section 15, and it is not wired into the header, footer, or any live page. If it is adopted, it earns its own cataloged state here with a real interface rationale, the same bar every other mark on this page has already cleared. Until then, this is a proposal, not a specification.