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.
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.
Heading Huge - 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 - DM Sans Normal 16px / 1.75 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraph Small - DM Sans Normal 14px / 1.75 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
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.
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.
This is a block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.