Nordian Style Guide

This page has all styles and components that are used throughout the site. Careful: Editing anything here will affect the entire website.

Core Structure

Always use this structure when designing a new section. Follow the steps below or click here to see a tutorial.
‍
1. Copy the blocks starting from section_[name] div and paste them inside your page
2. REMOVE the section_[name] class from the first div: DO NOT rename the section_[name] class, REMOVE it!
3. Create a new class with the name of your section (e.g. section_product-hero).
4. Insert a div inside padding-section div, and start building from there.

Typography Fixed

Adjusting the typography of the website so that it's according to Client-First and to Figma's Style Guide.

Make sure to use the HTML tag.

Heading 1

Make sure to use the HTML tag.

Heading 2

Make sure to use the HTML tag.

Heading 3

Make sure to use the HTML tag.

Heading 4

Make sure to use the HTML tag.

Heading 5

Subheading 1

Make sure to use the HTML tag.

Heading 5

Subtitle 1

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.

Subtitle 2

Typography - Paragraphs

Typograph classes for paragraphs.

Body 1

Body 2

Body 3

Body 4

Typography Global Combo Classes

Typography classes to add additional styles like colors or alignment.

Text alignment

Use text-alignment classes to align text.

text-align-center

text-align-center-on-breakpoint

text-align-left

text-align-right

Text color

Use text-color classes to change the color of text.

text-color-white

text-color-blue

Text weight

Use text-color classes to change the weight of the text.

text-weight-bold

text-weight-semibold

Paddings

Padding divs are used to control padding globally.

padding-global

This class is used to control horizontal padding. Add it in a div inside of a section. 90px left and right.

padding-section-large

This class is used to control vertical padding in sections. It comes in three sizes: large, medium and small.

padding-section-medium

This class is used to control vertical padding. 80px.

padding-section-small

This class is used to control vertical padding. 64px.

container-1260px

This classe is used to set a container width and max-width. width: 100%, max-width: 1260px.

Spacing Blocks

Spacing block is a class with nothing but padding applied to it. Apply a Spacing Block class to an empty div to add spacing between elements. Spacing Blocks are also responsive!

spacing-block-4px

spacing-block-8px

spacing-block-12px

spacing-block-16px

spacing-block-20px

spacing-block-24px

spacing-block-32px

spacing-block-48px

spacing-block-64px

spacing-block-72px

Buttons

All button classes.

Primary Button

Button

Button Text

Button Outline

Button Text

Button Ghost

button-ghost

It's a div with a link block inside, not a button component.

Compare a linha Precisio

Button Outline Secondary

Combo class: Button Outline, secondary

Button Text

Light Button

Combo class: Button, light

Button Text

Spacing Wrappers (Deprecated)

Wrapper divs used to add margin to elements. To add, wrap another div and add the classes margin-bottom + margin-[size] to the wrapper div. Not fully implemented in the site yet.

Typography (Deprecated)

All text sizes used across the website. Careful! Some are still in use.

Heading 1

Combo classes: center

Heading 1

Heading 2

Combo classes: align center, compare, white

Heading 2

Heading 3

Combo classes: Compare, no space, tab, white

Heading 3

Heading 4

Combo classes: align left

Heading 4

Subtitle 1

Combo classes: clean, left, White

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.

Subtitle 2

Body 1

Combo classes: align center, Black, centered, Sobre Nordian, Table

Body 2

Combo classes: align left, clean

Body 3

Body 4

Combo classes: text-style-guide

Body 5

body 6

Body 7

Field Label

Text Field

Combo classes: Empresa, Mensagem