Mick's Plumbing — Design System

Internal reference · Not linked from site

Foundation

Colors

The full palette used across all pages. Brand blues are primary; red is reserved for CTAs and emergency callouts only.

Brand
Primary Blue
#1a4f9e
Header, links, buttons, accents
Dark Navy
#1a2340
Page hero, footer, headings
Blue Dark
#163f80
Button hover state
Blue Tint
#e6eef9
Hover backgrounds, badge fills
Blue Wash
#f0f5ff
Section backgrounds
Accent
Alert Red
#e8392a
CTAs, emergency, guarantee badge
Red Dark
#c42f22
Red button hover state
Red Tint
#fde8e8
Emergency row backgrounds
Success Green
#2eaa6b
Form validation success
Star Gold
#f5c518
Star ratings, review icons
Neutrals
Text Dark
#222222
Body copy default
Text Mid
#555555
Subtext, descriptions
Text Light
#888888
Hints, placeholders
Border
#dde4ef
Card borders, dividers
Page BG
#f4f7fc
Contact page background
White
#ffffff
Card backgrounds, nav

Foundation

Typography

All text uses Segoe UI (system font stack). No custom web font is loaded — fast and consistent on Windows, Mac, and mobile.

H1 / Page Hero
48px · 900 weight · #fff on dark

Mick's Plumbing

H1 / Light Hero
42px · 900 weight

Contact Us

H2 / Section
32–36px · 800 weight · #1a2340

Our Plumbing Services

H2 Accent Span
color:#1a4f9e on key word

Serving Yonkers

H3 / Card Title
18–22px · 800 weight

Water Heater Repair

Section Label
12px · 700 · uppercase · #1a4f9e · ls:2px
Our Services
Body / Lead
16px · 400 · #555 · lh:1.7

We send licensed, background-checked technicians to homes and businesses across Westchester County — typically within the same day.

Body / Regular
14–15px · 400 · #555 · lh:1.6–1.75

Whether you're in the city or the suburbs, Mick's Plumbing has you covered. Don't see your town listed? Give us a call.

Nav Link
14px · 600 · #333
About Us   Servicesactive
Form Label
13px · 700 · uppercase · ls:0.4px · #1a2340
Your Full Name
Small / Caption
11–12px · #888
Licensed & Insured · Yonkers, NY 10706
Top Bar Text
13px · #fff on navy
(914) 555-3000   Mon–Fri 7am–7pm

Foundation

Spacing & Layout

The site uses a fixed 1280px centered container with 40px side padding. Vertical rhythm is based on 4px increments.

Spacing Scale
4px
Micro gap — icon-to-text, inline items
8px
Tight gap — label-to-input, stacked elements
12px
Default gap — grid items, badge rows
16px
Card internal gap, form rows
20px
Form group margin-bottom
24px
Sidebar section gaps
40px
Inner horizontal padding (left + right)
48–52px
Hero vertical padding
60px
Content-area vertical padding
70px
Section padding (contact, services)
Layout Grid
Max Width
1280px
margin: 0 auto; padding: 0 40px
Services Grid
3 columns
grid-template-columns: repeat(3,1fr)
Contact Layout
Content + 380px sidebar
grid-template-columns: 1fr 380px
Service Area
Content + 340px sidebar
grid-template-columns: 1fr 340px
Footer
4 columns
grid-template-columns: 1.6fr 1fr 1fr 1fr

Interactive

Buttons

Four button variants plus size modifiers. Hover over each to see the state change.

Primary Variants
Book a Service
Primary Blue
#1a4f9e → #163f80
Call Now
Alert Red
#e8392a → #c42f22
Learn More
Outline Blue
transparent → #1a4f9e fill
View Services
Outline White
for dark backgrounds
Disabled
opacity:0.7 · cursor:not-allowed
Sizes
Large
16px 36px · 17px text
Default
13px 28px · 15px text
Small
8px 18px · 13px text
Schedule Service
Header CTA
uppercase · ls:0.5px · 13px

Interactive

Form Elements

All form controls share the same base style. Border transitions to brand blue on focus; turns red on error, green on success.

Helper text goes here
Border + ring on focus
Please enter a valid email address
Looks good
Cannot be edited
Resizable vertically

Labels

Badges & Tags

Used for status indicators, labels, and the guarantee badge. Section labels are the all-caps eyebrow text above section headings.

Status Badges
Licensed Insured Emergency Available Now 5-Star Rated Westchester County
Section Label (Eyebrow)
Our Services
Why Choose Us
12px · 700 weight · uppercase · letter-spacing:2px · color:#1a4f9e
Guarantee Badge
100% ✓ Guaranteed
96×96px · background:#e8392a
Used in "Why Terry's" dark section on homepage

Brand

Icons

All icons are inline SVG. Sizes: 18px (info rows), 24px (contact card), 34px (header badge). Stroke-based, no fill except fills.

Location
Phone
Email
Clock / Hours
Emergency / Alert
Checkmark
Star
Guarantee
Service / Grid
Emergency (red)
logo
Brand Logo
Icon Containers
40px · #1a4f9e circle
sidebar "Why Choose" rows
48px · #e6eef9 rounded square
contact info icons
62px · header badge

Components

Cards

Five card types used across the site. All use border-radius:10–12px and a consistent box-shadow.

Service Card (Services page · 3-col grid)
480×260 image
Drain Cleaning
Clogged drains cleared fast with professional equipment. No mess, no damage.
Learn More →
Shadow: 0 4px 18px rgba(0,0,0,0.09)
Hover: translateY(-4px) · 0 10px 32px
Image: full width · 200px height
Padding: 22px 24px (body)
Title: 17px · 800 · #1a2340
Desc: 13px · #666 · lh:1.5
Link: 13px · 700 · #1a4f9e
Info / Sidebar Card
Contact Information
(914) 555-3000
info@micksplumbing.com
Mon–Fri 7am–7pm
Sat 8am–4pm
Header: bg:#1a4f9e · color:#fff · 16px 800
Body: padding 16px 20px
Row dot: 8px · bg:#1a4f9e · circle
Text: 13px · #444 · lh:1.5
Stat Bar (About page)
15+
Years Experience
2,400+
Jobs Completed
4.9★
Google Rating
24/7
Emergency Service
bg:#1a4f9e · 4-col grid · num:28px 900 · label:12px rgba(255,255,255,0.75) · separator:rgba(255,255,255,0.2)
Testimonial Card
★★★★★
"Mick's team arrived within two hours and had our burst pipe fixed before dinner. Professional, clean, fair price."
Sarah K.
Scarsdale, NY
Stars: color:#f5c518 · 16px
Text: 13px · italic · #444 · lh:1.6
Author: 12px · 700 · #1a2340
Location: 11px · #999

Feedback

Alerts & Notices

Used for form feedback, inline notices, and status messages. Left-border accent distinguishes severity.

ℹ
Info: Your request has been received. We'll follow up within one business day.
✓
Success: Your service request was submitted. Confirmation sent to your email.
⚠
Warning: We're experiencing high call volume. Wait times may be longer than usual.
✕
Error: Something went wrong. Please check your details and try again.

Page Components

Assembled Components

Full-width site components shown at reduced scale for reference.

Header / Navigation
📞 (914) 555-3000 Mon–Fri 7am–7pm Yonkers, NY 10706
Home Services About Service Area Contact
(914) 555-3000 Schedule Service
How It Works — Process Steps
1
Call or Book Online
Reach us 24/7 by phone or use our online form
2
Get a Quote
Upfront flat-rate pricing before any work begins
3
We Come to You
Same-day dispatch across Westchester County
4
Job Done Right
100% satisfaction guaranteed or we make it right
Trust Bar
Licensed & Insured
24/7 Emergency Service
Same-Day Dispatch
Flat-Rate Pricing
100% Satisfaction Guarantee
Footer
Mick's Plumbing
Licensed & Insured

Serving Yonkers and Westchester County since 2009. Licensed, insured, and available 24/7 for all your plumbing needs.

Services

Emergency Plumbing Drain Cleaning Water Heaters Leak Detection

Company

About Us Service Area Contact

Contact

(914) 555-3000 info@micksplumbing.com Yonkers, NY 10706
© 2026 Mick's Plumbing. All rights reserved.