build the day,
beautifully.
The Build The Day design system. White-first, modern and celebration-ready — white paper, one unmistakable gold, geometric type and two interlocked rings, ready for every wedding, every guest list, every golden hour.
White paper, one gold, two rings.
Build The Day is a modern product brand for a timeless occasion — Spotify's confidence with a wedding's warmth. Clean white surfaces, one unmistakable gold, geometric type, and a mark built from the simplest wedding shape there is.
White paper
#ffffff defaults. Warmth comes from gold, not tinted neutrals.
One gold
gold-400 is the brand — the primary action, the right ring, nowhere else.
Quiet confidence
Nothing shouts. Restraint is still the voice.
White, ink and gold.
One brand scale, one neutral scale, one paper. Gold and stone carry the brand across every Build The Day property. Click any swatch to copy its hex.
Gold scale — primary
Stone scale — neutral
Signature duotone
#1c1917
Text sitting on gold-400 is always stone-900 ink. White on gold-400 fails contrast; gold text on white is gold-600 or darker.
Outfit & Inter.
Geometric headings set the tone, tightly tracked and lowercase-friendly; a humanist sans handles the detail. The label style tags the metadata — dates, labels, numbers — with quiet precision. No serif, no monospace.
Two rings. Six treatments.
The Build The Day mark is two interlocked rings woven with break gaps — ink passes over at the top crossing, the gold ring's open ribbon ends pass over the ink at the bottom. Two people, one day. The wordmark is "buildtheday." in outlined Sora 800 with a gold full stop — the logo face only; product type stays Outfit + Inter. Use the duotone by default; photo fill — a wedding photo masked into the rings — is the display treatment for hero moments; reach for the mono treatments only when production constraints (single-ink print, embossing) demand it.
Reserve a margin equal to half the mark height on every side of the lockup. Nothing — type, image, edge — sits inside this buffer.
The lockup never goes below 24 px tall on screen; the standalone mark holds to 16 px, or 6 mm in print. Below the lockup floor, drop the wordmark and keep the rings.
Nuxt UI, wearing Build The Day.
We style on top of Nuxt UI v4 — the primary colour is gold and the neutral scale is stone, so every primitive signs the brand out of the box. Click Components in the header for the full index.
Buttons
Badges
Input
Guest name, table, dietary preference — all the same primitive.
Alert
Generous by default.
Container caps at 1200px. Sections breathe at 7rem vertical rhythm on desktop, scaling down to 4rem on phones. Card radius is 1rem, inputs 0.75rem, pills 999px.
Two soft, close shadows. Nothing heavier — hover states lift with border-stone-300 or a gold-50 fill.
Frosted panels with a backdrop blur — only over imagery or on the dark surface. Never on flat paper.
Warm, confident, specific, quiet.
We speak to people planning one of the most specific days of their lives. Write as if the reader has already decided — we're here to make the details easy, not to sell the idea. Four words anchor every line.
Warm.
Like a friend who plans events for a living. Never aloof, never gushing.
Confident.
We know what to recommend and we say so. No hedging.
Specific.
Real numbers, real names, real dates. "82 guests" beats "many guests".
Quiet.
No exclamation marks. The day will speak for itself.
In context
- Onboarding
"Tell us the date. The rest takes care of itself."
"Begin your magical wedding planning journey today by signing up!"
- Empty state
"No guests yet. Add one to start the list."
"It seems your guest list is currently empty. Why not add some guests?"
- Confirmation toast
"Saved."
"Your changes have been successfully saved to the database."
- Error
"That email’s already on the list. Want to update them instead?"
"Operation failed: duplicate entity detected (code 409)."
- Marketing headline
"Beautiful wedding websites, without the busywork."
"The most amazing all-in-one platform for wedding planning ever made!"
Words we use · words we don't
- guest · confirmed · pending · declined
- save the date · invitation · reminder
- seating · table · meal · dietary
- your day · the morning · the ceremony
- simple · quiet · honest · specific
- users · contacts · entities · records
- blast · campaign · funnel · workflow
- magical · dream · ultimate · amazing
- leverage · utilise · facilitate · ensure
- "!" — let the words carry the weight
On a phone. In an inbox. On a feed.
The brand has to hold up at every scale — a 38 px home screen tile, a 540 px email column, a 1080-square Instagram post. Same gold, same rings, same quiet.
App icon
The mark, standalone. A gold-400 squircle carrying the on-gold rings — white left, ink right.
Newsletter
540 px column, generous margin, one CTA. Same paper surface as the product.
Twelve months of golden hours.
A year in. We've helped 8,400 couples build their day this season — from sun-drenched Tuscan terraces to lantern-lit barns in the Cotswolds. Here's what we've been working on for next season.
In this issue
- New seating planner. Drag, drop, done — and now with dietary tags front and centre.
- Print-ready place cards. Export your seating chart as press-grade PDFs, ready for the printer.
- Photo booth, refreshed. Faster uploads, smarter face-grouping, the same gentle moderation.
Social media
Three canonical surfaces — square post, story, OG share card. Brand consistency at thumbnail size is the goal.
The highlight surface.
When a section, card or callout needs to feel special, it sits on a gold-50 wash — this section is one. Same ink, same type; the wash changes the temperature, not the voice. It replaces v0.3's cream zebra striping and shadow-led emphasis.
gold-50 ground
#fdf8eb — warm, barely-there, unmistakably brand. Never gold-400 as a large wash; it flattens to mustard at scale.
Same ink
stone-900 headlines, stone-600 body. Eyebrows step up to gold-700 (#97551d) for contrast on the wash.
gold-200 borders
#f3d994 where a border is needed; gold-100 for fills and hovers within the surface.
White cards on gold
Cards sitting on a gold surface stay white, with gold-200 borders — like these. Never gold-on-gold, and never two gold sections back-to-back.
The brand inverts cleanly — when it has to.
Most surfaces live on white paper, but every so often a section needs to feel set apart — a CTA panel, a testimonial, a full-bleed footer. The dark variant is the same brand, dialled for contrast: same gold, same Outfit, same restraint.
Stone-900 ground
#1c1917 — never near-black. The same neutral that carries body ink in light, used as the surface here.
Gold-400 accent
#e5ad2e reads brighter on dark than gold-600 ever could. Use it for eyebrows, links and headline accent words.
White headlines, stone-400 body
Pure #ffffff for h2/h3, stone-400 (#a8a29e) for body. No mid-grey haze in between.
One per page, max
Dark surfaces earn their weight by being rare. Reserve for CTAs, testimonials and the footer — never the page background.
The exact tokens used on this section.
The fourth surface.
We paint on four surfaces. White paper is the default, the one we use everywhere. Gold-50 is the highlight, stone-900 the rare inversion. And sometimes a real wedding photo carries the section itself — the brand still signs it through type, overlay and accent.
Photos with weight,
carried by gold.
A wedding photo, a left-fading dark overlay, one gold accent word. The brand still signs the surface, even when the photo does the heavy lifting.
Read the rulesLeft-fading dark overlay
A linear gradient from rgba(28, 25, 23, 0.78) on the text side to near-transparent on the photo side. The text holds its line; the photo's golden hour reads on the right.
Gold-400 on dark
The eyebrow uses #e5ad2e — same accent as the Dark Surfaces section. Gold-600 muddies on photos; gold-400 lifts off cleanly.
Gold accent word
One word of the headline in gold-400 — same weight, never italic, no gradient text. On white the accent word uses gold-600; on photos we lift it.
Cap text at ~540 px
Headlines + body live inside a left-anchored column so the right half of the photo can breathe. A subtle 0 2px 12px text-shadow keeps headlines legible even when the photo brightens.
Tell your agent what to build.
Pick a target and a surface. Copy the prompt. Paste it into Claude, Cursor or v0 alongside /DESIGN.md and the agent will compose Build The Day UI from the first render.
Component or page section in Nuxt UI
Build a Hero section for Build The Day. Follow /DESIGN.md (v1.0) in this repo strictly. This is the modern rebrand — if you encounter legacy serif/cream styling (v0.3), migrate it using §14 of DESIGN.md.
STACK
— Nuxt 4 + Nuxt UI v4 + Tailwind v4.
— app.config.ts: ui.colors.primary = 'gold', ui.colors.neutral = 'stone'.
— Two webfonts only: Outfit (600/700 — all headings, tight tracking) and Inter (400/500/600 — body, UI, labels). No serif, no monospace.
SURFACE
— WHITE (default). Page background #ffffff, headlines stone-900 (#1c1917) in Outfit with tight tracking, body stone-600 (#57534e) in Inter, borders stone-200 (#e7e5e4). Gold text/links use gold-600 (#b87520) or darker — never gold-400 as text on white.
REQUIREMENTS
— Primary CTA: gold-400 (#e5ad2e) pill (rounded-full) with stone-900 ink text, hover gold-300. One per view, max. Never white text on gold-400.
— Cards: bg-white border border-stone-200 rounded-2xl p-6. Hover lifts to border-stone-300. No glow shadows.
— Emphasis comes from the gold-50 wash surface, not from stacked borders/badges/shadows.
— Eyebrow / labels: Inter 12px / 600, uppercase, letter-spacing 0.08em — gold-700 on light, gold-400 on dark/image. Class .type-mono is available.
— Display/H1 tracking: -0.025em to -0.03em. Marketing headlines may be fully lowercase; product UI uses sentence case.
— Accent words are coloured (gold-600 on white, gold-400 on dark/image), same weight, never italic.
— Container caps at 1200px (max-w-7xl). Section padding clamp(4rem, 8vw, 7rem).
— Shadows: 0 4px 12px -4px rgba(28,25,23,.06) sm · 0 12px 24px -12px rgba(28,25,23,.10) md. Nothing heavier.
— Use Lucide icons. Vocabulary leans on heart, gem, sparkles, sun, mail, users, calendar, camera, utensils.
VOICE
— Warm, confident, specific, quiet. Four anchors.
— Short sentences. Active verbs. Specific nouns ("82 guests" beats "many guests").
— No exclamation marks. Em-dashes for asides. Curly quotes only.
— Vocabulary uses: guest, save the date, seating, your day, the morning, the ceremony.
— Avoid: user, contact, blast, campaign, magical, dream, ultimate, amazing, leverage, utilise.
GOAL
Modern product brand, timeless occasion — white paper, one unmistakable gold, geometric type, two rings. Spotify’s confidence with a wedding’s warmth. Quiet, never clinical.Paste alongside /DESIGN.md in your agent's context. The prompt references brand tokens by name so DESIGN.md fills in the values.
Rules of the day.
A short list. Break one only with a reason you can name.
- Pair Outfit headings with Inter body — geometric over humanist.Reintroduce serifs or a third family — two webfonts, no more.
- Use gold-400 pills with ink text for the primary action; one per view.Put white text on gold-400 — it fails contrast. Ink, always.
- Use pure #ffffff as the page background. Warmth comes from gold.Tint the page with cream or grey "warmth" — that was v0.3.
- Emphasise with gold-50 washes — surface, not chrome.Stack borders, badges and shadows to make something feel special.
- Round buttons to pills, cards to 1rem and inputs to 0.75rem.Use sharp 0px corners anywhere in a celebration context.