• Sign In
  • My Cart 0)

01. Color Scheme

Base Colors

Primary Color - $red-500
Name: heritage-red
[primary]
#E21A23
Secondary Colors - $indigo-700
Name: vibrant-violet
#440B7F
Secondary Colors - $blue-700
Name: academic-blue
#06235B
Secondary Colors - $white
Name: ultra-white
#FFF


Text Colors

display, headers & body
Name: dark-gray
#222
$red-500
Name: heritage-red
[primary]
#E21A23
$blue-700
Name: academic-blue
#06235B
$indigo-700
Name: vibrant-violet
#440B7F
$indigo-100
Name: light-violet
#E3B9FC
$white
Name: ultra-white
#FFF


Background Colors

$gray-200
Name: light-gray
#E5E5E5
$red-100
Name: light-red
#FFE7E7
$white
Name: ultra-white
#FFF
$red-500
Name: heritage-red
[primary]
#E21A23
$blue-700
Name: academic-blue
#06235B
$indigo-700
Name: vibrant-violet
#440B7F


Background Cubic Grid Colors

$gray-400
Name: mid-gray
#CCCCCC
$red-600
Name: maroon
#B71622
$red-200
Name: dusty-red
#E5D1D1
$indigo-500
Name: electric-grape
#5F14C1
$blue-600
Name: oxford-blue
#083377
02. Typography
Header Font

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890!@#$%^&*()_+<>
Body Font

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890!@#$%^&*()_+<>
Displays
Display 1
Display 2
Display 3
subheading
paragraph
text-xl
text-l
Text-m
Text-default
Text-s
Text-xs
Text-xxs
Header Styles with Responsive Fluid Scaling

H1

H2

H3

H4

H5
H6


Text Default

Paragraph

Subheading

Light title

Regular title

Medium title

Semi-bold title

Bold title

Extra Bold title

Body Copy Sizing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam architecto at beatae consectetur debitis eligendi esse harum magni natus perspiciatis provident quidem quod quos sequi totam unde, velit veritatis! Excepturi harum hic impedit nostrum rem repudiandae. Aliquam dolor, minima nam pariatur qui quibusdam quod rerum unde velit voluptas? Cumque doloremque et incidunt iure laborum! Accusamus aliquid atque blanditiis consequuntur culpa cupiditate, doloribus facere fugiat inventore itaque iure iusto labore magnam magni maiores natus nobis officiis quae quibusdam ratione rem voluptas voluptatibus. Ad deleniti ducimus eligendi expedita impedit, incidunt odio officia? Assumenda ex facilis in itaque laborum ratione sequi temporibus!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur commodi eos fugit hic necessitatibus nemo nisi, odit quae reprehenderit! Aspernatur corporis culpa deleniti dolorem et impedit in incidunt, nobis officia placeat possimus provident ratione recusandae repellendus reprehenderit repudiandae sit suscipit unde vel voluptates. Ad corporis dicta dolorem ducimus expedita facere fugiat, id illo ipsum itaque laudantium officiis quas, saepe.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, cupiditate delectus dignissimos eligendi illo laboriosam laborum qui quo quos reprehenderit?

03. UI Elements - MHE Base theme
Buttons (Loudness Guide)
Link
Type
Volume
Frequency
Use
Graphic
Scream
Selectively
Promo 
button-base button-promo
Button
Yell
Rare
Brand, Registration, help 
button-base button-yell
Button
Shout
Occasionally
Editing, Actions 
button-base button-shout
Button
Cheer
Cheer Inverted
Often
Primary Button 
button-base button-cheer
button-base button-cheer-inverted
Button
Murmur
Occasionally
Secondary Button 
button-base button-murmur
Link
Whistle
Often
Primary text link 
button-base button-whistle
Link
Whisper
Occasionally
Secondary text link 
button-base button-whisper
03.a Button Rebrand - Default / Solid
Link
Type
Use
Button Primary
btn btn-primary
Button Secondary
btn btn-secondary
Link
btn btn-link
Button Success
btn btn-primary btn-success
Button Danger
btn btn-primary btn-danger
Button Warning
btn btn-primary btn-warning
Button Info
btn btn-primary btn-info
Button Dark
btn btn-primary btn-dark
Button Light
btn btn-primary btn-light
03.b Button Rebrand - Outline
Link
Type
Use
Button Outline Primary
btn btn-outline-primary
Button Outline Secondary
btn btn-outline-secondary
Button Success
btn btn-outline-success
Button Danger
btn btn-outline-danger
Button Warning
btn btn-outline-warning
Button Info
btn btn-outline-info
Button Dark
btn btn-outline-dark
Button Light
btn btn-outline-light
03.c Button Rebrand - Group
Pagebuilder grouped buttons
default grouped buttons
default grouped buttons with inner spans
default grouped a tags
Choose Now Choose Now Choose Now
default grouped a tags with inner spans
Choose Now Choose Now Choose Now
04 Icon Rebrand
mhe-icon mhe-icon--arrow-button-right
mhe-icon mhe-icon--arrow-directional-down
mhe-icon mhe-icon--arrow-directional-left
mhe-icon mhe-icon--arrow-directional-right-2
mhe-icon mhe-icon--arrow-directional-up
mhe-icon mhe-icon--arrow-hard-down
mhe-icon mhe-icon--arrow-hard-left
mhe-icon mhe-icon--arrow-hard-right
mhe-icon mhe-icon--arrow-hard-up
mhe-icon mhe-icon--arrow-soft-down
mhe-icon mhe-icon--arrow-soft-left
mhe-icon mhe-icon--arrow-soft-right
mhe-icon mhe-icon--arrow-soft-up
mhe-icon mhe-icon--basket
mhe-icon mhe-icon--book text-red-500
mhe-icon mhe-icon--box-arrow-up-right text-yellow-500
mhe-icon mhe-icon--bulb text-blue-500
mhe-icon mhe-icon--calendar text-gray-500
mhe-icon mhe-icon--camera text-green-500
mhe-icon mhe-icon--cart text-cyan-500
mhe-icon mhe-icon--chevron-down text-indigo-500
mhe-icon mhe-icon--chevron-left text-purple-500
mhe-icon mhe-icon--chevron-right text-pink-500
mhe-icon mhe-icon--chevron-up text-orange-500
mhe-icon mhe-icon--clock
mhe-icon mhe-icon--close
mhe-icon mhe-icon--cog
mhe-icon mhe-icon--collection
mhe-icon mhe-icon--compare
mhe-icon mhe-icon--dash-lg
mhe-icon mhe-icon--dash
mhe-icon mhe-icon--display
mhe-icon mhe-icon--edit
mhe-icon mhe-icon--file-earmark-arrow-down
mhe-icon mhe-icon--files-text
mhe-icon mhe-icon--files
mhe-icon mhe-icon--grid-list
mhe-icon mhe-icon--grid
mhe-icon mhe-icon--heart-solid
mhe-icon mhe-icon--heart
mhe-icon mhe-icon--info
mhe-icon mhe-icon--journals
mhe-icon mhe-icon--list
mhe-icon mhe-icon--mail
mhe-icon mhe-icon--menu-2
mhe-icon mhe-icon--menu
mhe-icon mhe-icon--person
mhe-icon mhe-icon--pin
mhe-icon mhe-icon--plus-lg
mhe-icon mhe-icon--plus
mhe-icon mhe-icon--receipt
mhe-icon mhe-icon--search-rounded
mhe-icon mhe-icon--search
mhe-icon mhe-icon--share
mhe-icon mhe-icon--speech-bubble
mhe-icon mhe-icon--star
mhe-icon mhe-icon--tablet
mhe-icon mhe-icon--telephone
mhe-icon mhe-icon--tick-checkbox
mhe-icon mhe-icon--tick-squared
mhe-icon mhe-icon--tick
mhe-icon mhe-icon--trash
mhe-icon mhe-icon--user
mhe-icon mhe-icon--x-lg
Icons within buttons
04. Inputs
Form
This is a required field.
Checkboxes
Radio Button
05. Site Messages
Successfully completed the action that has happened.
Failed to complete the action that has happened.
This message is a warning.
This message is for your information.
This section is empty.
This section is for your notice.