Designer Guide - marist-sga/documentation GitHub Wiki

For General Consistency in Design:

Color
Primary Color: White
Secondary Color: Gray #E3E9ED - Used for the Background
Accent Color: Red #E2383F - Associated with Passion, used sparingly
Accent Color 2: Navy #263B7E - Blue is associated with links, used for buttons and links
Accent Color 3: Dark Gray #535353 - Used in the header to show the page you're on, could be used instead of Red as an accent color
Accent Color 4: Light Blue #7CA0D4 - Used in the rollover of links

Hierarchy of Headers
Titles of Pages have a bar above and below the header
Subheaders on Pages just have a bar below the header

Button
Navy Blue Button - Used for buttons on white or light colored backgrounds

White Button - Used on dark backgrounds or images

Card Element
Basic Card Element

View More Mockup

Form Element

Page Mockups
Projects Page

About Us Page

Clubs Page

IT Council Page

Elections Information Page

Mobile Mockups
About Us Page

Clubs Page