Style guide
Make it yours. Then delete this page.
Everything on this site is a style, a component or a collection. This page shows where each one lives. It is for you, not for your guests.
Set up
Six steps, in this order. Most of them take a few minutes.
1
Name
Change Tondo in the Navigation component, in the footer wordmark (the Text control on Plate Text, where an asterisk becomes a plate), in the copyright line and in every page title.
2
Colours
Edit the colour styles in Assets. Tomato, Tomato Deep and On Tomato are the accent. Bone, Paper and Linen are the backgrounds. Three other palettes are further down this page.
3
Fonts
Edit the text styles. Then type the same family into Font family on the code components listed below, and set it on the form fields.
4
Menu
Dishes and Drinks are collections. Switch on On The Wheel to put a dish on the hero wheel. Square photographs of a plate seen from above work best.
5
Hours and booking
Opening hours are on the Hours Dial on Home and Visit. Booking days and times are on Table Times on Home and Book. Party size is on Round Table.
6
Forms and launch
Select each form on Home, Book and Groups and choose where submissions go. Replace the demo photographs. Then delete this page and its link in the footer.
Colours
Eighteen colour styles. The site is dark only, so each style holds one value.
Bone
#151412
Page
Paper
#1D1B18
Sheets and cards
Linen
#2A2723
Discs, pills, footer
Ink
#F2EDE3
Text
Ink Soft
#B9B2A4
Body text
Stone
#7D776B
Second half of headings
Muted
#948D80
Labels
Line
Ink at 14%
Hairlines
Line Strong
Ink at 28%
Stronger hairlines
Tomato
#E5482B
The one accent
Tomato Deep
#F0603F
Accent on hover
On Tomato
#FFF6EE
Text on the accent
Night
#0E0D0C
Booking card
Night Card
#1A1917
Fields on the booking card
On Night
#F2EDE3
Text on Night
On Night Soft
#A8A193
Quiet text on Night
Night Line
On Night at 16%
Hairlines on Night
Open Green
#5DBB72
Open status
Type
Twelve text styles in Jost, plus Article and Article Heading for long text from the CMS. Sizes are Desktop, Tablet, Phone.
Display
96 / 72 / 46, Regular
Pass it on.
Heading
60 / 48 / 34, Regular
Tonight’s menu
Title
30 / 27 / 24
Good to know
Dish
21 / 20 / 19
Squash, brown butter, crisp sage
Quote
For guest notes
We ordered nine plates between four of us.
Lead
20 / 19 / 18
A forty-seat room built around one round table.
Body
17
Three or four plates each is about right. Add more as you go.
Small
15
Prices in euros, tax included.
Label
14, Medium
How it works
Button
15, Medium
Book a table
Tab
15, Medium
From the oven
Price
21, tabular figures
14
Other palettes
Values to copy into the colour styles. Styles that are not listed keep their value.
Daylight
The same site on warm paper.
Bone
#F2EDE3
Paper
#FBF8F2
Linen
#E8E0D0
Ink
#1B1A17
Ink Soft
#57534A
Stone
#A39C8C
Muted
#8A8375
Line
rgba(27, 26, 23, 0.12)
Line Strong
rgba(27, 26, 23, 0.24)
Tomato Deep
#C73A20
Night
#1B1A17
Night Card
#262420
Open Green
#3E9B52
Olive grove
Green-black with a saffron accent.
Bone
#11140F
Paper
#181C15
Linen
#242A1F
Ink
#EEF0E2
Ink Soft
#B3B8A2
Stone
#788068
Muted
#8E957D
Line
rgba(238, 240, 226, 0.14)
Line Strong
rgba(238, 240, 226, 0.28)
Tomato
#D8A227
Tomato Deep
#E8B94A
On Tomato
#17140A
Night
#0B0D0A
Night Card
#161A13
Port cellar
Wine-dark with a terracotta accent.
Bone
#160F11
Paper
#1E1517
Linen
#2C2023
Ink
#F3E8E4
Ink Soft
#BDAAA6
Stone
#83706D
Muted
#9A8683
Line
rgba(243, 232, 228, 0.14)
Line Strong
rgba(243, 232, 228, 0.28)
Tomato
#D9694A
Tomato Deep
#E88563
Night
#0F0A0B
Night Card
#1A1214
Components
Five canvas components and twelve code components. Change them through their controls.
Navigation
The pill bar at the top, with a drawer on phones.
Assets, Components. Links and the name are inside it.
Button
Primary, Dark, Outline, Light and Outline Light, each with a hover.
Label and Link on each instance.
Menu Tab
One tab of the category switch above the menu on Home.
Title on each instance.
Question
One row of the questions list, closed and open.
Filled by the Questions collection.
Submit Button
The form button, with sending, sent and failed states.
Label on each instance.
Turntable
The hero wheel. Drag it, or use the arrows.
Home. Its plates are the dishes with On The Wheel on.
Wheel Plate
Hands one CMS item to the Turntable or the Quote Deck. It draws nothing.
Inside the hidden lists. Leave it where it is.
Menu Plate
The plate beside a menu that shows the dish under the cursor.
Home and Menu.
Dish Hover
The sensor behind each menu row that tells the Menu Plate what to show.
First layer of every menu row. Leave it where it is.
Iris Image
The round window that opens onto a photograph as the page scrolls.
Home, The room. Swap the image on the instance.
Plate Text
A sentence with turning plates set into it, and the footer wordmark.
Text control. An asterisk becomes a plate.
Quote Deck
Guest notes, one at a time.
Filled by the Notes collection.
Count Up
A figure that counts up when it scrolls into view.
Value on each instance.
Round Table
The booking table. A chair and a place setting arrive with each guest.
Home and Book. Dish 1 to Dish 5 are the plates in the middle.
Table Times
The day and the time for a booking.
Home and Book. Closed days, Lunch times, Dinner times.
Hours Dial
A 24-hour dial of the opening hours, with a live hand.
Home and Visit. One control for each weekday.
Open Now
A line that repeats what the dial works out.
Home hero and the Visit headings.
Collections
Nine collections. Add, remove or reorder items and the pages follow.
Dishes
The menu on Home and Menu. On The Wheel puts a dish on the hero wheel, and Wheel Position orders it.
Drinks
The three drinks lists on Menu.
Evenings
The round cards on Home and Evenings, and each evening’s own page.
Journal
The posts on Home and Journal, and each article.
Team
The portraits on The room.
Growers
The suppliers on The room.
Notes
The guest notes in the Quote Deck on Home and The room.
Questions
The questions on Home, Book and Visit.
Legal
Privacy and Terms. This is placeholder copy: replace it with your own.
Good to know
Your Framer Agent already knows this template. Four skills are saved in the project: the design rules, edit the menu, add a page, and rebrand.
The demo photographs come from Unsplash. Replace them with your own, or check each licence before you publish.
Nothing is sent anywhere until you choose a destination for the three forms.
Every clock on the site reads the Time zone control, not the visitor’s own clock.