Foundations · 2026-05-13

Design System.

Every token, swatch, type spec, button, and primitive. Source-of-truth for the VIP Remodeling brand kit. All values mirror vipremodelingaz.com.

01 · Color

Estate palette.

Three pigments, no more. Navy carries 80% of the system, cream is the page, gold is the singular accent. Adding a fourth color is the fastest way to break the brand.

Navy
Token
--vip-navy
Hex
#082E5F
Role
Buttons · footer · pull-block · hero scrim
Accent · primary
Champagne Gold
#D4AF37
Background · default
Paper Cream
#FCFBF9

Supporting tokens

Navy Deep
#051F42
Hover · pressed
Gold Deep
#B8932A
Text on cream
Ink
#1A202C
Body text
Ink Mid
#4A5568
Secondary body
Ink Soft
#7A8597
Meta · captions
Border
#E6DFD0
Hairlines
BG Soft
#F4F0E8
Alt section bg
BG Warm
#FAF6EE
Tile/card wash

The palette toggle (right-side panel) swaps to Onyx, Desert, and Stone variants. All tokens above re-map; component code never changes.

02 · Type

A serif, a sans, an italic.

Playfair Display does all display work. Manrope does all body. Cormorant Garamond — italic only — handles the editorial kicker phrases. Never substitute Manrope-italic for Cormorant.

Display · Playfair Display 700/800

Elevating Spaces.

Use for hero, section H2, page titles. Italic with .it swaps to Cormorant Garamond automatically.

H2 · Playfair 700

The Art of Perfection.

clamp(1.75rem, 3.2vw, 2.75rem) · letter-spacing -0.015em

H3 · Playfair 600

Bespoke kitchen renovations.

clamp(1.25rem, 2vw, 1.625rem) · letter-spacing -0.005em

Italic kicker · Cormorant Garamond 500i

Our Disciplines

Gold-deep. Always one line. Always followed by a Playfair H2.

Body · Manrope 400/500

A standard bathroom remodel typically takes 3–4 weeks. We use that time to set bookmatched stone, source brass fixtures, and verify every transition before it sets.

1rem · line-height 1.65 · color ink-mid

Signature 3-line section head

The most identifiable typographic pattern. Use to open every major section.

Eyebrow · uppercase Italic kicker

Display title.

Spacing: gap 14px between rows. Eyebrow includes 28px gold rule. Kicker is single-line. Title can wrap.

03 · Buttons

Six variants. Pill-shaped. Tracked uppercase.

All buttons are border-radius 999px, padding 14×28 (lg: 18×36), tracking 0.08em, uppercase. Arrow icons shift 4px on hover.

Sizes

04 · Primitives

Eyebrow · rule · mark · pill.

Eyebrow with bar

Expertise · Bespoke
<span class="eyebrow gold with-bar">...</span>

Gold rule

short
long
divider-gold

Mark / highlight

Crafted with meticulous attention. Or use a thin underline.

Pills

Signature License ROC 345112
05 · Cards

Service · Stat · Review.

Numbered service card Signature

Stat card

20+
Years
67
5★ Reviews
7
Cities Served
100%
Insured

Review card

Google ✓
★ ★ ★ ★ ★

"VIP Remodeling did an outstanding job. Dmitriy is always available and very responsive. Tile is done to perfection."

JB

John Barnes

Posted on Google

Google ✓
★ ★ ★ ★ ★

"The craftsmanship reflects a level of pride and precision that is increasingly rare."

MD

Michael Dokich

Posted on Google

06 · Forms

Underline-only inputs.

No boxed inputs. Bottom border only — turns gold on focus. Labels are uppercase eyebrow style above the field.

Submit

Location pills

Chandler Tempe Gilbert Mesa Queen Creek Scottsdale Paradise Valley
07 · Layout

Grid · spacing · rhythm.

TokenValueWhere
--container1240pxMax content width
--gutterclamp(1.5rem, 4vw, 3.5rem)Horizontal padding
section paddingclamp(3rem, 5vw, 5rem) blockMagazine pacing — generous
card padding36px 32px 32pxService & value cards
grid gap24px (default) · 32px (gap-md) · 48px (gap-lg)Component grids
section-head gap14pxBetween eyebrow, kicker, title
border-radius0 (cards) · 999px (buttons, pills)Square cards, round actions
08 · Forbidden moves

Don't do these.

Each of these breaks the brand. They aren't taste calls — they're rules.