Full color

Greyscale, black text

Greyscale, white text

Monotone
Only for use on transit labels and other printed materials where greyscale and full color are not available.
ro regular at a minimum size of16px.
Graphics and marketing materials for SWAN and the services we support.



Only for use on transit labels and other printed materials where greyscale and full color are not available.
ro regular at a minimum size of16px.
The SWAN color palette is drawn from the colors available through the Material Design system. We use 5 core colors, each of which has a dark and light version to use as accent colors.
We must follow accessibility standards for color contrast when using this palette for text elements, including links, buttons, and other text elements. Color contrast is determined by both the font-size and the contrast between the foreground and background colors.
Use the primary color for interface elements containing text, such as buttons and links. This color meets accessibility standards for text on a white background at any font size.
Light: #4fb3be
Dark: #005661

Use these in addition to the primary color. Some of these colors can be used as text where indicated. Some can only be used for accents or background colors to dark text.
For text, use at any font size and on a white background.
Light: #e35183
Dark: #78002e

For text, can use at any font size on a white background.
Light: #5e92f3
Dark: #003c8f

For text, can use at any font size on a white background.
Light: #ff7043
Dark: #8e0000

Use as an accent or background for black text. Do not use as text on a white background.

Body text should generally be dark gray(#666666) or black(#000000) on white for readability.
On web properties, we use a light gray, #f5f5f5, for backgrounds.
Use the Gray 50 palette in Material Design to select additional gray-scale colors for graphics and interfaces.
Often we need to represent a status in an interface. The following color pairings are suggestions if you have the option to customize a status. If an interface doesn't allow you to customize the errors and alerts, that is okay - just try to generally follow the suggested color/status pairings.
If our primary fonts are not available in a system, you may use:
In our web properties, we use the following font stacks:
We attempt to mostly use native system UI fonts on web properties to improve performance and display.
Title(Print Only)
Font: Source Sans Pro, regular or semibold, font-size 5xbody text;
Heading 1 & Web Title
Font: Georgia, regular
Font: Georgia, regular
Font: Source Sans Pro, bold
Font: Source Sans Pro, italic, regular
Font: Source Sans Pro, bold
Body text is Source Sans P
Printable list of SWAN libraries with a map.
Signage for OPACs on key Aspen features, developed by ByWater Solutions.
Search by product (database) name and filter by resource type for quick access to print bookmarks, handouts, posters, and so much more! Many of these allow for libraries to upload logos and type in additional information.
Available graphics and printable, editable materials for spreading the word about your subscription.
ComicsPlus logos and marketing material available for print. These appear to be non-editable, but nice variety of posters and bookmarks, as well as Social Media Posts.
Graphics and editable templates for marketing materials, including posters, signs, and bookmarks.
*must be signed in with L2 credentials to view
Editable bookmarks
Ready to print, non-editable.
Getting Started with Hoopla materials:
All materials above plus additional materials:
Flyer and graphic available to download and print. Not editable.
Free resources that can be completely customizable as well as ready-to-print brochures, flyers, graphics, bookmarks and so much more!
Adapted from the 18F Content Guide.
Address the user as “you” whenever possible to refer to the primary audience for the page or site. If you need to use “member” or “patron”, use it as a descriptor of “you” --“As a member of SWAN, you can…”, “As a SWAN patron, you can..”
Duplicate content creates poor search results, confuses people, and damages our credibility. If users find two pieces of content that say different things, they will be more likely to open a ticket, or worse, give up.
Before you write new content:
Sometimes it will make sense to write on the same topic for different audiences (e.g. holds management for patrons vs. library staff).
Do the hard work to make it simple. Concise writing is harder to write, but easier to read, than wordy writing. Save our members time, and take the time to edit your writing.
Use plain language that our members understand.
People read differently on the web than they read print -- they tend to skim, scan, and read only about 25% of the text on the page.
Create your content so it is easier for our members to read and search online, and easier for content authors to maintain over time.
There are some situations where a non-HTML format is appropriate:
In these cases:
Note: Presentation slides are never a substitute for information that should be in HTML. Policies, documentation, and other forms of content should be updated as HTML content before or very shortly after the presentation.
Regularly review and update your content. Take advantage of regularly scheduled content audits, but don’t wait to update your content if new information becomes available or older policies and procedures change.
Review web analytics for:
Review tickets for common issues and questions --this could be a sign new documentation is needed.
Your content may need to be archived or deleted as it becomes outdated or redundant. Be thoughtful about deleting content and plan for URL redirects and other tools to help users that are used to finding that content. When it doubt, it is easier to archive or unpublish than re-create from scratch!
When you create a new piece of content, consider the best content type and location for it. Always ask:
See Content Types for more guidance on the right place for your content.
Audiences we serve, in priority order, include:
Titles organize pages and guide readers. A title appears at the beginning of a page or section and briefly describes the content that follows.
Titles are (you guessed it) in title case (every word capitalized except for a, an, and the).
Don’t use punctuation in a title unless the title is a question.
H1 is reserved for titles.
Headings and subheadings organize content for readers.
Headings (H1) give people a taste of what they’re about to read. Use them for page titles only.
Subheadings (H2, H3, etc.) break articles into smaller, more specific sections. They give readers avenues into your content and make it more scannable.
Headings and subheadings should be organized in a hierarchy, with heading first, followed by subheadings in order. (An H2 will nestle under H1, an H3 under H2, and on down.)
Include the most relevant keywords in your headings and subheadings, and make sure you cover the main point of the content.
Be consistent with how you phrase titles. If your guide or tutorial has several pages, stick to the same naming convention for scannability, such as:
Use title case for page titles (h1). Use sentence case for subtitles H2 and smaller. In sentence case, you do not capitalize every word (you write it as a sentence).
Use links to point users to relevant content and trusted external resources.
Don’t include preceding articles (a, an, the, our) when you link text.
If a link comes at the end of a sentence or before a comma, don’t link the punctuation mark.
Don’t say things like “Click here!” or “Click for more information” or “Read this.” Write the sentence as you normally would, and link relevant keywords.
The same link text with different links is an accessibility violation.
Buttons should always contain actions. The language should be clear and concise. Capitalize every word, including articles. It’s OK to use an ampersand in button copy.
Examples:
Use lists to present steps, groups, or sets of information. Give context for the list with a brief introduction.
Number lists when the order is important, like when you’re describing steps of a process.
Don’t use numbers when the list’s order doesn’t matter.
Use clear verbs to tell readers how to interact with interface elements:
Emphasize the interface label, e.g.
Use the greater than symbol > for hierarchical menus:
Images must use alt text.
Images should not be the only method of communication, because images may not load or may not be seen. Avoid using images when the same information could be more clearly communicated in writing. See tips for when to include images.
Avoid the ‘zig-zag’ image layout. Format images all to the left or right on a page.
Avoid using images of fonts. If you need to use a screenshot, aim for high contrast between your font and background colors.
Add images using the image icon in the body text editor:
Alt text is a way to label images, and it's especially important for people who can’t see the images on our site. It also improves search results.
Alt text should describe the image in a brief sentence or two.
When you upload an image you will be prompted to add alt text:
Photographs should be in .jpg format.
Screenshots and graphics should be in .png format.
Take screenshots of what your user sees, and avoid screenshots of the entire screen - this can be overwhelming and hard to read.
Focus on the specific element you are demonstrating, with just enough context the user knows where the element is on the screen.
Videos must include closed captions. YouTube provides instructions to edit and add closed captions.
Consider these additional best practices for video content.
Tables are only for tabular data: two or more “objects” (rows) that share two or more “values” (columns).
Add tables as a page section, or in the body text editor.
In tables, column widths are the same for all rows, which can make them easier to scan visually.
Tables are easily navigable for sightless users so long as the content is organized in a logical way. Here are some other guidelines to consider:
View guidelines for accessible tables from WebAIM.
Only use files for content that is meant to be offered in print, or downloaded and manipulated. For example, a patron brochure or a dataset in spreadsheet form.
Always include the file format in a link to a file.
For meetings or agendas, include the date created or the meeting date as YYYY-MM-DD first, followed by an underscore. For other documents, do not include a date.
Always separate words with an en dash (-). Don’t use spaces.
Include the document format in the link, at the end of the description in parentheses.
Offer documents most widely available format, while also including an editable source when necessary.
For example, include a brochure as a Word file and as a PDF.
It is always preferred to update a file instead of uploading a new version. Then the same link will work, and display a new file.
Spell out an acronym the first time it is used. Then use the short version for all other references. If the abbreviation isn’t clearly related to the full version, specify it in parentheses.
Example:
Use active voice. Avoid passive voice.
In active voice, the subject of the sentence does the action. In passive voice, the subject of the sentence has the action done to it.
Title case capitalizes the first letter of every word except articles, prepositions, and conjunctions. Sentence case capitalizes the first letter of the first word.
Titles are in title case.
Headings and subheadings are in sentence case (H2, H3, H4, etc.) -- In general, just always use sentence case unless it's a title. When writing out an email address, use all lowercase.
Don’t capitalize random words in the middle of a sentence. Do not capitalize: website, internet, online, email.
The exception is if you are writing interface instructions and exactly transcribing a button or link.
Example:
• Go to Events > Add Event
Use title case for job titles. Example: The Executive Director will lead the presentation.
Capitalize the first letter of an item in a list. Example:
We use the Oxford comma - use a comma after the first two, before the “and”.
Example:
You can check out DVDs, books, and audiobooks.
Feel free to use contractions.
Abbreviate days as on three letters:
Sun., Mon., Tue., Wed., Thu., Fri., Sat.
Abbreviate months as:
Jan., Feb., Mar., Apr., May, June, July, Aug., Sept., Oct., Nov., Dec.
When writing time, use “a.m.” and “p.m.”, lowercase.
Use the forward slashes between months, days, and years if writing the date out numerically. Always include the year.
Example: 10/29/2018
Always include the full time, and use periods in a.m. and p.m.
Always save file names with a hyphen between each word. This improves search indexing.
Don’t include spaces in file names. Use all lowercase.
Example: library-calendar-widget.png
For links to files, always include the file extension at the end of the link label, in parentheses. Put file extensions in all caps. If the file is over 1MB, include the file size rounded to the closest whole number.
Example:
Download the My Accounts brochure (PDF - 20MB)
Spell out numbers that begin a sentence. Otherwise, use a numeral. All numbers more than three digits get commas, unless it is a barcode.
Barcodes should be written with no dashes, commas, or spaces, as it would be used in the application software.
Examples:
Write phone numbers as (xxx) xxx-xxxx when displaying contact information for SWAN staff.
Otherwise, use the formatting required in the interface or software. For example, if Workflows uses the format XXX-XXX-XXXX, in documentation about entering phone numbers into Workflows use 312-555-5555.
Use the % symbol for percentage.
Use the & symbol in titles, but use “and” in body text and headings.
Book titles, movie titles, and other specific titles available for checkout should be italicized. If italics aren’t available, use quotation marks. Follow heading capitalization rules for documents, blogs, and materials.
Also see the Diversity Style Guide and Disability Language Style Guide
Don’t reference a person’s age unless it’s relevant to what you’re writing. If it is relevant, include the person’s specific age, offset by commas: The CEO, 16, just got her driver’s license. Don’t refer to people using age-related descriptors like “young,” “old,” or “elderly.”
Don’t refer to a person’s disability unless it’s relevant to what you’re writing. If you need to mention it, use language that emphasizes the person first: ”she has a disability” rather than “she is disabled.” When writing about a person with disabilities, don’t use the words “suffer,” “victim,” or “handicapped.” “Handicapped parking” is OK.
Don’t call groups of people “guys.” Don’t call women “girls.” Avoid gendered terms in favor of neutral alternatives, like “server” instead of “waitress” and “businessperson” instead of “businessman.”
It’s OK to use “they” as a singular pronoun.
Use the following words as modifiers, but never as nouns:
Don’t use these words in reference to LGBT people or communities:
Don’t use “same-sex” marriage, unless the distinction is relevant to what you’re writing. (Avoid “gay marriage.”) Otherwise, it’s just “marriage.”
When writing about a person, use their preferred pronouns. If you’re uncertain, just use their name.
Use “deaf” as an adjective to describe a person with significant hearing loss. You can also use “partially deaf” or “hard of hearing.”
Don’t refer to a person’s medical condition unless it’s relevant to what you’re writing.
If a reference to a person’s medical condition is warranted, use the same rules as writing about people with physical disabilities and emphasize the person first. Don’t call a person with a medical condition a “victim.”
Don’t refer to a person’s mental or cognitive condition unless it’s relevant to what you’re writing. Never assume that someone has a medical, mental, or cognitive condition.
Don’t describe a person as “mentally ill.” If a reference to a person’s mental or cognitive condition is warranted, use the same rules as writing about people with physical disabilities or medical conditions and emphasize the person first.
Use the adjective “blind” to describe a person who is unable to see. Use “low vision” to describe a person with limited vision.
This is the who, what, and why: Who are you writing for, what do they need to know, and why do they need to know it.
Choose a persona - this can often be a real-life person representative of your audience. "Representative" is the key phrase here: Write for the rule, not the exceptions.
Define the how, where, and when.
Consult with other experts, spend time with the interface, and do the research you need to make sure your documentation is accurate and meets the needs of your persona.
Always have someone edit your documentation. You may want to have multiple editors, one for style and one for content. Whoever it is, make sure they feel comfortable critiquing you and that you don't let your ego get in the way.
When you are the one editing, look for:
Make your new documentation live to the membership. To do this:
Once your documentation is in the real world, you will find out if it is working or not.
Monitor statistics and use - very low use might be a sign your documentation should be moved to another location or that it is not valuable to your audience.
Be prepared to make changes based on feedback from your audience, whether that is library directors, patrons, or another group.
Documentation often has a limited lifespan - hardware, software, and websites change regularly, we add and remove services. Documentation takes more maintenance effort than other types of content, so be prepared to manage it through it's full lifetime.
To help with this process, the UX team leads a yearly content audit.