## 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.](https://finsweet.com/client-first)

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

[Hummingbird](/content/site-root.html)

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

text-size-small

text-size-regular

text-size-medium

text align

text-align-left

text-align-center

text-align-right

text weight

text-weight-normal

text-weight-semibold

text color

text-color-highlighted

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](https://university.webflow.com/lesson/add-and-nest-text-links-in-webflow)

**Bold text**

_Emphasis_

Superscript

Subscript

## Buttons

Button components

[Contact](/content/utility-pages/style-guide#/index.html)

button-primary

[Contact](/content/utility-pages/style-guide#/index.html)

button-primary-small

[Get demo](/content/utility-pages/style-guide#/index.html)

button-secondary

[Get started](/content/utility-pages/style-guide#/index.html)

button-secondary-small

[Button](/content/utility-pages/style-guide#/index.html)

button-primary-icon

[Button](/content/utility-pages/style-guide#/index.html)

button-primary-icon-invert

button-icon

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