Style guide
Everything you change,
and where it lives.
Seven things to do first.
In this order, about an afternoon.
Put your name on it.
Change the logo text in the Navigation component and in the footer, then the site title, description and social image in Site settings and on each page.
Change the colours.
Eleven colour styles carry the whole site. Change Paper, Ink and Quiet first; three other palettes are further down this page.
Change the font.
Every text style uses Albert Sans. Pick another in each style, then set the Font control on the code components to match.
Swap the photographs.
Almost every photograph sits in a CMS collection. The studio photo and the two Plan B photos are set on the page. Keep one colour grade across the set.
Send the form somewhere.
Select the form on the Contact page and choose where submissions go: an email address, a webhook or a connected tool. Send one test before you launch.
Mark your Saturdays.
Select the Saturdays component on Home and on Contact. Type the years you take bookings and the dates that are already taken.
Replace the legal pages.
Privacy and Terms are placeholder copy in the Legal collection. Have your own written for your country before you publish.
Eleven colour styles.
Change one and every page follows.
Paper
#FAF8F4
Page background
Surface
#F1EDE6
Bands, cards and fields
Ink
#1D1B18
Headings, buttons and links
Body
#4A463F
Running text
Quiet
#8E877C
Labels and the second line of headings
Line
#E2DCD2
Hairlines between rows
Accent
#5A6145
Olive. Unused in the demo, kept for the one mark you want noticed
Photo ground
#EEEAE3
Behind photographs while they load
Aa
On photo
#FFFFFF
Text over photographs
Aa
On photo quiet
White at 78%
Second lines over photographs
Ink hover
#3A3732
Dark buttons on hover
Albert Sans, light and regular.
Two weights, one family, sizes for three widths.
Display
74 / 58 / 38 px · Light
Twenty-two a year.
Statement
52 / 42 / 32 px · Light
There’s room at the table.
Heading 3
30 / 26 / 23 px · Light
One wedding a weekend.
Subheading
28 / 25 / 22 px · Light
Headings inside a story or a post
Quote
30 / 26 / 22 px · Light
“We stopped worrying about the weather in March.”
Figure
64 / 52 / 44 px · Light
16:40
Heading 4
20 / 19 / 18 px · Regular
Ceremony under the cork oaks
Subtitle
24 / 21 / 17 px · Regular, white
Mind the step. Mind the rice.
Lead
18 / 17 / 16 px · Regular
Every wedding we plan is in Portugal, and most are outside Lisbon.
Body
16 / 16 / 15 px · Regular
We hold a second space for every wedding from the day it is booked, even in August.
Small
14 px · Regular
By appointment, Tuesday to Friday.
Label
13 px · Regular, quiet
Saturday you have in mind
Button
14 px · Medium
Check your date
Three more, ready to paste.
Copy each value into the colour style of the same name.
Linen
The one you are looking at: warm paper, near-black ink, olive.
Paper
#FAF8F4
Surface
#F1EDE6
Ink
#1D1B18
Quiet
#8E877C
Line
#E2DCD2
Accent
#5A6145
Chalk and clay
Cooler paper with a terracotta accent, for a studio in the Alentejo.
Paper
#F7F5F2
Surface
#ECE7E1
Ink
#221D1A
Quiet
#8F8079
Line
#E3DAD2
Accent
#9A5B43
Sea mist
Grey-green paper and a deep sea accent, for coast and island weddings.
Paper
#F4F6F4
Surface
#E7ECE9
Ink
#1B201F
Quiet
#7E8884
Line
#DAE0DC
Accent
#3E5C5E
Almond
Richer cream with a tobacco accent, for vineyards and harvest weddings.
Paper
#F8F3EA
Surface
#EFE6D7
Ink
#1F1A14
Quiet
#8C816E
Line
#E5DACA
Accent
#7A6440
Nine moving parts, four plain ones.
Where each one is edited.
Procession
The opening walk. Each photograph steps down the aisle as you scroll, with its time and label.
Procession collection. Controls: image width, caption size, colours, depth blur (how soft a photo gets as it passes the camera) and walk on scroll.
Running time
A clock beside the logo that runs through the wedding day as Home scrolls: the procession’s own times, then one moment for each section.
In the Navigation. Times control, one line per section: section id | 16:40 | Family photographs. Write hide over a section with its own clock.
Opening shot
Each wedding page opens on its cover, exactly one window tall, with the couple’s names and the cover line over it.
Cover, Line and Couple in the Weddings collection.
How a day runs
The day’s rows from the Day collection; the photograph and the time change as each row passes the middle.
Day collection: title, time, note, photo.
Plan B
The same day in two weathers, switched by the visitor.
Select it on Home or on Services. Rows as Part | If dry | If it rains, plus two photos.
Seating plan
Guest names leave alphabetical order and take their seats as you scroll.
One line per table, written as Table: Name, Name.
Words
Couples’ words over a still from their day, one at a time.
Words collection: couple, place, quote, still.
Saturdays
A save-the-date card and a calendar of free Saturdays. The names and date carry over to the contact form.
Years, taken dates and the link to Contact.
Long table
On Home: a long table of past couples’ seats slides past while the invitation holds still. The last seat is empty.
Seats come from the Weddings collection. Other pages end with a plain closing band in the page layout; turn it off per page with the Closing toggle.
Navigation
Desktop, Phone and Phone open variants.
Components panel. Links, logo text and the button label.
Button
Dark for paper, Light for photographs, each with a hover.
Label and link controls on every instance.
Question
Closed and Open variants, used by the questions list.
Questions collection holds the text.
Submit button
Default, Pending, Success and Failed, shown by the contact form.
Label text in each variant.
Nine collections.
Add an item and it appears everywhere it should.
Procession
The opening walk on Home.
Weddings
Home, the Weddings page and each wedding’s own page. Featured ones show on Home.
Day
How a day runs, on Home.
Services
Home, the Services page and each service’s own page.
Words
Couples’ words, on Home.
Journal
Home, the Journal page and each post.
Questions
The questions on Home and on Services.
Team
The four of us, on Studio.
Legal
Privacy and Terms, linked from the footer.