Style Guide
Every text and colour style this template ships with. Edit a style once and every page that uses it follows.
Headings
Heading 1
62px / 1.05em
Logo Wordmark
28px / 1.2em
Heading 2
32px / 1.2em
Stat Number
46px / 1.05em
Section Heading
50px / 1.1em
Card Heading
28px / 1.1em
Stat Number Small
34px / 1.05em
Plan Price
51.592px / 1.1em
Plan Price Unit
25.099px / 1.1em
FAQ Card Title
24px / 1.2em
Footer Heading
36px / 1.3em
Logo Wordmark Large
35.455px / 1.2em
Post Author
26px / 1.2em
Contact Title
26px / 1.1em
Form Heading
38px / 1.1em
Body
Body Large
18px / 1.63em
Body Medium
16px / 1.25em
Logo Name
22px / 1.5em
Chip Label
16px / 1.125em
Logo Name Phone
18px / 1.5em
Nav Link Mobile
22px / 1.04545em
Body Base
16px / 1.5em
Plan Name
22px / 1.2em
Plan Item
16px / 23px
Testimonial Name
16px / 1.5em
Footer Title
20px / 1.2em
Footer Link
18px / 1.5em
Body XL
20px / 1.5em
Footer Meta
16px / 1.5em
Footer Meta Link
16px / 1.5em
Body Base Caps
16px / 1.5em
Role Label
16px / 1.2em
Team Name
22px / 1.1em
Table Cell
18px / 23px
Table Group
18px / 23px
Table Price
18px / 1.2em
Feature Title
20px / 1.2em
Article Body
18px / 1.5em
TOC Link
16px / 1.3em
Field Label
16px / 1.2em
Labels and small text
Label
14px / 1.2em
Body Small
13px / 1.25em
Caption
14px / 1.5em
Chip Label Phone
Nav Link
14px / 1.5em
Code
13.237px / 19px
Code Title
10.988px / 1.5em
Code Button
6.867px / 16.481px
Plan Tag
13px / 20px
Plan Label
14px / 23px
Blog Date
14px / 1.5em
Chip Text
14px / 24px
Article Eyebrow
14px / 1.2em
Colours
Text/Primary
Brand/Primary
Surface/Background
Surface/White
Text/Secondary
Brand/Soft
Border/Default
Surface/Muted
Surface/Glass
Surface/Track
Text/Black
Text/Menu
Surface/Active
Surface/Bar
Surface/Panel
Border/Subtle
Border/Dark
Border/Dashed
Border/Card
Surface/Dark
Surface/Dark Card
Surface/Dark Well
Border/Light
Text/On Dark
Text/On Dark Muted
Code/Keyword
Code/Property
Code/Comment
Dot/Red
Dot/Yellow
Dot/Green
Brand/Light
Text/On Dark Soft
Border/Dash Light
Surface/Dark Card Alt
Surface/Dark Well Alt
Brand/Ring
Brand/Ring Dark
Text/Muted
Border/Faint
Border/Strong
Border/Hairline
Text/Body
Border/Dotted
Border/Divider
Brand/Instagram
Brand/LinkedIn
Border/Social
Surface/Plate
Text/Soft
Surface/Table
Surface/Table Head
Surface/Chip
Border/Chip
/Border/Rule
Border/Rail
Brand/Vivid
Links
Article text
Key tips:
A heading inside an article
Article body is Geist 18 on a 1.5 line. On the blog’s detail page these come from the post’s own rich text field, where Framer maps each tag to one of these styles — a heading to Heading 2, an eyebrow to Article Eyebrow, a paragraph to Article Body.
Form
