Tokens, ramp, controls

Every value below was read off the live site: colours ranked by painted area, radii by element census, type by computed style. The declared values that render nowhere are listed at the bottom so the next person does not resurrect them.

COLOUR

Swatches

Accent#5e1717
Slate#59697a
Ink#1c1c1c
Grey light#f2f2f2
Grey mid#cbcbcb
Paper#ffffff

Painted area on the source homepage at 1440: paper 5,364,931 px², grey light 2,926,640 px², slate 278,201 px², oxblood 90,804 px². The accent is deliberately the smallest of the four.

TYPE

Ramp

One family, Montserrat, self-hosted by the source and free on Google Fonts, so it is used directly with no substitution. Tracking on every heading is exactly 10% of its own font size, which is the single rule that makes the system recognisable.

MASTER CRAFTSMEN

hero-text · 84px · 800 · .1em · uppercase

WINDOWS DONE RIGHT

h1 · 60px · 800 · .1em

THE RIGHT FIT FOR EVERY HOME

h2 · 48px · 800 · .1em

OUR 3-STEP PROCESS

h3 · 36px · 800 · .1em

LIFETIME VALUE GUARANTEED

h4 · 24px · 800 · .1em

TESTIMONIALS

h5 and pre-title · 18px · 700 · .1em

Since 2004, Las Vegas and Henderson homeowners have trusted Master Craftsmen Inc. to get it right the first time.

body-large · 22px · 400 · 1.64

Built with Ultrex fiberglass frames, Infinity windows resist cracking, warping, and rotting in even the harshest desert conditions.

body · 16px · 400 · 1.56 · .4px

CONTROLS

Buttons

VariantGroundHover, transcribed from the source
.btn--slate#59697aFlips to white ground with a slate border
.btn--red#5e1717Flips to white ground with an oxblood border
.btn--white#ffffffFlips to the ink ground
.btn--red-linkNonetransform: translateX(5px)

All controls sit at a 5px radius. The circular radii in the source belong to slider arrows, not buttons.

DEVICES

Signature anchors

Pre-title with rule

A 30px hairline before an uppercase label, above nearly every heading on the site.

THE MASTER CRAFTSMEN DIFFERENCE

Hairline graphics

1px rules in grey mid, used for list markers, claim separators and meta strips.


Hard-stop edge fade

Opaque to 8%, clear to 92%, opaque again. Rebuilt in CSS rather than approximated with a soft gradient.

Scrim over photography

Every dark band is a photograph under rgba(0,0,0,.7). The container also declares a solid ink ground so text is never unpainted.

ASSETS

Marks and photography

Primary logo

Primary mark, the only variant the source ships.

On-dark logo

On-dark variant, derived by inverting lightness and holding hue.

DO NOT RESURRECT

Declared but dead

ValueWhy it is not in this system
9999px radiusDeclared once per page, renders on 6 elements, all slider arrows. Not the button system.
#ff6900 and the Gutenberg presetsWordPress core defaults. They paint on zero elements.
21 --bs-* tokensBootstrap defaults, never referenced by the theme.
159 hover and focus selectorsFramework rules whose classes appear on no crawled page.
#212529Bootstrap body colour leaking onto 51 elements. The authored ink is #1c1c1c and the kit uses one ink.