Style Guide

This style guide contains styles and elements that are used throughout the website.
Changes made here will be applied globally.

Brand

Logo

Logo Image

Logo SVG

Font

Primary Font

Manrope

Secondary Font

Marmelad

Color

Accent Color

Accent 100

Accent 300

Accent 500

Accent 700

Accent 900

Base Color

Base 100

Base 300

Base 500

Base 700

Base 900

Neutral Color

Transparent

White

Black

typography

Headings

Heading 1

lorem ipsum dolor sit amet

Heading 2

lorem ipsum dolor sit amet purrfect

Heading 3

lorem ipsum dolor sit amet purrfect

Heading 4

lorem ipsum dolor sit amet

Heading 5

lorem ipsum dolor sit amet

Heading 6

lorem ipsum dolor sit amet

HTML Tags

Paragraphs

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.

Quote Blocks

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius enim in eros.

Links

Text Link

Unordered Lists

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.

Ordered Lists

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.

Rich Text

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.

A small white dog is seen walking along a hallway, its tail wagging as it explores the space. — Image caption lorem ipsum

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

Text Styles

Text Weight

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius enim in eros.

Text Weight Extra Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius enim in eros.

Text Weight Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius enim in eros.

Text Weight Semi Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius enim in eros.

Text Weight Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius enim in eros.

Text Weight Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius enim in eros.

Text Weight Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius enim in eros.

Text Weight Extra Light

Text Size

Lorem ipsum dolor sit amet.

Text Size xxGiant

Lorem ipsum dolor sit amet.

Text Size xGiant

Lorem ipsum dolor sit amet.

Text Size Giant

Lorem ipsum dolor sit amet.

Text Size xxHuge

Lorem ipsum dolor sit amet.

Text Size xHuge

Lorem ipsum dolor sit amet.

Text Size Huge

Lorem ipsum dolor sit amet.

Text Size xxLarge

Lorem ipsum dolor sit amet.

Text Size xLarge

Lorem ipsum dolor sit amet.

Text Size Large

Lorem ipsum dolor sit amet.

Text Weight Medium

Lorem ipsum dolor sit amet.

Text Size Regular

Lorem ipsum dolor sit amet.

Text Size Small

Lorem ipsum dolor sit amet.

Text Size Tiny

Lorem ipsum dolor sit amet.

Text Size xTiny

Lorem ipsum dolor sit amet.

Text Size xxTiny

Color

Text Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

White

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Transparent

Theme Color

Theme Base

Lorem ipsum dolor sit amet.

Sample card styled with Background 1, Border 1, Text 1.

Primary Button

Sample card styled with Background 2, Border 2, Text 2.

Button Text

Sample card styled with Background 3, Border 3, Text 3.

Tertiary Button

Theme Green

Lorem ipsum dolor sit amet.

Sample card styled with Background 1, Border 1, Text 1.

Primary Button

Sample card styled with Background 2, Border 2, Text 2.

Button Text

Sample card styled with Background 3, Border 3, Text 3.

Tertiary Button

Theme Blue

Lorem ipsum dolor sit amet.

Sample card styled with Background 1, Border 1, Text 1.

Primary Button

Sample card styled with Background 2, Border 2, Text 2.

Button Text

Sample card styled with Background 3, Border 3, Text 3.

Tertiary Button

Theme Red

Lorem ipsum dolor sit amet.

Sample card styled with Background 1, Border 1, Text 1.

Primary Button

Sample card styled with Background 2, Border 2, Text 2.

Button Text

Sample card styled with Background 3, Border 3, Text 3.

Tertiary Button

Theme Yellow

Lorem ipsum dolor sit amet.

Sample card styled with Background 1, Border 1, Text 1.

Primary Button

Sample card styled with Background 2, Border 2, Text 2.

Button Text

Sample card styled with Background 3, Border 3, Text 3.

Tertiary Button

Theme Yellow

Lorem ipsum dolor sit amet.

Sample card styled with Background 1, Border 1, Text 1.

Primary Button

Sample card styled with Background 2, Border 2, Text 2.

Button Text

Sample card styled with Background 3, Border 3, Text 3.

Tertiary Button

Theme Gray

Lorem ipsum dolor sit amet.

Sample card styled with Background 1, Border 1, Text 1.

Primary Button

Sample card styled with Background 2, Border 2, Text 2.

Button Text

Sample card styled with Background 3, Border 3, Text 3.

Tertiary Button

Utility

Page Wrapper

Main Wrapper

Section

Padding Global

Container

Layout

Max Width

Spacing Clean