The modern family office.

Design philosophy

Restraint as luxury. The page treats white space as the primary material: one idea per viewport, hairline dividers instead of boxes, and a single product object presented like hardware on a pedestal. Nothing competes for attention because almost nothing is on screen at once.

The emotional register is calm confidence. Family wealth is a serious subject; the design answers with quiet, not spectacle. Every declarative line — “One family.” “One number.” “One table.” — gets its own vast section, mirroring how the product asks families to consider one decision at a time.

Visual inspiration

apple.com/vision and the Apple Vision Pro launch pages: ultralight display type at extreme scale, monochrome surfaces, a single hero object that scales with scroll. Also the Jony Ive-era product pages where copy is measured in single sentences.

Secondary references: Aesop’s typographic quietness and Kinfolk magazine’s editorial pacing — long pauses between short statements.

Motion techniques & animation architecture

One scroll-linked moment: the family-vote card mounts with useScroll + useTransform, easing from scale 1.08 / 64px below / transparent to resting position as it crosses the viewport center. Everything else is a single whileInView opacity/y rise with a long 0.9s ease-out — deliberately slow, like a held breath.

Inside the vote card, member rows stagger in sequentially so the tally feels live. All motion is transform/opacity only, and every scroll-linked or entrance transform collapses to static under useReducedMotion.

AI workflows & asset generation

No raster images are used on this landing. The product centerpiece — the family vote card — is hand-built CSS: layered box-shadows for the pedestal effect, hairline borders, and a sage progress bar. No Kie.ai nano-banana assets were needed for this direction; photography would have broken the monochrome restraint.

Typography decisions

System stack only (-apple-system / SF Pro / Helvetica Neue) so the page inherits the native crispness Apple pages get for free. Display type runs at font-weight 200 with -0.035em tracking at clamp(48px, 9vw, 96px); body sits at 17–19px regular. The contrast between ultralight display and small medium-weight labels (11–13px, wide letterspacing) is the entire typographic system.

Color palette rationale

Pure white #ffffff canvas; ink #17171a for display type; muted #6e6e73 for supporting copy; hairlines at rgba(23,23,26,0.1). One accent: brand sage #9ccb93 for graphic fills (avatar chips, progress bar) with a deepened #5d7a56 for small accent text so it passes AA on white. Monochrome plus one hue keeps the sage meaningful — it only ever marks agreement.

Accessibility

Single h1, sequential h2/h3 order, the vote card exposed as a labeled figure (role="img" with aria-label), decorative glyphs aria-hidden, and visible focus rings on both pill CTAs. Muted gray #6e6e73 and deep sage #5d7a56 both clear 4.5:1 on white. useReducedMotion flattens the scroll-linked card transform and all entrance rises to simple fades or static rendering.

Performance

No images, no canvas, no external fonts — the heaviest asset is the framer-motion runtime already shared across the app. All animation is compositor-friendly (transform/opacity), below-the-fold sections mount via whileInView with viewport:{once:true}, and the fixed header uses backdrop-filter rather than a scroll listener.

Technical implementation

Next.js App Router: a server page.tsx exporting metadata only, with the full experience in a client component. useScroll targets the mock section with offset ["start end","center center"] mapped through useTransform for scale/opacity/y. Layout is Tailwind utilities with inline styles for the values Tailwind tokens don’t carry (hairline rgba, ultralight weights, tracking).

The five iteration passes

Pass 1 — visual hierarchy: narrowed the declaration hairlines to a shorter measure, tightened the hero subline to 560px, and rebalanced mock-section padding so the card reads as the single object between two pauses.

Pass 2 — motion: added the staggered member-row reveal inside the vote card, slowed the hero entrance to a 1.1s ease-out cascade, and gated the card’s scroll transform fully behind useReducedMotion.

Pass 3 — typography & color: deepened the small-accent sage from #7ab370 to #5d7a56 for AA contrast, moved h3s to regular weight for contrast against the ultralight h2s, and unified letterspacing on all caps labels.

Pass 4 — storytelling: rewrote the Vote step copy (a mangled sentence about thresholds), reordered declarations so the loss statistic lands under “One family.”, and added the closing “Take your seat.” to resolve the table metaphor.

Pass 5 — accessibility & craft: added focus-visible rings to the pill CTAs via a scoped style block, aria labels on the vote card, verified heading order, and confirmed every animation is transform/opacity only.

Future ideas

A slow parallax sequence where the vote card disassembles into its layers on scroll (proposal, voices, tally); a dark “after hours” variant that inverts to near-black with the same single sage accent; and a live countdown to Wednesday 7pm CST rendered in the same ultralight numerals.