Colors

White – #FFFFFF #FFFFFF

SJC Blue – #0246BE #0246BE – this is the primary color which is used all over the place.

Light blue – #3175EC #3175EC – Generally, this is used for link hovers.

Background Blue #1 – #DCE0EC #DCE0EC
Background Blue #2 – #F6F7FA #F6F7FA
Background Blue #3 (vibrant navy) – #061D6E #061D6E

Text Black – #535353 #535353

Full Black – #000000 #000000 – this is used fairly rarely.

Note for the reskin: Gold is no longer part of the brand palette. Most gold elements will become the new SJC blue (#0246be).

Headings and Text

H1 – Title, 60px

Font size: 60px
Font weight: 600
Color: #0246be
Letter Spacing: normal

Note: Only include an H1 if there isn’t a page header above the content. On most pages, the H1 should be added (and styled) automatically

H2 – Title, 44px

Font size: 44px
Font weight: 600
Color: #0246be
Letter Spacing: normal

H3 – Title, 36px

Font size: 36px
Font weight: 600
Color: #0246be
Letter Spacing: normal

H4 – Title, 24px

Font size: 24px
Font weight: 600
Color: #0246be
Letter Spacing: normal

H5 – Title, 24px

Font size: 24px
Font weight: 600
Font style: italics
Color: #535353
Letter Spacing: normal

H6 – TITLE HERE, 16px

Font size: 16px
Font weight: 600
Font style: all caps
Color: #0246be
Letter Spacing: normal

Body Copy, 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique, erat ac venenatis aliquet, velit ex efficitur sapien, et consequat risus ligula vel mauris. Nulla aliquet, purus et tempus placerat, sapien magna fringilla nunc, ut sagittis nulla diam at purus. Nulla convallis tortor vel est laoreet eleifend. In quis tellus vitae nibh maximus ullamcorper. Suspendisse at odio nec orci euismod porttitor. Aenean feugiat dui magna, id sollicitudin libero molestie a. Donec eu sapien pellentesque, tristique purus pharetra, sagittis nulla. Curabitur gravida volutpat neque at dictum. Maecenas mollis turpis leo. Nulla quam tellus, tincidunt at diam sit amet, aliquet pulvinar sem. Nulla quam urna, eleifend vel ligula ut, pellentesque condimentum turpis. Proin pretium tempor neque non tincidunt.

Font size: 16px
Font weight: 400
Color: #535353
Letter Spacing: normal
Line Height: 1.6em;

Links and Buttons

Links are SJC blue (#0246be) and have the light blue for hover (#3175ec)

Button Text
Button Text

When the background area is blue, we can use a white button.

Button Text

Accordion Boxes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabbed Boxes

Icons

Use the icons within the avada builder blocks where possible. These are font-awesome (v5) icons if you’re inserting icons elsewhere

Tables

Deadlines for Admissions
Early Action Nov 15
Nursing Early Action Feb 1
Regular No Deadline
Transfer No Deadline

Table header row is #0246be

Rest of the table is #535353

Row backgrounds should alternate between #DCE0EC and #F6F7Fa

Call Out Boxes

Tours

Take a student-led-tour of our campus. Mon-Fri, times vary.

Learn More

Forms

    Bulleted Lists

    • Kayaking
    • Canoeing
    • Paddle Boarding
    • Swimming
    • Running Trails
    • Fitness classes – over 20 free
    • Classes every week
    • Kayaking

    • Canoeing

    • Paddle Boarding

    • Swimming

    • Running Trails

    • Fitness classes – over 20 free

    • Classes every week

    • Kayaking

    • Canoeing

    • Paddle Boarding

    • Swimming

    • Running Trails

    • Fitness classes – over 20 free

    • Classes every week