H1 40px - used for blog page and FAQs
Semi Bold text
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
Use "Button wrapper" div block to wrap buttons.
Add extra selector for top margin - see examples below.
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.
For different font color add extra color selectors to text elements as in examples below.
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.
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.