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.4em
IBM Plex Sans
Headings
Style name: H1
Font size: 48px
Line height: 1.16em

This is heading 1

Style name: H2
Font size: 40px
Line height: 1.2em

This is heading 2

Style name: H3
Font size: 32px
Line height: 1.25em

This is heading 3

Style name: H4
Font size: 24px
Line height: 1.33em

This is heading 4

Style name: H5
Font size: 20px
Line height: 1.4em
This is heading 5
Body
Style name: Paragraph/18px
Font size: 18px
Line height: 1.56em

This is a paragraph with 18px font size. Be tree was upon from gathered our doesn't is seed In after place. Give form. Fill Beginning. Blessed own living she'd days of. Brought he heaven rule. Image Is let was, be creeping, seas meat. Them from dry. Sea it divide gathered i Multiply herb.

Style name: Paragraph/16px
Font size: 16px
Line height: 1.5em

This is a paragraph with 16px font size. Be tree was upon from gathered our doesn't is seed In after place. Give form. Fill Beginning. Blessed own living she'd days of. Brought he heaven rule. Image Is let was, be creeping, seas meat. Them from dry. Sea it divide gathered i Multiply herb.

Style name: Paragraph/14px
Font size: 14px
Line height: 1.5em

This is aparagraph with 14px font size. Be tree was upon from gathered our doesn't is seed In after place. Give form. Fill Beginning. Blessed own living she'd days of. Brought he heaven rule. Image Is let was, be creeping, seas meat. Them from dry. Sea it divide gathered i Multiply herb.

Rich Text
Headings

Heading 1

Heading 2

Heading 3

Heading 4

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

Text link
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
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  2. Sed do eiusmod tempor incididunt ut labore et dolore
  3. Ut enim ad minim veniam, quis nostrud exercitation.
Image with caption
Image inside rich text with caption example
Image caption here
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
Color
Foundation of color to achieve balance and harmony.
Neutral Colors
Neutral 50
#f2f4f8
Neutral 100
#dde1e6
Neutral 200
#c1c7cd
Neutral 300
#a2a9b0
Neutral 400
#878d96
Neutral 500
#697077
Neutral 600
#4d5358
Neutral 700
#343a3f
Neutral 800
#21272a
Neutral 900
#121619
Accent Color
Accent 400
#1F4ECC
Accent 500
#1A40A9
Accent 600
#143385
Accent 700
#0F2562
Pure Color
White
#FFFFFF
Black
#000000
Color Usage
Color usage brings a unified and recognizable consistency through out template.
Typography Usage
Neutral 900
Primary
Neutral 600
Secondary
White
On Interactive
Neutral 300
Placeholder
Neutral 400
Disabled
Accent 500
Link
Layer Usage
Background
White
On Background
Neutral 50
Subtle Border
Neutral 100
Accent Background
Accent 500
Interactive Usage
Enabled
Accent 500
Hover
Accent 600
Active
Accent 700
Disabled
Neutral 200
Inverse Usage
Background
Neutral 900
On Inverse BG
Neutral 800
Primary text
White
Secondary text
Neutral 50
Subtle border
Accent 400
Button
Clickable elements that are used to trigger actions.
From
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: 3 Column Grid
Content
Predefined content styling for static and dynamic sources
CMS
Type: CMS Empty State
empty state illustration
No items found.
Aspect Ratio
Name: 7:9
Width: 7%
Height: 9%
3D animated image
Name: 5:4
Width: 5%
Height: 4%
3D animated image
Name: 16:9
Width: 16%
Height: 9%
3D animated image
Text Box
Width: 48 Characters

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.

Width: 64 Characters

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.

Width: 80 Characters

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.

Motivated by more than money?
Feel free to contact me if you have any questions, are interested in working together or just want to have a chat.
hello@yourdomain.com ↗