Style Guide

The style guide defines the basic design elements. Here we will find colors, fonts and text styles.

Modify the elements that already exist to adapt them to your own design. You can also add and / or remove any element you need.

typographies

Add all the fonts that you are going to use in the project.
First set the body font going to the Body (html tag), this will work as the default font.
Second, you can creat a global class to change whatever element to the font you want, to do that creat a class with the font set.

Noto Sans
Noto Serif

typography Scales

Defining the styles directly in the H labels is a very common practice, but this can lead to extra classes when we want to have H labels of the same level with different sizes. With this class system for the text, we can define the size regardless of the level of the H tag. That is, we can have two <H2> tags, which by hierarchy of contents have to be <h2> but by design they need to have different sizes. . And it also serves us for other texts within our website, not just headlines. You can use modularscale.com to define your size scale.

This is a typography scale
t1 hero
This is a typography scale
t1
This is a typography scale
This is a typography scale
t2
This is a typography scale
t3
This is a typography scale
t4
TExts


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.

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

body-large

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.

body-medium

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.

body-regular

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.

body-small
Text Colors

The following are global classes, you can add to any text of the page to change colors.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-allcaps

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-EVOLVE ACADEMY

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-EVOLVE FUNDRAISING

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-EVOLVE HIRE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-EVOLVE3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-Blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-WHITE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-yellow

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-Soft

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-heavyblue
text-EVOLVE HIRE
Other elements
  • List item
  • List item
  • List item
all-unordered-list
  • List item
  • List item
  • List item
list
  1. List item
  2. List item
  3. List item
all-ordered-list
  1. List item
  2. List item
  3. List item
un-list
Color swatches
background colors

Creat Global Background to apply to any element in the design with the class name structure bg-...  

rich text

Use the next rich text to customize the default rich text of the website. If you need to create a new one because you have custom css, please creat a new rich text class, ex: c-blog-richtext, then select the html tag and change the css with the nest selector.

Heading H1

Heading H2

Heading H3

Heaging H4

Heading H5
Heading H6

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.

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!
  • List Item
  • List Item
  • List Item
This is caption for this placeholder image
Spacers

The spacer elements give the sections more room to breathe. This is not a global combo class, it's an element separated from others.

spacer-y
spacer-x
Aspect ratios
icon sizes