# Build The Day — Design System
The single source of truth for every Build The Day property — maem (the product), buildtheday-marketing, buildtheday-learn, and the design site. Drop this file into your agent alongside ui.nuxt.com and it will compose UI that signs our brand from the first render.
**Version 1.0 · 2026 · White-first · Modern · Celebration-ready**
> v1.0 is the modern rebrand. The serif/cream identity (v0.3) is retired. See §14 for the migration map.
## Table of contents
1. Visual theme
2. Colour palette
3. Typography
4. Logo system — the bands
5. Components
6. Layout & spacing
7. Tone & voice
8. Brand in action
9. Gold surfaces
10. Dark surfaces
11. Image surfaces
12. Do's & don'ts
13. Tokens at a glance
14. Migration map (v0.3 → v1.0)
15. Agent guide — one-page brief
---
## 01 · Visual theme
Build The Day is a modern product brand for a timeless occasion. Think 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 — two rings.
Five principles govern every visual decision.
1. **White paper.** `#ffffff` is the default page background. Clean, bright, product-first. Warmth comes from gold, not from tinted neutrals.
2. **One gold, used with intent.** gold-400 (`#e5ad2e`) is the brand. It appears as the primary action, the right ring of the mark, and nowhere it doesn't need to be.
3. **Gold washes for emphasis.** When a section or card needs to feel special, it sits on a gold-50 (`#fdf8eb`) highlight surface — never a border-heavy box, never a shadow-heavy card.
4. **Geometric type.** Outfit carries every heading, tightly tracked and lowercase-friendly. Inter handles body and UI. No serifs anywhere.
5. **Quiet confidence.** Nothing shouts. No exclamation marks. Restraint is still the voice — it just wears a modern jacket now.
### Mood references
- White paper: a well-made app at 9am, gallery walls, fresh table linen.
- One gold: a wedding band on a white tablecloth.
- Geometric type: Spotify, Airbnb, Monzo — product brands that feel human.
- Generous space: still a garden walking path, not a city pavement.
---
## 02 · Colour palette
One brand scale (gold), one neutral scale (stone), one paper (white). The cream scale is retired. The identity is white + ink + gold.
### Gold — primary
| Token | Hex | Usage |
|---|---|---|
| gold-50 | `#fdf8eb` | **Highlight surface.** Gold-wash sections, feature cards, callouts |
| gold-100 | `#f9edcc` | Subtle fills, hover states on gold surfaces |
| gold-200 | `#f3d994` | Borders on gold surfaces, accent dividers |
| gold-300 | `#ecc35c` | Primary button hover, soft illustration |
| gold-400 | `#e5ad2e` | **The brand gold.** Primary buttons (ink text), mark's right ring, accent on dark |
| gold-500 | `#d4982a` | Mid-tone accent, theme-color meta tag |
| gold-600 | `#b87520` | Accent text & links on white, icon accents |
| gold-700 | `#97551d` | Strong accent text, eyebrows on white, link hover |
| gold-800 | `#7d4420` | Darker emphasis, rare |
| gold-900 | `#6b3820` | High-contrast accent text, rare |
| gold-950 | `#3e1c0e` | Deep accent, rare |
**The contrast rule.** gold-400 is a fill colour, not a text colour on white. Text on gold-400 is always stone-900 ink. Gold *text* on white is always gold-600 or darker.
### Neutral — stone (Tailwind)
| Token | Hex | Usage |
|---|---|---|
| stone-900 | `#1c1917` | Headlines, ink, text on gold-400, dark surface ground |
| stone-700 | `#44403c` | Strong body, dark-surface borders |
| stone-600 | `#57534e` | Default body copy |
| stone-500 | `#78716c` | Quieter body, captions on dark |
| stone-400 | `#a8a29e` | Captions, dimmed labels, dark-surface body |
| stone-300 | `#d6d3d1` | Strong borders, disabled controls |
| stone-200 | `#e7e5e4` | **Default border** on white |
| stone-100 | `#f5f5f4` | Neutral fills (table stripes, input wells) |
### Cream — retired
The cream scale from v0.3 is no longer part of the system. Do not introduce cream tokens into new work. See §14 for replacements.
### Signature duotone
The brand pairing — reserved for the mark, the app icon, and hero moments — is **ink + gold**: stone-900 (`#1c1917`) with gold-400 (`#e5ad2e`). There is no brand gradient in v1.0. The two rings carry the contrast a gradient used to.
### Semantic colours
Use these only when status absolutely demands them. Default to gold for positive states; reach for these only for true error / warning / info.
| Role | Token | Hex |
|---|---|---|
| Success | emerald-600 | `#059669` |
| Warning | amber-500 | `#f59e0b` |
| Error | rose-600 | `#e11d48` |
| Info | sky-600 | `#0284c7` |
---
## 03 · Typography
Two families. No serif, no monospace. **Outfit** carries every heading; **Inter** covers body, UI, and labels. Keeping it to two webfonts keeps the page light and the voice consistent across every property.
| Role | Family | Size | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| Display | Outfit | 64 / 68 px | 700 | −0.03em | Hero headlines, launches |
| H1 | Outfit | 44 / 50 px | 700 | −0.025em | Page titles |
| H2 | Outfit | 32 / 38 px | 700 | −0.02em | Section headings |
| H3 | Outfit | 20 / 26 px | 600 | −0.01em | Card titles |
| Body lg | Inter | 18 / 28 px | 400 | 0 | Hero supporting copy |
| Body | Inter | 16 / 26 px | 400 | 0 | Paragraphs, descriptions |
| Body sm | Inter | 14 / 22 px | 400 | 0 | Meta, captions |
| Label / Eyebrow | Inter | 12 px | 600 | 0.08em | Uppercase. Dates, section numbers, badge labels |
### Pairing rules
- **Headings stay Outfit.** Don't drop to Inter for an h2, and never reintroduce a serif.
- **Tight tracking is the signature.** Display and H1 sit at −0.025em to −0.03em. It's what makes the type read modern rather than default.
- **Lowercase is welcome.** Marketing headlines may set fully lowercase ("build the day, beautifully."). Product UI headings use sentence case.
- **The label style** is Inter 12px / 600, uppercase, 0.08em tracking. gold-700 on white, gold-400 on dark and gold surfaces. (Tracking is halved from v0.3 — 0.16em reads dated.)
- **The accent word.** Where v0.3 used italic Playfair, v1.0 colours a single word gold instead: same weight, same style, `color: gold-600` on white / `gold-400` on dark. Never italic.
### Numerals
Inter with `font-feature-settings: "tnum"` for any number that needs to align — RSVP counts, prices, dates in tables.
### Loading
```html
```
---
## 04 · Logo system — the bands
The Build The Day mark is **two interlocked rings** — a duotone monoline mark. The left ring is ink (stone-900), the right ring is gold (gold-400), and the left ring passes over the right at the top crossing. Two people, one day.
### Construction
- Both rings share the same outer diameter **D**.
- Stroke weight = **0.18 × D**, round caps not required (continuous circles).
- Ring centres sit **0.52 × D** apart, giving the canonical overlap.
- The weave is built with **break gaps** in every treatment, including full colour: at each crossing the under ring breaks, leaving a visible gap (clearance ≈ over-ring stroke + 4 units each side) that the over ring passes through.
- The ink ring passes over at the **top** crossing; the gold ring's ribbon ends pass **over the ink** at the **bottom** crossing. The open ribbon ends are the signature detail — never close them.
- Corner radius, outline, and drop shadows: none. The mark is two strokes, nothing else.
### Treatments
| Variant | Rings | When to use |
|---|---|---|
| Duotone | ink + gold-400 | **Default.** Use everywhere the surface can render both colours |
| Mono · ink | stone-900 + stone-900 | Single-ink print, embossing, mono export on light |
| Mono · white | `#ffffff` + `#ffffff` | Single-colour render on dark or photo surfaces |
| On dark | white + gold-400 | Dark surfaces where colour is available (preferred over mono white) |
| On gold | white + stone-900 | The mark sitting on a gold-400 surface (app icon, gold hero panels) |
| Photo fill | a wedding photo masked into both rings | **The display treatment.** Hero and closing-CTA moments on white or gold-50 grounds |
All treatments use the identical break-gap construction — the weave reads the same in colour, in mono, and in photo fill.
### Photo fill
The mark becomes a window: a real wedding photo is masked into the ring strokes (mask the photo with the mono mark — the break gaps stay open, the photo shows only through the bands).
- Bright, warm photography only. If the weave isn't legible at 200 px, use the duotone instead.
- Light grounds only — white or gold-50. On dark or photo grounds, use the on-dark treatment.
- One or two moments per page, maximum — heroes and closing CTAs. It is a showpiece, not a body element.
- Never tint, gradient or outline the masked photo; the mask is the mono mark at full alpha.
- Photo fill may move: a slow crossfade between photos (~5–6 s hold, ~1.4 s fade) with a gentle Ken Burns drift inside the mask. The rings themselves never move. Honour `prefers-reduced-motion`.
### The seam connector
On image surfaces the relationship inverts: the photo carries the section, and the mark sits **on top of it** — the duotone mark on a white circular plate (1px stone-200 ring), centred on the seam where the image surface meets the surface above, half on each side, connecting the sections. One connector per image surface; it replaces, never joins, an eyebrow at that edge.
### Lockup
Wordmark sits to the right of the mark: **buildtheday.** — Sora 800, lowercase, one word, −0.04em tracking, closed with a gold-400 full stop. Text is stone-900 on light (full stop gold-400), white on dark (full stop gold-400), stone-900 on gold surfaces (full stop white). Wordmark cap-height = 0.42 × mark height; gap between mark and wordmark = 0.42 × mark height.
Sora 800 is the **logo face only** — always outlined to paths, never loaded as a webfont, never used in UI or marketing type. Product and marketing typography remains Outfit + Inter (§03).
### Clearance
Reserve a margin equal to half the mark height on every side of the lockup. Nothing — type, image, edge — sits inside this buffer.
### Minimum size
| Surface | Floor |
|---|---|
| Web (mark alone) | 16 px tall |
| Web (lockup) | 24 px tall |
| Print | 6 mm tall |
Below the lockup floor, drop the wordmark and use the standalone mark. The monoline rings hold up at favicon sizes far better than the old serif tile.
### App icon
A gold-400 squircle carrying the **on-gold** treatment: white left ring, ink right ring. Rendered at iOS canonical sizes: 1024 · 180 · 167 · 152 · 120 · 87 · 80 · 60 · 58 · 40 · 29 · 20. Corner radius is the OS superellipse — let the OS handle the mask. A dark alternate icon (stone-900 squircle, white + gold-400 rings) ships for iOS dark/tinted icon modes.
### Don'ts
- Don't apply a gradient to the rings — the duotone *is* the brand contrast.
- Don't change the stroke weight, overlap, or weave direction.
- Don't separate, rotate, or restyle the rings.
- Don't render the rings in any pairing outside the six treatments.
- Don't put the wordmark in any face other than Sora 800 lowercase, and never drop or recolour the full stop outside the three specified pairings.
- Don't centre-stack the lockup; the wordmark always reads left-to-right from the mark.
---
## 05 · Components
Build The Day composes on top of Nuxt UI v4. The primary colour is gold, the neutral scale is stone. One override defines the brand: primary buttons are **gold-400 pills with ink text**, not white-on-gold.
```ts
// app.config.ts
export default defineAppConfig({
ui: {
colors: { primary: 'gold', neutral: 'stone' },
button: {
slots: { base: 'rounded-full font-medium' },
compoundVariants: [
{
color: 'primary', variant: 'solid',
class: 'bg-gold-400 text-stone-900 hover:bg-gold-300 focus-visible:outline-gold-600'
}
]
}
}
})
```
### House defaults
| Primitive | House default |
|---|---|
| `` | Pill-shaped. `color="primary"` solid (gold-400, ink text) for the primary action, `variant="outline"` `color="neutral"` for secondary, `variant="ghost"` for tertiary |
| `` | Always pair with a leading icon. `class="w-full"` inside form columns |
| `` | `bg-white border border-stone-200 rounded-2xl`. On gold surfaces, cards stay white — never gold-on-gold |
| `` | `variant="soft"` (gold-50 wash) for informational. Save `variant="solid"` for destructive errors |
| `` | `variant="soft"` for status, `variant="outline"` for tags, `variant="solid"` for counts |
| `` | Required on every icon-only button |
### Composition rules
- One solid-primary action per view. Anything else reads as noise.
- Group related actions with ``, never with manual gaps.
- Use `` to break long sections; never an ``.
- Forms compose with `` — never roll your own label/error layout.
- Highlight with surface, not chrome: when content needs emphasis, put it on a gold-50 panel rather than adding borders, badges or shadows.
### Reserved icons
Always Lucide. The brand vocabulary leans on:
`heart · gem · sparkles · sun · mail · users · calendar · camera · utensils · check · x · arrow-right · arrow-up-right`
Avoid hard-edged technical icons (code, terminal, cog) outside of admin surfaces.
---
## 06 · Layout & spacing
### Container
- Width caps at **1200px**.
- Padding: `clamp(1rem, 3vw, 2rem)` left/right.
### Section rhythm
- Vertical: `clamp(4rem, 8vw, 7rem)` top and bottom.
- Section changes are marked by **surface, not hairlines**: white → gold-50 → white. Where two white sections meet, a single `1px solid stone-200` hairline may divide them.
### Radii
| Token | Value | Usage |
|---|---|---|
| `--btd-radius-input` | 0.75rem | Inputs, selects, textareas |
| `--btd-radius-card` | 1rem | Cards, modals, surfaces |
| `--btd-radius-pill` | 999px | **Buttons**, pills, switches, dots |
Buttons moving to full pills is the headline change from v0.3.
### Spacing scale
Tailwind defaults. Common patterns:
- Grid gaps: `gap-3` (compact) · `gap-6` (default) · `gap-8` (cards)
- Card padding: `p-6` default · `p-8` for hero cards
- Section internal gaps: `space-y-12` for stacked content blocks
### Shadow language
Two soft, close shadows. White surfaces need less lift than cream did — reach for borders and gold washes before shadows.
```css
--btd-shadow-sm: 0 4px 12px -4px rgba(28, 25, 23, 0.06);
--btd-shadow-md: 0 12px 24px -12px rgba(28, 25, 23, 0.10);
```
The v0.3 brand-glow shadow is retired. Hover states lift with `border-stone-300` or a gold-50 fill, not glow.
### Glass
Modern glass — frosted panels with a backdrop blur. Glass exists to keep photography alive behind copy; it is never decoration on a flat surface.
```css
/* Light glass — chips and small panels over photos */
--btd-glass-light: rgba(255, 255, 255, 0.72);
--btd-glass-light-border: rgba(255, 255, 255, 0.55);
/* Dark glass — copy panels over photos, panels on stone-900 */
--btd-glass-dark: rgba(28, 25, 23, 0.45);
--btd-glass-dark-border: rgba(255, 255, 255, 0.14);
/* Both */
backdrop-filter: blur(14px) saturate(140%);
```
Rules:
- **Only over imagery, the dark surface, or a rings ornament.** Glass on a plain flat surface has nothing to blur — use a card.
- Light glass carries ink type; dark glass carries white headlines and white/85 body.
- Radius follows the card radius (1rem); chips go full pill.
- One glass layer — never stack glass on glass.
- The sticky site header is the one standing glass element: `rgba(255,255,255,0.85)` + blur over the scrolling page.
### Borders
Default `1px solid stone-200`. Hover lifts to `stone-300`. On gold surfaces, borders are `gold-200`. No 2px borders unless emphasising a selection.
---
## 07 · Tone & voice
Unchanged from v0.3 — the rebrand is visual, not verbal. 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 anchors
1. **Warm.** Like a friend who plans events for a living. Never aloof, never gushing.
2. **Confident.** We know what to recommend and we say so. No hedging.
3. **Specific.** Real numbers, real names, real dates. "82 guests" beats "many guests".
4. **Quiet.** No exclamation marks. The day will speak for itself.
### Sentence shape
- Short. 12 words is plenty.
- Verb-led. "Send the reminder." not "You can send the reminder."
- Concrete nouns. "guest" not "contact". "table" not "unit".
- Active voice. "We've sent 82 invites." not "82 invites have been sent."
### In context
| Surface | Write this | Not this |
|---|---|---|
| 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? | 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! |
### Vocabulary
| Use | Avoid |
|---|---|
| guest, confirmed, pending, declined | user, contact, entity, record |
| save the date, invitation, reminder | blast, campaign, funnel, workflow |
| seating, table, meal, dietary | unit, slot, capacity, allocation |
| your day, the morning, the ceremony | the event, the experience |
| simple, quiet, honest, specific | magical, dream, ultimate, amazing |
| send · save · invite · update | leverage · utilise · facilitate · ensure |
| period (.) | exclamation mark (!) |
### Punctuation
- Em-dashes ( — ) for asides. Never two hyphens.
- Curly quotes ("…" and '…'). Never straight.
- Numerals for everything from 10 up. "3 guests" / "12 tables".
- Dates as 8 June 2026 (long form) or 08 · 06 · 2026 (display).
---
## 08 · Brand in action
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.
### Newsletter
- 540 px maximum content width.
- White background, gold-50 panels for featured items.
- Bands lockup top-left, issue number top-right, both small.
- Headline in Outfit 28 px / 700, tight tracking.
- Lede in Inter 15 px / 1.6.
- One CTA, centre-aligned, gold-400 pill with ink text.
### Social media
Three canonical surfaces:
- **Feed (1080 × 1080).** White ground, lowercase Outfit headline, gold-400 accent word, mark in bottom-right.
- **Story (1080 × 1920).** Centred lowercase pull-quote, attribution in the label style, three-bar progress at the top.
- **OG / share card (1200 × 630).** Gold-400 panel on the left carrying the on-gold mark large, white content panel on the right.
Brand consistency at thumbnail size is the goal. If the feed post is unreadable scaled down to 200 px, it doesn't ship.
---
## 09 · Gold surfaces
The highlight surface — new in v1.0. When a section, card or callout needs to feel special, it sits on a **gold-50 wash**. This replaces v0.3's cream zebra striping and shadow-led emphasis.
### The four rules
1. **gold-50 ground** — `#fdf8eb`. Warm, barely-there, unmistakably brand.
2. **Same ink** — stone-900 headlines, stone-600 body. The wash changes the temperature, not the type.
3. **gold-200 borders** — `#f3d994` where a border is needed; gold-100 for fills and hovers within the surface.
4. **White cards on gold** — cards sitting on a gold surface are white with gold-200 borders. Never gold-on-gold.
### Where it earns its keep
- Feature highlight sections on marketing pages (alternating white → gold-50 → white).
- The recommended tier on pricing tables.
- Callouts, tips and "what's included" panels in product UI.
- Empty states that invite action.
### Token map (gold surface)
```css
background: #fdf8eb; /* gold-50 */
border: 1px solid #f3d994; /* gold-200 */
color (headline): #1c1917; /* stone-900 */
color (body): #57534e; /* stone-600 */
eyebrow / label: #97551d; /* gold-700 */
card on surface: #ffffff with border #f3d994;
```
### Don'ts
- Don't stack two gold sections back-to-back — white in between resets the eye.
- Don't use gold-400 as a large background wash; it flattens to mustard at scale. gold-400 is for buttons, rings and small fills.
- Don't put gold-600 text on gold-50 at body sizes — it's an accent colour, not a reading colour.
---
## 10 · Dark surfaces
Most surfaces are white, but a section can earn the inversion — a CTA panel, a testimonial, the site footer. The dark variant is the same brand, dialled for contrast.
### The four rules
1. **Stone-900 ground** — `#1c1917`, never near-black.
2. **Gold-400 accent** — `#e5ad2e` reads perfectly on dark. Eyebrows, links, accent words, the gold ring of the mark.
3. **White headlines, stone-400 body** — pure `#ffffff` for h2/h3, `#a8a29e` for body copy. No mid-grey haze in between.
4. **One per page, max** — reserve for CTAs, testimonials and the footer; never the page background.
### Token map (dark)
```css
/* Surface */
background: #1c1917; /* stone-900 */
border: 1px solid #44403c; /* stone-700 */
/* Ink */
color (headline): #ffffff;
color (body): #a8a29e; /* stone-400 */
color (caption): #78716c; /* stone-500 */
/* Accent */
eyebrow / link: #e5ad2e; /* gold-400 */
accent fill: rgba(229, 173, 46, 0.14);
border accent: rgba(229, 173, 46, 0.25);
/* Primary CTA — same pill, same ink-on-gold */
background: #e5ad2e; /* gold-400 */
color: #1c1917; /* stone-900 */
border-radius: 999px;
```
### Footer
The site footer is the canonical dark surface: white Outfit lockup (on-dark mark), stone-400 link copy, gold-400 link hover, top border `border-stone-800`, year-stamped copyright.
### Don'ts
- Don't tint the dark ground with brand colour.
- Don't use gold-600 as text on stone-900 — it muddies. Use gold-400.
- Don't stack two dark sections back-to-back.
---
## 11 · Image surfaces
The third special surface. White is the default, gold-50 is the highlight, stone-900 is the rare inversion — and sometimes a real wedding photo carries the section, with the brand signing it through type, overlay and accent.
Use sparingly — typically one per page, at the top of a marketing hero, or as a full-bleed feature break.
### The four rules
1. **Left-fading dark overlay** — a linear gradient from `rgba(28, 25, 23, 0.78)` on the text side to near-transparent on the photo side.
2. **Gold-400 on photo** — eyebrows and accent words use `#e5ad2e`. Gold-600 disappears into warm photo tones.
3. **White Outfit headlines** — tight-tracked, with a single gold-400 accent word. No italics, no gradient text.
4. **Cap text at ~540 px** — left-anchored column; a subtle `0 2px 12px rgba(0,0,0,0.35)` text-shadow keeps headlines legible.
**The seam connector.** The bands — the duotone mark on a white circular plate — may sit centred on the section's top seam, half on the photo, half on the surface above, stitching the image surface to the page (see §04). One per image surface.
### Token map (image)
```css
/* Overlay — left-to-right ink fade */
background: linear-gradient(
90deg,
rgba(28, 25, 23, 0.78) 0%,
rgba(28, 25, 23, 0.55) 35%,
rgba(28, 25, 23, 0.18) 65%,
rgba(28, 25, 23, 0.05) 100%
);
/* Type */
eyebrow: color: #e5ad2e; /* gold-400, label style */
headline: color: #ffffff; /* Outfit 700, tight tracking */
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
accent: color: #e5ad2e; /* single accent word, same weight */
body: color: rgba(255, 255, 255, 0.85);
/* CTA — the same pill everywhere */
background: #e5ad2e;
color: #1c1917;
border-radius: 999px;
```
### Don'ts
- Don't use a centred overlay unless the photo is symmetrical and the text is centred.
- Don't stack two image surfaces back-to-back.
- Don't drop the text-shadow.
- Don't reintroduce italic or gradient-clipped accent text — that was v0.3.
---
## 12 · Do's & don'ts
| ✓ Do | ✗ Don't |
|---|---|
| Pair Outfit headings with Inter body. | Reintroduce serifs or a third family. |
| Use `#ffffff` as the page background. | Tint the page with cream or grey "warmth". |
| Use gold-400 pills with **ink text** for the primary action. | Put white text on gold-400 — it fails contrast. |
| Use gold-600+ for gold *text* on white. | Use gold-400 as a text colour on white. |
| Emphasise with gold-50 washes. | Emphasise with borders, badges and shadows stacked together. |
| Track display type tight (−0.025em to −0.03em). | Letterspace headings out — it reads dated. |
| Keep the duotone mark exactly as constructed. | Gradient, rotate, outline or recolour the rings. |
| Round buttons to pills, cards to 1rem, inputs to 0.75rem. | Use sharp 0px corners anywhere in a celebration context. |
| One dark surface and one image surface per page, max. | Stack special surfaces back-to-back. |
| Use `` on every icon-only button. | Ship icon-only buttons unlabelled. |
| Cap content at 1200px. | Stretch text columns past 760px. |
| Write in active voice, with specific nouns. | Use "users", "leverage", or any exclamation marks. |
---
## 13 · Tokens at a glance
```css
/* Paper + ink */
--btd-paper: #ffffff;
--btd-ink: #1c1917; /* stone-900 */
--btd-ink-muted: #57534e; /* stone-600 */
--btd-ink-dim: #a8a29e; /* stone-400 */
--btd-border: #e7e5e4; /* stone-200 */
--btd-border-strong: #d6d3d1; /* stone-300 */
/* Brand */
--btd-gold: #e5ad2e; /* gold-400 — buttons, rings, dark accents */
--btd-gold-text: #b87520; /* gold-600 — gold text/links on white */
--btd-gold-text-strong: #97551d; /* gold-700 — eyebrows on white */
--btd-on-gold: #1c1917; /* ink on gold-400, always */
/* Highlight surface */
--btd-wash: #fdf8eb; /* gold-50 */
--btd-wash-fill: #f9edcc; /* gold-100 */
--btd-wash-border: #f3d994; /* gold-200 */
/* Typography — two families, no serif, no mono */
--font-sans: 'Inter', sans-serif;
--font-display: 'Outfit', sans-serif;
/* Radii */
--btd-radius-input: 0.75rem;
--btd-radius-card: 1rem;
--btd-radius-pill: 999px; /* buttons live here now */
/* Shadows */
--btd-shadow-sm: 0 4px 12px -4px rgba(28, 25, 23, 0.06);
--btd-shadow-md: 0 12px 24px -12px rgba(28, 25, 23, 0.10);
/* Glass — only over imagery or on dark (see §06) */
--btd-glass-light: rgba(255, 255, 255, 0.72);
--btd-glass-light-border: rgba(255, 255, 255, 0.55);
--btd-glass-dark: rgba(28, 25, 23, 0.45);
--btd-glass-dark-border: rgba(255, 255, 255, 0.14);
--btd-glass-blur: blur(14px) saturate(140%);
/* Dark surface */
--btd-dark-bg: #1c1917;
--btd-dark-border: #44403c;
--btd-dark-ink: #ffffff;
--btd-dark-ink-body: #a8a29e;
--btd-dark-accent: #e5ad2e;
```
---
## 14 · Migration map (v0.3 → v1.0)
Apply these swaps mechanically; everything else is judgement.
| v0.3 (retired) | v1.0 (use instead) |
|---|---|
| Page background `cream-50 #fdfbf7` | `#ffffff` |
| Section zebra `cream-100` | gold-50 `#fdf8eb` highlight sections |
| Default border `cream-200` | stone-200 `#e7e5e4` |
| Strong border `cream-300` | stone-300 `#d6d3d1` |
| Playfair Display headings | Outfit 700, tight tracking |
| Italic Playfair accent words | Same-weight word in gold-600 (white) / gold-400 (dark, image) |
| Cormorant Garamond fallback | Removed entirely |
| Brand gradient gold-600 → gold-400 | Duotone ink + gold-400 (no gradients) |
| Serif B tile mark | The bands — interlocked rings |
| Primary button: gold-600 fill, white text, 0.75rem radius | gold-400 fill, **stone-900 text**, pill radius |
| Button hover gold-700 | Button hover gold-300 |
| Brand-glow shadow | Retired — lift with border-stone-300 or gold-50 fill |
| Eyebrow tracking 0.16em / 11px | 0.08em / 12px |
| Label colour gold-600 on light | gold-700 on light |
Unchanged: the stone neutral scale, the dark-surface rules (stone-900 + gold-400), the image-surface overlay, semantic colours, container width, section rhythm, card/input radii, and the entire tone & voice section.
---
## 15 · Agent guide
A one-page brief for AI agents composing Build The Day UI. Read this section if nothing else.
**Stack.** Nuxt 4 · Nuxt UI v4 · Tailwind v4. Module list: `@nuxt/ui`, `@nuxt/fonts`, `@nuxt/image`, `@nuxt/content`.
**App config.**
```ts
export default defineAppConfig({
ui: {
colors: { primary: 'gold', neutral: 'stone' },
button: {
slots: { base: 'rounded-full font-medium' },
compoundVariants: [
{ color: 'primary', variant: 'solid',
class: 'bg-gold-400 text-stone-900 hover:bg-gold-300 focus-visible:outline-gold-600' }
]
}
}
})
```
**Defaults to apply without asking.**
- Page background: white `#ffffff` (the body owns this).
- Body copy: `text-stone-600`, Inter.
- Headlines: `font-display text-stone-900 font-bold tracking-tight` (Outfit).
- Cards: `bg-white border border-stone-200 rounded-2xl p-6`.
- Primary action: `…` — gold-400 pill, ink text, one per view.
- Hover lift: `hover:border-stone-300 transition-colors duration-200`.
- Highlight panels: `bg-gold-50 border border-gold-200 rounded-2xl`.
- Eyebrow / label: Inter 12px / 600, uppercase, `tracking-[0.08em]`, `text-gold-700` (gold-400 on dark/image).
- Footer: `` — stone-900, white lockup, gold-400 link hover.
- Glass (over photos/dark only): light `bg-white/70 backdrop-blur-md border border-white/55` with ink type; dark `bg-stone-900/45 backdrop-blur-md border border-white/15` with white type. Never on flat white or gold-50.
**Four surfaces. Pick one per section.**
1. **White (default).** White page, stone-900 ink, stone-600 body, gold-600 accent text, gold-400 primary pill.
2. **Gold wash (highlight).** gold-50 ground, gold-200 borders, same ink, gold-700 eyebrows. For sections that deserve emphasis. White cards on top.
3. **Dark.** `#1c1917` ground, white headlines, stone-400 body, gold-400 accent — never gold-600. One per page, max.
4. **Image.** Wedding photo, left-fading dark overlay, gold-400 eyebrow, white Outfit headline with one gold-400 accent word, gold-400 pill CTA. Cap text at ~540 px.
**The mark.** Two interlocked rings with break-gap weave — ink left, gold-400 right; ink over at the top crossing, gold ribbon ends over the black at the bottom, open gaps at both. Lockup: mark + "buildtheday." in Sora 800 lowercase (outlined; logo face only) with a gold-400 full stop. On gold surfaces: white + ink rings, white full stop. On dark: white + gold rings. Photo fill — a bright wedding photo masked into the mono mark — is the display treatment for hero and closing-CTA moments on white or gold-50. On image surfaces, the duotone mark on a white circular plate may sit centred on the top seam, half on the photo, connecting the sections.
**Voice.** Short sentences. Active verbs. Specific nouns. No exclamation marks. "Send the reminder." not "You can send out a reminder!".
**When in doubt.** Open the live preview at design.buildtheday.com and look at how an existing section solves the same problem. Match it.
---
*Build The Day · Design System · v1.0*