Design system · v0.1
Vow & Co. — foundation.
An evaluable scaffold for a three-sided wedding platform. Every token, primitive, and motion rule used by the product lives on this page. Two palettes. Full reduced-motion support. No features yet — by design.
Brand
Vow & Co. is a working-title identity. The mark, wordmark, tagline, and palette are held as a handful of constants — changing a single line in /lib/config.ts rebrands the entire shell. Treat everything shown here as a scaffold that will evolve with real brand direction.
Monogram
Wordmark
The placeholder brand is intentionally quiet — a serif wordmark, a monogram with two interlocking letterforms, and a palette of warm naturals. Every brand value lives in /lib/config.ts. Swap the constants, and the whole shell reads differently.
Typography
Fraunces carries the display work — titles, feature headings, quotes — while Inter handles body, labels, and dense interface surfaces. The scale is deliberately gentle at the top end so longer lines stay readable, and wide at the bottom for captions, meta, and tabular rows.
Display · Fraunces
Body · Inter
Numeric · without tabular-nums
1,234,567.89
Columns can feel jittery; digits have variable widths.
Numeric · with tabular-nums
1,234,567.89
Use font-numeric for stats, prices, and tables.
Colour
A warm, natural palette drawn from linen, clay, and sage. The same tokens are re-mapped under the cool-natural palette (toggle in the header) so the same components read differently without changing any class names.
Base palette
Status
Contrast check — text on surface
WCAG ratios between text tokens (rows) and surface tokens (columns). AA body text requires 4.5, AA large text 3. Ratios recompute when the palette toggle in the header is flipped.
Palette toggle · live demo
Flip the toggle in the header. The page restyles smoothly — no reload and no re-render. Every token is a CSS custom property; Tailwind classes never change.
Venue feature
Laurel & Oak Homestead
Yarra Valley · capacity 140 · ceremony on the stone terrace
Brief
A sage-and-cream palette, long trestle tables beneath the pergola, and a four-piece string ensemble at sunset. Forty guests for dinner, eighty for dancing.
Saved by Amelia · draft v3
Spacing, radius & shadow
Corner radii step up from 6px (inputs) through to 24px (feature panels). Shadows are muted and warm — no heavy elevations, no neon. Generous padding on cards keeps the interface feeling breathable rather than dense.
Radius scale
Shadow scale
Spacing
Motion
Motion is used to soften state changes, not to draw attention. Five easing curves and five duration tokens cover almost every case — reveals, stagger, count-ups, and skeleton-to-content transitions. All motion respects reduced-motion preferences.
Ease curves
Scroll into view, or replay.
Stats animate from zero on mount.
Skeleton placeholder → real content.
Components
Every primitive in its resting states. Real sample content is used throughout — no lorem ipsum — to make it easier to judge how these components will read in the product itself.
Image treatment
Images always render into a warm placeholder — linen whilst loading, a monogram fallback if they fail. No broken icons, no white flashes. The fallback uses the same SVG mark as the logo.
Loaded
A real photograph fades in once loaded.
Loading
Skeleton state while a photograph is still fetching.
Failed
Monogram fallback on a cream-to-linen gradient.
Forces the first card to point at a broken URL so the fallback can be inspected.
Accessibility
Focus rings are visible on every interactive surface. Reduced-motion preferences are respected both at the OS level and via the header toggle. Every image has alt text or is explicitly decorative.
Reduced motion
Every motion component consults useReducedMotionSafe(), which honours both the OS prefers-reduced-motion query and the toggle in this page’s header. When reduced, all reveals, count-ups, and shimmer loops collapse to static states.
Try flipping Reduce motion at the top of this page and scroll back up — the motion demos render without animation.
Contrast recap
The contrast grid in Section 03 surfaces the WCAG ratio of every text-on-surface pairing we use. Pairings that fail AA (body 4.5, large 3) are flagged in terracotta — any failures found there are treated as bugs to be fixed, not warnings to be ignored.
What's next
The shell you have here is foundation. The data models that back a three-sided platform — weddings, suppliers, enquiries, moodboards, messages, timelines, payments — come next, alongside the role switcher that lets a single session step between Planner, Couple, and Supplier without the friction of real authentication.
From there, each experience earns its own phase. A Couple who plans their own wedding and discovers suppliers. A Planner who carries dozens of weddings in parallel and needs a calm place to see them all. A Supplier who runs a small business on enquiries, quotes, and bookings. Each surface will reuse the primitives shown here and extend them with role-specific composite components — moodboards, kanbans, timelines, messaging — built to the same bar.
A set of scripted product tours will then thread those roles together into a single continuous story, so a founder or investor can walk through a real wedding from first brief to first dance without leaving the shell.
This foundation is built to extend, not to be replaced.