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

Button Sizes

Theme Colors

Feedback Colors

Grays & White

Circle Buttons

Icons

Sign up with Google

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

Body Text

Small Text

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.

With Foot

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

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

The form submission was a success!

There was an issue with the form submission!

Shadows

Preset styles to imply depth on interface components

Shadow Small

Shadow

Shadow Large

Dropdowns

Preset styles to imply depth on interface components

Tooltips

Provide additional information in a small pop-up.

Hover on this icon

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.