Design system
The colours, type, images and components this site is built from. The Framer agent reads this page before it builds anything, so a new page looks like the rest of the site.
Ask the agent
Open the agent panel in Framer and start your prompt with one of these skills.
/design-system
Builds new pages and sections from the parts on this page.
Example prompt
/design-system Add a careers page with three open roles
/rebrand
Changes colours, fonts, logo, images and copy for a new brand.
Example prompt
/rebrand Make this site for a coffee roaster called Ember
/write-copy
Writes and edits site copy in the same plain voice.
Example prompt
/write-copy Rewrite the home page for finance teams
/launch-check
Checks titles, descriptions, images, forms and dark mode before you go live.
Example prompt
/launch-check Get the site ready to publish
Colour
Seven colour styles, each with a light and a dark value. Fill, text and borders all use them, so dark mode follows by itself.
Page
Page background
Light #FFFFFF
Dark #0A0B0D
Surface
Cards, bands and form panels
Light #F4F5F7
Dark #141519
Page Glass
The nav bar over scrolled content
Light #FFFFFF at 82%
Dark #0A0B0D at 78%
Ink
Headings and main text
Light #0B0D12
Dark #F2F3F5
Ink Muted
Paragraphs, captions and notes
Light #5A606B
Dark #9BA1AC
Line
Dividers and input borders
Light #E5E7EB
Dark #26282E
Accent
Icons, focus rings and highlights
Light #2E6DB4
Dark #7FB2E5
Type
Switzer for everything you read, Geist Mono for numbers and code. Pick a style by what the text is, not by how big you want it.
Display
Home hero only
Switzer 460, 80 px, h1
Answers from your data
Title
Page titles, one per page
Switzer 460, 60 px, h1
Every answer shows its working
Heading 2
Section headings
Switzer 460, 44 px, h2
What comes with every workspace
Heading 3
Plan names and panel titles
Switzer 500, 26 px, h2
Pricing that grows with the team
Heading 4
Feature, step and card titles
Switzer 500, 19 px, h3
Shared definitions
Lead
The paragraph under a title or heading
Switzer 400, 21 px
Facet turns a question into a sentence, a chart and the query behind both.
Body
Paragraphs
Switzer 400, 16 px
Write down what an active customer means once. Every answer after that uses the same definition.
Small
Notes, roles and fine print
Switzer 400, 14 px
Billed yearly. Cancel any time.
Label
Buttons, names and form labels
Switzer 500, 15 px
Start free
Caption
Dates, topics and other details
Switzer 450, 13 px
5 Nov 2026, Guides
Mono
Numbers, code and step numbers
Geist Mono 400, 13 px
select count(*) from signups
Figure
Prices and large numbers
Switzer 460, 44 px, tabular figures
$24
Quote
Customer quotes
Switzer 420, 36 px
We stopped arguing about whose number was right.
Article Heading
Headings inside blog posts and stories
Switzer 500, 30 px, h2
What we changed first
Article Body
Paragraphs inside blog posts and stories
Switzer 400, 18 px
We started with the five questions people asked most often, then wrote one definition for each.
Spacing and shape
The same few numbers on every page. Desktop, tablet and phone values are in that order.
Section padding
120 / 96 / 72 px above and below
Side margins
40 / 32 / 20 px
Content width
1120 px at most. Text columns 640 to 800 px
Images and cards
24 px corner radius
Buttons and fields
12 px corner radius
Motion
Sections fade up 24 px over 0.7 s, once. Lists that open and close glide over 0.6 s
Images
Glass and light on plain grounds. They are abstract, so they suit any product. Keep people and made-up dashboards out, and swap in your own images in the same mood.
Components
Use these before you build anything new. Change one in its own editor and every page updates. The navigation and footer live in the Site layout.
Button
Primary for the main action, Secondary for the one next to it. Set the label and link in the right panel.
Logo
Mark and name. Change them here and the navigation and footer follow.
FAQ Item
One per question, in a list. The list glides when an answer opens.
Does Facet copy my data?
Can I try it before I pay?
Pricing Plans
The three plans with a Monthly and Yearly switch. Use the Stacked variants on tablet and phone.
Submit Button
Only inside a form. Framer switches it to Sending, Sent and Error by itself.
CTA Band
Closes most pages. Set the heading and text; the buttons stay the same. Use the Tablet and Phone variants on those breakpoints.