Style Guide

All graphical assets in this template are licensed for personal and commercial use. Please check the license below if you'd like to use a specific asset.

Colors

These are the colors used in the design. You can easily adjust them in the Variables panel.

Main Color

#3E2CA3

Accent Color

#EE80F4

Background Color

#F1F1F1

Blurred Blobs 01

#D8E1FF

Blurred Blobs 02

#E2C5F8

White

#FFFFFF

Typography

HTML Heading tags

If you edit the styles here, they will change across the website. We have a global system for headings, typography sizing, coloring, and customizations.

H1 - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Fahkwang Bold 36px / 1 -

H2 - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Fahkwang Bold 24px / 1.15 -

H3 - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Fahkwang Bold 18px / 1.2 -

H4 - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Outfit Medium 14px / 1.4 -

H5 - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Outfit Medium 12px / 1.5 -

H6 - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Outfit Semi Bold 10px / 1.55 -

Heading Classes

Use class prefix heading - on H1, H2, H3, or any other piece of text to change it to a specific heading size.

Heading Xlarge - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Fahkwang Bold 36px / 1 -
Looks like H1

Heading Large - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Fahkwang Bold 24px / 1.15 -
Looks like H2

Heading Big - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Fahkwang Bold 18px / 1.2 -
Looks like H3

Heading Medium - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Outfit Medium 14px / 1.4 -
Looks like H4

Heading Small - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Outfit Medium 12px / 1.5 -
Looks like H5

Heading Tiny - Aa Bb Cc

Duis cursus miquis viverra ornare eros dolor interdum nullaut commodo diam libero vitae erat. Aenean faucibus nibh etjusto cursus idrutrum lorem imperdiet. Nuncut sem vitae risus tristique posuere.

Outfit Semi Bold 10px / 1.55 -
Looks like H6

Paragraphs

Paragraphs and other common text elements. If you edit the styles here, they will change across the website.

Paragraph Normal - Outfit Normal 15px / 1.8 -

Paragraph Small - Outfit Normal 14px / 1.8 -

Rich Text

If you edit the style of elements of Rich Text here, it will change in all the Rich Texts across the website.

What’s a Rich Text element?

The rich text element allows you to create and format:

headings
paragraphs
blockquotes
images
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

Pelentesque habitant morbi tristique senectus:

Congue vehicula
Egestas tincidunt acplacerat

Sabitasse platea dictumst dras condimentum pulvinar ante mattis imperdiet. Nunc placerat erat vitae gravida convallis duimauris molestie risus vestibulum portaeros sem egetdui nunc ullamcorpert.

‍

‍

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.

Figure Caption

How to customize formatting for each rich text

Sabitasse platea dictumst dras condimentum pulvinar ante mattis imperdiet. Nunc placerat erat vitae gravida convallis duimauris molestie risus vestibulum portaeros sem egetdui nunc ullamcorpert. Praesent ut aliquet justo. Phasellus edui fusce et tempor orcuisque vel dictum est. Phasellus lectus enim, tincidunt sit amet maximus eget, faucibus eget nibh. Proin malesuada lacinia euismod. Integer id elementum magna, ut sollicitudin curabitur a magna consequat, semper nulla sit amet dignissim odio. Duis pharetra odio consequat facilisis risomodo.

Illustrations

Here you can replace the illustrations with ones that match your brand and vision. If you replace images inside these three symbols, the change will be reflected across the whole website. Please keep in mind that the illustrations that you place here should be PNG images with transparent backgrounds. You can create them on your own or commission us to create them for you.

Color Of The Illustrations

Here, you can easily change the color of all the illustrations across the website.

For reference, above is the main color - if you'd like to set color of the illustrations to match it.

Illustration for step 1

1. In the Style tab, scroll down to Filters and click on 'Hue-Rotate'.

Illustration for step 2

2. By adjusting the 'Hue-Rotate' Angle value, you can change the color.

Decorative Image

The
Brand
Must
Be___
unique

Let’s Make some magic together