Design Guidance

Color Palette

Black
SCSS: $black
HEX: #0a0a0a

Dark Grey
SCSS: $dark-grey
HEX: #2f2a2b

Light Grey
SCSS: $light-grey
HEX: #938e88

Dark Red
SCSS: $dark-red
HEX: #8f181c

Red
SCSS: $red
HEX: #ac2324

Orange
SCSS: $orange
HEX: #f47c21

Tan
SCSS: $tan
HEX: #d6c3a2

White
SCSS: $white
HEX: #fefefe

Fonts

Fira Sans
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmn
opqrstuvwxyz
1234567890
/*-+!@#$%^&*()
_+-={}[]|\<>,.?/:;"'~`

Fira Sans Medium
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmn
opqrstuvwxyz
1234567890
/*-+!@#$%^&*()
_+-={}[]|\<>,.?/:;"'~`

Serpentine ICG
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmn
opqrstuvwxyz
1234567890
/*-+!@#$%^&*()
_+-={}[]|\<>,.?/:;"'~`

Serpentine ICG Bold
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmn
opqrstuvwxyz
1234567890
/*-+!@#$%^&*()
_+-={}[]|\<>,.?/:;"'~`

Headings

H1	Color: red Font Size: 35px Font Family: Fira Sans Medium
H4	Color: red Font Size: 25.38px Font Family: Fira Sans Medium

H2	Color: red Font Size: 32px Font Family: Fira Sans Medium
H5	Color: light grey Font Size: 18.11px Font Family: Fira Sans Italic

H3	Color: dark grey Font Size: 24.16px Font Family: Serpentine ICG Bold
H6	Color: black Font Size: 16px Font Family: Fira Sans

Content Blocks

Header

Name: Site Description
Location: 2016 Redesign \ Home Page \ Header
ID: 41526

1

Name: First Slide, Second Slide, etc.
Location: 2016 Redesign \ Home Page \ Rotator \ Slides
ID: 41194
Description: Maximum number of lines for text is 7. Text wrapped in p tags. NVIT wrapped in span tags with a serpentine-rotator custom style.

2

Home Page Content

Name: Second Column (Events)
Location: 2016 Redesign \ Home Page \ News/Events
ID: 28043
Description: Text wrapped in h3 tags.

3

Name: First Column
Location: 2016 Redesign \ Home Page \ Social Media
ID: 28045
Description: Text wrapped in h2 tags. #NVIT wrapped inside p tags with a serpentine custom style.

6

Name: Third Column (News)
Location: 2016 Redesign \ Home Page \ News/Events
ID: 28044
Description: Text wrapped in h3 tags.

4

Name: First Column
Location: 2016 Redesign \ Home Page \ News/Events
ID: 28041
Description: Text wrapped in h2 tags.

7

Name: Second Column (Events Image Thumbnail)
Location: 2016 Redesign \ Home Page \ News/Events
ID: 28125
Description: Thumbnail image for event as content block, cannot be a thumbnail image for event as depicted in Notism.

5

Footer

Name: Social Media
Location: 2016 Redesign \ Home Page \ Footer
ID: 28077

8

Name: Quote
Location: 2016 Redesign \ Home Page \ Footer
ID: 28099
Description: Text wrapped in h4 tags. "Knowledge" and "Leaders" wrapped inside span tags with a serpentine-inline custom style.

9

Custom Styles

serpentine-rotator Color: #423e39
Font Size: 19.92px
Font Family: Serpentine ICG Bold

serpentine Color: red
Font Size: 34.62px
Font Family: Serpentine ICG Bold

serpentine-inline Color: red
Font Size: 24.52px
Font Family: Serpentine ICG

BC's Indigenous Public Post-Secondary Institute