Style Guide

A complete guide to ScholarMatch's interface elements.
Colors
A complete color swatch used to color all interface elements on the website.
Primary
Burgundy
#8d1f40
Gold
#cccc99
Dark Blue
#16386e
Maize
#eeaa1f
Secondary
Purple
#272929
Gray 2
#62636B
Gray 3
#ECEBEA
Gray 4
#F8F6F4
Black, Whites, & Grays
Black
#494949
White
#FFFFFF
Gray
#F19953
Buttons
Component, text style and size variations
Typography
Headings, body and other common text elements.

Heading

H1 / Tungsten / 80px

Heading

H2 / Tungsten / 60px

Heading

H3 / Tungsten / 50px

Heading

H4 / Tungsten / 34px

Heading Five

H5 / Inter / 14px

Heading 6

H6 / inter / bold / 14px

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.

Paragraph (GLOBAL) / inter / bold / 14px

For over a decade, ScholarMatch has stood alongside passionate individuals, dedicated families, and compassionate organizations, working together to empower students and transform lives through education.

Paragraph - large / inter / bold / 14px

For over a decade, ScholarMatch has stood alongside passionate individuals, dedicated families, and compassionate organizations, working together to empower students and transform lives through education.

Paragraph - large / inter / bold / 14px

Heading Six - Class H6 Small
Text Large   
Link Large
Body Text  
Body Link
Small Text   
Small Link
text caps
Lists
Headings, body and other common text elements.
Unstyled <ul></ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • Dope
  • Sick
  • Amazing
Icons - Interface
Headings, body and other common text elements.
Icons - Social
Icons for popular social networks.
Badges
Combine with other components to display metadata
Default
Badge Text
Theme Colors
Primary 1
Primary 2
Primary 3
Feedback Colors
Success
Warning
Error
Cards
A multipurpose component used to display content in boxed format.
Default Styles
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Foot
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
Form Inputs
Styles for form inputs and form feedback states.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio & Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Feedback
Shadows
Preset styles to imply depth on interface components
Shadow Small
Shadow
Shadow Large
Tooltips
Provide additional information in a small pop-up.
Hover on this icon
?
Here is a message to help explain the content.
Avatars
Multiple sizes and styles to represent users around the interface.
Avatar Sizes
Avatar Group
Avatar Indicators
Avatar with name
Katherine Cho
WE ARE SCHOLARMATCH

TOGETHER,
WE IGNITE POTENTIAL

For over a decade, ScholarMatch has stood alongside passionate individuals, dedicated families, and compassionate organizations, working together to empower students and transform lives through education.

WE ARE SCHOLARMATCH

TOGETHER,
WE IGNITE POTENTIAL

For over a decade, ScholarMatch has stood alongside passionate individuals, dedicated families, and compassionate organizations, working together to empower students and transform lives through education.

WE ARE SCHOLARMATCH

TOGETHER,
WE IGNITE POTENTIAL

For over a decade, ScholarMatch has stood alongside passionate individuals, dedicated families, and compassionate organizations, working together to empower students and transform lives through education.