Style Guide + UI toolkit

The colors were taken from the Harvard Graphic Identity Standards Manual from 2017, download here.

All fonts are open source and free to download from the links below. Newsreader was chosen as a complementary serif font to pair with the sans serif Source Sans Pro for body text and Trueno for navigation, buttons and smaller headings (in use by the Harvard Library website).

— Colour Palette

Primary - Ink

#1E1E1E

Secondary – Slate

#8996A0

Accent – Gold

#C4961A

Slate- lighter

#E1E4E7

Parchment

#F3F3F1

Shade

#BAC5C6

Crimson

#A51C30

Primary – Ink: Headings
Secondary – Ink: secondary color for borders, icons, buttons
Accent – Gold: for links, active links, hover state in navigation
Slate – lighter: for backgrounds
Parchment: footer background, with Shade as top border
Crimson: Harvard social media icons

— Typography

Newsreader

For headings
Download from Google Fonts

Trueno

For headings, navigation + buttons
Download from Font Library

Source Sans Pro

For body text
Download from Google Fonts

Heading text color is Primary Ink #1E1E1E, with a weight of 500. Size is in em based on a body/base font size of 16px, using EM size setting as best practice.

H1 Heading – 2.5em, 500 – Newsreader

H2 Heading – 2em, 500 – Newsreader

H3 Heading – 1.75em, 500 – Newsreader

H4 Heading – 1.2em, 500 – Newsreader

H5 Heading – 1.2em, 500 – Trueno

H6 Heading – 1em, 600 – Trueno

Body text – 16px, 400, Source Sans Pro, color #5E5E5E (p margin 1.2em)

Lorem ipsum dolor sit amet tincidunt quisque duis massa mauris eros. Maecenas praesent elit malesuada mi mattis arcu incididunt quis congue rhoncus. Condimentum tempus velit odio lacinia sapien orci lacinia ac tellus labore porta. Phasellus cras integer adipiscing dictum mollis sodales tristique. Do sapien proin est consectetur arcu ultrices dui.

Eiusmod vulputate ornare mi fermentum neque augue egestas. Etiam aliquet sollicitudin nisl tincidunt eget neque suspendisse bibendum. Auctor quisque sodales nulla netus volutpat eu mollis sagittis eiusmod phasellus pellentesque mi nec. Pretium hendrerit orci congue luctus venenatis maecenas phasellus quisque a blandit nisl ullamcorper nunc eu. Porta non molestie sollicitudin leo dapibus eget at venenatis ullamcorper aliquet tellus leo.

Ullamcorper congue nunc at scelerisque lectus nunc vulputate proin nisi hendrerit eleifend senectus. Tempor pretium netus dapibus aliquet diam arcu dictumst congue lobortis viverra at aliquam. Dui vulputate nibh id vulputate do orci arcu netus egestas quis fermentum feugiat euismod dictumst. Lectus laoreet interdum aenean dapibus sapien laoreet sed. Incididunt lectus tincidunt gravida molestie fusce ac aliquam laoreet massa eiusmod porttitor fermentum ut mattis.

Pellentesque sed hac lacus mollis ut mollis sodales pellentesque vivamus tristique porta ornare lectus ac. Vitae urna habitasse eros ac nisl porta arcu volutpat. Tempus blandit leo malesuada dictum dictumst auctor curabitur vivamus lacinia aliquam dui interdum.

— Buttons and links

All in body text links should be in the accent color gold and with a weight of 600. The hover color for text links are a darker tint of the accent gold: #9A781A

Heading links do not use a different weight.

Buttons are Accent Gold (#C4961A) background with white text (#fff) in Trueno uppercase, with a hover state of Slate (#8996A0) background.