# Build The Day — Design System *The single source of truth for every Build The Day property — maem (the product), buildtheday-marketing, buildtheday-learn, and this design site. Drop this file into your agent alongside [ui.nuxt.com](https://ui.nuxt.com) and it will compose UI that signs our brand from the first render.* > Version 0.3 · 2026 · Light-first · Warm · Celebration-ready --- ## Table of contents 1. [Visual theme](#01--visual-theme) 2. [Colour palette](#02--colour-palette) 3. [Typography](#03--typography) 4. [Logo system](#04--logo-system) 5. [Components](#05--components) 6. [Layout & spacing](#06--layout--spacing) 7. [Tone & voice](#07--tone--voice) 8. [Brand in action](#08--brand-in-action) 9. [Dark surfaces](#09--dark-surfaces) 10. [Image surfaces](#10--image-surfaces) 11. [Do's & don'ts](#11--dos--donts) 12. [Tokens at a glance](#12--tokens-at-a-glance) 13. [Agent guide — one-page brief](#13--agent-guide) --- ## 01 · Visual theme 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 chosen, not defaulted. Five principles govern every visual decision. 1. **Quiet luxury.** Nothing shouts. Restraint is the voice. No exclamation marks. No drop shadows louder than `0 24px 48px -24px` tinted with the brand glow. 2. **Warm paper.** `cream-50` (`#fdfbf7`) is the default page background — never pure white. White is reserved for card interiors, where it sits as a lifted surface against cream. 3. **Serif headlines.** Playfair Display carries every heading level. Continuity sets the tone. 4. **Generous air.** Spacing is punctuation. Sections breathe at `clamp(4rem, 8vw, 7rem)` vertical rhythm. 5. **Gold, used sparingly.** The accent is precious by design — one solid-gold action per view, then let cream and ink do the work. ### Mood references - **Warm paper:** Editorial print, hand-set wedding stationery, cream card stock under a window. - **Soft glow:** Beeswax candles, golden hour light through linen. - **Quiet typography:** A New Yorker spread. A pre-war menu card. - **Generous space:** A garden walking path, not a city pavement. --- ## 02 · Colour palette Two core scales carry the brand: **gold** for accent and **cream** for warm neutral. Tailwind's `stone` scale handles body copy and non-brand UI. There are **no alternate colorways** — the identity *is* the palette. ### Gold — primary | Token | Hex | Usage | | ------------- | --------- | ---------------------------------------------- | | gold-50 | `#fdf8eb` | Softest wash — hover backgrounds, tints | | gold-100 | `#f9edcc` | Subtle fills | | gold-200 | `#f3d994` | Accent dividers | | gold-300 | `#ecc35c` | Soft illustration | | gold-400 | `#e5ad2e` | **Accent on dark.** Eyebrows, links, italic headlines on stone-900 | | gold-500 | `#d4982a` | Mid-tone brand accent, theme-color meta tag | | **gold-600** | **`#b87520`** | **Primary on light.** Solid buttons, active states. | | gold-700 | `#97551d` | Hover state on primary buttons | | gold-800 | `#7d4420` | Darker emphasis | | gold-900 | `#6b3820` | High-contrast text on cream | | gold-950 | `#3e1c0e` | Deep accent, rare | ### Cream — warm neutral | Token | Hex | Usage | | --------- | ---------- | ---------------------------------------------- | | cream-50 | `#fdfbf7` | Page background (the "paper") | | cream-100 | `#f8f4ec` | Subtle section zebra, hero washes | | cream-200 | `#f0e6d4` | Default border, ink on dark | | cream-300 | `#e6d3b5` | Strong border, dividers | | cream-400 | `#d9ba90` | Text hairlines on paper | | cream-500 | `#cfa373` | Secondary accent | | cream-600 | `#c28e5d` | Deeper tan | | cream-700 | `#a2734c` | Rarely used | | cream-800 | `#845f43` | Rarely used | | cream-900 | `#6c4f39` | Rarely used | | cream-950 | `#3a281d` | Rarely used | ### Neutral — stone (Tailwind) | Token | Hex | Usage | | ---------- | --------- | ------------------------------ | | stone-900 | `#1c1917` | Headlines, ink, dark surface ground | | stone-700 | `#44403c` | Strong body, dark borders | | stone-600 | `#57534e` | Default body copy | | stone-500 | `#78716c` | Quieter body | | stone-400 | `#a8a29e` | Captions, dimmed labels, dark-surface body | | stone-300 | `#d6d3d1` | Disabled controls | | stone-200 | `#e7e5e4` | Reserved — pairs with stone-900 as ink | ### Signature accent The brand gradient — reserved for brand marks, the primary focus halo, and hero surfaces — is always `gold-600 → gold-400`: ```css linear-gradient(135deg, #b87520 0%, #e5ad2e 100%); ``` One accent, one voice. ### 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 monospace.** Playfair carries every heading; Inter covers body, UI, and the small uppercase "label" style that signs eyebrows and dates. Keeping it to two webfonts keeps the page light and the brand voice consistent across every Build The Day property. | Role | Family | Size | Weight | Usage | | --------------- | ----------------- | ---------- | ------ | ---------------------------- | | Display | Playfair Display | 72 / 80 px | 700 | Hero headlines, launches | | H1 | Playfair Display | 48 / 56 px | 700 | Page titles | | H2 | Playfair Display | 32 / 40 px | 700 | Section headings | | H3 | Playfair Display | 22 / 28 px | 600 | Card titles | | Body lg | Inter | 19 / 30 px | 400 | Hero supporting copy | | Body | Inter | 17 / 28 px | 400 | Paragraphs, descriptions | | Body sm | Inter | 14 / 22 px | 400 | Meta, captions | | Label / Eyebrow | Inter | 11 px | 600 | Dates, numbers, eyebrow tags — uppercase, `letter-spacing: 0.16em` | ### Pairing rules - **Headings stay serif.** Don't drop to Inter for a "modern" h2. - **Italic Playfair** is the only secondary display face — use it for pull quotes and accent words, not body. On dark surfaces, italic Playfair in `gold-400` is the canonical headline accent. - **Track-out caps** (`letter-spacing: 0.16em`, `text-transform: uppercase`) on Inter at 11 px / 600 weight = the BTD label style. Use it for eyebrow tags, dates, section numbers, badge labels. - **Cormorant Garamond** is loaded as a fallback display face for specific editorial moments (story headlines, certificate-style surfaces). Don't use it in product UI. ### Numerals Inter with `font-feature-settings: "tnum"` for any number that needs to align — RSVP counts, prices, dates in tables. --- ## 04 · Logo system The Build The Day mark is a serif `B` inside a rounded gold tile. It ships in five canonical treatments and one wordmark lockup. ### Treatments | Variant | When to use | | ------------- | ---------------------------------------------------------- | | Gradient | **Default.** Use everywhere the surface can render colour. | | Solid gold | Single-colour print, embossing, foil, monochrome export. | | Mono · ink | Single-ink mark on light, when colour isn't available. | | Mono · paper | The mark on dark backgrounds, mono-ink not available. | | Reverse | Dark surfaces (NOT gold) where the mark must read white. | On dark BTD surfaces, the **gradient** treatment still wins — its glow lifts off stone-900 cleanly. Reach for reverse only where production constraints force a single-colour render. ### Lockup Wordmark sits to the right of the tile, separated by a gap equal to half the tile height. Wordmark uses Playfair Display 700 at the tile's height × 0.5 (e.g. 44 px tile → 22 px wordmark). ### Clearance Reserve a margin equal to the tile height on every side of the lockup. Nothing — type, image, edge, gradient — sits inside this buffer. ### Minimum size | Surface | Floor | | ------- | ---------- | | Web | 20 px tall | | Print | 8 mm tall | Below the floor, drop the wordmark and use the standalone tile. ### App icon The standalone tile, rendered at iOS canonical sizes: `1024 · 180 · 167 · 152 · 120 · 87 · 80 · 60 · 58 · 40 · 29 · 20`. **Always the gradient on home screen** — never the mono treatments. Corner radius scales as iOS's superellipse — let the OS handle the mask. ### Don'ts - Don't render the tile in any colour outside the four canonical treatments. - Don't change the corner radius (it scales as `height × 0.25`). - Don't outline the tile. - Don't apply drop shadows to the wordmark — only to the tile, and only the brand glow shadow. - Don't centre-align the lockup; the wordmark always reads left-to-right from the tile. --- ## 05 · Components Build The Day composes on top of **Nuxt UI v4**. The primary colour is `gold`, the neutral scale is `stone`. Most components need zero custom styling; the global colour tokens do the work. ```ts // app.config.ts export default defineAppConfig({ ui: { colors: { primary: 'gold', neutral: 'stone' } } }) ``` ### House defaults | Primitive | House default | | ------------- | ------------------------------------------------------ | | `` | `color="primary"` solid for primary action, `variant="outline"` for secondary, `variant="ghost" color="neutral"` for tertiary | | `` | Always pair with a leading icon. `class="w-full"` inside form columns. | | `` | Wrap real content blocks. Don't nest cards inside cards. | | `` | `variant="soft"` 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. ### Reserved icons Always Lucide. The brand vocabulary leans on: `heart · gem · sparkles · sun · feather · flower-2 · mail · users · calendar · camera · utensils · check · x · arrow-right · arrow-up-right` Avoid hard-edged technical icons (`code`, `terminal`, `cog`) outside of admin surfaces. ### Components reference The full themed catalogue lives at `/components` on the design site. It mirrors `ui.nuxt.com` group-for-group across 13 categories: Layout, Element, Form, Data, Navigation, Overlay, Page, Dashboard, AI Chat, Editor, Content, Color Mode and i18n. --- ## 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 dividers: a single `1px solid cream-200` hairline. No background colour shifts between sections — except a true dark surface (see §09). ### Radii | Token | Value | Usage | | -------------------- | ---------- | --------------------------- | | `--btd-radius-input` | `0.75rem` | Inputs, selects, textareas | | `--btd-radius-card` | `1rem` | Cards, modals, surfaces | | `--btd-radius-mark` | `0.625rem` | Brand mark tile (h × 0.25) | | `--btd-radius-pill` | `999px` | Pills, switches, dots | ### 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 Three soft, close shadows. Never flat black; always tinted. ```css --btd-shadow-sm: 0 4px 12px -4px rgba(28, 25, 23, 0.08); --btd-shadow-md: 0 12px 24px -12px rgba(28, 25, 23, 0.12); --btd-shadow-glow: 0 24px 48px -24px var(--cw-glow-strong); ``` ### Borders Default `1px solid cream-200`. Hover lifts to `cream-300` or to `primary-soft` for active states. No 2px borders unless emphasising a selection. --- ## 07 · Tone & voice 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 - **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 ("might want to consider", "perhaps you could"). - **Specific.** Real numbers, real names, real dates. *"82 guests"* beats *"many guests"*. - **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 serif, same quiet. ### Newsletter - 540 px maximum content width. - Same `cream-50` paper background as the product. - Brand mark + name top-left, issue number top-right, both small. - Headline in Playfair 30 px / 700. - Lede in Inter 15 px / 1.6. - One CTA, centre-aligned, gold-filled pill. - Numbered "in this issue" digest below the fold using `decimal-leading-zero`. ### Social media Three canonical surfaces: - **Feed (1080 × 1080).** Cream paper, italic Playfair name, mono date line, mark in bottom-right. - **Story (1080 × 1920).** Centred italic pull-quote, attribution in small caps, three-bar progress at the top. - **OG / share card (1200 × 630).** Gold gradient panel on the left, cream content panel on the right, brand mark large in the gradient panel. Brand consistency at thumbnail size is the goal. If the feed post is unreadable scaled down to 200 px, it doesn't ship. --- ## 09 · Dark surfaces Most surfaces live on cream paper, but every so often a section needs to feel set apart — a CTA panel, a testimonial, the site footer. The dark variant is the same brand, dialled for contrast: same gold, same Playfair, same restraint. ### The four rules 1. **Stone-900 ground** — `#1c1917`, never near-black. The same neutral that carries body ink in light, used as the surface here. 2. **Gold-400 accent** — `#e5ad2e` reads brighter on dark than gold-600 ever could. Use it for eyebrows, links, italic headline accents. 3. **White headlines, cream body** — pure `#ffffff` for h2/h3, stone-400 (`#a8a29e`) for body copy. No mid-grey haze in between. 4. **One per page, max** — dark surfaces earn their weight by being rare. 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); /* gold-400 @ 14% */ border accent: rgba(229, 173, 46, 0.25); /* Solid CTA — same brand button, with a warmer glow */ background: var(--cw-primary); /* gold-600 */ color: var(--cw-on-primary); /* white */ box-shadow: 0 12px 24px -10px rgba(229, 173, 46, 0.35); ``` ### Footer The site footer is the canonical dark surface. Pattern shipped on buildtheday-marketing and buildtheday-learn: ```vue
© {{ year }} Build The Day. All rights reserved.
``` White serif wordmark, 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 — it must read as ink-on-paper inverted, not as a coloured panel. - Don't use gold-600 as text on stone-900 — it muddies. Use gold-400. - Don't stack two dark sections back-to-back. A cream section in between gives the dark one room to land. --- ## 10 · Image surfaces The third surface. Cream paper is the default; stone-900 is the rare inversion; sometimes a real wedding photo carries the section itself and the brand signs 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. The text holds its line; the photo's golden hour reads on the right. 2. **Gold-400 on dark** — eyebrow uses `#e5ad2e`, the same accent we use on Dark Surfaces. Gold-600 muddies on photos; gold-400 lifts off cleanly. 3. **Italic gradient accent** — the italic Playfair line uses a brighter `gold-400 → gold-300` ramp via `bg-clip-text`. The cream-paper hero uses `gold-600 → gold-400`; on photos we lift it. 4. **Cap text at ~540 px** — headlines and body live inside a left-anchored column so the right half of the photo can breathe. A subtle `0 2px 12px rgba(0,0,0,0.35)` text-shadow keeps headlines legible even when the photo brightens. ### 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 */ headline: color: #ffffff; /* pure white */ text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); accent: background: linear-gradient(135deg, #e5ad2e 0%, #ecc35c 100%); -webkit-background-clip: text; color: transparent; font-style: italic; body: color: rgba(255, 255, 255, 0.85); /* CTA — same brand button as light surfaces */ background: var(--cw-primary); /* gold-600 */ color: var(--cw-on-primary); /* white */ box-shadow: 0 12px 24px -10px rgba(229, 173, 46, 0.5); ``` ### Reference implementation Shipped on `buildtheday.com`'s marketing hero ([`ImageHero.vue`](https://buildtheday.com)). Markdown supports an italic-asterisk shorthand: `*italic phrase*` becomes the gradient accent automatically. ### Don'ts - Don't use a centred overlay (`from-black/60 via-black/35 to-black/60`) unless the photo is symmetrical *and* the text is centred. The default left-fade reads better with left-anchored type. - Don't use gold-600 for the eyebrow on a photo — it disappears into warm tones in the image. - Don't stack two image surfaces back-to-back. A cream or dark section in between resets the eye. - Don't drop the text-shadow. Some photos brighten and the headline needs the shadow to hold its line. --- ## 11 · Do's & don'ts | ✓ Do | ✗ Don't | | -------------------------------------------------------------------- | ------------------------------------------------------------------ | | Pair Playfair Display headings with Inter body. | Mix three serif fonts in one layout. | | Use `gold-600` for one solid-primary action per view on light. | Colour large surfaces with `gold-600` — it flattens to beige. | | Use `gold-400` for accents on dark surfaces. | Use `gold-600` for text on stone-900 — it muddies. | | Reach for `cream-50` before pure white. | Use `#ffffff` as the page background — too clinical. | | Round cards to `1rem`, inputs to `0.75rem`. | Use sharp `0px` corners anywhere in a celebration context. | | Let the page breathe — spacing is the voice of luxury. | Cram data-dense tables into narrow columns. | | Tint shadows with the brand glow. | Use raw `rgba(0,0,0,0.x)` shadows — they read clinical. | | Write in active voice, with specific nouns. | Use "users", "leverage", or any exclamation marks. | | Use the gradient lockup by default — even on dark surfaces. | Render the tile in any colour outside the five canonical treatments.| | Use `` on every icon-only button. | Ship icon-only buttons unlabelled — they fail screen readers. | | Cap content at `1200px`, even when the viewport is wider. | Stretch text columns past `760px` — readers lose the line. | | Use one dark surface per page, max. | Stack two dark sections back-to-back without cream in between. | --- ## 12 · Tokens at a glance ```css /* Paper + ink */ --cw-paper: #fdfbf7; /* cream-50 */ --cw-ink: #1c1917; /* stone-900 */ --cw-ink-muted: #57534e; /* stone-600 */ --cw-ink-dim: #a8a29e; /* stone-400 */ --cw-border: #f0e6d4; /* cream-200 */ --cw-border-strong:#e6d3b5; /* cream-300 */ /* Brand */ --cw-primary: #b87520; /* gold-600 — light surfaces */ --cw-primary-soft: #e5ad2e; /* gold-400 — dark surfaces */ --cw-secondary: #cfa373; /* cream-500 */ --cw-gradient: linear-gradient(135deg, #b87520 0%, #e5ad2e 100%); --cw-on-primary: #ffffff; --cw-glow: rgba(184, 117, 32, 0.18); --cw-glow-strong: rgba(184, 117, 32, 0.30); /* Typography — two families, no mono */ --font-sans: 'Inter', sans-serif; --font-serif: 'Playfair Display', serif; /* Radii */ --btd-radius-input: 0.75rem; --btd-radius-card: 1rem; --btd-radius-pill: 999px; /* Shadows */ --btd-shadow-sm: 0 4px 12px -4px rgba(28, 25, 23, 0.08); --btd-shadow-md: 0 12px 24px -12px rgba(28, 25, 23, 0.12); --btd-shadow-glow: 0 24px 48px -24px var(--cw-glow-strong); /* Dark surface */ --btd-dark-bg: #1c1917; /* stone-900 */ --btd-dark-border: #44403c; /* stone-700 */ --btd-dark-ink: #ffffff; /* headlines */ --btd-dark-ink-body: #a8a29e; /* stone-400 — body */ --btd-dark-accent: #e5ad2e; /* gold-400 */ ``` --- ## 13 · 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' } } }) ``` **Page structure.** ```vue ``` **Defaults to apply without asking.** - Page background: `cream-50` (the body owns this). - Body copy: `text-stone-600`. - Headlines: `font-serif text-stone-900 font-bold`. - Cards: `bg-white border border-cream-200 rounded-2xl p-6`. - Primary action: `…` (gold-600). - Hover lift: `hover:border-gold-300 hover:shadow-[0_24px_48px_-24px_var(--cw-glow-strong)] transition-all duration-200`. - Footer: drop in `` — the master pattern is shipped on every BTD property. - Eyebrow / label text: `class="type-mono"` (Inter 11 px / 600, uppercase, tracked-out — there is no monospace font). **Three surfaces.** Pick one per section. - **Light (default).** `cream-50` page, `stone-900` ink, `gold-600` accent. The everyday surface. - **Dark.** `#1c1917` ground, `#ffffff` headline, `#a8a29e` body, `#e5ad2e` (gold-400) accent — never gold-600. One per page, max. - **Image.** Wedding photo with a left-fading dark overlay, `gold-400` eyebrow, white serif headline + italic `gold-400 → gold-300` accent, gold-600 CTA. Cap text at ~540 px. Don't stack two back-to-back. Italic Playfair is the canonical headline accent on every dark or image surface. **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](https://design.buildtheday.com) and look at how an existing section solves the same problem. Match it. --- *Build The Day · Design System · v0.3*