Colors

Click any color block to copy the hex code to your clipboard
Copied to Clipboard

Background - #FAEDE0

Copied to Clipboard

Background - #FAF9F4

Copied to Clipboard

Primary Accent - #EE9322

Copied to Clipboard

Secondary Accent - #F9DBB5

Copied to Clipboard

Tertiary Accent - #F2AB53

Copied to Clipboard

Ranger Brown - #32221e

Copied to Clipboard

Dark Brown - #231715

Copied to Clipboard

Light Brown - #7A4707

Gradients

Title Gradient - #32221E ➞ #644A3C

Card Stroke - #F9DBB5 ➞ #E2891A

Light BG Gradient - #FAEBDB ➞ #F9DDBA

Alert

Copied to Clipboard

Success - #E0FDE7

Copied to Clipboard

Error - #FBD9D7

Copied to Clipboard

Warning - #F9DBB5

Typography

Aa

Perfectly Nineties
400

Aa

Space Grotesk
Medium (500)

Aa

Space Mono
Regular
H1 - Lorem ipsum dolor

Perfectly Nineties Regular 72px/80px

H2 - Lorem ipsum dolor

Perfectly Nineties Regular 64px/72px

H3 - Lorem ipsum dolor

Perfectly Nineties Regular 56px/64px

H4 - Lorem ipsum dolor

Perfectly Nineties Regular 48px/56px

H5 - Lorem ipsum dolor

Perfectly Nineties Regular 40px/48px

P1 Regular - Lorem ipsum dolor

Space Grotesk Regular 24px/32px

P1 Medium - Lorem ipsum dolor

Space Grotesk Medium 24px/32px

P2 Regular - Lorem ipsum dolor

Space Grotesk Regular 16px/24px

P2 Medium - Lorem ipsum dolor

Space Grotesk Medium 16px/24px

P3 Medium - Lorem ipsum dolor

Space Grotesk Medium 14px/20px

P3 Regular - Lorem ipsum dolor

Space Grotesk Regular 14px/18px

LG Uppercase - Lorem ipsum dolor

Space Mono Regular 13px/13px

SM Uppercase - Lorem ipsum dolor

Space Mono Regular 11px/13px

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

Mega Button
MEGA BUTTON - 32PX/48PX - Space Grotesk (Medium - 500)
Big Button
BUTTON Big - 24PX/36PX - Space Grotesk (Medium - 500)
Button
BUTTON - 16PX/24PX - Space Grotesk (Medium - 500)
BUTTON With Icon - 16PX/24PX - Space Grotesk (Medium - 500)
Button White
BUTTON - White - 16PX/24PX - Space Grotesk (Medium - 500)
Button - Medium
BUTTON - Medium - 14PX/20PX - Space Grotesk (Medium - 500)
Button - Pill
BUTTON - Pill - 14PX/20PX - Space Grotesk (Medium - 500)
Button - Pill - Transparent
BUTTON - Pill - Transparent - 14PX/20PX - Space Grotesk (Medium - 500)
Button - Circular
BUTTON - Circular - 14PX/20PX - Space Grotesk (Medium - 500)
Text Link
Text Link with Icon
TEXT LINK & TEXT LINK WITH ICON- 16PX/20px - Space Grotesk (Medium - 500)

Messages & Components

Here is a success message

Here is an error message

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form