Style Guide

CSS Variables

Colors
Color Variables
body-color
#FAFAFA
color-primary
#151516
color-secondary
#101841
color-accent
#FF5C21
section-background
#F3F7FB
component-background
#FFFFFF
white
#FFFFFF
border-subtle
#E7DDDA
section-background-2
#F3F4F5
color-transparent-dark
rgba(21,21,22,0.03)
color-primary-transparent
rgba(54,97,246,0.1)
background-invert
#222222
Text Color Variables
text-primary
#FAFAFA
text-secondary
#A4A4A4
text-invert
white

Typography

Fonts used throughout this website.
Primary font : Montserrat

The quick brown fox jumps over the lazy dog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique maximus fermentum. Fusce id consequat sapien. Aliquam non nibh ac est ornare tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis sem, ornare id neque at, condimentum tristique nibh. Fusce justo magna, placerat laoreet porta et, egestas non augue. Aliquam erat volutpat. Vestibulum euismod vitae justo vel sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Headings

HTML tags define default Heading styles.
H1

Heading H1

H2

Heading H2

H3

Heading H3

H4

Heading H4

H5
Heading H5
H6
Heading H6

Headings styles

Use Heading classes when the typography style doesn't match the default HTML tag.
heading-style-h1

Heading

Paragraph

heading-style-h2

Heading

Paragraph

heading-style-h3

Heading

Paragraph

heading-style-h4

Heading

Paragraph

heading-style-h5
Heading

Paragraph

heading-style-h6

Heading

Paragraph

section-header-heading

Heading H1

Heading H2

Paragraph

Base HTML Tags

HTML tags define default text styles.
Paragraph

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail. It uses this to drink nectar from flowers with long corollas and has coevolved with the plant Passiflora mixta. While most hummingbirds preen using their beaks, the sword-billed hummingbird uses its feet to scratch and preen due to its beak being so long.

Block Quote
The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America.
Ordered List
  1. Hummingbird
  2. Parrot
  3. Pigeon
Unordered List
  • Hummingbird
  • Parrot
  • Pigeon

Text classes

Text classes when typography style doesn't match the default HTML tag.
text size
text-size-tiny

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

text-size-small

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

text-size-regular

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

text-size-medium

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

text align
text-align-left

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

text-align-center

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

text-align-right

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

text weight
text-weight-normal

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

text-weight-semibold

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

text color
text-color-highlighted

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

text-color-invert

The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America. Among the largest species of hummingbird, it is characterized by its unusually long beak, being the only bird to have a beak longer than the rest of its body, excluding the tail.

Rich text

All rich text tags, styled and presented in use.

Heading 1

Heading 2

Heading 2 with class

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Rich text wrapped in a centering class

All rich text tags, styled and presented in use.

Heading 1

Heading 2

h2.section-header-heading

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Buttons

Button components
button_primary-icon
button_primary-noicon
button-primary-small

Icons

Icons
icons