Design System
The building blocks of the Wedding Book — colours, type and sections. Build new pages from these, and nothing else.
01 — COLOUR
Eight colours. Text is always Ink; Paper is the page; Paper Shade is a barely darker panel on Paper; Veil sits over photographs — the Curved Veil on the cover, the Ticker and the header bar; Veil Soft is the same cream at 60%, only for the Drag Cursor pill over the photo strips; Gilt is for small ornaments only, and the Curved Veil’s line; Hairline is for fine 1 px rules. Maroon is the one accent: the Send Button and the hover colour of links and CLOSE.
PAPER · #F2EDE4
Page background · Ink on Paper 11.6 : 1
INK · #3B2B20
All text and rules
VEIL · CREAM AT 80%
Bands over photos · Ink on Veil ≥ 7.6 : 1
VEIL SOFT · CREAM AT 60%
The Drag Cursor pill over the photo strips (with a 10 px blur) · lighter than Veil on purpose
GILT · #8C631C
Ornaments (ticker dots) · not for text
PAPER SHADE · #EBE5DA
A shade darker than Paper, for quiet panels (behind the Chapter IV thumbnails) · 1.08:1 against Paper, Ink on it 10.8:1
HAIRLINE · INK AT 18%
Fine 1 px rules (under the collapsed header) · decorative
MAROON · #6B1F2A
The one accent: the Send Button and link hovers (Maroon Hover) · Paper on it 9.7 : 1
02 — TYPE
Two families: Cormorant Garamond for everything, Mrs Saint Delafield only for the Signature (one short handwritten line per chapter, and the couple’s words in Chapter VIII) and Couple Signature (the couple’s names at the very end). Fourteen styles in all; Veil Tagline is Label one pixel larger, for the tagline in the cover’s veil only. The couple’s names appear three times, each in its own style: Couple Name on the cover (the page’s h1), Bar Name in the header bar (p) and Couple Signature in the footer (p). Sizes per breakpoint: Large ≥ 1920 · Laptop ≥ 1440 · Desktop ≥ 1200 · Tablet ≥ 810 · Phone. Styles carry no colour — set Ink on the layer.
COUPLE NAME · H1 ON HOME (THE COVER’S VEIL) · 50 / 50 / 42 / 38 / 36 · CAPS (BY THE STYLE) · PHONE: THREE LINES
Amelia & James
BAR NAME · P · 18 / 18 / 15 / 14 / 14 · CAPS (BY THE STYLE) · THE NAMES IN THE HEADER BAR
Amelia & James
DEDICATION · P · 24 / 24 / 20 / 18 / 17 · ITALIC
married on the 14th of June — Lake Como, Italy
LABEL · P · 14 / 14 / 13 / 12 / 12 · TYPE IT IN CAPITALS · LINING FIGURES
A STORY of the day WE CHOSE US,
VEIL TAGLINE · P · 15 / 15 / 14 / 13 / 13 · LABEL ONE PIXEL UP, NO CAPS OF ITS OWN · THE TAGLINE IN THE COVER’S VEIL
A STORY of the day WE CHOSE US,
told in PHOTOGRAPHS.
TICKER · P · 22 / 22 / 20 / 18 / 16 · CAPS (BY THE STYLE)
Lake Como, Italy
CHAPTER TITLE · H2 · 28 / 28 / 26 / 24 / 22 · CAPS (BY THE STYLE)
How it all started
LEAD · P · 38 / 38 / 34 / 30 / 27 · BALANCED, CENTRED
It began with a borrowed umbrella
LEAD SMALL · P · 600 · 30 / 30 / 27 / 24 / 22 · LEFT · LATER CHAPTERS
A pale yellow villa on the western shore
COUPLE SIGNATURE · P (NEVER H1) · MRS SAINT DELAFIELD · 80 / 72 / 60 / 52 / 44 · THE COUPLE’S NAMES AT THE END
Amelia & James
SIGNATURE · P · MRS SAINT DELAFIELD · 50 / 50 / 45 / 41 / 38
where it all began
STORY COLUMNS · MULTI-COLUMN TEXT COMPONENT FONT (NOT A STYLE) · CORMORANT GARAMOND 500 · 19 / 18 / 17 / 17 / 17 · LH 1.5 · LETTER SPACING −0.01 EM · JUSTIFIED, HYPHENATED · 2 COLUMNS (GAP 28 / 24 / 24 / 24), 1 ON PHONE · DROP CAP: 3 LINES IN CHAPTER I, 2 LINES AFTER
CAPTION TITLE · P · 600 · 13 / 13 / 12 / 11 / 11 · THE HEADING ABOVE A CAPTION — LABEL 1 PX SMALLER, ONE WEIGHT HEAVIER
THE QUESTION
CAPTION · P · 16 / 16 / 15 / 14 / 13 · LH 1.3 · TEXT UNDER A GALLERY PHOTO
His grandmother’s ring, kept in his coat pocket for three weeks.
BODY · P · 19 / 19 / 18 / 17 / 17 · LH 1.5 · RUNNING TEXT, GUIDES
They shared a doorway, then an umbrella.
03 — HEADER
Header is a component with four looks: Desktop (used on Large, Laptop, Desktop and Tablet) and Phone — shown here — plus Desktop Menu and Phone Menu for the Chapters menu (14). It is always a slim bar: Veil with a 10 px background blur and a Hairline line underneath, holding the date, the couple’s names in Bar Name (linking to the top) and CHAPTERS. Date and CHAPTERS each sit in a fixed 110 × 26 px slot (24 × 24 on phones) so the names stay centred and the bar never changes size whatever a page switches off; a long name wraps between the slots. Show Close swaps CHAPTERS for the Close Button component (15): CLOSE from Tablet up, the same × as the menu on phones. There is one header for the whole site, in Site Layout — Home included. All of its motion comes from a code override, Header Motion, on the header in Site Layout — the component has no effects of its own: it fades in once at page load (0.7 s, from 10 px above); on larger screens it slides away as you scroll down and returns as you scroll up, and it is always shown near the top, while the menu is open and after a chapter jump; on phones it stays, on purpose. On Home the couple’s names, dedication and tagline live in the cover’s Curved Veil (04).
14.06.2026
Amelia & James
CONTENTS
Have something to share?
Amelia & James
CONTENTS
Have something to share?
Chapters Button — Text / Icon (cross-fade, width 110 → 26 px)
04 — COVER
The cover is one screen tall and pinned: the photo and its Ticker stay put while the Curved Veil — 65% of the screen (58% on Tablet, where screens are tall), holding the couple’s names (the page’s h1), the dedication and the tagline — lifts up and away; then the photo scrolls on like any section. No code except the veil’s shape: Cover Photo is sticky (100vh) and an invisible Veil Travel frame (the veil’s height again: 65vh, Tablet 58vh) below it sets how long it stays — the veil, Veil Travel and Cover Photo also carry a minimum height (Large 460, Laptop 455, Desktop 420, Tablet 400, Phone 390 px), so a short laptop window or a phone held sideways still fits the names and tagline between the bar and the curve; normal screens are never affected; the Curved Veil sits on top with its text above the curve (bottom padding = curve depth + clearance: 174 / 170 / 164 / 132 / 100, Large → Phone). Curved Veil is a code component (CurvedVeil.tsx): Veil fill, 10 px blur, a 6 px Gilt line along the curve, Curve Depth 78 (Tablet 60, Phone 40). On load the photo shrinks from 120% (on Zoom, inside the clipping Photo Clip — anything that scales must stay inside a clip, or iPhones show a thin strip down the right edge), then the names fade in, then the dedication and tagline as one group. On phones the names sit on three lines — line breaks typed on the Phone breakpoint only; redo them if the names change. The Ticker stays at the bottom of the screen while the photo is pinned (above Safari’s toolbar), speed 50 / 44 / 40 / 32 / 24 px/s. Shown here at a fixed 720 px, without the motion.
Amelia & James
Lake Como, Italy
The fourteenth of June
Always & forever
Amelia & James
married on the 14th of June — Lake Como, Italy
A STORY of the day WE CHOSE US,
told in PHOTOGRAPHS.
05 — CHAPTER OPENING
CHAPTER I
How it all started
It began with a borrowed umbrella on a rainy Tuesday in London, and a conversation neither of them wanted to end.
Amelia was running late for a gallery opening. James was running late for nothing at all. They shared a doorway, then an umbrella, then the long walk to Bloomsbury, talking about books, bad coffee and the cities they still wanted to see. By the time the rain stopped, neither of them had noticed. She never made it to the gallery; he walked her to the station twice, because the first time they missed the train. A week later he returned the umbrella with a note tucked inside the handle: a café, a Saturday, a time. She arrived early and found him already there, two cups on the table and the paperback he had promised to lend her. Saturdays became Sundays, and Sundays became the whole week. There were long dinners in tiny restaurants, a slightly disastrous camping trip in Cornwall, and a list on the fridge of every place they wanted to see together, with Lake Como written at the very top. Three years, two flats and one very patient dog later, they stood beside the water in the late June light, promising each other a lifetime of rainy days.
where it all began
Every chapter opens the same way, inside an Opening frame: Label (CHAPTER I) → Chapter Title (h2) → a drawn ornament for the chapter (decorative image, empty alt: olive sprig in I, 117 / 108 / 99 / 90 / 81 px wide; ring in II, 168 / 156 / 146 / 132 / 112 px; lakeside sketch in III and garden-aisle sketch in IV, 360 / 330 / 300 / 270 / 220 px; the flower arch in V, 3:2, larger for the ceremony: 420 / 390 / 360 / 330 / 270 px; the dinner terrace in VI and the pressed flower with a letter in VII, same widths; the joined hands in VIII, 3:2 like the arch) → Lead (every chapter; Chapter I uses Lead, later chapters the smaller Lead Small) → Story Columns (Multi-Column Text, 2 columns, justified) → Signature. The story opens with a drop cap — the first letter in the same face and colour as the text, sized so its capital spans exactly 3 lines in Chapter I (the book’s opening) and 2 lines in every later chapter, sitting on that line’s baseline with a small gap after it (Drop Cap + Cap Lines in the component’s properties). Opening padding 200 / 180 / 160 / 140 / 112 px on top and 150 / 135 / 120 / 100 / 80 below (Large → Phone); gap 48 / 44 / 40 / 36 / 32. Each element rises 30 px into view over 1.2 s; the Lead is written in word by word from the left. The section is a Scroll Section so the chapter menu can link to it. The Gallery follows — see 06 (Chapter III: the viewer, see 07; Chapter IV: Pair Gallery, 08; Chapter V: the video, 09). A new chapter sketch is uploaded at twice the width it shows at, as a 256-colour PNG with transparency — it stays sharp on Retina screens and light.
06 — CHAPTER GALLERY
A chapter’s Gallery follows its Opening. Every photo sits in its own clipping Frame · Photo N (a Scroll Section, photo-N) and scales from 120% to 100% as that frame enters (Section in View, Bottom; 3 s, starting opacity 0.8, no exit). Row types so far — Chapter I: full-bleed rows, 12 px side margins and 10 px gaps, two photos side by side or one wide. Chapter II (below): Row · Three Photos, side margins 72 / 56 / 48 / 32 / 20 px, columns 1fr / 1.58fr / 1fr with 12 px gaps; the side columns start 113 / 84 / 70 / 47 px lower so the middle photo stands taller. Photo heights: sides 916 / 682 / 565 / 378 / 500, middle 1109 / 826 / 685 / 455 / 440 (Large → Phone); on Phone the columns stack. Under each photo a Caption: a Caption Title (not Label — 1 px smaller and one weight heavier, so a short heading still holds its own beside a large photo without competing with the chapter’s Label) over Caption text (85% of the photo’s width on Desktop and up, full width on Tablet and Phone). Captions have no reveal of their own — they are simply there under the photo.
THE WALKS
Every visit the same walk along the Seine.
THE QUESTION
His grandmother’s ring, and a yes before he could finish.
THE CELEBRATION
That night’s dinner with friends became a party.
07 — CHAPTER VIEWER
Chapter III shows a Photo Viewer instead of a Gallery — a code component (PhotoViewer.tsx). Thumbnails sit on the left (on Phone, a row on top) beside one large photo that runs to the right edge of the screen; picking a thumbnail crossfades the photo. The selected thumbnail gets a thin Ink frame, and hovering slowly zooms a thumbnail inside its frame (0.9 s; only with a mouse or trackpad — never on touch screens). Add, remove or reorder photos in the Photos list of its properties; more photos than fit make the column scroll. The height is set on the instance per breakpoint (Large 1000 · Laptop 780 · Desktop 640 · Tablet 440 · Phone 318 px) and the photo fills it, cropped. Keyboard: Tab reaches the thumbnails, arrow keys move between them. The large photo zooms from 120% to 100% the first time it scrolls into view (Reveal). In this chapter the Opening is centred like every other chapter, its Lead uses Lead Small, and the place name (Villa Lucia, Lake Como, in Signature) sits above the Story Columns inside the opening; the viewer follows.
08 — PAIR GALLERY
Chapter IV uses Pair Gallery (PairGallery.tsx), its own code component — not the Photo Viewer. Two equal halves a sliver apart (8 px, Phone 4): a square (or Portrait, 4:5) large photo, and a same-size Paper Shade panel with a 2 × 2 grid of thumbnails centred in it. At most four photos. Large Photo Left for the bride, Right for the groom (deliberately mismatched). Thumb Size is a % of its half — 30% (Tablet 32%); on Phone the thumbnails sit in a shaded row under the photo and fit only up to about 22%. Same frame, hover, crossfade, opening zoom and keyboard as the venue viewer. Above each gallery: a Label and a 1 px Hairline rule that draws itself in from the label’s side as it scrolls into view (2.4 s, starting at once). The gallery uses 12 px side and bottom padding like Chapter I’s photos (Phone 20); bride and groom blocks sit 12 px apart (Phone 32), headings 12 px above their gallery (Phone 16).
THE BRIDE
09 — CHAPTER VIDEO
Chapter V uses Framer’s own Video component (Insert → Video), not code. Upload the file in its panel — MP4, 1080p, about 5–6 Mbps with Fast Start, no sound track if the film is silent, and short (the template’s is 8.4 s, 5.8 MB): every visitor downloads it once. Playing on · Loop off (it plays once and stops on the last frame) · Muted on (browsers only start a video by itself when it is muted; the viewer turns the sound on in the controls) · Controls on (the browser’s own, shown on hover or tap) · Fit Cover · Poster = the video’s first frame as a WebP, so nothing jumps when it starts. It runs edge to edge in Frame · Video (clips; the same size as the photo section: the full screen high with a minimum of 900 / 760 / 640 / 520 px on Large / Laptop / Desktop / Tablet, Phone 75% min 480) inside a Zoom frame that scales 120% → 100% over 3 s when the video’s top edge reaches the middle of the screen (Section in View, position Center). Framer’s Video would start at page load, so a small code override, Play In View, holds it on its poster and starts it at that same moment. The frame crops the edges, so keep the action in the centre. No video? Frame · Photo sits right under it, built the same way (a still at 100% of the screen high, Phone 75%, same zoom): hide Frame · Video and show Frame · Photo — a hidden layer downloads nothing. After the video: a second Story Columns (2 columns, no drop cap) with tighter padding (120 / 108 / 96 / 80 / 64 above and below), a Photo Strip gallery (see 10), and a single-column passage (same font, Columns 1, max 620 / 580 / 540 / 540 px, full width on Phone, no drop cap). The template ships with the video shown and Frame · Photo hidden.
10 — PHOTO STRIP
Chapter V’s gallery is Photo Strip (PhotoStrip.tsx), a code component: one sideways-scrolling row where every photo takes the strip’s height and keeps its own proportions — portrait, landscape or panorama, nothing needs cropping. Height = the instance’s own height, set per breakpoint (close to the full screen: 90% high with a minimum of 720 / 640 / 560 px, Tablet 85% min 460, Phone 65% min 380). It moves by swipe or trackpad, mouse drag (Mouse Drag), Shift + wheel, the arrow buttons (Arrows: Sides or Corner, round, Veil at 60% with a 10 px blur and a thin Ink arrow like the header and ticker; hidden on touch screens unless On Touch is on) and the keyboard (Tab to it, ← / → move one photo). Gap 6 on every breakpoint; Start / End Inset 12 (Phone 20) line it up with the gallery margin while it still runs to the screen edge; Edge Fade (off here) softens the edge while there is more to see. Bandwidth: nothing loads until the strip is near, then each photo loads about one strip-width before it is seen, at the size it is shown, once. No reveal and no captions (user: the video already zooms in; captions of different lengths would break the line). Mix colour and black-and-white in small runs, not strictly alternating. Options: Auto Scroll (on here, 30 px/s) drifts it slowly to the end, slows down, rests 1.5 s and drifts back — back and forth, never an endless loop (an endless strip had to move the scroll position while iPhone Safari was moving it: a blank strip and a glide that lost speed on one photo). It waits until nobody touches, drags or tabs to it and the strip has been still for a second, and lets go at once when anyone moves it; On Hover sets what a resting mouse does — Keep Going (the default), Slow Down or Pause; with Pause, Resume Delay sets the wait after the mouse leaves (0 = at once; after a swipe or drag at least 1 s). One copy of the photos, so each is read out and downloaded once; Hint adds a small line under the photos — SCROLL OR SWIPE in Caption Title’s look — set per breakpoint (on for Tablet and Phone here). Chapter VI uses Photo Strip too, deliberately a step smaller: 75% of the screen high (min 600 / 540 / 480), Tablet 70% (min 400), Phone 55% (min 320) — every other setting the same. On a mouse, the pointer over either strip becomes the Drag Cursor — a small “Scroll or drag” pill in Caption on Veil Soft (Framer’s Cursor setting on the strip; clear it to turn it off).
11 — KEEPSAKES
Chapter VII shows keepsakes in a grid of Keepsake Card components — no code. A card is a Paper Shade panel (padding 20; the Compact variant, used on Phone, 10) holding a square photo and a caption in Caption Title, typed in capitals, Ink, centred. Its two properties are Photo (with alt text) and Caption. The caption sits in a band at least two lines tall, so one- and two-line captions look the same; each grid row takes its tallest card’s height and every card in the row stretches to match. Grid: 3 columns on Large, Laptop and Desktop, 2 on Tablet and Phone; gap 12 (Tablet 10, Phone 8); side margins 72 / 56 / 48 / 32 / 20 with the same space below. To add a keepsake, duplicate a card and change its photo and caption — edit the component itself to restyle all of them. Cards rise 30 px into view one after another across each row: each card’s delay = its column × 0.12 s — 0 / 0.12 / 0.24 on Large, Laptop and Desktop (3 columns), 0 / 0.12 on Tablet and Phone (2 columns), set per breakpoint. When you add, remove or reorder a card, re-set the delays of every card whose position changed, on every breakpoint (a duplicate keeps its source’s delay), and use the Compact variant on Phone.
FROM THE BOUQUET
HER SOMETHING OLD
12 — FAREWELL
Chapter VIII closes the book. Its opening ends with a line from a classic book in Signature (two lines; Emily Brontë) — no attribution, no rules. Framed Portrait is a component with two variants, Carved and Plain: a gold frame at its true proportions with an Oval Photo fitted to its opening, drawn by Frame Art with a drop shadow that follows the frame’s outline (the shadow sits inside Frame Art’s own box, so an animating portrait never clips it). Properties: Photo, Shadow Color, Shadow X, Shadow Y, Shadow Blur. The two lists are Scroll Lists: names (and an optional role above each) are typed into the component’s Entries; Name and Role fonts copy Body and italic Caption per breakpoint. Scroll mode drifts slowly upwards on an endless loop, pauses on hover, touch, scroll or keyboard focus, starts again as soon as the mouse leaves and can always be scrolled by hand; Full List shows every name (Phone). The ending: Amelia & James in Couple Signature (the same script, 80 / 72 / 60 / 52 / 44 — Signature at 50 was too small here; a p style, never h1), with an en space either side of the &, between two pencil wreaths (the left one mirrored; hidden on Phone), sized from the names and date (about 1.7 × that block’s height), the date in Label, and, below the wreaths with a clear gap, a footer row in Caption Title: © 2026 AMELIA & JAMES on the left, A PRODUCT OF THE BIG DESIGN PROJECT in the centre (a link to thebigdesignproject.com) and WRITE TO US (to the Contact page) on the right — on Tablet and Phone stacked and centred, WRITE TO US first and © last. A page whose Footer Link setting is None — the Contact page — drops WRITE TO US and shows the credit on the right instead. This whole ending is the Footer in Site Layout, so every page ends with it — the names have a maximum width per breakpoint so a long name wraps onto two lines, and the wreaths hang from thin anchors beside the names so they stay centred on the names and date; little space below it, so it sits at the very end of the page. Layout: the large portrait sits in the opening between the title and the Lead (600 px wide on Large and Laptop), and the two lists sit together in the centre below the quote.
13 — CONTACT
The Contact page (/contact) is a plain page on Site Layout with Show Date and Show Chapters off and Show Close on, so the slim header shows the names and Close — CLOSE top right from Tablet up, the same × as the menu on phones (one Close Button component, looks Text and Cross) — back to the book. Its Footer Link is None, so the footer drops WRITE TO US and moves the credit to the right. One centred section: a two-line invitation in Dedication (h1 — the page’s one h1; the header’s names are p) and Framer’s own form — Name, Email and Message (all required), each a label with its title in Caption Title and a transparent input with a single Hairline line underneath, text centred. The submit button is the Send Button below: Maroon, radius 6, a soft shadow; hover darkens it 15 %, press 30 % and drops the shadow; it switches to Sending…, Thank you or Error by itself. Its shadow and shades are layers (Shadow, Fill, Shade), so changing Maroon keeps them in step. The invitation reveals word by word like a chapter Lead, the fields and button rise one after another. No page transitions: going to the page and back is instant (a page transition made Safari drop the cover’s blur for a moment, and Home reveals itself on load anyway).
14 — CHAPTERS MENU
The Chapters menu is part of the Header component: CHAPTERS (Phone: the two-line icon) switches the header to its Desktop Menu or Phone Menu look, which fades in a full-screen Paper panel (0.8 s in, 0.5 s out, a 10 px slide — a look’s transition is the timing for ARRIVING at it, so the Menu looks hold the opening time and the closed looks the closing time). Inside, under a pinned heading — CONTENTS, in Label (left on Phone) — a List Viewport scrolls the chapters with a soft fade at the top and bottom, and Write to us stays pinned underneath. Each line is an Index Row — CHAPTER and the numeral in Label, a dotted leader, the title in Dedication on the right; long titles wrap and the leader sits on their last line. Below: Index Row as it looks on larger screens (hover lifts the row from 75 % to full Ink) and on phones (Touch Compact: numeral only, no hover). After Chapter VIII sit six hidden spare rows (CHAPTER NO. / Chapter title): to add a chapter, unhide one and set its number, title and link — its phone look and closing tap are already set. Site code keeps the panel at the visible screen height, locks the page while the menu is open and hides the closed menu from keyboards — it finds the layers by name. Write to us — like every chapter row — also switches the header back to its closed look as it goes: the header stays on screen across pages, so a link without that tap would leave the menu open over the next page. A chapter row closes the menu 0.15 s after the jump, so the move to the chapter happens under the menu. The panel is absolute on purpose: in the normal flow, Framer snaps the height and everything below jumps. Open and closed looks differ only in what can fade or move — the same overflow, fill and blur in both.
15 — BREAKPOINTS
Large ≥ 1920 · Laptop 1440–1919 · Desktop 1200–1439 (primary) · Tablet 810–1199 · Phone < 810. Root font size stays 16 px everywhere; text scales through the text styles.