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

Geist

Secondary Font

Jost

Color

Accent Color

Accent Light

Accent

Accent Dark

Base Color

100

200

300

400

450

500

550

600

700

800

900

925

950

975

Neutral Color

Transparent

White

Black

Typography

Headings

Heading 1

Lorem ipsum dolor sit amet

Heading 2

Lorem ipsum dolor sit amet

Heading 3

Lorem ipsum dolor sit amet

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.

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.

Text Weight Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Extra Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Semi Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Extra Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Thin

Text Size

192px

Lor

160px

Lor

128px

Lore

112px

Lore

96px

Lorem

80px

Lorem

64px

Lorem I

56px

Lorem Ip

48px

Lorem Ip

40px

Lorem Ips

32px

Lorem Ipsum

28px

Lorem Ipsum

24px

Lorem Ipsum Do

20px

Lorem Ipsum Do

18px

Lorem Ipsum Dol

16px

Lorem Ipsum Dolor

14px

Lorem Ipsum Dolor

12px

Lorem Ipsum Dolor Sit

10px

Lorem Ipsum Dolor Sit

8px

Lorem Ipsum Dolor Sit Amet

7px

Lorem Ipsum Dolor Sit Amet

6px

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.

Text 4

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

Card heading lorem ipsum dolor

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

Primary Button

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

Secondary Button

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

Tertiary Button

Theme Inverse

Card heading lorem ipsum dolor

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

Primary Button

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

Secondary Button

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