Style Guide

Use this style guide to see common components at a glance.

Colors

A conveniently prepared palette to easily adjust all colors.

To select a specific color, select the swatch icon in the top small black bar toward the upper left next to the pointer icon.

Primary Color

Secondary Color

Dark Color

Paragraph Color

Border Color

Placeholder Color

Background Color

Light Color

Paragraph Alt

Border Alt Color

Placeholder Alt

Background Alt

Tertiary Color

Black Color

White Color

Success Color

Warning Color

Error Color

Success Light

Warning Light

Error Light color

Extra Color-1

Extra Color-2

Extra Color-3

Extra Color-4

Typography

Headings, body and other common text elements.

Heading H1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Text double extra large - text-2xl

Text extra large - text-xl

Text large - text-lg

Text small - text-sm

Text extra small - text-xs

Paragraph Styling - color-paragraph

Text underline

Text hover-underline

Text uppercase

text capitalize

Text Lowercase

Text font-normal

Text font-medium

Text font-semibold

Text font-bold

Icons

Common interface iconography

icon-xl-primary

icon-lg-primary

icon-md-primary

icon-sm-primary

icon-3xl-light

icon-2xl-light

icon-xl-light

icon-lg-light

icon-md-light

icon-sm-light

icon-xl-dark

icon-lg-dark

icon-md-dark

icon-sm-dark

icon-lg-paragraph

icon-md-paragraph

icon-sm-paragraph

icon-solid-lg-primary

icon-solid-md-primary

icon-solid-sm-primary

icon-solid-lg-light

icon-solid-md-light

icon-solid-sm-light

Buttons

Component, text style and size variations

Cards

Cards are the premade classes with paddings, width & border radius

"Card Tight" class contain 1 rem padding, 100% width & 0.5 rem border-radius

"Card Snug" class contain 1.5 rem padding, 100% width & 0.5 rem border-radius

"Card Normal" class contain 2 rem padding, 100% width & 0.5 rem border-radius

"Card Relaxed" class contain 3 rem padding, 100% width & 0.5 rem border-radius

"Card Loose" class contain 4 rem padding, 100% width & 0.5 rem border-radius

"Card None" class contain 100% width & 0.5 rem border-radius

Shadows

All types of shadows classes

shadow-xs

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

shadow-inner

shadow-none