Direct without being blunt. Warm without being saccharine. Specific without being a brochure. The brand voice writes about projects the way a contractor talks at the kitchen table at the end of a long day: honest about what went well, honest about what didn’t, clear about what happens next. The website reads in third person, never “we” — the visitor is meeting Wright’s, not being talked to by it.

The wordmark is set in custom-tuned Playfair Display with a hand-built house-and-W mark to the left. Default placement is the horizontal lockup; the stacked version is for narrow constraints; the mark alone is for favicons, social avatars, and pattern repeats. Always pair the lockup with the proper cream or white plate — never on busy backgrounds without a plate.

Use the all-white variant when the surface is a photo or when a single quiet color is wanted. Use the white + Solaris orange variant when the brand should pop — the wordmark stays white and “Renovations” picks up the Solaris accent, mirroring the design system’s emphasis pattern used throughout headlines.

Use the navy mono variant for engraving, embossing, single-color print, fax, and any reproduction limited to one ink. Use the Solaris-only mark sparingly — for favicon, app icon, and social avatar use where the orange should carry recognition on its own.

Always reserve clear margin around the mark equal to the width of the window square inside the house outline. Below 28 pixels tall the wordmark drops out and the mark-only is used. The horizontal lockup needs at least 120 pixels of width to remain legible; below that, switch to the stacked lockup or the mark alone.

64px · ideal nav size

40px · minimum legible

28px · favicon / monogram

The mark needs room and the right color context to do its job. The following placements break legibility, recognition, or both. If a placement requires any of these, change the variant before changing the placement.

The brand’s signature accent. Use the 500 for CTAs and key moments; the 50–200 for backgrounds and quiet tints; the 700–900 for hover, press, and accessible text on light surfaces.

Page backgrounds, soft callouts, testimonial blocks. Cream-50 is the default page background; cream-100 is the next step deeper.

Ink-900 is the primary text color (never pure black). Ink-700 is body copy. Ink-500 is muted/secondary. Ink-200 is hairline borders. Ink-50 is the coolest surface tint.

Reserved for status messages, form validation, and alerts. Each pair: a tint for backgrounds, a 500 for icons and borders, a 700 for accessible text.

A quiet row of third-party badges. Render in monochrome navy on cream and only colorize on dark surfaces or when a single badge gets the spotlight. Place above the fold on the home, services, and pricing pages, and just above the footer on every page.

A single block that pulls the star rating, total review count, and the most recent reviews from each platform. The visible total is what makes this work — it converts a vague claim into a verifiable fact.

Some homeowners explicitly look for license and bond information before they will agree to a consultation — especially on projects above $50,000. Make these numbers easy to find rather than burying them in the footer fine print.

Local press and industry recognition. Keep this section quiet — monochrome navy or gray on cream, never the actual brand colors of the outlets — and let the names do the work.

Each tier represents a coherent set of finishes and a real range of project totals. The tiers don’t overlap by accident — they correspond to materially different design intents, sub-contractor mixes, and lead times. Homeowners self-select before the first meeting more often than not, which means fewer mismatched consultations.

A neutral comparison that addresses the real question homeowners ask themselves before they call. The goal is not to disparage other paths — most homeowners considering Wright’s have already worked with a general contractor or a handyman before — but to make the trade-offs visible.

Solaris highlights the active service zone. The HQ pin anchors Ypsilanti at the center of Washtenaw County. Premium target cities — Birmingham, Bloomfield Hills, Northville, Novi — get small accent dots to signal active expansion.

A 44-pixel strip above the main header. Use for seasonal booking windows (“now booking spring 2026 — 4 spots remaining”), promotions, or event mentions. Closable but reappears after a session expires.

Pinned to the bottom of mobile viewports across every page that’s not a form or a thank-you. Three actions, equal weight. The primary action (quote) gets the Solaris background; the secondary actions (call, text) stay quiet.

A 3-field consultation form for placement inside service pages, the sidebar of long blog posts, and at the end of project case studies. Asks for name, email, and project type only — anything more belongs on the dedicated contact page.

A representative kitchen remodel quote at the Elevated tier. Categories collapse to subtotals on the proposal PDF and expand to line items in the homeowner portal. The contingency line lives outside the project total so the math stays honest: this is what we’ve set aside, here’s why, here’s when it gets refunded.

Drops into the right rail of any article longer than 1,200 words. The active section highlights as the reader scrolls, the orange tab grows by one pixel of width to signal current position, and the entire block sticks at 96 pixels from the top so the homeowner always knows where they are.

A pull-quote does work that a paragraph can’t — it reframes the argument so a skimming reader gets the point even if they never go back to the body. Use one every 600 to 900 words in long-form. Never repeat the exact body text; rephrase for punch.

Every image carries a caption that adds context the photo can’t, plus a photographer credit. Captions read full width below the image at 12.5 pixels, ink-600. Credit sits inline-right in mono and never breaks across the line. The FPO block shows where real photos go — once project shots are in, swap the gradient for the image and the layout is identical.

A poster image with a Solaris play button overlay. Click expands to a YouTube or Vimeo embed; the underlying iframe stays unloaded until the click, so video modules don’t cost anything on initial page weight. Transcripts always live underneath as a hidden details element for accessibility and indexing.

Appears once at the top of every article (small, inline byline) and once at the bottom (the full block below). The avatar uses a colored circle with the author’s initial until a headshot is uploaded; the block degrades gracefully without a photo.

A single-field email capture that ships at the end of every long-form piece. Dark band, Solaris CTA, real value proposition above the field (not just “Subscribe”). The success state replaces the field inline with a one-line confirmation; no modal interrupts the read.

Dialog for confirmation and short forms. Lightbox for image galleries with prev / next and counter. Drawer for mobile menus and detail panels. Toast for action feedback — always non-blocking, auto-dismisses, never blocks the next click.

Each state offers one obvious next action. No funny copy. No accusations toward the user. The 404 in particular should help the visitor get back to where they were trying to go — not joke about being lost.

Skeleton placeholders that match the shape and rhythm of the final content. Shimmer in cream tones, never gray. The skeleton appears for 200–800 milliseconds while content fetches; below that, no skeleton at all (the flash is worse than the wait).

Primary CTAs with the .wri-magnetic class follow the cursor at quarter strength when it’s near. Spring back on leave. Pair with the cursor blob and the page suddenly feels alive. Hover near the buttons below.

Headlines split into per-character spans, then settle into place one after another with a 30-millisecond stagger and a soft gravity curve. Triggered by an IntersectionObserver at 50 percent visibility, runs once, never replays on scroll. Used on every page’s primary headline.

Hover any project link below. A photo of that project floats with the cursor — lerp-smoothed, crossfading between projects, anchored at the cursor center. The single most-imitated interaction in premium design since 2022, because it works: visitors feel the project before they read the page. Touch devices get a static thumbnail next to each link instead.

Hover any card — it tilts subtly on two axes tracking the cursor. Inside the card, the media layer and the text block move at different rates via data-depth attributes, creating real depth. Releases on mouse-leave. Max tilt is gentle (10 degrees) so it never feels gimmicky.

Each section carries a data-atmosphere color. As you scroll, an IntersectionObserver detects which section owns the viewport center and the container background lerps to match. Scroll through the four stages below — cream warms into deeper cream, into navy, into a Solaris-painted finale. The drift is slow (900 milliseconds) so it feels geological, not jumpy.

A soft 540-pixel Solaris radial gradient at 10 percent opacity rides above the page, anchored to the cursor. The cursor blob uses difference blend (inverts what it crosses); the spotlight adds illumination on top of that. Where the blob says “you’re here,” the spotlight says “and here’s warm.” The effect is strongest on dark backgrounds — move your cursor inside the navy stage below.

DM Sans loaded as a variable font lets the weight axis animate continuously between 100 and 1000. Move your cursor across the line below — the letters closer to your cursor thicken; the letters further away thin. The morph is per-letter, so the headline literally responds to where your attention sits. Requires the variable font file (40KB more than the four fixed weights combined).

Instead of a linear count-up, each digit is a column of 0–9 that translates to its target position. Digits settle right-to-left (or left-to-right) with a 100-millisecond stagger, so the whole number assembles itself like an old analog counter. More dramatic than linear interpolation, costs the same. The non-digit characters (the “+”, the “.”, the “yrs” suffix) stay static.

Small SVG flourishes that draw themselves stroke-by-stroke when scrolled into view. Used next to chapter titles, section openers, and key callouts. The pen-and-ink feel pairs with the paper grain texture from section 32 — together they signal “made by hand,” which is the entire Wright’s positioning compressed into two pixels of motion.

A data-stage wrapper with multiple data-reveal children that lift into place in choreographed sequence on a single viewport trigger. 80-millisecond stagger between children. The pattern below has eyebrow, headline, body, and CTA — each one settles a beat later than the last.

A full-screen Solaris curtain with the W mark drawing itself in the center, then the curtain wipes upward to reveal the page. Replaces the generic loading state — the visitor never sees a spinner. Fires once per browser session (sessionStorage flag), so it doesn’t replay on every internal navigation. Tap replay below to see it in the contained demo.

The vision is the page you’re looking at. The cursor blob is still there, the atmosphere drifts still happen, the marquee still scrolls — but underneath, every page now feels like a sheet of working materials someone made with their hands. The patterns below are the building blocks of that vision.

Between major sections, instead of a horizontal rule, an architectural dimensional callout: line with tick marks at both ends, a measurement floating above. The line draws itself on viewport entry. The number appears once the line completes. Use one between every major chapter on long pages.

Stats stop ticking up and start being measured. A dimensional line extends across the stat block, tick marks land at the endpoints, the value drops into the middle. Each stat carries its own measurement. Reads like a project takeoff sheet instead of a website widget.

Small italic notes in the right margin, anchored to specific points in the body copy with thin Solaris connectors. The kind of thing an architect writes in the gutter of a working document — a reminder, a cross-reference, a quiet aside. Reads like the project lead actually annotated the page for you.

BBB Accredited, Best of Houzz, EPA Lead-Safe, the Michigan license — rendered as ink stamps, slightly rotated, with imperfect circular edges (mask gradient). They look pressed onto the page, not pasted. The credibility cues read as real evidence instead of a logo strip.

Underline accents that aren’t straight lines — they wobble, the way a real pen makes a line. SVG paths with intentional Bezier irregularity, drawn with stroke-dasharray animation. Use under emphasis words inside body copy and under section openings.

Sections 1–33 are the parts catalog. Section 34 is the lens. Every component above already in the design system — cards, hero sections, project lists, testimonials, the contact page — gets passed through this lens. The cursor blob stays. The atmosphere drift stays. The marquee stays. But everything sits inside dimensional callouts now, surrounded by marginalia, stamped with credentials, underlined by hand. The system gets a soul.

Six sections separated by dashed dividers (the same as the workbook page treatment). Each row pairs a mono uppercase field label with a clean underline input. The right gutter carries the marginalia that explains, in plain language, why the field is being asked. The submit looks like signing the document. Use this exact treatment for the contact page and as a long-form alternative under high-value service pages.

Eight weeks across the top, eleven phases down the side, bars span their duration. The TODAY marker is a vertical Solaris hairline that drops in at the current date when the schedule is rendered for a live project. Solaris bars are primary scope; ink bars are parallel trades that sequence around them. Use this on every project case-study page and as the centerpiece of the “process” page.

Six material cards covering the major surface and hardware selections for a kitchen. Each card carries a swatch (CSS-generated until photo plates land), category eyebrow, name with italic emphasis, vendor, and a spec sheet with the technical attributes a contractor checks. Numbered like architect plates — M-01 through M-06. Use this on every service page (kitchen, bath, basement) and inside project case studies as the “selections” section.