Style Guide

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

Colors

A conveniently prepared palette to easily adjust all colors.
Primary Color
Dark Color
Paragraph Color
Border Color
Placeholder Color
Background Color
Secondary 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 extra large
Text large
Text base
Text small
Text extra small
Text underline
Text hover-underline
Text uppercase
text capitalize
Text Lowercase
Text font-normal
Text font-medium
Text font-semibold
Text font-bold

Avatars

Avatars are the premade classes with width, height, border radius & box shadow
Avatar small
Avatar normal
Avatar large
Avatar extra large

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

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