Style Guide

Color Palette

Colors below are only for preview.
Edit colors directly inside Webflow color swatches to apply your own style

Royal Blue

#0074ff

Orange

#ffa300

Violet

#fe68ff

Crimson

#ff3445

Black

#2c2c2c

White

#fffff

Shadow

#d5d5d5

Dark Grey

#9b9b9b

White Smoke

#f7f7f7

Typography

aA

Outfit

thin - 100

.Weight Thin

aA

Outfit

extra light - 200

.Weight ExtraLight

aA

Outfit

light - 300

.Weight Light

aA

Outfit

normal - 400

.Weight Normal

aA

Outfit

medium - 500

.Weight Medium

aA

Outfit

semibold - 600

.Weight SemiBold

aA

Outfit

bold - 700

.Weight Bold

aA

Outfit

extrabold - 800

.Weight Extra Bold

aA

Outfit

black - 900

.Weight Black

Typography Elements

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra condimentum purus eget commodo. Quisque nec justo turpis. Cras volutpat ipsum laoreet, sagittis quam eget, scelerisque mi. Aliquam gravida erat non eros bibendum sodales. Phasellus at turpis eu nulla blandit vulputate. Quisque a felis ligula. Aenean elit ipsum, laoreet ut varius ac, semper eget tellus. Quisque ac lectus ante. Aliquam fringilla libero gravida turpis tincidunt, eu consectetur ex imperdiet. Praesent elementum hendrerit dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra condimentum purus eget commodo.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra condimentum purus eget commodo. Quisque nec justo turpis. Cras volutpat ipsum laoreet, sagittis quam eget, scelerisque mi.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra condimentum purus eget commodo. Quisque nec justo turpis. Cras volutpat ipsum laoreet, sagittis quam eget, scelerisque mi.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra condimentum purus eget commodo. Quisque nec justo turpis. Cras volutpat ipsum laoreet, sagittis quam eget, scelerisque mi.
Text Link

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.

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!

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.

  • List Item 1
  • List Item 2
  • List Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Utility Classes

Text Block
.H1

Gives any text element the appearance of an h1 element

Text Block
.Text Italic

Applies font style Italic property

Text Block
.Text Center

Applies text align center

Text Block
.Text Right

Applies text align right

Text Block
.Text Right

Applies text align right

Text Block
.Color Primary

Applies the Primary Color

Text Block
.Color Accent

Applies the Accent Color, used on links and icons, if you want to change the style of Footer Icon just change this class Color

Containers

Main Container is a centered div of max 85 on wide screens, 70 rem on desktop and progressively smaller paddings on smaller screens
you can apply this behaviour with the class "Main Container"