Style Guide

This is a set of guidelines and strategies to help you build Webflow websites.

Typeface

Madera's style guide uses two distinct fonts to create a modern design. These fonts complement each other and help to establish a professional and sophisticated aesthetic for the website.

Sentient

The primary font is Sentient. You can download the webfont in the link bellow. Please use the WOFF and WOFF2 format for better performance.

Download
Satoshi

The secondary font is Satoshi. You can download the webfont in the link bellow. Please use the WOFF and WOFF2 format for better performance.

Download

Heading Styles

Heading 1

Sample

Heading 2

Sample

Heading 3

Sample

Heading 4

Sample

Heading 5
Sample
Heading 6
Sample

Text Classes

Text Size xdisplay
Sample text helps you understand how real text may look.
Text Size display
Sample text helps you understand how real text may look.
Text Size xxhuge
Sample text helps you understand how real text may look.
Text Size xhuge
Sample text helps you understand how real text may look.
Text Size huge
Sample text helps you understand how real text may look.
Text Size xxlarge
Sample text helps you understand how real text may look.
Text Size xlarge
Sample text helps you understand how real text may look.
Text Size large
Sample text helps you understand how real text may look.
Text Size Medium
Sample text helps you understand how real text may look.
Text Size Regular
Sample text helps you understand how real text may look.
Text Size Small
Sample text helps you understand how real text may look.
Text Size tiny
Sample text helps you understand how real text may look.

Text Weights

Text Weight Bold
Text Weights Bold
Text Weight Regular
Text Weights Regular
Text Weight Light
Text Weights Light
Text Weight extra light
Text Weights Light

Color Palette

Black
White
Cream
Palle Walle

Rich Text

Rich Text

Heading 1

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.

Heading 2

  • Lorem ipsum dolor sit amet, consectetur
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  • Lorem ipsum dolor sit amet, consectetur adi

Heading 3

  1. Lorem ipsum dolor sit amet, consectetur
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  3. Lorem ipsum dolor sit amet, consectetur adi

Heading 4

Project Image
Caption
Heading 5
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.
Heading 6

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.