Style guide
Recents, in parts.
This page comes with the template. It says where everything is edited. Keep it unlinked or delete it before you publish.
Set up, in this order.
1. Screenshots and icon
1. Screenshots and icon
Open the CMS and edit Screens: each item holds one screenshot, 393 by 852 points or the same shape, and Screenshot dark holds the same screen in your app’s dark theme. The app icon is an image on the Navigation and Get bar, and a control on the Switcher and Gather components.
Open the CMS and edit Screens: each item holds one screenshot, 393 by 852 points or the same shape, and Screenshot dark holds the same screen in your app’s dark theme. The app icon is an image on the Navigation and Get bar, and a control on the Switcher and Gather components.
2. Words
2. Words
Headings and paragraphs are ordinary text layers. Click and type. The line beside each card in the hero comes from Headline, Headline soft and Summary in Screens.
Headings and paragraphs are ordinary text layers. Click and type. The line beside each card in the hero comes from Headline, Headline soft and Summary in Screens.
3. Store links
3. Store links
Open the Get the app component and select the first button to paste your App Store link. If there is an Android app, paste its link on the second button and turn Android on wherever the buttons are used. Paste both links into Store link on the Get page. The Scan code points at that page, so one code serves both stores.
Open the Get the app component and select the first button to paste your App Store link. If there is an Android app, paste its link on the second button and turn Android on wherever the buttons are used. Paste both links into Store link on the Get page. The Scan code points at that page, so one code serves both stores.
4. Launch state
4. Launch state
Select Launch gate in the layout template. Out now shows download buttons, Before launch shows the waitlist form, By date switches on the day. The launch date also fills the “days to go” line; Count text sets its wording. Add ?launch=before to any address to look at the other state.
Select Launch gate in the layout template. Out now shows download buttons, Before launch shows the waitlist form, By date switches on the day. The launch date also fills the “days to go” line; Count text sets its wording. Add ?launch=before to any address to look at the other state.
5. Colours
5. Colours
Assets, Styles. Every colour has a light and a dark value. Change Accent first; Ink, Paper and the greys follow below. Three other palettes are listed further down, and can be tried on the live site.
Assets, Styles. Every colour has a light and a dark value. Change Accent first; Ink, Paper and the greys follow below. Three other palettes are listed further down, and can be tried on the live site.
6. Typeface
6. Typeface
Change the family on the text styles. Then type the same family into the Font family control of the Switcher, the Quote deck and the Palette, which draw their own text.
Change the family on the text styles. Then type the same family into the Font family control of the Switcher, the Quote deck and the Palette, which draw their own text.
7. Forms
7. Forms
Select the waitlist form inside Get the app, the form on Coming soon and the form on Contact, and choose where entries go in Framer’s form settings.
Select the waitlist form inside Get the app, the form on Coming soon and the form on Contact, and choose where entries go in Framer’s form settings.
8. Site settings
8. Site settings
Set the site language, title and social image in Site settings. Rename the project.
Set the site language, title and social image in Site settings. Rename the project.
9. Agent skills
9. Agent skills
Four skills are saved in this project for Framer’s Agent: the design rules, which always apply, and three you can call by name, recents-add-screen, recents-add-page and recents-rebrand. Ask the Agent to add a screen, add a page or rebrand, and it follows them.
Four skills are saved in this project for Framer’s Agent: the design rules, which always apply, and three you can call by name, recents-add-screen, recents-add-page and recents-rebrand. Ask the Agent to add a screen, add a page or rebrand, and it follows them.
10. Light and dark
The Theme switch in the Navigation lets a visitor choose, and remembers it. Start in sets what a first visit sees. Every screenshot holds a Dark screenshot layer, shown in the dark theme: select it and set its picture, or delete it. For a site that is light only, delete the switch, clear the dark value of each colour style and delete those layers.
The Theme switch in the Navigation lets a visitor choose, and remembers it. Start in sets what a first visit sees. Every screenshot holds a Dark screenshot layer, shown in the dark theme: select it and set its picture, or delete it. For a site that is light only, delete the switch, clear the dark value of each colour style and delete those layers.
11. App Store banner
For Safari’s own banner at the top of the page, open Site settings, Custom code, and add this to the start of the head: <meta name="apple-itunes-app" content="app-id=YOUR_APP_ID">. It needs a real app id, so this demo does not show it.
For Safari’s own banner at the top of the page, open Site settings, Custom code, and add this to the start of the head: <meta name="apple-itunes-app" content="app-id=YOUR_APP_ID">. It needs a real app id, so this demo does not show it.
12. Pages you do not need
Pricing, Journal, Coming soon, the second home page and Get are optional. Delete the page, then its link in the footer. To lead with the second home page, copy its hero over the first section of Home.
Pricing, Journal, Coming soon, the second home page and Get are optional. Delete the page, then its link in the footer. To lead with the second home page, copy its hero over the first section of Home.
Ten colours, each with a dark value.
Paper, #FFFFFF, dark #0E0F11
Page
Panel, #F4F4F2, dark #18191C
Quiet blocks
Ink, #0C0E11, dark #F2F2EF
Text and buttons
Soft, #5C6168, dark #A3A7AD
Paragraphs
Muted, #9A9FA6, dark #6C7178
Second half of headings
Line, #E8E8E5, dark #27292D
Hairlines
Edge, #F1F1EF, dark #1F2124
Outlines on screenshots
Accent, #C8603A, dark #D76B41
One figure, one dot
On photo, #FFFFFF in both
Text on pictures; the ground of the scan code
Always dark, #0C0E11 in both
The scan code; words on white buttons over pictures
Host Grotesk, regular and medium.
Display
Display
Know what today
Section
Section
Five screens.
Five screens.
Statement
Statement
What can I spend today?
What can I spend today?
Subheading
Subheading
The number
The number
Title
Title
Is Groat a bank?
Is Groat a bank?
Figure
Figure
£2.99
£2.99
Lead
Lead
Groat sets aside your bills and savings.
Groat sets aside your bills and savings.
Body
Body
Body text for paragraphs and answers.
Body text for paragraphs and answers.
Small
Small
Captions, dates and notes
Captions, dates and notes
Label
Label
Buttons and small links
Buttons and small links
Nav
Nav
Navigation links
Navigation links
Name
Name
Groat
Groat
Menu
Menu
Phone menu links
Phone menu links
Giant
Giant
£51
£51
Three more palettes, as values to copy.
Press one to see the whole site in it. It lasts until you close the tab and nothing is saved. Screenshots and the app icon are pictures, so they keep their own colours.
Ink blue
Ink blue
Accent #2F4DFF. Ink #0B1020. Soft #55607A. Muted #9AA3B8. Line #E6E8EE. Edge #F0F2F6. Panel #F3F5F9. Paper #FFFFFF.
Accent #2F4DFF. Ink #0B1020. Soft #55607A. Muted #9AA3B8. Line #E6E8EE. Edge #F0F2F6. Panel #F3F5F9. Paper #FFFFFF.
Field green
Field green
Accent #1F7A4D. Ink #0E1410. Soft #55615A. Muted #9AA59E. Line #E5E9E4. Edge #EFF2EE. Panel #F2F5F1. Paper #FFFFFF.
Accent #1F7A4D. Ink #0E1410. Soft #55615A. Muted #9AA59E. Line #E5E9E4. Edge #EFF2EE. Panel #F2F5F1. Paper #FFFFFF.
Warm paper
Warm paper
Accent #B4472B. Ink #1A1613. Soft #6A625A. Muted #A69E95. Line #E9E4DC. Edge #F1EDE6. Panel #F3EFE8. Paper #FBF9F5.
Accent #B4472B. Ink #1A1613. Soft #6A625A. Muted #A69E95. Line #E9E4DC. Edge #F1EDE6. Panel #F3EFE8. Paper #FBF9F5.
What each piece does, and where to edit it.
Switcher
Switcher
The hero deck. One card per Screens item marked In hero. Scroll flicks through; the last card lands in the row below; the cards slide in once per visit.
The hero deck. One card per Screens item marked In hero. Scroll flicks through; the last card lands in the row below; the cards slide in once per visit.
Code component in the hero list. Screens collection for content; controls for gaps, card size and scroll per card.
Code component in the hero list. Screens collection for content; controls for gaps, card size and scroll per card.
Hero text override
Hero text override
Keeps the hero text in place beside the deck and hides it when the second card arrives.
Keeps the hero text in place beside the deck and hides it when the second card arrives.
Viewport file, applied to the Hero text layer. Nothing to set.
Viewport file, applied to the Hero text layer. Nothing to set.
Sum line
Sum line
A row of large figures that slides sideways as you scroll.
A row of large figures that slides sideways as you scroll.
Plain text layers in The sum section. Three Scroll overrides on the section, its pin and its row.
Plain text layers in The sum section. Three Scroll overrides on the section, its pin and its row.
Opening photograph
Opening photograph
A photograph that opens from a narrow window.
A photograph that opens from a narrow window.
Any frame with an image and the Open on scroll override.
Any frame with an image and the Open on scroll override.
Quote deck
Quote deck
Reviews as cards; tap to flick.
Reviews as cards; tap to flick.
Code component in the Reviews list. Reviews collection. Card size control if a quote is long.
Code component in the Reviews list. Reviews collection. Card size control if a quote is long.
Plans
Plans
Two plans with a Monthly and Yearly switch.
Two plans with a Monthly and Yearly switch.
Canvas component. Edit prices in both variants and both phone variants.
Canvas component. Edit prices in both variants and both phone variants.
Question
Question
A question that opens to show its answer.
A question that opens to show its answer.
Canvas component fed by the Questions collection.
Canvas component fed by the Questions collection.
Gather
Gather
The screens slide together and close into the icon.
The screens slide together and close into the icon.
Code component in the Download section. Uses Screens; the icon is a control.
Code component in the Download section. Uses Screens; the icon is a control.
Get the app
Get the app
The download button after launch, the waitlist form before.
The download button after launch, the waitlist form before.
Canvas component. The button holds your App Store link.
Canvas component. The button holds your App Store link.
Launch gate
Launch gate
Decides which state the whole site is in.
Decides which state the whole site is in.
Code component in the layout template, beside the navigation.
Code component in the layout template, beside the navigation.
Scan code
Scan code
A QR code for people on a computer, drawn from a link or from a page of this site. Always dark on white, so a camera reads it in both themes.
A QR code for people on a computer, drawn from a link or from a page of this site. Always dark on white, so a camera reads it in both themes.
Code component in the Download section and on Get. Site page control, or Link.
Code component in the Download section and on Get. Site page control, or Link.
Get bar
Get bar
A bar at the foot of the phone screen with a Get button. Dark on a light page, light on a dark one.
A bar at the foot of the phone screen with a Get button. Dark on a light page, light on a dark one.
Layer in the layout template, shown on the Phone breakpoint only.
Layer in the layout template, shown on the Phone breakpoint only.
Navigation
Navigation
Desktop, Tablet, Phone and Phone open.
Desktop, Tablet, Phone and Phone open.
Canvas component in the layout template.
Canvas component in the layout template.
Button, Submit, Send
Button, Submit, Send
Buttons, and the two form buttons with Sending, Sent and Not sent states.
Buttons, and the two form buttons with Sending, Sent and Not sent states.
Canvas components.
Canvas components.
Growing line
Growing line
A thin line that grows down beside the setup steps as they come up the page.
A thin line that grows down beside the setup steps as they come up the page.
The Growing line layer in Set up, with the Grow line override. The steps are the first three Guides.
The Growing line layer in Set up, with the Grow line override. The steps are the first three Guides.
Strike
Strike
A line that draws itself through each phrase in the Never section.
A line that draws itself through each phrase in the Never section.
The Strike override on each phrase’s text layer. Type your own phrases; the line takes the Ink colour.
Drift
Drift
Two screens that move past each other in Wherever you look.
Two screens that move past each other in Wherever you look.
Drift up and Drift down overrides on the two pictures. Swap the pictures for your own lock screen and home screen.
Drift up and Drift down overrides on the two pictures. Swap the pictures for your own lock screen and home screen.
Latest release
Latest release
The newest item in Releases, shown on the home page.
The newest item in Releases, shown on the home page.
A one-item list in Latest release, sorted by date.
A one-item list in Latest release, sorted by date.
Theme switch
Theme switch
A round button that turns the site light or dark for the visitor and remembers the choice. It reads both values from the colour styles.
A round button that turns the site light or dark for the visitor and remembers the choice. It reads both values from the colour styles.
Code component in the Navigation. Start in, Size and two colour controls.
Code component in the Navigation. Start in, Size and two colour controls.
Dark picture
Dark picture
The Dark screenshot layer inside each screenshot. It shows its own picture when the site is dark and is only downloaded then. On the canvas it is a small label, so the light picture stays visible.
Code component inside each picture; Dark picture control. The Switcher and Gather have a Dark screenshot control instead. For other layers, the Dark only and Light only overrides in the Theme file.
Store link
Store link
Sends an iPhone to the App Store and an Android phone to Google Play. A computer stays on the page.
Sends an iPhone to the App Store and an Android phone to Google Play. A computer stays on the page.
Code component on the Get page. Two link controls.
Code component on the Get page. Two link controls.
Days to launch
Days to launch
Rewrites a line of text as the number of days left, before the launch date only.
Rewrites a line of text as the number of days left, before the launch date only.
Override in the Launch file, on the line above the closing heading and on Coming soon.
Override in the Launch file, on the line above the closing heading and on Coming soon.
Palette
Palette
Tries the other palettes on the live site for one visit. Meant for choosing; delete both when you have set your colours.
Tries the other palettes on the live site for one visit. Meant for choosing; delete both when you have set your colours.
Code component: one set to Buttons on this page, one set to Apply only in the layout template.
Code component: one set to Buttons on this page, one set to Apply only in the layout template.
Fit height, First screen
Fit height, First screen
Fit height sizes a screenshot to the height of its row. First screen makes a section exactly one window tall on phones and tablets too.
Fit height sizes a screenshot to the height of its row. First screen makes a section exactly one window tall on phones and tablets too.
Two overrides in the Viewport file, used on Coming soon and the second home page.
Two overrides in the Viewport file, used on Coming soon and the second home page.
Eight collections, and what they feed.
Screens
Screens
The hero deck, the row under it, Features and its detail pages, the Press kit and the closing scene. Fields: Title, Screenshot, Screenshot dark, Headline, Headline soft, Summary, Answers, Body, Order, In hero.
The hero deck, the row under it, Features and its detail pages, the Press kit and the closing scene. Fields: Title, Screenshot, Screenshot dark, Headline, Headline soft, Summary, Answers, Body, Order, In hero.
Reviews
Reviews
The quote deck on the home page. Quote, Who, Order.
The quote deck on the home page. Quote, Who, Order.
Questions
Questions
The questions on the home page and on Support. Title, Answer, Order.
The questions on the home page and on Support. Title, Answer, Order.
Releases
Releases
Releases and its detail pages. Title, Version, Date, Summary, Body.
Releases and its detail pages. Title, Version, Date, Summary, Body.
Guides
Guides
Support and its detail pages. Title, Summary, Reading time, Order, Body.
Support and its detail pages. Title, Summary, Reading time, Order, Body.
Team
Team
The list on About. Title, Role, Line, Order.
The list on About. Title, Role, Line, Order.
Legal
Legal
Privacy and Terms. Title, Updated, Body. The copy is a placeholder.
Privacy and Terms. Title, Updated, Body. The copy is a placeholder.
Journal
Journal
Journal and its post pages. Title, Date, Topic, Reading time, Summary, Body.
Journal and its post pages. Title, Date, Topic, Reading time, Summary, Body.
