Styleguide

Colors

Brand Colors
foreground --color-foreground
background --color-background
grey --color-grey
black --color-black
yellow --color-yellow
Secondary Colors
pink --color-pink
pink 2 --color-pink-2
pink 3 --color-pink-3
red --color-red
green-2 --color-green-2

Color Schemes

Use .color-{scheme-id} class.

scheme-1
.color-scheme-1

Scheme 1

This is the default color scheme.

scheme-2
.color-scheme-2

Scheme 2

This is the second scheme option.

scheme-3
.color-scheme-3

Scheme 3

This is the thirth scheme option.

scheme-4
.color-scheme-4

Scheme 4

This is the fourth scheme option.

scheme-5
.color-scheme-5

Scheme 5

This is the fourth scheme option.

Typography

Headings

These are the default styles fore headings, will be applied in the whole website.
You can set a class to a different heading tag. Eg.
We can set .h2 styles to an H1 element: <h1 class=".h2">Heading<h1> class.

Heading 0

Heading 0

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5
Heading 5
Heading 6
Heading 6

Text

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.

Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
List
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Text Helpers

Use .text-{property} class.

Text Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.

Text Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.

Text Justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.

Button

Buttons by Color Scheme

scheme-1
.color-scheme-1
scheme-2
.color-scheme-2
scheme-3
.color-scheme-3
scheme-4
.color-scheme-4
scheme-5
.color-scheme-5
Social Buttons

Button Modifiers

NOTE: Button Modifiers only works for all buttons.

Full Width
Large
Small
Square
Rounded

Input fields

Default input