STYLE GUIDE
01/Colours
Manage recurring text and background colours.
Royal Blue
#273DD4
Black
#0C0C0C
White
#FFFFFF
02/typography
The font families used in the Sterling & Elysium Webflow template are open-source font from Google fonts. They are free for personal and commercial use.
Anton
The heading font used in the Sterling & Elysium Webflow template is Geologica. Download the font here or view the the font licensing rules here.
Inter
The body font used in the Sterling & Elysium Webflow template is Open Sans. Download the font here or view the the font licensing rules here.
03/heading styles
Heading classes when typography style doesn't match the default HTML tag.
01
Heading Style H1
Sample text helps you understand how real text may look.
02
Heading Style H2
Sample text helps you understand how real text may look.
03
Heading Style H3
Sample text helps you understand how real text may look.
04/HTML heading styles
Unify icons sizes. icon-height sets height of icons using image element. Icon Embed sets both height and width of icons using SVG code
01
Heading 1
Sample text helps you understand how real text may look.
02
Heading 2
Sample text helps you understand how real text may look.
03
Heading 3
Sample text helps you understand how real text may look.
01
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
05/text styles
Unify icons sizes. icon-height sets height of icons using image element. Icon Embed sets both height and width of icons using SVG code
01
Text Sizes(Anton Font)
Text Size/Large
Sample text is being used as a placeholder for real text that is normally present.
01
Text Sizes(Inter Font)
Text Size/Large
Sample text is being used as a placeholder for real text that is normally present.
01
Text Sizes(Inter Font)
Text Size/Semi Bold
Sample text is being used as a placeholder for real text that is normally present.
01
Text Sizes(Inter Font)
Text Size/Medium
Sample text is being used as a placeholder for real text that is normally present.
01
Text Sizes(Inter Font)
Text Size/Regular
Sample text is being used as a placeholder for real text that is normally present.
06/buttons
Button combo class system.
01
Button
02
Button Outlined
07/Icons
Unify icons sizes. icon-height sets height of icons using image element. Icon Embed sets both height and width of icons using SVG code
08/spacers
Spacer elements using the 8-pt grid to give sections more room to breathe.
14px
16px
24px
32px
40px
48px
56px
64px