Style Guide
Colors
Background colors
Template Papers using Gray color pallets for clean and minimal design. But you can use different color pallets which you prefer. Papers got defined in many colors. Choose that fit your own.
Classes
BG Black
BG Gray C6
BG Gray C5
BG Gray C4
BG Gray C3
BG Gray C2
BG Gray C1
BG Gray C0
BG White Smoke
BG White
BG Blue C5
BG Blue C4
BG Blue C3
BG Blue C2
BG Blue C1
BG Light Blue C5
BG Light Blue C4
BG Light Blue C3
BG Light Blue C2
BG Light Blue C1
BG Chinese Orange C2
BG Chinese Orange C1
BG Orange C4
BG Orange C3
BG Orange C2
BG Orange C1
BG Deep Orange
BG Atoll
BG Apricot C2
BG Apricot C1
BG Cashew
BG Maroon
BG Dark Brown
BG Light Walnut
BG Khaki
BG Dim Green
BG Grayish Olive
BG Olive
BG Warm Gray C1
BG Warm Gray C2
BG Claret
BG Dark Red C2
BG Dark Red C1
BG Lipstick Red
BG Cadmium Red
BG Coral
BG Bougainvillaea
BG Pure Pink
BG Tender Pink
BG Pale Pink
BG Light Rouge
BG Light Prawn
BG Sardonyx
BG Shadow Pink
BG Pale Yellowish Pink
BG Pink Beryl
BG Pinkish White
BG Soft Sun
BG Sand
BG Fluorescent Orange
Every background color class starts with “BG” as an acronym for background.
Blur backgrounds
Typography
Font
Template Papers using clean and modern font Manrope from Google Fonts Library. The font includes glyphs for various Latin languages.
Native Heading styles
This is H1 heading
All H1 Headings
This is H2 heading
All H2 Headings
This is H3 heading
All H3 Headings
This is H4 heading
All H4 Headings
This is H5 heading
All H5 Headings
This is H6 heading
All H6 Headings
Native Typography styles
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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
All Paragraphs
All Links
Block Quote
All Block Quotes
This is an example of list paragraph
This is an example of list paragraph
This is an example of list paragraph
All Unordered Lists
This is an example of list paragraph
This is an example of list paragraph
This is an example of list paragraph
All Ordered Lists
Custom Heading styles
Extra Large Heading
Heading
Extra Large
Large Heading
Heading
Large
Medium Heading
Heading
Medium
Regular Heading
Heading
Small Heading
Heading
Small
Capitalize Heading
Heading
Capitalize
Custom Paragraph styles
This is a Extra Large Paragraph
Paragraph
Extra Large
This is a Large Paragraph
Paragraph
Large
This is a Medium Paragraph
Paragraph
Medium
This is a Regular Paragraph
Paragraph
This is a Small Paragraph
Paragraph
Small
This is a Extra Small Paragraph
Paragraph
Extra Small
Custom Post Title styles
Extra Large Post Title
Post Title
Extra Large
Large Post Title
Post Title
Large
Medium Post Title
Post Title
Medium
Regular Post Title
Post Title
Small Post Title
Post Title
Small
Extra Small Post Title
Post Title
Extra Small
Rich text styles
Class name is "Rich Text"
Rich Text
All rich text styles and classes
Native List styles
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
All Unordered List
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
All Ordered List
Custom List styles
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
List
+
List Item
List
+
List Item
Pin Icon
List
+
List Item
Pen Icon
Layouts
Flex classes
Flex
Combo classes
Flex Vertical
Align Center
Align Start
Justify Center
Justify Left
Justify Start
Justify Space Around
Flex
Combo classes
Tab Wrap
Mob Wrap
Mob Reverse
Mob Reverse Wrap
Flex
Flex
Flex - align center
Flex
Align Center
Flex - wrap on tablet breakpoint
Flex
Tab Wrap
Flex - wrap on mobile landscape breakpoint
Flex
Mob Wrap
Flex - vertical
Flex
Flex Vertical
Flex - margins 1 em
Flex
Flex Margins 1em
Margins
List of all margin classes. You can apply them to Headings, Paragraphs, Buttons, Div's, etc.
Paragraph margins
Heading margins
Margin Top classes
Margin Bottom classes
Margin Right classes
Margin Left classes
Other styles
Accordion style
This is animated vertically collapsing accordion
Opacity
Opacity classes
Icons
Sizes
Extra Small icon
Icon
Extra Small
Small icon
Icon
Small
Regular icon
Icon
Medium icon
Icon
Medium
Large icon
Icon
Large
Extra Large icon
Icon
Extra Large
Components
Articles
Navigations
Footers
Made by Metrik
exclusively for Webflow
