The way plumbing should be.
The McDonald Plumbing brand kit. One page for Chase and Scott, and for anyone who designs, prints, builds or posts something with the McDonald name on it. Version 2, November 2026.
Brand idea.
McDonald Plumbing is the local institution. A family company, owned since 1955, that a neighbor would recommend. Everything we make should feel warm, simple, inviting and easy to use, and it should look like it came from the same company as the billboards and the trucks.
We are loosely inspired by the billboards, not a copy of them. A customer who sees a billboard and then visits the website should think "that is the same company". They should not feel like they are looking at the same poster.
The proof is not decoration. It is real people, real photos, written quotes from real customers, and the 4-Way Guarantee.
The way plumbing should be.
Our tagline. Family owned in Grand Rapids for 70 years. A real person answers the phone, day or night.
Warm
Real faces at real front doors. White and warm stone, never cold or clinical.
Simple
One red, one black, one clear next step. The phone number is never hard to find.
Rooted
Grand Rapids, West Michigan, 1955. Plain talk, specific facts, no hype.
The logo.
The existing McDonald Plumbing logo stays exactly as it is. We do not redraw it, recolor it or rebuild it. Vector files (SVG or EPS) are still to come from the client. Until then, use the supplied PNG at the largest size available.
On light and on dark
On light. The logo sits straight on white or warm stone (#F3F1ED). Its black pipe and red lettering need a light ground.
On dark. Never place the logo directly on black, red or a photo. Put it on a white tile first, as the website footer does.
Clear space
Keep clear space on every side equal to the height of the "M" in McDonald, roughly one third of the logo height (the dashed red border). No text, edges or other graphics inside it.
Minimum size
120 px wide (screen)
90 px, the smallest
On screen: never narrower than 90 px (the site header uses 50 px tall, about 158 px wide). In print: never narrower than 1 inch (25 mm).
Do
- Use the supplied logo files only.
- Put it on white or warm stone, or on a white tile over dark.
- Keep the full clear space and scale it proportionally.
- Link the header logo to the home page.
Do not
- Stretch, squash, rotate, skew or recolor it.
- Place it directly on black, red or a busy photo.
- Add shadows, outlines, glows or effects.
- Redraw it, retype it or swap its font.
Stretched
Directly on black
Rotated
Recolored
Color. Red, ink, white.
Taken from the billboards, then made simpler. There is no blue anywhere in the system. The baby blue (aqua) and the navy from earlier rounds are retired.
- Hex
- #C42228
- RGB
- 196, 34, 40
- Use
- Headlines, buttons, bands, rules, the big numbers
- Hex
- #171717
- RGB
- 23, 23, 23
- Use
- Text, black panels, footer, secondary buttons
- Hex
- #FFFFFF
- RGB
- 255, 255, 255
- Use
- Main page ground, cards, text on red or ink
- Hex
- #F3F1ED
- RGB
- 243, 241, 237
- Use
- Alternate section backgrounds and form fields
- Hex
- #8E151A
- RGB
- 142, 21, 26
- Use
- Hover state for red, small red text on white if needed
- Hex
- #EB1C24
- RGB
- 235, 28, 36
- Use
- The logo and the one bright accent on black. Not for body text on white.
Support colors
- Hex
- #55524D
- RGB
- 85, 82, 77
- Hex
- #D9D5CD
- RGB
- 217, 213, 205
- Hex
- #E6E2DA
- RGB
- 230, 226, 218
- Hex
- #E4E0D9
- RGB
- 228, 224, 217
How much of each
Roughly, across a page. White carries the page, red is the voice, ink is the weight.
Accessible pairings
Contrast ratios are computed with the WCAG 2.x formula. Body text needs 4.5 or more. Large text (24 px, or 19 px bold and above) needs 3 or more.
Avoid
- Logo red (#EB1C24) as body text on white: 4.45 : 1 fails AA for small text.
- Headline red as small text on black: 3.08 : 1.
- Borders (#D9D5CD) as text or as the only edge of a control: 1.46 : 1 on white.
Remember
- Never use color alone to carry meaning. Pair it with words or an icon.
- Every focus ring is a 3 px ink outline, visible on white, stone and photos.
- Red is a flood only in bands. Everywhere else it is an accent.
Type. Futura Now Headline.
Headings are heavy, italic and sentence case, with tight leading. Small labels are letterspaced light capitals. Body is the medium weight. The family is the same one on the billboards.
Futura Now Headline ExtraBlack Italic, used for every heading.
ExtraBlack Italic 900
34 to 64 px, leading 1.04
ExtraBlack Italic 900
30 to 54 px, leading 1.04
ExtraBlack Italic 900
21 to 29 px, leading 1.04
Medium 500
19 px (18 px on phones), leading 1.6
Light 300, uppercase
letter spacing .26em, 13 px
Bold 700, uppercase
13 to 17 px, spacing .06 to .13em
Weights in use
| Weight | File | Role |
|---|---|---|
| Light 300 | FuturaNowHeadlineLight | Labels, small caps |
| Medium 500 | FuturaNowHeadlineMedium | Body copy |
| Medium Italic 500 | FuturaNowHeadlineMediumItalic | Emphasis |
| Bold 700 | FuturaNowHeadlineBold | Buttons, nav, fact labels |
| ExtraBlack Italic 900 | FuturaNowHeadlineExtraBlackItalic | Headings and big numbers |
Fallbacks and the license
McDonald Plumbing holds the Futura Now license. The font files shown on this page are the desktop files. The web license and web font files (WOFF2) are not confirmed yet. Until they are, treat these files as for review only.
Where a tool cannot load Futura Now, such as native forms in the website builder, use Jost, a free open-source typeface with the same geometric look, as a stand-in. Then Futura, then the system sans.
Do
- Set headings in sentence case with a full stop where it reads as a statement.
- Keep headline leading tight, around 1.04.
- Use light capitals only for short labels such as "Family owned for 70 years".
Do not
- Set whole paragraphs in capitals or in the heavy italic.
- Fake bold or italic. Use the real files.
- Use gradient text, outlined text or text effects.
Shapes and the slant.
One angle runs through everything: about 10 degrees, the same lean as the billboard lettering. Corners stay square.
Slanted buttons
The button is skewed skewX(-10deg). The label inside is counter-skewed skewX(10deg) so the text stays upright.
Black panel
Slanted panels
Black panels over photos are cut with clip-path: polygon(0 0,100% 0,94% 100%,0 100%), slanting on the right edge.
Parallelogram photos
Photos use the same cut: polygon(0 0,100% 0,94% 100%,0 100%). Flip to polygon(6% 0,100% 0,100% 100%,0 100%) on alternate rows.
Surface rules
- Square corners everywhere. No rounded corners, no pill shapes (the "pill" index links are slanted rectangles).
- No gradients, except a dark scrim on photos so text stays readable.
- No glows, glass or blur effects.
- Shadows are rare and soft: cards and the hero panel only.
- Red left rule (8 px) marks a white panel on a photo. Red top rule (6 px) marks cards and forms.
Motion, kept restrained
- The home hero is a full-screen film that settles into a frame as you scroll.
- Headings ease in once. One pinned horizontal photo gallery. Videos play only while on screen.
- Buttons lift 3 px on hover. That is all.
- Reduced motion: everything is static and the film does not autoplay. Phones get a simple stacked layout with no pinned scroll.
Buttons and components.
Everything below is rendered with the same CSS as the website, so it matches the real thing.
Buttons
Red is the main action, outline is the second action, black and white are for use on red or photo areas. One red button per view. Labels are short, bold capitals. Tap targets are at least 44 px tall.
Home hero panel
The way plumbing should be.
Family owned in Grand Rapids for 70 years. A real person answers the phone, day or night.
A white panel with a red left border sits on the full-screen film. On the website the film is a muted loop with a visible "Pause video" button.
Problem picker, service pills and bands
Service index pills (slanted, red when hovered)
"What is going on?" picker buttons on the home page: slanted heavy italic choices; the active one is red.
Now hiring.
We are seeking skilled, experienced plumbing technicians to join our team.
Red bands announce one thing and carry one button. The final band on most pages is black and carries the phone number.
Statement panel and big number
70 years of service!
Thank you, West Michigan.
The black slanted panel on a full-bleed photo is the "70 years" statement. The giant red number is the reviews statement. The 1,500 review count is the client's figure, to be confirmed against Google before launch.
4-Way Guarantee tiles and numbered blocks
We show up on time.
We answer the phone 24/7.
No pressure, no surprises.
Upfront pricing before work begins.
We treat your home like ours.
Rugs over carpet.
We stand behind our work.
One year, lifetime underground.
On the home page the four tiles are staggered slanted video clips that play only while visible. The guarantee page uses large numbered blocks (1, 2, 3, 4) beside a parallelogram photo.
Inner page hero, cards, FAQ and form
Every inner page opens with a short photo and a black slanted panel carrying the only h1.
Trenchless, less digging
Card with a 6 px red top rule, white ground and the one soft shadow.
Do you charge a service call fee?
Do you work on weekends?
Forms are native website-builder forms embedded on the page, with light-caps labels, stone fields and a red top rule.
Always
- Show the phone number in the header, the footer and a call bar on phones.
- One h1 per page. Visible focus on every control.
- Alt text on every photo that carries meaning.
Never
- Rows of identical icon cards.
- Eyebrow chips above headings, or fake countdowns and "only 2 slots left".
- Invented reviews. Placeholders stay clearly marked until real ones arrive.
Photography and video.
Real people, real jobs, real places. Our crew and our customers are the best proof we have.
Crew first. Named, smiling, at work on a Grand Rapids street.
The conversation. Technicians talking with homeowners at the door or in the kitchen.
The work. Trenches, trucks, equipment, the finished repair.
Do
- Use only real McDonald Plumbing photos and film: the crew, the trucks, real jobs, the shop.
- Lead with faces, at eye level, in natural light. Warm, true color.
- Video: muted loops, plays only while on screen, with a visible pause control and a still poster.
- Crop with the slanted frames. Leave room for the black panel and the phone number.
- Rugs over carpet, plywood over lawn: show the care in the photo.
Do not
- Stock photos of plumbers, families on couches, or wrench icons.
- AI-generated people, hands or pipes.
- Heavy filters, glows, or overlays that hide faces.
- Anything staged to look like a customer who is not.
Note: the website uses a rough stand-in hero film. The final brand film, and real team photos, are still to come. Photos shown here are from the June 2026 shoot and the brand film frames.
Voice and copy.
Plain, local and specific. We sound like a neighbor who knows plumbing, not like an advertisement.
Tagline
The way plumbing should be.
Capitalize only the first word, end with a full stop.
The 4-Way Guarantee
- On-time arrival. We answer the phone 24/7 and your technician arrives when scheduled.
- Zero pressure sales. Upfront pricing before work begins. We explain your options.
- We care about you and quality. Rugs over carpet, plywood over lawn.
- We stand behind it. A 1-year warranty on standard plumbing, lifetime on underground piping.
Say it like this
Rules
- Short sentences, plain words, real numbers: 1955, 24/7, 1-year warranty, lifetime underground warranty.
- Sentence-case headings. Titles stay under 60 characters and end with " | McDonald Plumbing". Descriptions under 155.
- The written quote and the 4-Way Guarantee are our proof.
- Reviews: a real quote, first name and last initial, neighborhood, service.
- No em dashes. Use a period or a comma.
Never
- Invent reviews, awards, numbers or license claims. If we cannot prove it, we do not say it.
- Buzzwords: solutions, leverage, premium, revolutionary, world-class.
- Fear or fake urgency.
- Exaggerated "70 years" repeats. Say it once, with a fact next to it.
What not to do.
A short list that keeps us from looking like every other plumber, or like a template.
No eyebrow chips
No small pill labels floating above headings.
No cream palette
Warm stone is a quiet neighbor to white, not a cream-and-serif look.
No icon card rows
No three or four identical icon cards. Use photos with captions.
No gradient text or glass
No glassmorphism, glows, rounded blobs or gradient headings.
No stock photography
No generic plumbers, no wrench-and-droplet icons.
No invented proof
No fake testimonials, ratings, awards or counters.
No blue
The aqua and navy are retired. The system is red, ink, white and stone.
No logo changes
Use the logo exactly as supplied, with clear space.
No hidden phone number
Phone is always visible, including a sticky call bar on phones.