color
Typography
Spacing
Button
Tags
Images
Icons
Forms
Cards
Tabs
Slider
Accordion
Dropdown
Rich Text
Divider
Tab 16

Colot Palete

Core Colors
Cinamon Stick
Hover
Sudan
Hover
Accent Tertiary
Hover
Brush
Secondary
Vinyard Green
Tints
Cinamon Stick
A90
A80
A70
A60
A50
A40
A30
A20
A10
Sudan
A90
A80
A70
A60
A50
A40
A30
A20
A10
Accent Tertiary
A90
A80
A70
A60
A50
A40
A30
A20
A10
Brush
A90
A80
A70
A60
A50
A40
A30
A20
A10
Vinyard Green
A90
A80
A70
A60
A50
A40
A30
A20
A10

Background color

Section classes and background utility classes are using variables to adjust background and font color of nested text elements.

Primary (Default)

Heading

Well-crafted paragraph text is more than just a collection of letters
Secondary

Heading

Well-crafted paragraph text is more than just a collection of letters
Accent Primary

Heading

Well-crafted paragraph text is more than just a collection of letters
Accent Secondary

Heading

Well-crafted paragraph text is more than just a collection of letters
Accent Tertiary

Heading

Well-crafted paragraph text is more than just a collection of letters
Inverse

Heading

Well-crafted paragraph text is more than just a collection of letters

Typography

Headings tags and classes are connected through the variables which helps to keep them consistent.

Headings
Title
Preview
display-xxl

DISPLAY-XXL

display-1

DISPLAY-1

display-2

DISPLAY-2

display-3

DISPLAY-3

display-4

DISPLAY-4

display-5
DISPLAY-5
display-6
DISPLAY-6
Paragraph
Title
Preview
body-xxl

A well-crafted typeface is more than just a collection of letters— it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

body-xl

A well-crafted typeface is more than just a collection of letters — it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

body-lg

A well-crafted typeface is more than just a collection of letters — it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

body-base

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

body-sm

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

body-XS

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

Other text elements
Title
Preview
subheading
A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
quote
Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.
eyebrow
Adventure Awaits
ul
  • Use white space to improve text legibility.
  • Make typography responsive for all screen sizes.
  • Use proper line spacing for easy readability.
lo
  1. Make typography responsive for all screen sizes.
  2. Use proper line spacing for easy readability.
  3. Use white space to improve text legibility.

Spacing

Spacing styles such as margins, paddings, and gaps are using predefined set of REM-based variables and applied directly to component classes.

Read docs
Gap

Set of variables used for grid and flex layouts.
Read docs

Variable
Preview
XXS Gap
XS Gap
SM Gap
MD Gap
LG Gap
XL Gap
XXL Gap
Spacing

To keep spacing consistent, most of the text elements and components have spacing applied as margin or padding.

Preview
Adventure Awaits

Headings embody the voice of a brand

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
Button TextButton Text

Buttons

Every type of buttons have 2 properties: color and size.

Read docs
Primary
Preview
Small Primary
Small Secondary
Default
Button TextButton TextButton TextButton Text
On Inverse
Button TextButton TextButton TextButton Text
On Accent Primary
Button TextButton TextButton TextButton Text
On Accent Secondary
Button TextButton TextButton TextButton Text
On Accent Tertiary
Button TextButton TextButton TextButton Text

Text Button

Primary
Small Secondary
Default
Text Button
Text Button
On Inverse
Text Button
Text Button
On Accent Primary
Text Button
Text Button
On Accent Secondary
Text Button
Text Button
On Accent Tertiary
Text Button
Text Button

Link

Primary Link
Small Secondary Link
Default
Text LinkText Link
On Inverse
Text LinkText Link
On Accent Primary
Text LinkText Link
On Accent Secondary
Text LinkText Link
On Accent Tertiary
Text LinkText Link

Tags

Every type of tags have 2 properties: color and size.

Read docs
Primary
Tag Label
Inerse
Tag Label
On Inverse
Tag Label
On Accent Primary
Tag Label
On Accent Secondary
Tag Label
On Accent Tertiary
Tag Label

Images

Read docs
Image

Images are wrapped into a div with a class ratio_(value). It helps to control an aspect ratio of the image, takes care of overflow behavior and has a radius applied.

Preview
Avatar

Avatar size can be adjusted with combo classes.

Option
Preview
Small Avatar
Default Avatar
Large Avatar

Icons

Read docs
Extra Small
Small
Default
Large
Extra Large
Default
On Inverse
On Accent Primary
On Accent Secondary
On Accent Tertiary

Forms

Read docs
On Primary Color
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On Inverse Color
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On accent
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On accent secondary
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On accent tertiary
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Cards

Read docs
Default Card

A different heading, so it doesn't look repetitive.

Read post
Secondary Card

A different heading, so it doesn't look repetitive.

Read post
Inverse Card

A different heading, so it doesn't look repetitive.

Read post
Accent Primary

A different heading, so it doesn't look repetitive.

Read post
Accent Secondary

A different heading, so it doesn't look repetitive.

Read post
Accent Tertiary

A different heading, so it doesn't look repetitive.

Read post
On Secondary

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

On Inverse

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

On Accent Primary

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

On Accent Secondary

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

On Accent Tertiary

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tabs

Read docs
On Primary
Tab 1
Tab 2
This is some text inside of a tab block.
This is some text inside of a tab block.
Tab Underline Style
Tab 1
Tab 2
This is some text inside of a tab block.
This is some text inside of a tab block.
On Inverse
Tab 1
Tab 2
This is some text inside of a tab block.
This is some text inside of a tab block.
On Accent Primary
Tab 1
Tab 2
This is some text inside of a tab block.
This is some text inside of a tab block.
On Accent Secondary
Tab 1
Tab 2
This is some text inside of a tab block.
This is some text inside of a tab block.
On Accent Tertiary
Tab 1
Tab 2
This is some text inside of a tab block.
This is some text inside of a tab block.

Slider

Read docs
Default
Inverse

Accordion

Read docs
Title
Preview
Accordion
Accordion Label
Accordion Label
Accordion Label
Accordion opened
Accordion Label

Dropdown

Read docs
Title
Preview
Dropdown
Dropdown
Dropdown opened

Rich Text

Read docs
Preview

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Divider

Dividers have two types: horizontal and vertical

Horizontal Primary
Horizontal Secondary
Horizontal Accent
Vertical Primary
Vertical Secondary
Vertical Accent

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript