Design Guideline

Colors

Brand Color

Primary

Primary 10%

Primary 30%

Primary 50%

Primary 70%

Primary 90%

Secondary

Secondary 10%

Secondary 30%

Secondary 50%

Secondary 70%

Secondary 90%

Neutral

Grayscale

Grayscale 10%

Grayscale 30%

Grayscale 50%

Grayscale 70%

Grayscale 90%

Background Color

Base

Main Background

Variant Background

Border

Border

Typography

Headings

Heading 1

The quick brown fox jumps over the lazy dog

Heading 2

The quick brown fox jumps over the lazy dog

Heading 3

The quick brown fox jumps over the lazy dog

Heading 4

The quick brown fox jumps over the lazy dog

Heading 5

The quick brown fox jumps over the lazy dog

Heading 6

The quick brown fox jumps over the lazy dog

Subtitle

The quick brown fox jumps over the lazy dog

Body Fonts

Text

The quick brown fox jumps over the lazy dog

Button

The quick brown fox jumps over the lazy dog

Huge

The quick brown fox jumps over the lazy dog

Tiny

The quick brown fox jumps over the lazy dog

Components

Button

Variant

Counter

Main

Form

Primary