Style guide

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

Heading H2

Heading H3

Heading H4

Heading H5

Heading 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

Hummingbird
Parrot
Pigeon

All ordered lists

Hummingbird
Parrot
Pigeon

All unordered lists

Hummingbird

All block quotes

Text classes

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

text size

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

Item 1
Item 2
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

Button

button-primary-icon

Button

button-primary-icon-invert

button-icon

Icons

Icon components

icon-1x1-xxsmall

icon-rect-medium

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