Styleguide
Source of truth of this template.
Headings
Heading Jumbo
Heading Jumbo
Heading Jumbo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraphs & Links

Paragraph-bigger

Paragraph

Paragraph-de-emphasized

Paragraph-smaller

Paragraph-tiny

Label
A text link
Buttons & Form Elements
Rich Text Element

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Image caption

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.
Jane Lo
Product Designer

Hey there! I’m a creative graphic and web designer based in sunny San Francisco, CA.

Project 1
Graphic Design
Project 2
Web Design
Project 3
Web Design
Project 4
Graphic Design

My experience

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Webflow
Graphic Designer
April 2014 — Mar 2015
Webflow
Web Designer
Apr 2015 — Mar 2016
Webflow
Visual Developer
Jun 2016 — Jul 2017
Webflow
Dictator
Aug 2017 — forever

Colour Palette

Looking for something else? View the glossary

Primary Palette

Fill Colours
Brand
#7540ee
Dodge
#5b7fff
Shamrock
#38cb89
Buttercup
#ffab00
Thunderbird
#ff5630

Secondary Palette

Pastel Colours
Selago
#e3d9fc
Moon Raker
#d5dff7
Off Green
#e9f9f0
Health
#fffaf1
Chardon
#fff3f1

Typograhy Palette

Grey Colours
Downriver
#0a1f44
Port Gore
#4e5d78
Regent Gray
#8a94a6
Cadet Blue
#b0b7c3

Typograhy Palette

Neutral Tone
Ghost
#c1c7d0
Athens Gray
#ebecf0
Casper
#fafbfc
White
#ffffff

Elevation & Shadows

Looking for something else? View the glossary

Elevation and Shadows

Outter Shadow, Inner Shadow
Shadow
S1
Shadow
S2
Shadow
S3
Shadow
S4
Shadow
S5
Shadow
S1
Shadow
S2
Shadow
S3

Avatars

Looking for something else? View the glossary

Primary Buttons

Corner Radius
X Large
96px
Large
40px
Medium
32px
Small
24px
X Small
18px

TB

X Large
96px

TB

Large
40px

T

Medium
32px

T

Small
24px

T

X Small
18px

Buttons

Looking for something else? View the glossary

Field Elements

Looking for something else? View the glossary

Form Fields

Input Fields

Field Elements

Input Fields
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Alert Bars

Looking for something else? View the glossary

Notification

Input Fields
Looks like we're having trouble
Default Alert Error
Looks like we're having trouble
Warning Alert
Looks like we're having trouble
Error Alert
Your information has been saved.
Default Alert Check
Your information has been saved.
Default Alert Grey
Your information has been saved.
Confirm Alert

Badges

Looking for something else? View the glossary

Pill Badges

Corner Radius
5
32
32
32
32
5
32
3
22
3

Contextual Badges

Corner Radius
Default
Primary
Success
Warning
Error
Default
Primary
Success
Success
Success

Version Control

Corner Radius
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0

Icons

Looking for something else? View the glossary

Icon Set

Feather Icons by @Cole