Web Style Guide
Rochester Institute of Technology
Web Style Guide
Header
RIT Header Example
Logo
Name
Utility Navigation Bar
Primary Navigation Bar
Slab Nav
Optional Secondary Links
Secondary Navigation
Web Colors
Typography
Font Stack
Headers
Paragraph and Articles
Module-Specific
Headlines and Text Links
Buttons & Icons
Buttons
Icons
Tags
Play Icons
Horizontal Rules
Contextual Example
Images
Hero
Crop Ratios
Vertical Video
Animation
Accordions
Areas of Study
Forms
Fields
Icons
Tags
02 - 09
02
03
04
05-06
07
08
09
10 - 11
12
13 - 19
13
14-15
16-17
18
19
17
19 - 20
18
19
20
20 - 25
20
21
22
23
24
25
26 - 28
26
27
28
29
30 - 31
32
Rochester Institute of Technology
Forms
Input Fiends
Checkboxes, Radio Buttons
Manu Dropdowns
Mobile Interface
Headers and Hero Images
Footers
Navigation
Typography
33 - 35
33
34
35
36 - 40
36
37
38
39-40
RIT Header
Helvetica Neue (Bold) 18.67px ! Helvetica Neue (Bold) #727578 ! Helvetica Neue (Bold) 18.67px !
Helvetica Neue Bold 14
Helvetica Neue Bold 18
Helvetica Neue Bold 36
HELVETICA NEUE BOLD UPPERCASE 12 HELVETICA NEUE BOLD UPPERCASE 12
HELVETICA NEUE BOLD UPPERCASE 12
Helvetica Neue (Bold) 18.67px ! Helvetica Neue (Bold) #727578 ! Helvetica Neue (Bold) 18.67px !
Helvetica Neue Bold 14
Helvetica Neue Bold 36
HELVETICA NEUE BOLD UPPERCASE 12
HELVETICA NEUE BOLD UPPERCASE 12 HELVETICA NEUE BOLD UPPERCASE 12
University Header
College & Division Header
Isolated RIT logo used on all university-level
pages where Rochester Institute of Technology
appears as the site title
Logo lockup used on all college/division,
and non-university level pages
LOGO
USAGE
Header – Logo
Golisano College of
Computing and Information Sciences
College of Science
College names line-wrap to the second
line after the word “of”
Exceptions for shorter organization
names such as “College of Science”
Top Line Helvetica Neue (Bold) / 18px
(1.125rem) / Letter-Spacing 0 / Text-
Align Center
Bottom Line Helvetica Neue (Bold) /
36px (2.25rem) / Letter-Spacing
-0.05rem / Line-Spacing 36px (2.25rem)
Text-Align Center
In shorter name instances, use larger
text style on one line
Rochester Institute of Technology
Full Name of Institution, Center,
or Division
Helvetica Neue (Bold) / 36px (2.25rem) /
Letter-Spacing -0.05rem / Text-Align
Center
NAME OF ORGANIZATION
USAGE
All Hex Values #000000 Unless Stated
Header – Name
PARTNERS
ALUMNI
FACULTY AND STAFF
PARENTS
CURRENT STUDENTS
FUTURE STUDENTS
Hover State
Helvetica Neue (Bold) / 12px
(0.75rem) / Letter-Spacing 0 / #C75300
PARTNERS
ALUMNI
FACULTY AND STAFF
PARENTS
CURRENT STUDENTS
FUTURE STUDENTS
Active State
Helvetica Neue (Bold) / 12px
(0.75rem) / Letter-Spacing 0 / #727578
Helvetica Neue (Bold) / 12px (0.75rem) /
Letter-Spacing 0 / Border Bottom 3px /
#FFFFFF
PARTNERS
ALUMNI
FACULTY AND STAFF
PARENTS
CURRENT STUDENTS
FUTURE STUDENTS
Current View State
PARTNERS
ALUMNI
FACULTY AND STAFF
PARENTS
CURRENT STUDENTS
FUTURE STUDENTS
Default State
Helvetica Neue (Bold) / 12px
(0.75rem) / Letter-Spacing 0 / #FFFFFF
All Hex Values #000 Unless Stated
USAGE
UTILITY NAVIGATION, PERSONA NAVIGATION
Header - Navigation
Spacing between nav items 18px
(1.125rem)
INQUIRE VISIT APPLY GIVE
Hover State
Helvetica Neue (Bold) / 12px (0.75rem) /
Letter-Spacing 0 / Uppercase /
#000000
INQUIRE VISIT APPLY GIVE
Active State
Helvetica Neue (Bold) / 12px (0.75rem) /
Letter-Spacing 0 / Uppercase /
#F6BE00
INQUIRE VISIT APPLY GIVE
Current View State
Helvetica Neue (Bold) / 12px (0.75rem) /
Letter-Spacing 0 / Uppercase / Border-
Bottom 3px / #FFFFFF
Spacing between nav items 18px
(1.125rem)
INQUIRE VISIT APPLY GIVE
Default State
Helvetica Neue (Bold) / 12px (0.75rem) /
Letter-Spacing 0 / Uppercase /
#FFFFFF
All Hex Values #000 Unless Stated
USAGE
UTILITY NAVIGATION, PRIMARY CALL-TO-ACTION
Header - Navigation
About ! Academics ! Experiential Learning ! Admissions and Aid !
Current View State
Helvetica Neue (Bold) / 18.67px
(1.167rem) / Letter-Spacing 0 /
#000000 / Border-Bottom Solid 8px
#F76902
Primary Navigation block is center-
aligned with 50px spacing between
each nav item.
Experiential Learning !
About ! Academics ! Experiential Learning ! Admissions and Aid !
Default State
Default State
Helvetica Neue (Bold) / 18px / Letter-
Spacing 0 / #727578
About ! Academics ! Experiential Learning ! Admissions and Aid !
Hover State
Hover State
Helvetica Neue (Bold) / 18px / Letter-
Spacing 0 / #000000 / Border-Bottom
Solid 8px #F76902
Current view state fades out when
hovering over other navigation
NOTES
USAGE
PRIMARY NAVIGATION BAR
Header - Navigation
Current View State
Links #000000
Hover State
Links #C75300
Slab Nav Background
#E9ECEF
Default State
Links Helvetica Neue Bold / 18.67px
(1.167rem) / Letter-Spacing 0 / Line-
Spacing 22px (1.375rem) / #696E6B
Featured Content header text
Helvetica Neue Light / 18.67px
(1.167rem) / Letter-Spacing 0 /
#000000
Image Thumbnails display size 255 x
145px (import images at 2x scale: 510 x
290px)
NOTES
USAGE
PRIMARY NAVIGATION BAR, OPEN (SLAB NAV)
Header - Navigation
Vestibulum Tortor
Intramurals
RIT Hockey Tickets
Overview
RIT Athletics
Intramurals
Recreation
Wellness
About ! Academics ! Experiential Learning ! Admissions and Aid ! Research ! RIT Life ! Athletics ! !
myRITDirectoryNews
Rochester Institute of Technology
PARTNERS
ALUMNI
FACULTY & STAFF
PARE NTS
CURRENT STUDENTS
FUTURE STUDENTS
INQUIRE VISIT APPLY GIVE
Vehicula Pharetra Risus Tellus
Commodo
Fermentum Cursus Vulputate
Featured Content
Colleges
Honors
Areas of Study
Academic Support
Academic Calendar
Tell us A en ea n
Overview
Undergraduate
Graduate
Undecided and Undeclared
Online and Continuing
Education
Malesuada Risus Pellentesque
About ! Academics ! Experiential Learning ! Admissions and Aid ! Research ! RIT Life ! Athletics ! !
myRITDirectoryNews
Rochester Institute of Technology
PARTNERS
ALUMNI
FACULTY & STAFF
PARE NTS
CURRENT STUDENTS
FUTURE STUDENTS
INQUIRE VISIT APPLY GIVE
Academics !
Fermentum Cursus Vulputate
Featured Content
Colleges
Honors
Areas of Study
Academic Support
Academic Calendar
Overview
Undergraduate
Graduate
Undecided and Undeclared
Online and Continuing
Education
About ! Academics ! Experiential Learning ! Admissions and Aid ! Research ! RIT Life ! Athletics ! !
myRITDirectoryNews
Rochester Institute of Technology
PARTNERS
ALUMNI
FACULTY & STAFF
PARE NTS
CURRENT STUDENTS
FUTURE STUDENTS
INQUIRE VISIT APPLY GIVE
Academics !
Current View State
Helvetica Neue Bold / 14px (0.875rem) /
Letter-Spacing 0 / Border Bottom 3px /
#000000
myRITDirectoryNews
Active State
Helvetica Neue Bold / 14px (0.875rem) /
Letter-Spacing 0 / #727578
myRITDirectoryNews
Hover State
Helvetica Neue Bold / 14px (0.875rem) /
Letter-Spacing 0 / #C75300
myRITDirectoryNews
Default State
Helvetica Neue Bold / 14px (0.875rem) /
Letter-Spacing 0 / #000000
myRITDirectoryNews
All Hex Values #000 Unless Stated
USAGE
OPTIONAL SECONDARY LINKS
Header – Navigation
Spacing between nav items 30px
(1.875rem)
Secondary Navigation – Top
TOP JUMP NAVIGATION
Container 51px height / dropshadow box-shadow: 0
0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
Progress Bar height 4px / top margin 0 / border radius
0 / color #F76902 / transition: width 0.6s ease;
Navigation Text Helvetica Neue (Bold) 18.67px
(1.167rem) / letterspacing 0 / Default #727578 / Current
View #000000
Scroll Position Indicator Each section reflects user’s
position horizontally https://codepen.io/
pankajparashar/pen/towxF
Sticky Jump Nav Locks to top of viewport when
user scrolls past primary navigation. For use on full-
width page layouts with multiple content sections.
Sticky Nav Locks to top of viewport
when user scrolls to secondary nav.
Observe left-side on http://
espndeportes.espn.com/futbol/mexico/
nota/_/id/4800655/juarez-dejo-fuera-al-
america-y-avanza-a-cuartos-de-final
Scroll Position Indicator Each section
reflects user’s position vertically https://
codepen.io/pankajparashar/pen/towxF
Border-Left 4px (0.25rem) #F76902
Scroll Animation Ease-out transition
Flexible Height Minimum height of
each list item reduces on smaller
viewports
Used on longer content pages
such as Programs pages
Overview
Impact Stories
Student Work
Curriculum
Faculty
Events
Resources
Helvetica Neue 20
Helvetica Neue 20
Helvetica Neue 20
Helvetica Neue 20
Helvetica Neue 20
Helvetica Neue 20
Helvetica Neue 20
Helvetica Neue 20
Helvetica Neue 20
Helvetica Neue 20
Currently Viewing
#000000
Hover State
#F76902
Default State
Helvetica Neue (Bold) 20px
(1.25rem), letterspacing 0,
linespacing 24px (1.5rem),
paragraph spacing 30px
(1.875rem)
#727578
Secondary Navigation – Left
LEFT JUMP NAVIGATION
PRIMARY COLORS
SECONDARY COLORS
WEB NEUTRALS
Web Colors
RIT Orange
Graphics
#F76902
Green
#848D00
Text Black
default
paragraph
text color
#212519
Black
Header text,
backgrounds,
hover states
#000000
Purple
#7D55C7
Light Gray
Footer and module
backgrounds
#E9ECEF
Secondary colors are accent colors, to be used
sparingly. For example, on color bars on image/media
thumbnails, or in supplemental charts/graphics.
Commonly used neutral colors
Accessible Orange is only to be used for link text,
to ensure that the color contrast ratio meets AA
WCAG requirements.
Medium Gray
Horizontal rules
#DEDEDE
Red
#DA291C
Yellow
#F6BE00
Accessible Orange
Text Links
#C75300
Blue
#009CBD
Dark Gray
Main navigation
text links
#727578
FONT STACK
NOTES
Typography — Font Stack
Specify the font stack in your CSS:
font-family: “Helvetica Neue”,
“Helvetica”, “Roboto”, “Arial”,
sans-serif;
Helvetica Neue is an Open Type sans
serif font family, available by default on
Mac. Fallback fonts are Helvetica,
Roboto, or Arial.
Subheader
Helvetica Neue (Bold) / 24px (1.5rem) /
Letter-Spacing -.20 / Line-Height 28px
(1.75rem)
Outcome Rate
H5
Subheader
Helvetica Neue (Bold) / 20px (1.25rem) /
Letter-Spacing -.20 / Line-Height 24px
(1.5rem)
Largest STEM Degree Producer
H6
Subheader
Helvetica Neue (Bold) / 28px (1.75rem) /
Letter-Spacing -.20 / Line-Height 32px
(2rem)
Pulitzer Prizes Awarded
H4
Subheader
Helvetica Neue (Light) / 32px (2rem) /
Letter-Spacing -.20 / Line-Height 36px
(2.25rem)
Graduates also work as
H3
Module or Content Band Headline
Helvetica Neue (Bold) / 36px (2.25rem) /
Letter-Spacing -.20 / Line-Height 40px
(2.5rem)
Game Design and Development
H2
Page Title
Helvetica Neue (Bold) / 64px (4rem) /
Letter-Spacing -.20 / Line-Height 68px
(4.25rem)
Impact Stories
H1
HEADERS
USAGE
All Hex Values #000000 Unless Stated
Typography — Header Styles
Featured Links Module Header
Helvetica Neue (Light) / 40px (2.5rem) /
Letter-Spacing -.20 / Line-Height 44px
(2.75rem) / #727578 / Text-Align Left
Rochester Institute
of Technology
Jumbotron Module Headline
Helvetica Neue (Bold) / 60px (3.75rem) /
Letter-Spacing -.20 / Line-Height 64px
(4rem) / Text-Align Center
Affordable Cost
H2 Jumbotron
Full row
Jumbotron Module Headline
Helvetica Neue (Bold) / 36px (2.25rem) /
Letter-Spacing -.20 / Line-Height 40px
(2.5rem) / Text-Align Center
Affordable Cost
H2 Jumbotron
Multiple per row
HEADERS
USAGE
All Hex Values #000000 Unless Stated
Typography — Alter nate Header Styles
H3 Alt
Paragraph Text
P
Helvetica Neue Regular / 16px (1rem)
Letter-Spacing 0 / Line-Height 28px
(1.75rem)
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.
Item Descriptions, Tags, News Story
Dates
P.small
Helvetica Neue Regular / 14px (0.875rem)
Letter-Spacing 0 / Line-Height 20px
(1.25rem)
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.
Captions, Photo Credits, Footnotes,
Social Media Timestamps
P.x-small
Helvetica Neue Regular / 12px (0.75rem)
Letter-Spacing 0 / Line-Height 18px
(1.125rem) / #727578
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.
PARAGRAPH
Typography — General Paragraph Styles
All Hex Values #212529 Unless Stated
USAGE
Typography — Article Styles
Article Paragraph Text
Helvetica Neue Regular / 18px
(1.125rem) / Letter-Spacing 0 / Line-
Height 28px (1.75rem)
Cras mattis consectetur purus sit amet fermentum. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nullam
quis risus eget urna mollis ornare vel eu leo.
H3
Article Subhead
H2
Helvetica Neue Bold / 20px (1.25rem) /
Letter-Spacing -.20 / Line-Height 24px
(1.5rem)
Article subhead text would be here
Embedded Article Quote
H2
Helvetica Neue Bold / 32px (2rem) /
Letter-Spacing -.20 / Line-Height 36px
(2.25rem)
“Quoted within the text
quoted within the text”
Embedded Article Quote Author
H2
Helvetica Neue Regular / 18px
(1.125rem) / Letter-Spacing 0 / Line-
Height 22px (1.375rem)
—Quote Author
Article Headline
H1
Helvetica Neue Bold / 40px (2.5rem) /
Letter-Spacing -.20 / Line-Height 42px
(2.5rem)
RIT helps students take an
entrepreneurial gap year
ARTICLES – FOR NEWS ONLY
All Hex Values #000000 Unless Stated
USAGE
Typography — Module-Specific Styles
Lead text (page overview or mission
statement, or alternative treatment for
person quote)
Helvetica Neue Light / 32px (2rem) /
Letter-Spacing -0.05rem / Line-Height
40px (2.5rem) / #212519 / Text-Align
Center on full width pages; Text-Align
Left on secondary nav pages
RIT housing offers you a secure,
supportive, and inclusive environment
for living and learning.
Leadership Quote
Helvetica Neue Light / 32px (2rem) /
Letter-Spacing -0.05rem / Line-Height
40px (2.5rem) / #212519 / Text-Align
Left
Rochester Institute of Technology prepares
its students for successful careers in a
global society.
Statistic or Data Point
Helvetica Neue Light / 100px (6.25rem) on
full-width pages, or 68px (4.25rem) on
secondary nav pages / Letter-Spacing -8 /
#F76902 / Text-Align Center
Symbols and ordinal indicators (%, $)
Helvetica Neue Regular, superscripted /
Helvetica Neue Regular / 50px
(3.125rem) / baseline shift top: -2.125rem
Abbreviated numeric units (thousand,
million) should be lower case (k, m)
97
%
1
st
13k
USAGE
OTHER STYLES
NOTES
Breadcrumb
Links Helvetica Neue Bold / 14px
(.875rem) / Letter-Spacing 0 / Line-
Height 20px (1.25rem) / #212519 /
Hover Ease-in transition, #C75300
Slashes and unlinked text Helvetica
Neue Regular #727578
RIT / B. Thomas Golisano College of Computing and Information Sciences / Overview
Helvetica Neue Bold / 18.67px
(1.167rem) / Letter-Spacing 0 /
Line-Height 22px (1.375rem)
Hover Ease-in transition
Icons use Font Awesome
Regular / 18px (1.125rem)
Module Call-to-Action, Generic
Event Module without
Image Background
Video Story Module
News or Story Module
Learn More
!
See Event Calendar
"
#
See More Impact Stories
See More Stories
$
Active States, #727578
Learn More
%
See Event Calendar
"
#
See More Impact Stories
See More Stories
$
Hover States, #000000
Learn More
%
See Event Calendar
"
#
See More Impact Stories
See More Stories
$
Default States, #C75300
Image Card Title
Helvetica Neue Bold / 18.67px
(1.167rem) / Letter-Spacing 0 /
Line-Height 22px (1.375rem)
Hover Ease-in transition
RIT named among the nation’s
‘Best 384 Colleges’
Active State, #727578
RIT named among the nation’s
‘Best 384 Colleges’
Hover State, #000000
RIT named among the nation’s
‘Best 384 Colleges’
Default State, #C75300
Links under 18.67px
(Paragraph links, article links, and
other lists)
Helvetica Neue Bold /
Letter-Spacing 0
Hover Ease-in transition
RIT named among the nation’s ‘Best
384 Colleges’
Active State, #727578
RIT named among the nation’s ‘Best
384 Colleges’
Hover State, #000000
RIT named among the nation’s ‘Best
384 Colleges’
Default State, #C75300
Alumni 21-Day Career
Challenge: Start Your
Career!
Active State, #727578
Alumni 21-Day Career
Challenge: Start Your
Career!
Hover State, #000000
Alumni 21-Day Career
Challenge: Start Your
Career!
Default State, #C75300
Event Titles
Helvetica Neue Bold / 24px
(1.5rem) / Letter-Spacing
-0.05rem /
Line-Height 28px (1.75rem)
Hover Ease-in transition
NOTES
LINK STYLES
USAGE
Typography — Text Link Styles
Helvetica Neue (Bold) / 18.67px
(1.167rem) / Letter-Spacing 0 /
Padding 10px 20px / 2px border
Hover Ease-in transition
See Event Calendar
!
See Event Calendar
!
See Event Calendar !
See Event Calendar !
See Event Calendar !
See Event Calendar !
BUTTONS ON ORANGE BACKGROUND, WITH OR WITHOUT ICONS
Hover State
14 Photos "
14 Photos "
14 Photos "
Active State
border 1px #000000
Hover State
#000000
Default State
#C75300
Helvetica Neue (Bold) / 14px
(0.875rem) / Letter-Spacing 0 /
Padding 8px 16px
Hover Ease-in transition
To be used sparingly
SMALL BUTTONS WITH ICONS
Helvetica Neue (Bold) / 18.67px
(1.167rem) / Letter-Spacing 0 /
Padding 10px 20px / 2px border
icons Font Awesome Regular
18.67px
Hover Ease-in transition
See Event Calendar
!
Active State
border 1px #000000
See Event Calendar !
Hover State
#000000
See Event Calendar !
Default State
#F76902
BUTTONS WITH OR WITHOUT ICONS
Helvetica Neue (Bold) / 18.67px
(1.167rem) / Letter-Spacing 0 /
Padding 10px 20px / 2px border
Hover Ease-in transition
For use in combination with
primary button, or in situations
where buttons require less visual
emphasis
See Event Calendar
Active State
border 1px #000000
See Event Calendar
Hover State
#000000
See Event Calendar
Default State
Border 1px #C75300
ALTERNATE BUTTONS, WITH OR WITHOUT ICONS
Buttons
Default State
Active State
This is an example of an H2
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.
!
"
Active State
#727578
!
"
Hover State
#F76902
!
"
Default
#000000
Local Footer
Font Awesome Regular / 18.67px
(1.167rem) / Letter-Spacing 0
Hover Ease-in transition / circle 42px
square
!
"
Active State
#727578
!
"
Hover State
#F76902
!
"
Default
#000000
border #727578
News Social Sharing
Font Awesome Regular / 18.67px
(1.167rem) / Letter-Spacing 0
Hover Ease-in transition / circle 42px
square
!
"
Active State
#727578
!
"
Hover State
#F76902
!
"
Default
#FFFFFF
RIT Footer
Font Awesome Brands / 18.67px
(1.167rem) / Letter-Spacing 0
Hover Ease-in transition / circle 42px
square
Academics ! Academics ! Academics "
Icon flips on menu open
#212519
Hover State
#F76902
Default
#727578
Primary Navigation Caret
Font Awesome Regular / 18.67px
(1.167rem) / Letter-Spacing 0
Hover Ease-in transition
Menu Closed
Font Awesome Pro Light
#F76902
!
#
Menu, open and active
Font Awesome Pro Solid
#F76902
!
Hover State
Font Awesome Pro Regular
#F76902
Inherit parent element size /
Hover Ease-in transition
Accordion Menus
NOTES
USAGE
Icons
Default State
Border-Color #DDDDDD
Editorial Independence
Tags with No Links,
Areas of Expertise
Helvetica Neue Regular / 14px
(.875rem) / Letter-Spacing 0 /
#727578 / Default Background-Color
#FFFFFF / Padding 8px 16px / Border
1px #DDDDDD
Active State
Border-Color #000000
Hover State
Background-Color #000000
Default State
Background-Color #EEEEEE
Border-Color #DDDDDD
Text-Color #000000
Editorial Independence
Editorial Independence
Editorial Independence
Linked Tags
Helvetica Neue Regular / 14px
(.875rem) / Letter-Spacing 0 /
#000000 / Default Background-Color
#EEEEEE / Padding 8px 16px / Border
1px / Hover Ease-in transition
Tags
NOTES
USAGE
MULTIMEDIA ICON
Icon Font Awesome (Solid) f04b /
#FFFFFF / Drop Shadow #000000,
25% Opacity
Position Upper lefthand corner,
30 px from top and left side
Vertical video content
Icons
#7D55C7
rgb(125,85,199)
#009CBD
rgb(0,156,189)
#DA291C
rgb(218,41,28)
#F6BE00
rgb(246,190,0)
#84BD00
rgb(132,189,0)
Border-Bottom 8px
Use each hex value in order:
green, yellow, blue, red, purple.
Order can loop.
Hex value should never match item
before or after.
News or Story modules
USAGE
HORIZONTAL RULE, SECONDARY COLORS
Story Accents
See More Stories
!
Nullam quis risus eget urna mollis
ornare vel eu leo. Morbi leo risus,
porta ac consectetur ac, vestibulum
at eros. Aenean lacinia bibendum
nulla.
Date
RIT named among the nation’s
‘Best 384 Colleges’
Nulla vitae elit libero, a pharetra
augue. Nullam id dolor id nibh ultricies
vehicula ut id elit. Integer posuere erat
a ante venenatis dapibus posuere
velit aliquet.
Date
RIT hosts international scholars
for Fulbright Gateway
Orientation
Helvetica Neue Regular 14, Line
Height 20
Helvetica Neue Regular 14
Helvetica Neue (Bold) 18.67px,
Line Height 22
Helvetica Neue Regular 14, Line
Height 20
Helvetica Neue Regular 14
Helvetica Neue (Bold) 18.67px,
Line Height 22
Story Module Example
Story Module — Contextual Example
Header with a Button on the
Right like Counseling and
Psychological Services
RIT / Breadcrumb / Breadcrumb
Call-to-Action
Header with a Button on the
Right like Counseling and
Psychological Services
RIT / Breadcrumb / Breadcrumb
Call-to-Action
Title of Program or Page May
Line Wrap
Bachelor’s of Science
RIT / Breadcrumb / Breadcrumb
Image dimensions 2160 x 510px /
linear gradient (from bottom left to top
right, black, transparent, 40% opacity)
Headline Helvetica Neue (Bold) / 36px
(2.25rem) / Letter-Spacing -0.05rem /
Line-Spacing 40px (2.5rem) / #FFFFFF
Orange Motion Frame #F76902 /
Opacity 85%
Description Helvetica Neue (Bold) /
18.67px (1.167rem) / Letter-Spacing 0 /
Line-Spacing 28px (1.75rem) / #FFFFFF
Button Helvetica Neue (Bold) /
18.67px / #FFFFFF / Background Color
#F76902, Opacity 100%
Used on child pages
Video on desktop dimensions 1920 x
844px / top-center aligned (left, right,
and bottom are subject to cropping on
browser resize)
Image on mobile dimensions 800 x
450px
Orange Motion Frame #F76902 /
Opacity 85%
Headline Helvetica Neue (Bold) / 36px
(2.25rem) / Letter-Spacing -0.05rem /
Line-Spacing 40px (2.5rem) / #FFFFFF
Description Helvetica Neue (Bold) /
18.67px (1.167rem) / Letter-Spacing 0 /
Linespacing 40px (2.5rem) / #FFFFFF /
Text links Helvetica Neue (Bold) /
#FFFFFF / underlined / Font Awesome
F061 arrows can be added for more
emphasis.
Used on parent-level pages
Hero, Image
or Video
Brief description
vestibulum id ligula porta
felis euismod semper.
Donec id elit non.
Read More !
Images - Hero
3:2 RATIO
NOTES
USAGE
News story modules
1:1 RATIO
Image Dimensions 600 x 600px
RIT Tiger graphic serves as the
default profile image if no photo
is available
Person profiles
Images - Thumbnails
Image dimensions 540 x 360px
Color bar Secondary color
palette / Border Bottom 8px
Preethi Vaidyanathan
Economics ‘20
In my first year as a Ph.D. student I
worked as a research assistant. It
has helped me meet so many
students and faculty from different
departments across RIT and
broadened my perspective on how
to do research.
Preethi Vaidyanathan
Economics ‘20
In my first year as a Ph.D. student I
worked as a research assistant. It
has helped me meet so many
students and faculty from different
departments across RIT and
broadened my perspective on how
to do research.
Image Placeholder 9:16
Thumbnail / 270 x 480px
Title Text Helvetica Neue (Bold) /
18.67px (1.167rem) / Letter-
Spacing 0 / Line-Spacing 22px
(1.375rem) / #212529 / Align-
Center
Subtitle Text Helvetica Neue
Regular / 14px (0.875rem) / Letter-
Spacing 0 / Line-Spacing 20px
(1.25rem) / #212529 / Align-Center
Description Text Helvetica Neue
Regular / 14px (0.875rem) / Letter-
Spacing 0 / Line-Spacing 20px
(1.25rem) / #212529 / Align-Left
Hover Zoom in and orange overlay
Selena Inspiration from https://
tympanus.net/Development/
HoverEffectIdeas/index2.html
NOTES
VERTICAL VIDEO, 9:16 RATIO
Video modules
Images – Multimedia Thumbnails
Expanding Perspectives
Expanding Perspectives
Animation
Page Progress Indicator
Use horizontal on top-level pages. Use vertical format on
pages with secondary navigation.
Reference horizontal format from https://codepen.io/
pankajparashar/pen/towxF
Vertical format http://www.espn.com/nba/story/_/id/
24997239/burning-questions-2018-19-nba-season
Accordion Menu
Expandable and collapsible content
https://tympanus.net/Tutorials/
FlexibleSlideToTopAccordion/
Preferable to not scroll to top on expand
Image Hovers
Examples includes video modules.
Reference Selena, Jazz, and Duke from https://
tympanus.net/Development/HoverEffectIdeas/index2.html
Animate on Scroll
List module examples include
• Statistic modules
• Card modules
• Link modules
• Paragraph modules
Fade-up scroll reveal
USAGE
NOTES
TYPE
Lines and Borders
Active List Item Border Right #F76902, 10px
List Item Border Bottom 1px #DEDEDE
List Item, Last No border bottom
Iconography
Arrow Icon Font Awesome Light fa-angle-down / 20px
(2.5rem) / #000000 / Flip on click
Plus/Minus Icon Font Awesome Light / 24px / #F76902 /
Hover Font Awesome Regular / 24px / #F76902
Expanded Font Awesome Solid / 24px / #F76902
Animation
Open & Close Bootstrap expand/collapse default
Typography
Name of List Item #1 Helvetica Neue Bold / 24px (1.5rem) /
Letter-Spacing 0 / #000000
Name of List Item #2 Helvetica Neue Regular / 20px
(1.25rem) / Letter-Spacing 0 / #000000
Description Helvetica Neue Regular / 16px (1rem) / Letter-
Spacing 0 / Line Height 24px / #212529
Helvetica Neue Bold 24
Helvetica Neue Bold 24
Helvetica Neue Bold 24
Helvetica Neue Bold 24
Helvetica Neue Bold 24
Helvetica Neue Bold 24
Helvetica Neue Bold 24
Helvetica Neue Bold 24
Helvetica Neue Bold 24
Helvetica Neue Bold 24
Helvetica Neue Bold 24
General Accordions (such as Areas of Study Accordions)
!
!
!
!
!
!
!
!
!
!
!
Helvetica Neue Bold 20
Helvetica Neue Bold 20
Helvetica Neue Bold 20
Helvetica Neue Bold 20
Helvetica Neue Bold 20
Helvetica Neue Bold 20
Helvetica Neue Regular 16px 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.
More Details
The importance of digital technology as an enabler of innovative
services is covered throughout the course. (completion of four
graduate business courses)
!
Lines and Borders
List Item Border Bottom 1px #DEDEDE
Iconography
Arrow Icon Font Awesome Light fa-angle-down / 20px
(2.5rem) / #000000 / Flip on click
Animation
Open & Close Bootstrap expand/collapse default
Typography
Name of Accordion List Helvetica Neue Bold / 28px (1.75rem)
Letter-Spacing 0 / #212529
Heading row of Accordion List Helvetica Neue Bold / 16px
(1rem) / Letter-Spacing 0 / #212529 / background #DEDEDE
Name of List Item #1 Helvetica Neue Bold / 16px (1rem) /
Letter-Spacing 0 / #212529
Name of List Item #2 Helvetica Neue Regular / 16px (1rem) /
Letter-Spacing 0 / #212529 / links #C75300 Bold
Description Helvetica Neue Regular / 16px (1rem) / Letter-
Spacing 0 / Line Height 24px / #212529
Footnote Helvetica Neue Regular / 13px (.8125rem) / Letter-
Spacing 0 / Line Height 16px (1rem) / #727578
Helvetica Neue Bold 16
Units
Helvetica Neue Bold 28
Helvetica Neue Bold 16
Helvetica Neue Bold 16
Helvetica Neue Bold 13px (.8125rem) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam
Helvetica Neue Bold 16
Helvetica Neue Bold 16
Helvetica Neue Bold 16
Units
Units
Helvetica Neue Bold 28 Helvetica Neue Bold 28
Helvetica Neue Bold 16
Helvetica Neue Bold 16
Helvetica Neue Bold 13px (.8125rem) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam
Helvetica Neue Bold 13px (.8125rem) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam
Helvetica Neue Bold 16 Helvetica Neue Bold 16
Table Accordions (such as Curriculum Tables)
!
!
!
!
!
!
!
3
3
Helvetica Neue Bold 16
Helvetica Neue Bold 16
Regular 16
Regular 16
3
3
Helvetica Neue Bold 16
Helvetica Neue Bold 16
Regular 16
Regular 16
3
3
Helvetica Neue Bold 16
Helvetica Neue Bold 16
Regular 16
Regular 16
Helvetica Neue Regular 16px 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.
More Details
The importance of digital technology as an enabler of innovative services is covered throughout the
course. (completion of four graduate business courses)
Areas of Study
Helvetica Neue
Bold 18
!"
Color #F6BE00
Active State
Helvetica Neue
Bold 18
!"
Color #000000
Hover State
Helvetica Neue
Bold 18
!"
Icon Linear icon illustration 52px
Horizontal Rule Border-Bottom
5px / #FFFFFF
Program Name Helvetica Neue
(Bold) / 18.67px (1.167rem) / LIne-
Spaging 0 / Line-Height 20px
(1.375rem) / #FFFFFF
Default State
Forms
Form Heading Helvetica Neue (Bold)
36px (2.25rem)
Input Field Label Helvetica Neue
(Light) 32px (2rem) / Numerals
Helvetica Neue (Bold) 28px (2.25rem)
Input Field Helvetica Neue Regular
18px / Letter-Spacing 0 / #727578 /
Padding 10px 20px / Border 1px /
corner radius 2 / suggested text
#727578 / active text #212529
Icons Font Awesome Pro Solid 24px /
#727578
Hover Text and Border #212529 /
Ease-in transition
Error Message Helvetica Neue
(Bold) / 14px (0.75rem) / Form Field
Border 5px / corner radius 2 /
#DA291C
!
○○○○○○○○
Password
3
I think you should notice the change in border color and
Active focus state for an input field
2
Input field suggestion
Example of a basic input field
1
Basic Input States
INPUT FIELDS
NOTES
User has entered an answer.
Example of a form question that line-wraps
to a second line would look like this?
4
Forms
Checkbox 50x50px / stroke 1px
#727578 / corner radius 2 / fill
#F76902
Radio Button 50px / stroke 1px
#727578 / fill #F76902
Error Message Helvetica Neue
(Bold) / 14px (0.75rem) / Form Field
Border 5px / corner radius 2 /
#DA291C
Selected Ornare Vestibulum
Risus Lorem Ipsum
!!
Unselected
Selected Two
!!
Unselected Ornare Vestibulum
Risus Lorem Ipsum
Unselected
Selected
!!
Example checklist
5
More Input Types
Selected Ornare Vestibulum
Risus Lorem Ipsum
○
Unselected
Purus Bibendum
Unselected Ornare Vestibulum
Risus Lorem Ipsum
Unselected
Venenatis Tortor Magna
Example single choice list
C
6
CHECKLISTS AND RADIO BUTTONS
NOTES
Forms
Dropdown stroke 1px #727578 /
corner radius 2 / Padding 10px 20px /
Open Menu arrow flips / drop
shadow 0px 2px #000000 / hover
background #CCCCCC
Fusce Nibh Euismod Porta
Lorem Ipsum
Cras Egestas Purus
Sollicitudin Dolor
Fusce Nibh Euismod Porta
Lorem Ipsum
Cras Egestas Purus
Sollicitudin Dolor
Select One
!
Open drop-down menu
8
Select One
!
Instance of a drop-down menu select
7
Menu Drop-Downs
MENU DROP-DOWNS
NOTES
Mobile Interface
Header
RIT Bar padding top and bottom
(0.5rem) / margin top and bottom
(0.5rem) / bottom border 1px solid
#CCCCCC / RIT logo: width 64px,
height 31px
Site Title Bar Helvetica Neue Bold /
font-size: calc(14px + 6 * ((100vw -
320px) / 448)); / padding top and
bottom 16px (1rem)
Hero
Hero Image 800x450px
Hero Overlay / #F76902 / 95%
opacity / left and right outer margin
32px (2rem) / Headline Text: Helvetica
Neue Bold 24.8px (1.55rem) /
Paragraph Text: Helvetica Neue Bold
20px (1.25rem)
Lead Text Helvetica Neue Light / 24px
(1.5 rem) / Line-height 30px
(1.875rem) / #212529
MOBILE HEADER AND HERO IMAGES
NOTES
Mobile Interface
Site-Specific Footer
Unit lockup #000000
Contact Info Header: Helvetiva Neue
(Bold) 12.5px (.8rem) / #727578 /
Paragraph: Helvetiva Neue (Regular) /
12.5px (.8rem) / #727578
Navigation Links: Helvetica Neue
(Bold) 18px (1.125rem) / #000000
Subnavigation: Helvetica Neue
(Regular) / 12.5px (.8rem) / line-height
16px (1rem) / #727578
Global RIT Footer
RIT Lockup #FFFFFF
Contact Header: Helvetiva Neue
(Bold) / 14.5px (.9rem) 12.5px (.8rem) /
#FFFFFF / Paragraph: Helvetiva Neue
(Regular) / 12.5px (.8rem) / #FFFFFF
Navigation Links: Helvetica Neue
Bold 18px (1.125rem) / #FFFFFF
Copyright: Helvetica Neue (Bold)
12.5px (.8rem) / #FFFFFF / links
underlined
Flexible Height Minimum height of
each list item is 50px on smaller
viewports ( < 1024px)
MOBILE FOOTER
NOTES
Mobile Navigation
Primary Navigation
Menu Open Primary Nav: Helvetica
Neue (Bold) 22px (1.375rem) /
linespacing 28px (1.75rem) /
#FFFFFF / Hover #F76902 /
background-color #000000 / Arrow
Icons Font Awesome / Secondary Nav:
Helvetica Neue (Bold) 19.5px (1.2rem) /
line height 22px (1.375rem) / #FFFFFF
Background overlay #000000 40%
opacity
Featured Images display 251 x 141px
(prep at 407 x 229px) /
persona nav: Helvetica Neue (Bold)
22px / #FFFFFF
Jump Navigation
Jump to Section bar 57px high /
Helvetica Neue (Regular) 15px /
#000000 / Hover #F76902 / Ease-in
transition / scroll indicator 6 px height
PRIMARY AND JUMP NAVIGATION
NOTES
Page Header
Helvetica Neue (Bold) / 28px (1.75rem) /
Letter-Spacing 0 / Line-Height 30px
(1.875rem)
3D Digital Design
H1
Page Header
Helvetica Neue (Regular) / 20px
(1.25rem) / Letter-Spacing 0 / Line-
Height 30px (1.875rem)
Bachelor of fine arts degree
H1 <small>
HEADERS
USAGE
All Hex Values #212529 Unless Stated
Mobile Typography - Headers
Mobile Typography — Module-Specific Styles
Lead text (page overview or mission
statement, or alternative treatment for
person quote)
Helvetica Neue Light / 24px (1.5rem) /
Letter-Spacing -0.05rem / Line-Height
30px (1.875rem) / #212529 / Text-Align
Center for full width pages; Text-Align
Left on secondary nav pages
RIT housing offers you a secure, supportive, and
inclusive environment for living and learning.
Leadership Quote
Helvetica Neue Light / 24px (1.55rem) /
Letter-Spacing -0.05rem / Line-Height
30px (1.875rem) / #212529/ Text-Align
Left
Rochester Institute of Technology prepares its students for
successful careers in a global society.
Statistic Card Header
Helvetica Neue Light / 60px (6.25rem)
on full-width pages, or 68px (4.25rem)
on secondary nav pages / Letter-
Spacing -8 / #D95E00 / Text-Align
Center
Symbols and ordinal indicators (%, $)
Helvetica Neue Regular, superscripted,
top aligned with numerals
97
13
OTHER STYLES
NOTES
Breadcrumb
Only displays last two levels
Links Helvetica Neue Bold / 14px
(.875rem) / Letter-Spacing 0 / Line-
Height 20px (1.25rem) / #000000 /
Hover Ease-in transition, #C45500
Slashes and unlinked text Helvetica
Neue Regular #727578
Golisano College of Computing and Information Sciences / Overview
%