How Second Sitting was built

Palette — argued from the bench

A calico ground with a warm accent sits one step from the banned cream-and-terracotta default, so the line was held deliberately: the accent duty is carried by velvet teal, not terracotta; the display face is a soft plump serif chosen for upholstered warmth, not a high-contrast editorial serif; and brass stays secondary — tacks and focus rings, with a darker derived ink (#7A5A24) doing any actual reading work. Secondary body copy uses a derived walnut-soft #665649 (6.3:1).

Type

Fraunces (display) — soft-shouldered, plump, slightly wonky letterforms that read like upholstered furniture; its italic carries the brand line "every good chair deserves a second sitting". Albert Sans (body, UI) — a warm workhorse that stays out of the way at 16.5px. Fragment Mono — metres, counts and prices; every figure on the page is set in it so the numbers read as measured, not decorated.

The Recover Studio — technique

The signature is a procedural SVG workshop bench (viewBox 920×560, zero raster) on which the chosen piece is drawn in walnut line-work and then re-covered live, panel by panel. Each piece is generated from rounded-rect path geometry (armchair 6 panels, sofas 8–10, dining 1 + one mini-seat per chair in the set, banquette one segment per linear metre). Every panel exists twice: a calico-fitted outline path, and a fabric path filled with a procedural <pattern> per grade — fine cross-hatch weave for house linen, tight 7px grain for performance weave, directional 52px sheen bands for velvet. Wrapping is one scalar W (panels-done + fraction): each panel's fabric sits under a clipPath rect that a rAF loop grows bottom-up, so the cloth pulls over the calico exactly the way a cover goes on. Velvet additionally takes a light sweep — a shared userSpaceOnUse linear gradient whose gradientTransform is translated each frame, clipped to the wrapped panels only. Brass tacks seat along the arm rails after their panel wraps, each with a 220ms overshoot "tap". All animation is JS attribute work — no CSS rule ever animates a property an element also sets as a presentation attribute (the W16/W17 trap).

Dual-speed redraw: the first render earns the entrance — line-work, then W tweens to two-thirds over 2.1s and an ambient drift finishes the wrap slowly, so the 7-second thumbnail catches the armchair mid-recover with the sheen mid-pass (measured wrap 0.84 at settle). Every subsequent chip or stepper tap rebuilds and re-wraps completely in 550ms. Reduced motion renders everything settled and fully wrapped, sweep parked. The loop pauses on document.hidden; state is exposed at window.__upholsterer.

The pricing model — shape and derivation

The labour / fabric split

The card splits every fixed-piece figure into labour and fabric lines. The fabric line is a house-grade allowance derived at roughly $45/m across the piece's stated metres — armchair (5–6 m) $250, 2-seat (8–10 m) $400, 3-seat (11–13 m) $540 — and labour is the anchor minus that allowance, so the split always re-adds to the pinned anchor exactly. Grade surcharges land on the fabric line, where they belong.

Deliberately flat dimensions (stated, not invented)

• Dining is one rate. Drop-in seats use the commercial-grade range — one honest rate, chosen at the bench. The chips disable rather than compute a gradient the trade doesn't charge.
• Banquette cloth is in the metre rate. $480/lm includes commercial vinyl or performance weave; velvet is refused on-card ("velvet in a café lasts a season — we won't sell you a season") rather than priced.
• Bring-your-own fabric −$200 is a stated policy line, not a control — it only applies "if it's upholstery-weight, and we'll say plainly if it isn't", which is a conversation, not a toggle.
• Foam persists across fixed pieces — the toggle keeps its state between armchair and sofas, and clears (disabled, with reason) for dining/banquette where foam is already in the rate.

Measured from the running page against an independently re-implemented oracle: rest state armchair + velvet = $1,570; armchair + performance + foam = $1,550; 2-seat linen $1,950, + foam ×2 $2,190; 3-seat velvet $2,900; dining ×6 $570; banquette 3.5 lm $1,680; cheapest possible output $380 = the services grid's dining floor. Every worked example in the CONCEPTS spec matched the implemented model with no correction needed.

Conversion decisions

• Studio in the hero. The signature shares the 1200×750 thumbnail with the h1 (scene top measured at 186px) — a visitor sees the promise and the demonstration in the same glance, and at 375px the h1, both CTAs and the trust row all clear the first screen before the studio begins.
• Studio → form handoff. Every configuration rewrites the form's piece field ("Armchair — recover in velvet. Studio estimate $1,570.") until the visitor edits it themselves; the card's "Start my quote with this" scrolls to the form and focuses the name field.
• Form fields are the trade's real intake: name, phone, suburb (it plans the Thursday pickup run), the piece described in words, and an optional age/frame notes line — because the honest first question in this trade is about the frame, not the fabric. The real site would take photos here; the demo says so in copy instead of pretending.
• Confirmation is local and honest — "Thanks — we've got it. We'd call you back within one business day…" plus a plain "no enquiry was sent anywhere" line. No fake network round-trip.
• Sticky call/quote bar below 860px, 48px targets, tel: link carrying the reserved (08) 9000 0268.

Local SEO we'd implement for the real business

This demonstration page ships only WebPage schema naming it a demo — fictional structured data in a real index would be dishonest markup. For a real upholsterer we'd ship LocalBusiness + Review schema like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Second Sitting Upholstery",
  "description": "Re-upholstery and recovering — armchairs, sofas,
    dining seats and banquettes. East Victoria Park workshop,
    Perth metro pickup and delivery.",
  "telephone": "+61 8 9000 0268",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "East Victoria Park",
    "addressRegion": "WA",
    "postalCode": "6101",
    "addressCountry": "AU"
  },
  "areaServed": ["East Victoria Park", "Victoria Park", "Como",
    "South Perth", "Bentley", "Cannington", "Perth"],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Tuesday","Wednesday","Thursday","Friday","Saturday"],
    "opens": "08:00", "closes": "16:00"
  }],
  "priceRange": "$$",
  "review": {
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "— real customer —" },
    "reviewBody": "— pulled live from the review platform —"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "— live —", "reviewCount": "— live —"
  }
}
</script>

Plus a Google Business Profile wired to the same NAP, suburb landing content for the pickup run, and review schema fed from a live platform — never hand-typed.

What would change for the real client

• Fabric-house libraries — Warwick / Zepel-style live ranges embedded in the studio, so "velvet" becomes an actual swatch with a rub-count, and the fabric line quotes real cloth.
• Photo-based quote intake — the form's "describe the piece" field becomes an upload; a photo of the frame and a photo of the wear is 80% of an upholstery quote.
• Tradify job and quote tracking behind the form; Square deposits at fabric approval; Xero for invoicing.
• Podium (or similar) feeding real reviews — replacing the demo copy, with schema fed from the platform.
• Their photography where it earns its place — though this page is proof the design carries without it.

Iteration log