the fox jumped over the lazy dog

the fox jumped over the lazy dog

the fox jumped over the lazy dog

the fox jumped over the lazy dog

the fox jumped over the lazy dog

the fox jumped over the lazy dog

the fox jumped over the lazy dog

the fox jumped over the lazy dog

the fox jumped over the lazy dog

the fox jumped over the lazy dog

the fox jumped over the lazy dog

I am a buttonI am a buttonI am a buttonI am a button

Background Color Pallete

The brand’s main color most used color

I am a heading

background-100

#000000

I am a heading

background-200

#000000

I am a heading

background-300

#000000

I am a heading

background-400

#000000

I am a heading

background-500

#000000

I am a heading

background-600

#000000

I am a heading

background-700

#000000

I am a heading

background-800

#000000

I am a heading

background-900

#000000

Main Colors

The brand’s second most used color

I am a heading

main-100

#000000

I am a heading

main-200

#000000

I am a heading

main-300

#000000

I am a heading

main-400

#000000

I am a heading

main-500

#000000

I am a heading

main-600

#000000

I am a heading

main-700

#000000

I am a heading

main-800

#000000

I am a heading

main-900

#000000

Tertiary Colors

The brand’s additional colors

I am a heading

tertiary-100

#000000

I am a heading

tertiary-200

#000000

I am a heading

tertiary-300

#000000

I am a heading

tertiary-400

#000000

I am a heading

tertiary-500

#000000

I am a heading

tertiary-600

#000000

I am a heading

tertiary-700

#000000

I am a heading

tertiary-800

#000000

I am a heading

tertiary-900

#000000

Accent Color

The brand’s Accent colors

I am a heading

accent-100

#000000

I am a heading

accent-200

#000000

I am a heading

accent-300

#000000

I am a heading

accent-400

#000000

I am a heading

accent-500

#000000

I am a heading

accent-600

#000000

I am a heading

accent-700

#000000

I am a heading

accent-800

#000000

I am a heading

accent-900

#000000

Accent Soft Colors

The brand’s additional colors

I am a heading

accent-soft-100

#000000

I am a heading

accent-soft-200

#000000

I am a heading

accent-soft-300

#000000

I am a heading

accent-soft-400

#000000

I am a heading

accent-soft-500

#000000

I am a heading

accent-soft-600

#000000

I am a heading

accent-soft-700

#000000

I am a heading

accent-soft-800

#000000

I am a heading

accent-soft-900

#000000

Accent Strong Colors

The brand’s additional colors

I am a heading

accent-strong-100

#000000

I am a heading

accent-strong-200

#000000

I am a heading

accent-strong-300

#000000

I am a heading

accent-strong-400

#000000

I am a heading

accent-strong-500

#000000

I am a heading

accent-strong-600

#000000

I am a heading

accent-strong-700

#000000

I am a heading

accent-strong-800

#000000

I am a heading

accent-strong-900

#000000

Neutrals

The brand’s neutral colors

I am a heading

neutral-100

#000000

I am a heading

neutral-200

#000000

I am a heading

neutral-300

#000000

I am a heading

neutral-400

#000000

I am a heading

neutral-500

#000000

I am a heading

neutral-600

#000000

I am a heading

neutral-700

#000000

I am a heading

neutral-800

#000000

I am a heading

neutral-900

#000000

Semantic Colors

The brand’s semantic colors

I am a heading

warning-100

#000000

I am a heading

success

#000000

I am a heading

error

#000000

I am a heading

info

#000000

Gaps

I am a heading

I am a heading

gap-4xs

I am a heading

I am a heading

gap-3xs

I am a heading

I am a heading

gap-2xs

I am a heading

I am a heading

gap-xs

I am a heading

I am a heading

gap-s

I am a heading

I am a heading

gap-m

I am a heading

I am a heading

gap-l

I am a heading

I am a heading

gap-xl

I am a heading

I am a heading

gap-2xl

I am a heading

I am a heading

gap-3xl

I am a heading

I am a heading

gap-4xl

Widths

Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla iaculis praesent cum ante tristique, pellentesque malesuada litora vehicula nostra nec. Hac integer gravida per faucibus tempor felis, condimentum pharetra varius sed nascetur venenatis potenti, tristique sollicitudin fusce metus congue. Nibh tellus aenean dictum vestibulum sed hac quis integer, eros bibendum nec primis cursus nulla ad vel, non velit sociosqu id dictumst nisi per.

Max-width - 350

Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla iaculis praesent cum ante tristique, pellentesque malesuada litora vehicula nostra nec. Hac integer gravida per faucibus tempor felis, condimentum pharetra varius sed nascetur venenatis potenti, tristique sollicitudin fusce metus congue. Nibh tellus aenean dictum vestibulum sed hac quis integer, eros bibendum nec primis cursus nulla ad vel, non velit sociosqu id dictumst nisi per.

Max-width - 500

Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla iaculis praesent cum ante tristique, pellentesque malesuada litora vehicula nostra nec. Hac integer gravida per faucibus tempor felis, condimentum pharetra varius sed nascetur venenatis potenti, tristique sollicitudin fusce metus congue. Nibh tellus aenean dictum vestibulum sed hac quis integer, eros bibendum nec primis cursus nulla ad vel, non velit sociosqu id dictumst nisi per.
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla iaculis praesent cum ante tristique, pellentesque malesuada litora vehicula nostra nec. Hac integer gravida per faucibus tempor felis, condimentum pharetra varius sed nascetur venenatis potenti, tristique sollicitudin fusce metus congue. Nibh tellus aenean dictum vestibulum sed hac quis integer, eros bibendum nec primis cursus nulla ad vel, non velit sociosqu id dictumst nisi per.

Max-width - 750

Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla iaculis praesent cum ante tristique, pellentesque malesuada litora vehicula nostra nec. Hac integer gravida per faucibus tempor felis, condimentum pharetra varius sed nascetur venenatis potenti, tristique sollicitudin fusce metus congue. Nibh tellus aenean dictum vestibulum sed hac quis integer, eros bibendum nec primis cursus nulla ad vel, non velit sociosqu id dictumst nisi per.
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla iaculis praesent cum ante tristique, pellentesque malesuada litora vehicula nostra nec. Hac integer gravida per faucibus tempor felis, condimentum pharetra varius sed nascetur venenatis potenti, tristique sollicitudin fusce metus congue. Nibh tellus aenean dictum vestibulum sed hac quis integer, eros bibendum nec primis cursus nulla ad vel, non velit sociosqu id dictumst nisi per.

Max-width - 1000

Box Shadows

box-shadow-xs

box-shadow-s

box-shadow-m

box-shadow-l

box-shadow-xl

Border Radius

border-radius-xs

border-radius-s

border-radius-m

border-radius-l

border-radius-xl

border-radius-

border-radius-xs

Border Radius

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

Opacity

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

box-shadow-xs

border-radius-xs

Section Padding

padding-vertical-4xl

padding-vertical-3xl

padding-vertical-2xl

padding-vertical-xl

padding-vertical-l

padding-vertical-m

padding-vertical-s