Build the day
beautifully.
The Build The Day design system. Warm, elegant and celebration-ready — a palette of gold and cream, serif headlines and serene spacing, ready for every wedding, every guest list, every golden hour.
Paper, gold leaf, a garden at golden hour.
Build The Day feels like an invitation you'd want to keep. We favour warm paper neutrals over cool greys, serifs over geometric sans, and soft glows over harsh shadows. Every surface should feel considered — like it was chosen, not defaulted.
Quiet luxury
Nothing shouts. Restraint is the voice.
Warm paper
Cream-50 defaults. Pure white is reserved for card interiors.
Generous air
Spacing is the punctuation. Let sections breathe.
Gold on cream. One palette.
Gold and cream carry the brand across every Build The Day property. Click any swatch to copy its hex.
Gold scale — primary
Cream scale — warm neutral
Signature accent
#ffffff
Text and icons sitting on solid gold. Always pure white for maximum contrast on the brand accent.
Playfair Display & Inter.
Serif headings set the tone; a humanist sans handles the detail. The system monospace stack tags the metadata — dates, labels, numbers — with quiet editorial precision.
One mark. Five voices.
The Build The Day mark is a serif B inside a rounded gold tile. Use the gradient by default. Reach for the mono treatments only when production constraints (single-ink print, embossing, dark surfaces) demand it.
Reserve a margin equal to the height of the B on every side. Nothing — type, image, edge — sits inside this buffer.
The brand mark never goes below 20 px tall on screen, or 8 mm in print. Below that, use the standalone tile without the wordmark.
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.
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 serif, same quiet.
App icon
The mark, standalone. Always the gradient on home screen — never the mono treatments.
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 brand inverts cleanly — when it has to.
Most surfaces live on cream 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 Playfair, 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 italic headline accents.
White headlines, cream 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 third surface.
We paint on three surfaces. Cream paper is the default, the one we use everywhere. Stone-900 is 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, an italic gradient accent line. 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.
Italic gradient accent
The italic Playfair line uses a brighter gold-400 → gold-300 ramp via bg-clip-text. The cream-paper version uses gold-600 → gold-400; 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 in this repo strictly.
STACK
— Nuxt 4 + Nuxt UI v4 + Tailwind v4.
— app.config.ts: ui.colors.primary = 'gold', ui.colors.neutral = 'stone'.
— Two webfonts only: Playfair Display (serif headings) and Inter (body, UI, eyebrow labels). No monospace.
SURFACE
— LIGHT (default cream paper). Background cream-50 (#fdfbf7), body text stone-600 (#57534e), headlines stone-900 (#1c1917), primary accent gold-600 (#b87520).
REQUIREMENTS
— Headings: font-serif, text-stone-900, font-bold (or text-white on dark/image).
— Body: Inter 17/28, text-stone-600 (or stone-400 on dark, white/85 on image).
— Eyebrow / labels: Inter 11px / 600, uppercase, letter-spacing 0.16em — gold-600 on light, gold-400 on dark/image. Class .type-mono is available.
— Cards: bg-white border border-cream-200 rounded-2xl p-6. Hover lifts to border-gold-300 + soft brand-glow shadow.
— Primary CTA: <UButton color="primary"> — solid gold-600 with white text. One per view, max.
— Italic Playfair is the only secondary display face. Use a gold gradient via bg-clip-text for accent words on dark / image surfaces.
— Container caps at 1200px (max-w-7xl). Section padding clamp(4rem, 8vw, 7rem).
— Shadows: soft and brand-tinted — 0 24px 48px -24px var(--cw-glow-strong). Never flat black.
— 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
Make the surface feel like an invitation worth keeping — warm paper, gold leaf, generous air. Quiet luxury.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 Playfair Display headings with Inter body for elegant contrast.Mix three serif fonts in one layout — it fights the hierarchy.
- Use gold-600 (#b87520) as the solid primary; keep it for one job per view.Colour large surfaces with gold-600 — it flattens to beige at scale.
- Reach for cream-50 before pure white. Paper, not printer paper.Use pure #ffffff as the page background — it looks clinical.
- Round cards to 1rem (16px) and inputs to 0.75rem (12px).Use sharp 0px corners anywhere in a celebration context.
- Let the page breathe — generous spacing is the voice of luxury.Cram dense tables into narrow columns. Give data room to rest.