Scroll up

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

Buttons

Button styles and sizes include CSS animations.

Button styles

Gradient button

Button

Gradient Button

Icon down Button

Button

Icon down

Gray button

Button

Gray Button

White button

Button

White Button

Gray Border

Red Button

Button

Red Button

red icon down

Button

Red Button

Icon down

Button sizes

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

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

  1. This is an example of list paragraph

  2. This is an example of list paragraph

  3. 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

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  3. 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

  • 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

Pin Icon

  • 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

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

Made by Metrik

exclusively for Webflow

Metrik logo
Back to home