Style Guide

This template utilizes components and variables feature in Webflow - this means the style and feel of this template can be changed easily, with just a few clicks.
This template follows the naming convention called client-first.

This template is build with fluid units - REM.

Typography

Fonts used throughout this website.

What about George? Nothing's coming to my mind.

Primary font : Sora

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.

Secondary font : Inter

Headings

HTML tags define default Heading styles.

Heading H1

H1

Heading H2

H2

Heading H3

H3

Heading H4

H4
Heading H5
H5
Heading H6
H6

Headings
styles

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

Heading H1

heading-style-h1

Heading H2

heading-style-h2

Heading H3

heading-style-h3

Heading H4

heading-style-h4

Heading H5

heading-style-h5

Heading H6

heading-style-h6

Other HTML Tags

HTML tags define default text styles.

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.

All paragraphs
The sword-billed hummingbird (Ensifera ensifera) is a neotropical species of hummingbird from the Andean regions of South America.
All block quotes
  1. Hummingbird
  2. Parrot
  3. Pigeon
All ordered lists
  • Hummingbird
  • Parrot
  • Pigeon
All unordered lists
All block quotes

Text classes

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

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-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
text align

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-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
text weight

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-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
text color

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-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

Rich text

All rich text tags, styled and presented in use.

Heading 1

Heading 2

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
button-primary-small
button-secondary
button-secondary-small

Icons

Icon components
icon-1x1-xxsmall
icon-rect-medium

Color palette

Color palette
body-color
#FAFAFA
section-background
#F3F7FB
color-accent
#FF5C21
color-primary
#151516
color-secondary
#101841
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 weight
text-secondary
#4A4A57
text-invert
#FFFFFF
text-primary
#FAFAFA