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

IBM Plex Sans

Heading

Style name: Heading / H1

Font size: 48px

Line height: 1.16em

This is a header 1

Style name: Heading / H2

Font size: 40px

Line height: 1.2em

This is a header 2

Style name: Heading / H3

Font size: 32px

Line height: 1.25em

This is a header 3

Style name: Heading / H4

Font size: 24px

Line height: 1.33em

This is a header 4

Style name: Heading / H5

Font size: 20px

Line height: 1.55em

This is a header 5

Style name: Heading / H6

Font size: 14px

Line height: 1.4em

Transform: All Caps

This is a header 6

Body

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.

Headings

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

#F7F3F2

Neutral 100

#E5E0DF

Neutral 200

#CAC5C4

Neutral 300

#ADA8A8

Neutral 400

#8F8B8B

Neutral 500

#736F6F

Neutral 600

#565151

Neutral 700

#3C3838

Neutral 800

#272525

Neutral 900

#171414

Accent Color

Accent 50

#EFEBE9

Accent 100

#D7CCC8

Accent 200

#BCAAA4

Accent 300

#A1887F

Accent 400

#8D6E63

Accent 500

#795548

Accent 600

#6D4C41

Accent 700

#5D4037

Accent 800

#4E342E

Accent 900

#3E2723

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

Brown 500

Layer usage

Background

White

On Background

Neutral 50

Subtle Border

Neutral 100

Accent Background

Brown 500

Interactive usage

Enabled

Accent 500

Hover

Brown 600

Active

Brown 700

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 (2:1 FR)

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

Class name: 3 Column Grid

Content

Predefined content styling for static and dynamic sources

CMS

Type: CMS Empty State

Items not found.

Aspect Ratio

Name: 6:7

Width: 6unit

Height: 7unit

Name: 4:3

Width: 4unit

Height: 3unit

Name: 16:9

Width: 16unit

Height: 9unit

Name: 5:2

Width: 5unit

Height: 2unit

Text Box

Width: 32 Characters

Width: 40 Characters

Width: 48 Characters

Width: 64 Characters

Width: 80 Characters