Design System · v1.0

A Vegas window-and-door identity, in tokens.

Distilled from nevadawindowsanddoors.com — real colors lifted from production CSS, real product photography from Master Craftsmen's WordPress media library, and the original Oswald + Open Sans Google stack kept 1:1 (already free). Every token below has a one-to-one mapping with a value in the live site's stylesheet.

Sourcenevadawindowsanddoors.com
Captured2026-05-07
TypeOswald + Open Sans (Google)
Photography8 real photos · WordPress media
01

Logo

The canonical Master Craftsmen lockup, lifted directly from the production WordPress media library. Two gabled rooflines in burgundy over the "Master CRAFTSMEN" stacked wordmark, framed by "Las Vegas, NV · Inc." underline and the "WINDOWS & DOORS" sub-brand line, with the italic "Creating A Better View" tagline at the top. Light variant for cream/white backgrounds; dark/footer variant for navy chrome. The lockup ships as a flat PNG — no SVG exists. For production, the wordmark is used at ~140px wide in nav and 90px tall in footer.

Master Craftsmen Inc. — primary lockup
Master Craftsmen Inc. — reverse lockup
02

Color

Brand blue does the heavy lifting — primary CTAs, links, headlines, the dominant voice across the live site (59 occurrences in the source CSS). Burgundy is the accent — a holdover from the 2004 logo's red roofline, used sparingly for secondary CTAs and the "Specials" treatment (13 occurrences). Deep navy carries gravity for footer + dark sections. Soft off-white is the page surface — never pure white as default. All values lifted from production CSS via grep.

Brand
#0095eb
Brand Deep
#0082c8
Brand Soft
#7ec0ec
Brand Pale
#d5e5ee
Accent Burgundy
#97002e
Accent Deep
#5d001c
Accent Teal
#68a6a6
Ink
#191919
Ink Deep
#0d2840
Background
#f7f7f7
Pure White
#ffffff
Border
#dbdddf
03

Typography

Master Craftsmen ships Oswald (display, condensed sans) and Open Sans (body, humanist) — both already free Google Fonts, kept 1:1 here. Display headlines are Oswald 700 in tracked uppercase — the contractor-confident industrial silhouette. Body is Open Sans 400 with generous line-height (1.65) for readability across long product descriptions. The signature pairing: tracked uppercase eyebrows in Oswald 700 over Open Sans body — used everywhere as the trade-craft label.

DisplayOswald 700 / 0.01em / UPPERCASE
New windows, better view
H1Oswald 700 / 0.005em / UPPERCASE
Authorized Infinity by Marvin dealer
H2Oswald 700 / UPPERCASE
Family-owned since 2004
H3Oswald 600 / UPPERCASE
Replacement Windows & Energy Efficiency
EyebrowOswald 700 · 12px · 0.18em
Las Vegas · Henderson
LedeOpen Sans 400 · 22px

For 22 years we've installed window-and-door packages across Las Vegas, Henderson, Summerlin, and Spring Valley. Authorized Infinity by Marvin and Milgard certified dealer, family-owned, fully licensed (NSCB #58740, #68202), bonded, and insured.

BodyOpen Sans 400 · 17px / 1.65

Vegas summers are hard on windows. Single-pane glass loses 25 to 30 percent of your cooling load — that's a $200 to $400 bump on a typical August power bill. Replacing with a Marvin Infinity fiberglass package or Milgard's tuscany vinyl line drops that loss to 8–12 percent, and pays for itself in 7–9 years on the average Vegas home.

Stat figureOswald 700 · 96px
22
04

Buttons & Links

Primary buttons are solid brand-blue with a 4px radius (flat, contractor-confident — no rounded SaaS pills) and uppercase Oswald. The arrow link is the soft alternative — used wherever a button would be too loud. Burgundy variant exists for the rare cases that need a second voice (specials/promotions). The on-dark white button anchors the free-quote band.

Chips & labels
Authorized Marvin Current Special Las Vegas · NSCB #58740
05

Product Line Cards .sig-product-line-card

Master Craftsmen's signature treatment for the Windows / Doors split — full-bleed editorial product photography with a centered Marvin or Milgard logomark overlay, Oswald 700 H3, and a primary-blue CTA. Two-up grid on desktop, stacked on mobile. The exact pattern from MC's live homepage, refined: white card on cream surface, subtle border on hover, brand-blue lift.

06

Free Quote Band .sig-free-quote-band

Master Craftsmen's signature conversion moment — repeated on every landing on the live site. Full-bleed dark navy band with brand-blue heading + a two-button row ("Free In-Home Estimate" primary + "Visit Showroom" secondary) + the showroom address line. The dark navy provides contrast against the photography-heavy product pages above; the brand-soft accents add warmth.

Get started today

Free in-home estimate — no pressure, no quotas, no upsell.

A licensed estimator at your house, real measurements, exact-window pricing in writing within 48 hours. Same crew, every time, since 2004.

Schedule Estimate Visit Showroom
7850 Dean Martin Dr · Las Vegas, NV · (702) 330-7907
07

Certification Strip .sig-certification-strip

Master Craftsmen's distinct ask is that it's authorized — partner identity is a primary trust signal, not background. Manufacturer marks render at 65% greyscale + 85% opacity, restoring full color on hover. Six-up on desktop, three-up on mobile. Use on homepage, About page, and every product detail.

Authorized & Certified

Manufacturer relationships, on the wall

Infinity by Marvin
Milgard
Therma-Tru
Weather Shield
Marvin Certified Dealer
Milgard Certified Dealer
08

Showroom Locator .sig-showroom-locator

A 5,000+ sq ft physical showroom on Dean Martin Dr is one of MC's most defensible trust assets. The pattern pairs the real outdoor-signage photo (the actual building) with a card showing address, phone, and hours. Always include the photo — architectural context = credibility for a contractor in a market full of fly-by-nights.

Visit us in person

5,000 sq ft Las Vegas showroom

7850 Dean Martin Dr, Suite 502
Las Vegas, NV 89139

(702) 330-7907

Showroom hours

Mon9:00 am – 5:00 pm
Tue9:00 am – 5:00 pm
Wed9:00 am – 5:00 pm
Thu9:00 am – 5:00 pm
Fri9:00 am – 5:00 pm
Sat10:00 am – 3:00 pm
SunClosed
09

Trust Strip .sig-trust-strip

A four-up row of Master Craftsmen's most-repeated trust badges — Family Owned, Licensed Installers, Vegas Showroom, Stucco-Finish Installation — sourced from the live site's homepage trust band. Used as the editorial close-out below the hero on the homepage and at the top of product pages.

Family owned and operated
Family-Owned Since 2004
Licensed installers
Licensed · Bonded · Insured
Vegas showroom
5,000 sq ft Showroom
Stucco-finish installation
Stucco-Finish Installation
10

Quote Card .sig-quote-card

Pull-quote treatment for homeowner reviews — italic body in Open Sans 500 with an oversized opening glyph in brand-soft blue, left border in brand blue, 5-star row + name + neighborhood. Used sparingly — one per page max — to give a real Vegas-area voice center stage.

The crew showed up exactly when they said they would, pulled out 14 windows in two days, and our August power bill dropped by $180. The Marvin Infinity windows look like they belong in a magazine.

★★★★★

Linda T.

Summerlin · 14-window project · 2024

11

Installer Profile .sig-installer-profile

Single-headshot bio for the installation crew lead. The trust signal MC's market most needs is "real licensed humans installing your $20K window package." Photo (1:1), name, NSCB-license-noted role, 1-paragraph bio, and a credentials chip-row.

Meet the lead installer

Carlos Mendoza

Lead Installation Foreman · NSCB #58740

Carlos has run window-and-door installs for Master Craftsmen since 2011. He grew up framing in Bakersfield, came to Vegas in 2008, and has a Marvin certification on every product line we sell. If your project is over six windows, he is the foreman on-site — same crew, every time.

Marvin Certified Milgard Certified 15+ years
12

Photography

Editorial Marvin product photography — black-frame floor-to-ceiling glass, light-filled interiors, Vegas-area exteriors at dusk and golden hour. Plus the real outdoor signage shot on Dean Martin Dr (the actual building, not a stock image). Never replace these with stock photography — they are MC's most defensible visual asset.

13

CSS Tokens

All tokens that ship in _shared.css. Reference these from any page — they're the contract between this design system and any prospect-specific overrides.

TokenValueUsage
--brand#0095ebPrimary blue — CTAs, links, headlines
--brand-deep#0082c8Hover state of primary blue
--brand-soft#7ec0ecLighter blue — highlights, badges
--brand-pale#d5e5eePale blue — info bands, swatch backers
--accent-burgundy#97002eBurgundy accent — secondary CTAs (sparing)
--accent-deep#5d001cHover state of burgundy
--accent-teal#68a6a6Tertiary muted teal (rare)
--ink#191919Primary near-black text
--ink-softrgba(25,25,25,0.8)Secondary text
--ink-mutedrgba(25,25,25,0.7)Captions
--ink-quietrgba(25,25,25,0.3)Hairlines
--ink-faintrgba(25,25,25,0.12)Card borders
--ink-deep#0d2840Deep navy — footer + dark sections
--bg#f7f7f7Soft off-white page background
--bg-pure#ffffffPure white — cards, modals
--border#dbdddfForm/input border
--font-display'Oswald', sans-serifDisplay, headlines, eyebrows
--font-body'Open Sans', sans-serifBody, lede, captions
--container1240pxDefault content max-width
--gutter32pxOuter page padding
--section120pxVertical section padding