Styleguide

Colors

Brand Colors
pacific-blue --color-pacific-blue
gold --color-gold
clay --color-clay
sail-canvas --color-sail-canvas
new-white --color-new-white
asphalt --color-asphalt
white --color-white

Color Schemes

Use .color-{scheme-id} class.

scheme-1
.color-background-1

Scheme 1

This is the Highlighted Text.

This is the Body Text.

scheme-2
.color-background-2

Scheme 2

This is the Highlighted Text.

This is the Body Text.

scheme-3
.color-inverse

Scheme 3

This is the Highlighted Text.

This is the Body Text.

scheme-4
.color-accent-1

Scheme 4

This is the Highlighted Text.

This is the Body Text.

scheme-5
.color-accent-2

Scheme 5

This is the Highlighted Text.

This is the Body Text.

scheme-6
.color-white-on-white

Scheme 6

This is the Highlighted Text.

This is the Body Text.

scheme-7
.color-scheme-f8c015a4-dfd0-4a9b-b03c-8221d2ff9c67

Scheme 7

This is the Highlighted Text.

This is the Body Text.

scheme-8
.color-scheme-246c39c2-578d-46d5-9a75-851c8f56e20a

Scheme 8

This is the Highlighted Text.

This is the Body Text.

scheme-9
.color-scheme-c76172f0-ec5d-4707-83c5-28cdcc70d184

Scheme 9

This is the Highlighted Text.

This is the Body Text.

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 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.

Highlighted
.text-highlighted
This color can be customized in the color schema settings.

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-background-1
Link Button
scheme-2
.color-background-2
Link Button
scheme-3
.color-inverse
Link Button
scheme-4
.color-accent-1
Link Button
scheme-5
.color-accent-2
Link Button
scheme-6
.color-white-on-white
Link Button
scheme-7
.color-scheme-f8c015a4-dfd0-4a9b-b03c-8221d2ff9c67
Link Button
scheme-8
.color-scheme-246c39c2-578d-46d5-9a75-851c8f56e20a
Link Button
scheme-9
.color-scheme-c76172f0-ec5d-4707-83c5-28cdcc70d184
Link Button
Social Buttons

Button Modifiers

NOTE: Button Modifiers only works for all buttons.

Full Width
Large
Square

Input fields

Default input