Headings

Heading 1

H1 40px - used for blog page and FAQs

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text elements

14px text
16px text
24px text
Semi Bold text
Bold text

Labels

Structure:
Use div block with selector "Label" with Text element inside.
Add desired background color style selector to "Label" div block.
Use extra "Desktop" and "Mobile" selectors for labels with different text on different devices.
Label - no specified color
Label
Label
Label
Label
Label
Label

Link elements

Structure:
Use "Button wrapper" div block to wrap buttons.
Add extra selector for top margin - see examples below.
Button Text
Button Text
Text Link

Global colors

Dark Section text color

You can adjust all text elements' font color by adding extra selector "Dark" (change bg color if necessary) to an element with "Section" selector.

Heading

For different font color add extra color selectors to text elements as in examples below.
Yellow text
Light purple text

Selector naming rules

To avoid having too many custom style selectors follow the rules below.

Styles that are repetitive should have universal style names.
The names have to include all style changes to the element. However, the style changes that can have mixed application should be separated and added as combined/nested selectors.
E.g.:
Instead of "Blue Label", "Purple Label" and "Green Label"
use "Label" and add background color as an extra selector.
This way by changing "Label" style you will change labels of all colors.

Elements that have a lot of settings and are not repetitive (except for language variations) or are only used in specific sections can have custom/unique style names.
The structure of the style selector name should be as following:
"Page name (if specified) Section name__Element name"
Page and Section names in the beginning allow you to quickly identify which location the style belongs to in a selector list, filter it, and have a clear list of elements for that specific location.

Website structure rules

Navbars are placed in "Navbar__Wrapper" div block for fixed position. This allows the Navbar symbols to be static on Symbols page for easier editing.

"Section" is a universal selector defining padding. Sections with section-specific styling have unique selector names.

"Container" is a universal selector for limited width content and/or content that should be centred (e.g. section labels and headings).
Add extra "W xxx px" selector to define the width.
Add "Centered content" selector to make content centered.