Web Design Style Guide

Version 1.0
 Web Design Style Guide

Introduction
This document is meant to provide guidance for the creation
and design of web pages, modules, components, and interface
Contents
elements to ensure that Carleton’s public web sites maintain a
consistent look, feel, and branding. Design System/Living Style Guide 2

This document focuses on the visual design of web page

Branding 3
elements. While it touches from time to time on technical,
accessibility, and content-related matters, that is not its primary
Typography 5
focus. Throughout this document you will see three major types
of guidelines:
Color & Contrast 7
• Requirements: These must be followed in order to maintain
basic branding consistency among public-facing Carleton Links 10
web properties. There are few hard and fast rules, but these
are critical. Indicated by Requirement Layout 10

• Recommendations: A site or tool should follow most – if not Iconography 11

all – recommendations. These are strongly recommended
to ensure that a site remains visually unified with the rest of Forms 12
carleton.edu. If you wish to take a different path, it is best to
consult with Web Services on your plans. Navigation, Tabs, etc. 13

• Suggestions: These are “best practices”. In general you

Performance 14
should see if these work for your project before trying
another route. Indicated by Suggestion
Interactivity 14
Unless otherwise noted, all guidelines are recommendations.
Accessibility 14
Questions about this style guide?
Please contact Matt Ryan in the Carleton College Web Ser- General Development Considerations 15
vices Group: [email protected]
Browser Support 15
 Web Design Style Guide

Design System/Living Style Guide

Carleton maintains a “living style guide” design system and html/
css/js repository. It uses a system called Patternlab to manage
and present components and templates.

If you use the components and templates in this repository to

build your website or interface your site will be well on its way to
adhering to the guidelines presented in this document.

It is strongly recommended to use this tool to ensure that your

site can be easily updated as Carleton’s web branding and best
practices evolve,

To use the Patternlab style guide:

• Contact Web Services for access and support

• If possible, integrate Twig templating into your project so you

can use the Patternlab templates directly.

• If possible, use a dependency manager like Composer to

make it easy to update components and templates

2
 Web Design Style Guide

Branding
Unless otherwise specified, this document refers to Tier I Carleton Use
sites and tools. According to Carleton’s web governance guide:

Tier I is for sites with content that represents the college, its depart-
ments, offices, or services. This is for sites where someone might say,
“Carleton College states...” about the content. For these sites, Car-
leton requires consistent branding. Examples: office and department
sites, initiatives, directory, OneCard.

Logo Usage
Requirement Include the Carleton Logo on every page

Prominently include one of the following versions of the Carleton Avoid

logo on every page.
These versions lose
legibility or moire badly
• Carleton Word Mark
at smaller sizes on
non-retina screens.
• Carleton Word Mark and Large C-Ray
• Carleton Word Mark C-Ray Left
• Carleton Word Mark Small Open-Ray
These colors are not
Other versions should be avoided for web use. #0B59091. Note that
converting from the
print CMYK blue does
Render the logo in a consistent manner not result in the correct
color for screen use.
Logo must be at least 125 pixels in the largest dimension. Colors
These examples do
• #0B5091 / rgb(11,80,145) on #ffffff / rgb(255,255,255) not provide sufficient
contrast.
• #ffffff / rgb(255,255,255) on a color or image sufficiently dark
to support WCAG Level AA

Logo must be near the top of the page and appear above the
fold on all common devices.

3
 Web Design Style Guide

Carleton Branding (Continued)

Requirement Carleton branding guidelines must be followed throughout, per
the Carleton Identity Style Guide
Note that the yellow and blue colors specified in the style Use Avoid
guide for the web are not identical to those specified for print.
Pantone’s equivalents to Carleton’s print swatches are not
appealing on-screen colors. Use the web-specific colors for web #0B5091 / Pantone 280
design and content. rgb(11,80,145)

cmyk(100,72,0,32)

Use the Bluebar navigation

Use #003EA2 /
Use the standard Carleton Website navigation (“Bluebar”) rgb(0,62,162)
wherever technically possible to ensure visual and navigation
consistency across Carleton web properties. This also satisfies the
requirement above.
#F3B61D / Pantone 122
The latest version of the Bluebar and instructions for its use are
rgb(243,182,29)
at go.carleton.edu/bluebar .

cmyk(0,17,80,0)

#FCD450 /
rgb(252,212,80)

4
 Web Design Style Guide

Typography
Requirement Type should have sufficient visual contrast with background
Use Avoid
Type should be rendered with sufficient contrast to meet the
WCAG 2.0 Level AA standard of 4.5:1. See Accessibility. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing consectetur adipiscing
Use Gotham for body text; prefer Surveyor for display text elit. Nam in semper turpis, elit. Nam in semper turpis,
eget hendrerit tortor. eget hendrerit tortor.
Because ithese typefaces are used throughout Carleton’s
Maecenas tincidunt tempor Maecenas tincidunt tempor
standard web theme and print publications, they powerfully ipsum, a maximus velit ipsum, a maximus velit
communicates consistency and a unified feel among Carleton suscipit a. Proin in enim suscipit a. Proin in enim
communications. Instructions for web use are available from the odio. Nullam non interdum odio. Nullam non interdum

Web Services Group ([email protected]).

Use contrasting weight and size for headings Use Avoid

If using the same typeface for headings and bopdy copy, use very
light or bold text for headings, rather than “normal” weights.
Heading 1 Heading 1
Lorem ipsum dolor sic amet
Use no more than two typefaces Lorem ipsum dolor sic amet

If you wish to have a bit more pizazz than is available with just Heading 2 Heading 2
Gotham, select a single contrasting typeface for headings and Lorem ipsum dolor sic amet Lorem ipsum dolor sic amet
titles. This is an axis where considerable freedom is permitted
within the style guidelines, so feel free to experiment with your
display type. It is also acceptable to use Gotham for display type.

Use generous type size

Body text should be a minimum of 17px. Captions and other
secondary text may be smaller, but should generally be given a
minimum size of 13px.

5
 Web Design Style Guide

Typography (Continued)
Use generous line height for body text
Use Avoid
Line-height should be a minimum of 1.5x body text size (e.g.
26px for 17px type) at desktop screen widths. Headings or other Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing consectetur adipiscing
display type should be set with a tighter line-height, typically
elit. Nam in semper turpis,
elit. Nam in semper turpis,
1.1x-1.3x.

Use Avoid

CAMS 253: The CAMS 253: The

Semiotics of Semiotics of
Left-align text
Avoid right-aligned and fully-justified type. Use centered type Use Avoid
sparingly, and only within “boxed” content – never in body copy.
Heading 1 Heading 1
Lorem ipsum dolor sic amet Lorem ipsum dolor sic amet
Strive for comfortably readable line-lengths
Responsive layouts should manage type size and column width
to achieve between 40 (narrow settings) and 100 (wide settings)
characters per line for body copy. A measure of 70 characters
per line is ideal, but because column widths can vary greatly on
different screens, prioritize readable text (see “Use generous
type size”) over forcing an ideal width.

Use H1-H6 headings

Avoid bold and italicization on entire lines.

Avoid underlines on non-link text

Underlines should only be used to communicate links.
6
 Web Design Style Guide

Color & Contrast

Carleton-branded sites should match Carleton’s web branding
palette to ensure consistency among Carleton web properties.

Requirement Use Carleton Web Blue (#0B5091) prominently on each page

Communicate a consistent Carleton branding by color as well
as use of the logo by ensuring that a consistent blue color is
used across Carleton’s web properties. Color palettes should
harmonize with this color. The easiest way to prominently Use
incorporate this color is to use the standard Carleton bluebar (see
“Use the Bluebar navigation”)

Use a white (Preferred) or light page background

#ffffff/rgb(255,255,255) or no darker than #eeeeee/
rgb(238,238,238)
Use Avoid
Use black or dark grey for body text
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
#333333 or rgb(51,51,51) consectetur adipiscing consectetur adipiscing
elit. Nam in semper turpis, elit. Nam in semper turpis,
eget hendrerit tortor. eget hendrerit tortor.
Use flat colors; avoid borders and shadows Maecenas tincidunt tempor Maecenas tincidunt tempor
Avoid patterns, textures, borders and shadows on page elements.

Use a limited-hue color palette Use Avoid

Use no more than 4 distinct hues.

Where text is laid on images, multiply the image with blue

Multiply background images with either #3676b3 or #0b5091

7
 Web Design Style Guide

Color & Contrast (Continued)

Use tints and shades for variation within the palette
Tints (mixes of one of the main hues with the background color,
typically white) and shades (darkened and saturated versions of
the hue) are recommended for variation.

These are easily produced in a css preprocessor from a set of

base colors. The following examples are in LESS:

@tint: mix(@base_color, @background_color, 75%);

@shade: saturate(darken(@base_color), 10%), 10%);

Use same palette for all pages in a subsite

Maintain visual coherence within a subsite; avoid changing
palette from page-to-page.

Avoid placing a box around the primary page content

Primary page content should sit directly on the page background.
Secondary or callout content may be placed in a tinted box with
generous padding (at least 1em/17px).
Use Avoid
Requirement Use sufficient contrast between background colors and text
colors
See above guideline “Type should have sufficient visual contrast
with background”

8
 Web Design Style Guide

Color & Contrast (Continued)

Use “Maize and Blue” palette on key branded pages/sites “Maize and Blue” Palette
While various color palettes are used on office and department
Primary 1 Primary 2 Accent 1 Accent 2
sites, use of this consistent palette by key institutional branding
pages (e.g. top-level external audience pages) helps maintain an
adidtional layer of brand consistency and design cohesion.

#3676b3 #f3b61d #923535 #588745

rgb(54,118,179) rgb(243,182,29) rgb(146,53,53) rgb(88,135,69)

If darker blue Use for prima-

is needed, use ry site naviga-
#0b5091 tion

100% 100% 100% 100%

75% #6898c6 75% #f6c856 75% #ad6868 75% #82a574
50% #9bbbd9 50% #f9db8e 50% #c99a9a 50% #acc3a2
25% #cdddec 25% #fcedc7 25% #e4cdcd 25% #d5e1d1

Visually separate elements with different background hues

Use Avoid
Elements with different background hues should be separated
by margins or borders of the background color. Elements with
different tints of the same hue may visually touch.

9
 Web Design Style Guide

Links
Indicate textual links by underlining or by placing background-
Use Avoid
colored box around link
Avoid indicating links using soley color. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
Suggestion
Use Carleton Web Blue for links in running text
#0b5091 or rgb(11,80,145)
Nullam non Nam in semper turpis

Layout
Requirement Ensure all design is responsive
Ensure layouts, widgets, video, images, and other elements are
fluidly responsive down to a 320px wide viewport.

Show site navigation where possible

Where there is room on screen, navigation elements should not Use Avoid
be hidden behind a menu button, but should instead be available
via direct links. On small screens, open navigation at the bottom
of the page with a jump-to-menu link at the top of the page is a
Avoid where there is sufficent
common pattern.
space for teatment on left

Use generous margins between layout elements

Avoid placing a box around the primary page content

See recommendation in Color & Contrast.

Suggestion
Use a the Carleton Standard Theme custom grid
The Carleton Standard Theme uses a custom grid. For more infor-
mation about this grid, see go.carleton.edu/grid

10
 Web Design Style Guide

Iconography
Use flat icons
Use Avoid
Use “flat” icon treatments. Match icon colors to page color
scheme. Prefer vector (e.g. font- or svg-based icons) for
scalability, resolution independence, and ease of color change.

Use consistent icons

Visit go.carleton.edu/icons to see and download a standard set of
icons in SVG and webfont formats. Use of these icons promotes
consistency across sites and interfaces.

Ensure icons are accessible

Ensure that screen readers will read appropriate alternate text, or
follow “Combine icons with textual labels.”

Suggestion
Combine icons with textual labels where possible
Preferred Caution
Avoid “mystery meat” elements by combining icons with text
rather than using icons alone. For example, if there is room, use
both the hamburger icon and the word “menu”, a pencil with the Menu
word “edit”, or a plus with the word “add”. Extra bonus: if you do
this you automatically fulfill “Ensure icons are accessible” above. Edit

Add

Delete

11
 Web Design Style Guide

Forms
Action buttons (e.g. form submissions)
Use Avoid
• Use rounded corners, approx. .33 em radius
• Use larger type than conventional body text
• Flat color background Sign up Submit
• Use white text on a green (#588745) background
• Use distinct background color states for hover, focus, active:
use lightened & darkened variations for these states
• Use descriptive labels where possible, e.g. “Sign Up” or “Send
Request” instead of “Submit”

Text inputs
• No border-radius
• 1px “inset” border treatment
Consistent Inconsistent
• Light neutral background colors
• Use light, colored backgrounds when field is active * indicates a required field

Labels Street* Street

Required
200 Division St.
• Place labels above input elements, aligned left
200 Division St.
• Exception: for radio buttons or checkboxes, place labels to
the right of the input, use fieldset & legend or aria-description City Northf
City* Required
or aria-describedby on a containing element.

Required elements Northf

• Place a red asterisk to the right of the element label to
indicate required fields; include a note explaining that
required fields are indicated in this way

12
 Web Design Style Guide

Navigation & tabs

Use background color to distinguish navigation elements
Examples
Navigation elements should use a clearly different background
color from the page.

Highlight currently active navigation item with color & “pointer

triangle”
Indicate current item by varying tint level of navigation
background color and with a triangular “pointer” in the direction
of the current item content.

Avoid border-radius on navigation/tab elements

Use square corners.

Ensure all navigation is screen-reader and keyboard accessible

Navigation elements should be accessible. Use appropriate ARIA
attributes, html5 elements (like <nav>), and test your navigation
for keyboard and screen-reader use. Links in nested unordered
lists are the preferred underlying markup.

Indicate links that will remove users from navigation context

with “outside page” icon
If a set of navigation links includes any that will take the user to
another context, include the “outside page” icon. Note that this
icon is not necessary for inline links.

13
 Web Design Style Guide

Performance
Suggestion
Pages should load quickly
Using webpagetest.org, pages should acheive a speed index of
<2.5s on desktop/cable and <5s on mobile/3G.

Interactivity
Requirement Interfaces should be touch-, mouse- and keyboard-friendly
• Touch-friendly: Avoid using hover effects to indicate
interactivity or to access functionality. Ensure interface
elements are at least 16x16 pixels.

• Mouse-friendly: Gesture-based interfaces should provide

“point-and-click” methods rather than requiring users to
perform gestures with a mouse or trackpad.

• Keyboard-friendly: All interactive elements should be

accessible via keyboard-only methods.

Avoid autoplaying elements when possible

Autoplay elements pose accessibility challenges. Avoid where
unneccessary; where necessary, provide a way to pause.

Accessibility
Requirement Meet WCAG 2.1 Level AA
Use both automated and manual testing to verify compliance.

Follow progressive enhancement principles

Ensure interfaces are accessible and functional regardless of tech.

14
 Web Design Style Guide

General Development Considerations

Consider that content, modules, components, etc. may be re- As of March 2019, browser support should be as follows:
used elsewhere on carleton.edu
Fully supported
Design and style elements to support the application via CSS of
different color schemes, typographic treatments, and layouts. • Internet Explorer 11
Avoid inline styles and presentational classes that reduce poten-
tial for reuse. • Edge 17+

• Chrome 61+
Implement print stylesheets
Implement a print stylesheet that strips away navigation and oth- • Safari 10+
er page chrome and clutter.
• Firefox 60+

• iOS Safari 10+

Browser support Basic support
Browsers that represent at least 1% of visits to carleton.edu
should be fully supported (e.g. all functionality works and looks • Chrome 54-60
consistent across browsers). • Safari 9
Browsers that represent less than 1% and more than 0.5% should • Firefox 54-59
receive basic support (e.g. visual differences acceptable, non-
critical functionality may fall back to less-user-friendly but still • iOS Safari 9
functional interface).
This list should be reviewed and updated regularly.
Next-generation versions of fully supported browsers should
be tested and supported to the same standards as their current
versions.

For rapidly updating browsers like Chrome and Firefox, usage

statistics should take into account visits spread across multiple
versions. For example, if we have 0.5% visits from each of 6
versions of Firefox, consider that 3% (1 out of 25) visitors is
visiting with one of these versions.
15