Sunday Studio template
Design system
Everything this template is built from. The colours, type and components on this sheet are the real styles, so changing one here changes it on every page.
Build with it
Type /design-system in Framer’s Agent panel, followed by what you want, to build a new page from this system.
Colour styles
Colour
Brand
#0054B5
Sunday Blue
Buttons, bands, links and the logo seal.
Brand
#3895FF
Blue Light
Hover states and the backdrop behind revealed photos.
Brand
#002857
Ink Navy
Dark cards, the questions band and envelope liners.
Text
#0054B5
Text Dark
Headings and body copy on light paper.
Text
#FFFFFF
Text Light
Type on blue, navy and photos.
Neutral
#DFDFDF
Page Grey
The page background and the nav bar.
Neutral
#E8E8E8
Paper
Cards, envelopes, stamps and postcards.
Neutral
#69645F
Warm Grey
Placeholders and quiet notes.
Neutral
#000000
Black
Photo shades and overlays.
Text styles
Type
Headlines
Anton
Reading
Inter Display Medium
Labels and small print
IBM Plex Mono Medium
H1
Anton, 168 / 132 / 72 px, line height 0.9, uppercase.
Pull up a chair.
H2
Anton, 68 / 54 / 40 px, line height 0.96, uppercase.
What happens next
H2 - Small
Anton, 38 / 32 / 26 px, line height 1, uppercase. Headings inside articles.
Meet the kitchen-sink logo
H3
Anton, 38 / 32 / 26 px, line height 1, uppercase.
Customers before pixels.
H3 - Small
Anton, 22 / 20 / 18 px, line height 1, uppercase. Card and row titles.
Good Crumb Bakery
Heading 4
Anton, 18 px on every screen, line height 1.4, uppercase. Desktop nav cells.
Journals
Paragraph Large
Inter Display Medium, 20 / 19 / 18 px, line height 1.15. Intros and answers.
Tell us what you’re making. Send a postcard and we’ll reply within a day.
Paragraph Medium
Inter Display Medium, 16 px, line height 1.2. Section intros and body copy.
We talk about the goal, the timing and the budget, and you leave with an honest view.
Paragraph Small
Inter Display Medium, 13 px, line height 1.35. Notes, captions and card text.
A real person on the team reads every postcard and replies within 24 hours.
Label
IBM Plex Mono Medium, 13 px, uppercase, 2% tracking. Tags, meta and small print.
Postcard from Good Crumb
Link styles
Links
Nav Link
Text Dark. Hover and the current page get a 1 px underline, 4 px below. Phone menu and footer.
Editorial Link
Always underlined at 1 px. The line drops from 3 px to 5 px below on hover.
Inverse Link
White on blue or navy. Hover adds a wavy Sunday Blue underline, 4 px thick.
Footer Link
White. Hover adds a 2 px Sunday Blue underline, 5 px below.
Navigation cells and menu links
The nav bar and phone menu are one Navigation component. These are its link states; edit them there and every page follows.
Desktop link
Live Nav Link instances; hover one to see its hover state. Heading 4 with the Teletype override: Anton, 18 px caps. A cell is 136 × 76 with a 1 px Ink Navy rule on its left and turns Paper on hover. Call To Action is Ink Navy, then Blue Light on hover.
Layout
Spacing
Desktop
1200 px wide, 48 px side margins
Tablet
810 px wide, 32 px side margins
Phone
390 px wide, 20 px side margins
Spacing scale
Gaps and padding come from this scale: small steps inside cards, large ones between sections.
8
16
24
32
40
48
56
72
96
120
160
120 to 160 px above and below on desktop, 96 to 120 px on tablet, 72 to 88 px on phone.
48 px on desktop, 32 px on tablet, 20 px on phone. No max width on any section.
Square for cards, panels, photos and buttons. Round only for tags and the sun seal.
1 px rules in Text Dark between rows, around nav cells and above every section heading.
Only paper casts one: stamps, postcards and envelopes, in a short navy shadow.
Opening and closing use a slow-in, slow-out tween (0.76, 0, 0.24, 1). Page changes wipe in with a rise.
Components
Components
Button
Primary on light backgrounds, Light on blue and navy. Label, link and New Tab are variables.
Primary, Light
Tag
Pill label above section titles and on bento cards.
Dark, Light
The house rules
Clients’ words
Badge
The New flag beside fresh project titles.
Default
New
Footer Link
Footer link whose underline draws in on hover. Arrow and New Tab are switches.
Default, hover
Nav Link
One cell of the desktop navigation. Label and link are variables; the cell fills on hover.
Default, Call To Action, each with hover
Post Button
The contact form’s send button. Pending, Success, Error and Incomplete switch by themselves.
Default, Pending, Success, Error, Incomplete
Ring Card
Photo card in the footer’s Say hello ring. Image and link are variables.
Default
Social Icon
Square icon link. Pick any Phosphor icon, set the link and a label for screen readers.
Default, hover
Pull Quote
A quote card for articles. Add it inside the text of a CMS item.
Default
“Our takeaway tins come back as plant pots.”
Sam Rivera, Paper Kite Cafe
Service Card
A service on Home. Six sub-service rows show only when filled in; the phone versions put the photo on top.
Ember, Bone, Charcoal, plus a phone version of each
FAQ Item
An envelope that opens to a postcard answer. Tap the envelope to switch.
Closed, Open
Letter Card
Testimonial postcard with a photo stamp, company and quote.
Card, hover
Postcard from
Good Crumb Bakery
From
Priya Shah
Founder
To
Sunday Studio
“They turned our tiny bakery into the loudest shop on the street.”
[ Letter 01 ]
★ Sunday Post
Team Stamp
Team member stamp. Hover shows their Sundays and a postmark; social icons appear when their links are set.
Default, Phone
Story Chapter
A chapter of the About story. Show Photo turns the image on; the Year feeds the odometer.
Chapter
2017
A kitchen table in Hackney
Mira and Tom were freelancing from Mira’s kitchen when the bakery downstairs needed a logo by Monday. They drew it on a Sunday and got paid in sourdough for a year. The name stuck.
Brand Row
Client row with a blue band that follows the pointer in and out.
Default, Phone
Article Row
Journal list row with thumbnail, category and excerpt.
Default, Compact
Project Nav Card
The previous and next project at the end of each project page. On the page, Image, Title, Tagline and Link are bound to the neighbouring project, and a card hides when there is no neighbour.
Previous, Next, hover
Process Step
One step of the Process accordion. Its Tap event opens it and closes the others.
Open, Closed, Phone Open, Phone Closed
Price Card
A rate card with the price in a stamp. Up to eight features, each shown only when filled in; Badge and Small Print hide when empty.
Paper, Blue
01
Single Project
£3,500
per project
For a clearly defined website, branding, campaign or product design project.
01
Single Project
Most booked
£3,500
per project
For a clearly defined website, branding, campaign or product design project.
Code
Motion and code
22 code files, each set up in the right panel with plain names, so none need editing. Components draw things; overrides add motion to a normal layer.
Brand pieces
Sun seal and stacked wordmark. Letter, words, colours and the hover spin are settings.
Paper with real perforated edges, grain and a soft shadow.
Round postmark with waves that stamps in on view. Can show today’s date.
Striped airmail border for envelopes.
Scroll and motion
Headline letters stretch toward the cursor, squash on click and wave when idle.
Override that types each heading in as it scrolls into view.
Override that zooms a photo out and drifts it as the page scrolls.
Photo revealed through blinds, seal, iris or wipe masks as it scrolls in.
Envelope flap that opens on scroll, stays open or closed, or follows its Open setting.
Year odometer that follows the chapter you are reading.
Cards on an arc with drag, arrows and autoplay.
Colour band that enters and leaves from the side the pointer moves.
Cursor that turns into the brand card while you hover a row.
Interactive
Seal play button that opens a full-screen reel. Add a video file or link.
Opens the camera, counts down and turns the photo into a stamp to save.
Greeting that rolls through languages and copies your email on click.
Click anywhere to stick a fact about the studio. Links underneath still work.
Local time with an in-the-studio status.
Your Cal.com calendar embedded inline. Paste your booking link.
Loading screen with a live counter and a stamp.
Pinned page-fold reveal. Hidden by default.
Site-wide
New pages wipe in with a rise while the old one drops back. Set on Home’s desktop breakpoint for every page.