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: the mark below now renders as a fixed-color raster export, so the live recoloring between bone and ink grounds shown here no longer strictly applies to the shipped mark.
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 raster exports below ship in one fixed color each, so this is no longer a live single-ink collapse of one source file — just the closest matching exports for each ground.
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/ (one level up from this prototype folder), 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. This same gallery is also documented in the sibling DHSplumbing/brand/brand.html.
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.
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.
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 family, Lucide, 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 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 Orangevale 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.
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 |
A circular companion to the enamel-pin monogram, for the handful of pages that earn one beat of motion. Never the header, never sitewide. It forms at the spout, stretches, falls, and rings once against the base, in transform and opacity only.
3.2s · linear · loops until replayed or scrolled past
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 mark, stamped as a label.
A fixed lockup for captioning photography: the reduced glyph in white ink on a flat Signal field, set beside a short uppercase caption in the spec voice. It is a label, not a headline treatment, used to tag what a photo shows rather than to sell it.
Corner tag
Use on a single photo standing alone, most often in a gallery or a card. The tag sits in one corner, clear of the subject, never overlapping a face or a hands-on-copper detail.
Tankless install · Fair Oaks
Full-width bar
Use along the bottom edge of a wide hero or full-bleed crop, the way a lower-third works in video. It reads as a caption strip, not a badge, so give it the whole width instead of centering it.
Sewer line repipe · Rocklin
Standalone chip
The lockup on its own, against paper, so its default proportions are legible without a photograph competing underneath.
Repipe complete · Carmichael
Icon sized to match the label box height · 3px gap between icon and label · padding 0.5rem/0.75rem (--s-2 / --s-3) · radius 2px (--radius)
When to use which
Corner tag for a single photo in a grid or card, where the caption only needs to identify the shot. Full-width bar for a hero or full-bleed image, where the caption should read like a lower-third across the whole frame. Don't run both on the same image.
Legibility
Never smaller than the 18px icon and spec-voice type shown above; below that the house cutout stops reading. Don't stamp the lockup directly over busy, high-contrast photo detail, drop the photography scrim in first so the red field and white ink hold their contrast.
14Legal & colophon