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

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.

Link - Arrow

Link - Arrow Big

Enter text of the link

Button's Text

Change text color here

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 underline color here

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

Enter text of the link

Button's Text

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.

‍

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is a bullet point.
This is a multi line bullet point. This is a multi line bullet point. This is a multi line bullet point. This is a multi line bullet point. This is a multi line bullet point.

This is a number point.
This is a multi line number point. This is a multi line bullet point. This is a multi line bullet point. This is a multi line bullet point. This is a multi line bullet point.

‍

In transfer pricing, according to Indian law, a transaction between related parties has to be made as per the arm’s length principle. How to d

^{All views and thoughts expressed herein are the personal opinion of the author and should not be construed as any advice, financial or otherwise. This content does not reflect the views or thoughts of Lightspeed. Any reliance placed on this content must be at your sole prerogative and basis your own independent judgement, to the total exclusion of any liability of Lightspeed and the author}

‍

wewaeeewaeaweawe

Maecenas at sagittis lectus nula

erseresrsersers

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.

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.