The Styleguide of

Typography

Colors

Buttons

How to

Typography

*Headings

H1 - font-size: 140px / line-height: 90%

Heading Visual Type Scale

H2 - font-size: 100px / line-height: 105%

Heading Visual Type Scale

H3 - font-size: 72px / line-height: 95%

Heading Visual Type Scale

H4 - font-size: 56px / line-height: 100%

Heading Visual Type Scale

H5 - font-size: 42px / line-height: 110%

Heading Visual Type Scale

H6 - font-size: 24px / line-height: 130%

Heading Visual Type Scale

*Headings Classes

*Paragraph Classes

Paragraph (p-leading) - 36px / 1.4-

Paragraph (p-body) - 22px / 1.4-

Paragraph (p-body .regular) - 22px / 1.4-

Paragraph (p-body .bold) - 22px / 1.4-

Paragraph (p-body .extra) - 28px / 1.4-

Paragraph (p-small) - 18px / 1.4-

Paragraph (p-tiny) - 12px / 1.6-

Subtitle - 16px / 1.6-

Overline - 14px / 1.4-

Overline .small - 12px / 1.4-

Text Link - 22px / 1.4-

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Note: The paragraph font size should be set on the root ' All Paragraphs)' tag.

This is an H1 heading inside rich text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is an H2 heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing.

For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is an H3 heading inside 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 an H4 heading inside rich text

This is an H5 heading inside rich text

This is an H6 heading inside rich text

This is an H1 heading inside rich text

This is an H2 heading inside rich text heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing.

For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is an H3 heading inside 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 an H4 heading inside rich text

This is an H5 heading inside rich text

This is an H6 heading inside rich text

Colors

*Brand palette

Primary

Secondary

*Functional palette

Success

Danger

Warning

Info

*Neutral palette

bg-light-mode

Black

950

900

800

700

600

500

400

300

200

100

50 White

Text-primary

Text secondary

*States

Hover

Focus

Disabled

Secondary Hover

Focus

Disabled

*Elevation

Elevation 1

Elevation 2

Elevation 3

Elevation 4

Buttons

Primary Secondary Ghost

Button

Primary Secondary Ghost

Button

Note: You can't add the button icon with a class.
Make a symbol and reuse.

Prevent styles clean up

*Text alignment classes

text-left

text-center

text-right

*Other global classes

padding-section__small

padding-section__medium

padding-section__large

container-small

container-medium

container-large

spacing-0

spacing-2

spacing-4

spacing-8

spacing-12

spacing-16

spacing-24

spacing-32

spacing-40

spacing-48

spacing-56

spacing-64

spacing-72

spacing-80

spacing-96

spacing-120

spacing-160

spacing-240

spacing-320

br-0

br-2

br-4

br-6

br-8

br-10

br-12

br-16

br-20

br-24

br-32

br-40

br-pill

How to Structure your page content?

- .main-wrapper - Use a <main> tag
   - .section-[section__name] - Use a <section> tag
      - .page-spacing__small / medium / large - padding: top & bottom; margin: left & right - Auto; width: 100%
           - .container-small / medium / large - padding: left & right; margin: left & right - Auto; MAX width: 100em.; width: 100%
               - .hero__parent
                    - .hero__child

Name classes using BEM(Block Element Modifier)

Note! First thing when you add an element is to give it a class.
add an element: Ctrl + E or K
add a class: Ctrl + Enter

Navbar

nav

Everything inside will start with nav and then __ and the name of the element.
For example: nav__logo-wrapper ; nav__logo-img

Button

button

button__arrow

button__text

Combo classes

Every combo class should start with: is--
If you have a text element and you reuse it in another section, but you want it to be different style, just add a combo class to it.
For example: class body; combo class: is--bgtext-primary
Note! If your element already has a predefined value, the combo class won't work.

Reusing classes

The easiest and fastest way to design is with reusing classes.

You can reuse classes for wrappers, texts, colors, alignment and so on.

LENIS smooth scroll library

Add data-lenis-stop attribute to popup open button

Add data-lenis-start attribute to popup close button

Add data-lenis-toggle attribute to menu button

Add data-lenis-prevent attribute to any overflow scroll div