Style Guide

This style guide presents the colors, fonts, and interactive elements used in the Squared template.

Colors

These are the colors used in the design. You can easily adjust them by using the Global Swatch feature.
See how easy it is.
Color White
#FFFFFF
Color Light
#F7F7F7
Color Dark
#0E0E0E
Color 01
#54E9DC
Color 02
#27318C
Color 03
#0F0E69
Color 04
#56CFB3
Color 05
#E9B2B8
Color 06
#9C92DC
Color 07
#B7D9C0
Color Of The Ball
#FFFFFF
Color Of The Lines
#B7D9C0 - A15%

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

DM Sans Bold 35px / 1.29 -

H2 - Aa Bb Cc

DM Sans Bold 30px / 1.29 -

H3 - Aa Bb Cc

DM Sans Bold 26px / 1.29 -

H4 - Aa Bb Cc

DM Sans Bold 22px / 1.29 -
H5 - Aa Bb Cc
DM Sans Bold 18px / 1.5 -
H6 - Aa Bb Cc
DM Sans Bold 16px / 1.5 -
Heading Classes
Use class prefix heading - on H1, H2, H3, or any other piece of text to change it to a specific heading size.

Text Xxlarge

DM Sans Bold 50px / 1.1 -

Heading Xlarge - Aa Bb Cc

DM Sans Bold 35px / 1.29 -
Looks like H1

Heading Large - Aa Bb Cc

DM Sans Bold 30px / 1.29 -
Looks like H2

Heading Big - Aa Bb Cc

DM Sans Bold 26px / 1.29 -
Looks like H3

Heading Medium - Aa Bb Cc

DM Sans Bold 22px / 1.29 -
Looks like H4

Heading Small - Aa Bb Cc

DM Sans Bold 18px / 1.5 -
Looks like H5

Heading Tiny - Aa Bb Cc

DM Sans Bold 16px / 1.5 -
Looks like H6
Paragraphs
Paragraphs and other common text elements. If you edit the styles here, they will change across the website.

Paragraph Big - DM Sans Normal 18px / 1.75 -

Paragraph Normal - DM Sans Normal 16px / 1.75 -

Paragraph Small - DM Sans Normal 14px / 1.75 -

Text Subheader - DM Sans Bold 16px / 1.75 -
Text Size Tiny - DM Sans Bold 12px / 1.5 -
Text Tiny Caps - DM Sans Bold 11px / 1.45 -

Buttons & Links

Here you can edit the colors of all the buttons and links, both dark and light versions.
Change the color of the text above to change the color of texts and arrows in all the dark links.
See how easy it is.
Change the underline color of the text above to change the color of the underlines in all the dark links.
See how easy it is.
Link - Arrow
Link - Arrow Big
Change the color of the text above to change the color of texts and arrows in all the light links.
See how easy it is.
Change the color of the bottom border of the text above to change the color of the underlines in all the light links.
See how easy it is.
Link - Arrow
Link - Arrow Big

Block Quote

If you edit the block quote style here, it will change across the website.
This is a block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In metus vulputate eu scelerisque felis imperdiet.

Rich Text

If you edit the block quote style here, it will change 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.

Maecenas at sagittis lectus nula

Pelentesque habitant morbi tristique senectus:

  1. Congue vehicula
  2. 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.

Abstract 3d shapes
Figure Caption

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.

This is a block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Animated Icons

These six unique animated icons are free to use as part of the template.

Costruiamo qualcosa di Grandioso insieme