Structure Classes

Page Wrapper

Main Wrapper

Container 800

Container 1000

Container 1200

Padding Global

Padding Section 80

Padding Section 120

Padding Section 160

Grid Main

button-group

Typography

Text Classes

Playfair & Satoshi

Heading Typography

Playfair Display + Satoshi

Heading 80

Font Size: 80px | Line height: 1.3

Heading 1, Minimalist.

Heading 64

Font Size: 64px | Line height: 1.3

Heading 2, Unforgettable.

Heading 48

Font Size: 48px | Line height: 1.3

Heading 3,
Simple and useful.

Heading 40

Font Size: 40px | Line height: 1.3

Heading 4,
Aestheticly pleasing.

Heading 32

Font Size: 32px | Line height: 1.3

Heading 5,
Cohesive and impactful.

Heading 24

Font Size: 24px | Line height: 1.3

Heading 6,
Human-friendly and easy.

Satoshi

Paragraph Typography

Satoshi

Paragraph 22

Font Size: 22px | Line height: 1.5

As a designer, I understand that the products and experiences we create are more than just aesthetics. They have the power to inspire, inform, and connect with people in a way that drives action.

Paragraph 18

Font Size: 18x | Line height: 1.5

As a designer, I understand that the products and experiences we create are more than just aesthetics. They have the power to inspire, inform, and connect with people in a way that drives action.

Paragraph 16

Font Size: 16x | Line height: 1.5

As a designer, I understand that the products and experiences we create are more than just aesthetics. They have the power to inspire, inform, and connect with people in a way that drives action.

Paragraph 14

Font Size: 14x | Line height: 1.5

As a designer, I understand that the products and experiences we create are more than just aesthetics. They have the power to inspire, inform, and connect with people in a way that drives action.

Paragraph 12

Font Size: 12x | Line height: 1.5

As a designer, I understand that the products and experiences we create are more than just aesthetics. They have the power to inspire, inform, and connect with people in a way that drives action.

HTML Text Tags

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links

All quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Text Styles

Text Style Strikethrough

Text Style Strikethrough

Text Style Italic

Text Style Italic

Text Style Muted

Text Style Muted

Text Style Allcaps

Text Style Allcaps

Text Style Nowrap

Text Style Nowrap

Text Style Link

Text Style Link

Text Style Quote

Sample text is being used as a placeholder.

Text Font Playfair

Sample text is being used as a placeholder for real text that is normally present

Text Font Satoshi

Sample text is being used as a placeholder for real text that is normally present

Text Weights

Text Weight Xbold

Text Weight Xbold

Text Weight Bold

Text Weight Bold

Text Weight Semibold

Text Weight Semibold

Text Weight Medium

Text Weight Medium

Text Weight Normal

Text Weight Normal

Text Weight Light

Text Weight Light

Text Alignments

Text Align Left

Text Align Left

Text Align Center

Text Align Center

Text Align Right

Text Align Right

Color

Color Palette

HEX

B25740

HEX

FFFFFF

HEX

1A170F

HEX

333230

HEX

999281

HEX

CCC6B4

HEX

E5E3DC

HEX

F7F6F2

Text Colors

Text Color Jasper

Text Color Jasper

Text Color Black 1

Text Color Black 1

Text Color Black 2

Text Color Black 2

Text Color Gray 1

Text Color Gray 1

Text Color Gray 2

Text Color Gray 2

Text Color Gray 3

Text Color Gray 3

Text Color Gray 4

Text Color Gray 4

Text Color White

Text Color White

Background Colors

Background Color Jasper

Background Color Black 1

Background Color Black 2

Background Color Gray 1

Background Color Gray 2

Background Color Gray 3

Background Color Gray 4

background-color-white

Components

Buttons

Button

Button Outline

Max Widths

Max Width Full

Max Width 1200

Max Width 1000

Max Width 768

Max Width 512

Max Width 320

Max Width 256

Max Width 192

Paddings

Direction Classes

Padding Bottom

Padding Top

Padding Vertical

Padding Horizontal

Padding Left

Padding Right

Size Classes

Padding 0

Padding 2

Padding 4

Padding 8

Padding 16

Padding 24

Padding 32

Padding 40

Padding 48

Padding 56

Padding 64

Padding 72

Padding 80

Padding 96

Padding 128

Padding 192

Margins

Direction Classes

Margin Bottom

Margin Top

Margin Vertical

Margin Horizontal

Margin Left

Margin Right

Size Classes

Margin 0

Margin 2

Margin 4

Margin 8

Margin 16

Margin 24

Margin 32

Margin 40

Margin 48

Margin 56

Margin 64

Margin 72

Margin 80

Margin 96

Margin 128

Margin 192

Spacers

Spacer 2

Spacer 4

Spacer 8

Spacer 16

Spacer 24

Spacer 32

Spacer 48

Spacer 64

Spacer 80

Spacer 96

Spacer 128

Spacer 192

Icons

Icon 16

Icon 20

Icon 24

Icon 32

Icon 40

Useful Utility Class

Hide

This element is hidden

Hide Tablet

Hide Mobile Portrait

Hide Mobile Landscape

Overflow Visible

Overflow Hidden

Overflow Auto

Overflow Scroll

Align Center

Z Index 1

Z Index 2

Webflow Elements

Form Component

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Text Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

© 2023 Wonderful Human Template

Style guide Licenses

Created by Juan Mac