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.
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
Looks like H1
Heading Large - Aa Bb Cc
DM Sans Bold 30px / 1.29 -
Looks like H2
Looks like H2
Heading Big - Aa Bb Cc
DM Sans Bold 26px / 1.29 -
Looks like H3
Looks like H3
Heading Medium - Aa Bb Cc
DM Sans Bold 22px / 1.29 -
Looks like H4
Looks like H4
Heading Small - Aa Bb Cc
DM Sans Bold 18px / 1.5 -
Looks like H5
Looks like H5
Heading Tiny - Aa Bb Cc
DM Sans Bold 16px / 1.5 -
Looks like H6
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 text color here
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.
See how easy it is.
Change the underline color here
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.
See how easy it is.
Link - Arrow
Link - Arrow Big
