Design system · 2026-05-13

VIP Remodeling.

A reusable kit modeled from vipremodelingaz.com — Arizona's luxury home remodeling contractor, founded and run by Dmitriy. Estate-grade navy + champagne gold + paper cream, Playfair Display + Manrope, with the editorial 3-line section heads and italic-numeral service cards that make the brand recognizable.

What's in here

Eight files. One system. Every page is standalone-runnable — open and view.

FileRoleWhat it gives you
brand-spec.mdSource narrativeVoice anchors verbatim from the live site, color tokens with semantic mapping, signature patterns, forbidden moves, mood keywords, business facts. Read first.
_shared.cssTokens + components~770 lines — CSS variables, layout grid, buttons, all signature patterns. Every HTML file loads this one stylesheet.
palettes.jsonPalette toggle4 palettes: Estate (default navy + gold), Onyx (black + bronze), Desert (sage + terracotta), Stone (putty + bronze).
design-system.htmlFoundationsEvery color swatch, type spec, button variant, primitive, form field, and forbidden move. Use as the visual API.
sections.htmlPattern catalog17 reusable sections rendered with verbatim VIP voice — hero-photo, trust-marquee, three-line-head, services-numbered, showcase-grid, philosophy pull-block, process, reviews, FAQ, contact-split, and more.
pages.htmlPage galleryThumbnail grid of every full-page composition (homepage + about + services + contact).
homepage.htmlHomepagePhotographic hero · trust marquee · numbered services · showcase grid · philosophy pull-block · stat row · reviews · FAQ · CTA · footer.
about.htmlAbout / StudioTypographic hero · Dmitriy story · process steps · stat row · case-study image-left/right alternation · CTA.
services.htmlServices landingHero · six service deep-dives (one per discipline) · process · trust marquee · CTA.
contact.htmlContactSplit contact form + location pills + direct line · service-area map call-out · footer.
assets/Brand assets8 real assets pulled from the live site: logo mark, hero living-room photo, 4 interior photos, plus 2 additional residential shots.

The brand in one paragraph

VIP Remodeling is a 20-year-old Phoenix-metro design-build contractor (ROC 345112) — Dmitriy at the helm, 67 verified Google reviews averaging 5★, residential luxury kitchens, baths, and whole-home gut renovations. The brand sits in the Architectural Digest cousin space: navy & gold magazine palette, Playfair Display serif, Manrope sans, Cormorant Garamond italic for editorial kickers. The signature visual move is the three-line section head — eyebrow → italic kicker → display title — repeated at every major beat. Service cards carry italic gold numerals 01–06; the project showcase uses 4:5 portrait tiles with the same numeral chip plus a category-uppercase / project-name pair under a gradient scrim. There is exactly one accent color (gold), exactly one display family (Playfair), and exactly one italic family (Cormorant). Anything else is a slip.

Tonal cousins

AD · Pentagram · Aman

Magazine-paced editorial confidence. Residential luxury without theatre.

Distant cousins

Home Depot · Bob Vila · Lowe's

Trade-supply orange-and-blue. Not us. VIP runs estate, not aisle.

Signature mood

estate · timeless · bespoke · still

If a design choice doesn't serve at least two of these, choose the other option.

Voice anchors

Pulled verbatim from the live site. Use whenever a copy slot fits.

"Elevating Spaces."

Primary tagline. Hero headline OR footer signature.

"We craft masterful renovations in Arizona, blending timeless aesthetics with uncompromising quality."

The lede. Goes under every hero.

"The Art of Perfection."

Philosophy block title.

"Bespoke Expertise."

Services section title.

"From the first sketch to the final polish, we are with you."

Philosophy body. Excellent CTA pre-line.

"Premier Remodeling in Arizona."

SEO H2 / footer descriptor.

Forbidden moves

Short list. Each would dilute the brand's identity.