Style Guide

This style guide page contains styles and components commonly used across the website design. You can manage styles from here which will reflect on the entire site.
‍
Please visit our Instructions page if you need any help. Instructions

Typography

Clear hierarchies for headings, body and other common text elements.

Body (All Pages)

Font size: 16px

Line height: 1.5em

Uncut Sans

Heading

Style name: Heading / Jumbo

Font size: 60px

Line height: 1.15em

Transform: All Caps

This is jumbo text

Style name: Display / Max

Font size: 48px

Line height: 1.16em

This is a header 1

Style name: Display / X Large

Font size: 40px

Line height: 1.2em

This is a header 2

Style name: Display / Large

Font size: 32px

Line height: 1.25em

This is a header 3

Style name: Display / Medium

Font size: 24px

Line height: 1.33em

This is a heading 4

Style name: Display / Small

Font size: 20px

Line height: 1.55em

This is a header 5

Style name: Display / X Small

Font size: 15px

Line height: 1.4em

Transform: All Caps

This is a header 6

Paragraph

Style name: Paragraph/18px

Font size: 18px

Line height: 1.56em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Style name: Paragraph

Font size: 16px

Line height: 1.5em

Style name: Paragraph/14px

Font size: 14px

Line height: 1.5em

Rich Text

Paragraph

Kind a signs divided brought morning doesn't living. Kind, multiply seasons. Is make tree. I male, above firmament first lesser. Divide above creeping there life.

Behold called give, male first two in had over, the shall Divide heaven fruit grass you'll rule dominion of above beast bring creeping given seasons cattle Shall were earth grass third that can't yielding it.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Link

This is inline text link within rich text

Unordered list

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Sed do eiusmod tempor incididunt ut labore et dolore
Ut enim ad minim veniam, quis nostrud exercitation.

Ordered list

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Sed do eiusmod tempor incididunt ut labore et dolore
Ut enim ad minim veniam, quis nostrud exercitation.

Block quote

I've missed more than 9000 shots in my career. I've lost almost 300 games. 26 times I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed.
‍
~ Michael Jordan

Image with caption

Color

Foundation of color to achieve balance and harmony.

Neutral Color

Neutral 50

#F4F4F4

Neutral 100

#E0E0E0

Neutral 200

#C6C6C6

Neutral 300

#A8A8A8

Neutral 400

#8D8D8D

Neutral 500

#6F6F6F

Neutral 600

#525252

Neutral 700

#393939

Neutral 800

#262626

Neutral 900

#161616

Accent Color

Green 50

#E6ECE9

Green 100

#99B2A4

Green 200

#6F937E

Green 300

#306446

Green 400

#064420

Green 500

#043016

Green 600

#042914

Secondary Color

Milk 50

#FFFEFD

Milk 100

#FDF9F5

Milk 200

#FCF7F1

Milk 300

#FBF3EA

Milk 400

#FAF1E6

Milk 500

#F3E7D9

Milk 600

#F3E7D9

Pure Color

White

#FFFFFF

Black

#000000

Alert Color

Danger

#FA4D56

Warning

#EEC226

Success

#24A148

Information

#377AEE

Color Usage

Color usage brings a unified and recognizable consistency through out template.

Typography usage

Primary

Neutral 900

Secondary

Neutral 600

On Interactive

White

Placeholder

Neutral 500

Disabled

Neutral 400

Link

Green 300

Layer usage

Background

White

On Background

Neutral 50

Subtle Border

Neutral 100

Accent Background

Green 300

Interactive usage

Enabled

Green 300

Hover

Green 400

Active

Green 500

Disabled

Neutral 200

Button

Clickable elements that are used to trigger actions.

Form

Group of related input controls used for submitting data

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Spacer

Tokens for negative area between elements and components.

16px

24px

32px

48px

64px

80px

96px

Grid Layout

Predefined Grid layout to align content through out all the breakpoints

Class name: 2 Column Grid

Class name: 2 Column Grid (1:1.5 FR)

Class name: 3 Column Grid

Content

Predefined content styling for static and dynamic sources

CMS

Type: CMS Empty State

No items found.

Aspect Ratio

Name: 7:9

Width: 7unit

Height: 9unit

Name: 1:1

Width: 1unit

Height: 1unit

Name: 16:9

Width: 16unit

Height: 9unit

Name: 3:1

Width: 3unit

Height: 1unit

Tabs

Text Box

Width: 32 Character

Width: 40 Character

Width: 48 Character

Width: 64 Character

Width: 80 Character