Design System · v1.0

A residential contractor, in tokens.

Distilled from nevadawindowsanddoors.com — Master Craftsmen Inc., Las Vegas. The current site uses a 2014-era WordPress contractor stack (web-2.0 blue, Open Sans + Oswald). This system elevates the brand to match the products it actually sells: Marvin-grade windows, editorial product photography, and a 22-year licensed tradesperson tenure. Direction: "Desert Modern" — editorial / architectural / Pentagram-school.

Source
nevadawindowsanddoors.com
Captured
2026-05-07
Type
Fraunces · Inter · JetBrains Mono
License
NSCB #58740 · #68202
01

Logo & Wordmark

The current logo (red rooflines + drop shadow + italic-quoted tagline) reads 2004. The replacement is a typographic wordmark — Fraunces 400, "Master" in roman + "Craftsmen" in italic, with a small sand-ochre dot punctuation mark. The dot is the signature: a single brand-color pixel that reads at favicon scale.

Master Craftsmen Las Vegas · Est. 2004
Master Craftsmen Las Vegas · Est. 2004
02

Color & Surface

A Sonoran-modernist palette built around three temperatures: ink (charcoal, the desert at night), bone (paper warmth, the white stucco at noon), and sand-ochre (the brand color, picked from desert rock and Marvin Ultrex frame finishes). The current site's web-2.0 blue is retired entirely.

Sand-ochre
#b8723a · --brand
Primary brand · CTAs · accents
Sand Deep
#8b521f · --brand-deep
Hover · italic emphasis
Ink
#1a1a1a · --ink
Headings · primary text · dark surfaces
Ink Muted
#4a4338 · --ink-muted
Body copy
Ink Quiet
#6b6357 · --ink-quiet
Captions · meta · disabled
Bone
#f4efe8 · --bg
Page background — paper warmth
Bone Warm
#ebe3d6 · --surface-2
Section breaks · secondary fills
Rule
#d6cfc1 · --border
Default divider
03

Typography & Pairing

Display serif Fraunces (variable opsz) carries headlines, italics, and any moment that needs editorial weight. Inter handles body copy and UI. JetBrains Mono handles spec-sheet metadata, license numbers, and pattern names. The current site's Open Sans + Oswald pair is retired — there is no place in this system for condensed all-caps display.

.displayFraunces 300, opsz 144
clamp(56px–120px) · LH 0.94
Creating a better view.
.h1Fraunces 300, opsz 96
clamp(40px–72px) · LH 1.0

Replacement windows, done properly.

.h2Fraunces 400, opsz 72
clamp(28px–44px) · LH 1.05

Three things, done well.

.h3Fraunces 500, opsz 36
24px · LH 1.18

Infinity by Marvin · Ultrex fiberglass

.eyebrowInter 500, 12px
0.18em tracking · ALL CAPS
Las Vegas · Henderson · Est. 2004
.ledeInter 400, clamp(17–19px)
LH 1.55 · max 60ch

Southern Nevada's exclusive Infinity by Marvin certified contractor. Twenty-two years of fitting fiberglass, wood-clad, and oversized glass into homes that deserve the upgrade.

.lede-editorialFraunces 300 italic
clamp(20–28px)

We don't sell windows. We sell mornings.

bodyInter 400, 16px
LH 1.55 · max 72ch

Stucco-cut, drywall-cut, second-story balcony reaches, and the kind of arch-top conversions other crews refuse — that is most of what we do. We are a contractor, not a marketing arm of a manufacturer.

.spec-lineJetBrains Mono 400
12px · 0.04em tracking

NSCB № 58740 · № 68202 · Bonded · Insured · Family-owned since 2004

04

Buttons & Links

Pill buttons (999px radius), 1.5px ink border, 13px Inter 500 with 0.04em tracking. Primary fills with ink, hovers to sand-deep with a 1px lift. Arrow links sit on a 1px ink underline; the arrow nudges 8px right on hover.

Chips / tags
Infinity certified 5-year warranty Family owned
05

Architectural Rule

A 1px ink hairline is the system's primary divider — between sections, before eyebrows, around photo plates. The hairline is the editorial signature: it says "this is a magazine spread, not a landing page." Use sparingly; never more than two on a single screen.

--rule · 1px × 56px
Section divider
--rule · 1px × 140px
Tall column break
--brand · 1px × 56px
Eyebrow rule (28px width)
06

Cards & Tiles

Standard product / service card: 1px border, 4px radius (minimal), 4:3 photo top, 28px body padding. Hover lifts 4px with a soft sand-tinted shadow. The card is restrained — most of the visual interest comes from the photography, not chrome.

07

Photography & Imagery

The brand's strongest existing asset. Marvin-supplied editorial photography: mountain horizon through black-frame Ultrex windows, multi-slide patio openings, lifestyle interiors. Used at full-bleed in heroes and at 4:5 in plate callouts. No stock images, no compositing.

08

Tokens & Variables

Every value in the system is a CSS custom property in _shared.css. Theme variants (Sonoran Warmth, Heritage Brass, Nevada Dusk) can be added later by overriding the COLOR group only — type and layout stay constant.

VariableValueUsage
--brand#b8723aPrimary brand · accents · italic emphasis
--brand-deep#8b521fCTA hover, headline italics, eyebrow
--ink#1a1a1aPrimary text, headings, dark surfaces
--ink-muted#4a4338Body copy
--ink-quiet#6b6357Captions, meta, hairline labels
--bg#f4efe8Page background — bone
--surface#ffffffCards, modals, table headers
--surface-2#ebe3d6Section breaks, fills
--border#d6cfc1Default divider
--font-display'Fraunces', serifHeadings, italic emphasis
--font-body'Inter', sans-serifBody, UI, eyebrow
--font-mono'JetBrains Mono'Spec lines, license numbers, pattern names
--container1200pxStandard content width
--container-narrow880pxEditorial / prose blocks
--section120pxVertical section padding
--r-md4pxDefault radius (cards, inputs) — minimal
10

Signature Patterns

Three Master Craftsmen-only patterns, available nowhere else in this catalog: the Plate Callout (numbered editorial photo block), the Spec Card (manufacturer / product detail with mono metadata), and the Trust Rule (full-bleed manufacturer marks separated by hairline).

Plate № 01 · Henderson Residence

Infinity by Marvin · direct-glaze picture windows, 14-ft span, Ultrex fiberglass

Plate № 02 Marvin · Authorized
Infinity by Marvin Ultrex

Pultruded fiberglass replacement window. Engineered for desert UV and the 115° August roof-load Las Vegas homes see for ninety days a year.

  • Frame material Ultrex fiberglass
  • Glass package LoĒ-272 Argon
  • U-factor 0.27
  • Custom build window 6–8 wk
  • Warranty Limited lifetime
Authorized
contractor for
Infinity by Marvin Milgard ThermaTru Weather Shield Western Window Systems OSI