v1.6.0
    • Get started

      Install the package, load its styles and components, and build your first page.

    • Foundations

      The content guide, CSS utilities, tokens, and the principles behind every pattern.

    • Patterns

      Every pattern with a live example, when to use it, and where it's already in use.

    Content

    Write clear, direct content that helps people find and understand information quickly.

    Voice and tone

    Our tone is warm but direct, friendly but precise.

    Use pronouns when talking to your reader. Say "we" or "us" instead of "the library." Think about how you would respond to someone calling you on the phone or in person.

    Warm but direct

    We're approachable and welcoming without being wordy. We get to the point while still sounding like a person, not a policy document.

    Friendly but precise

    We use conversational language while being clear and specific. We avoid vagueness and jargon, but we don't sacrifice accuracy.

    Understand your audience's behavior

    Think in their language and vocabulary.

    Stay curious about their questions and how they phrase them.

    Listen to how people describe things and what words they use.

    Organize and order your content

    Choose the best way to organize your content. Consider what you're working with and how your audience will approach the information.

    • Organize by time or sequence
    • Group by audience
    • Sort by task
    • List alphabetically
    • Order by how people ask questions

    Use the inverted pyramid. Start with your primary message, then add what people need to know, and finally what's nice to know.

    Break it up by headings

    Use headings to help people scan and find what they need. Make them meaningful, succinct, and unambiguous.

    Go for short and simple

    Break up text with short paragraphs. Present one concept or chunk per paragraph.

    Consider layering

    Present your content at the point of need, rather than sharing it all at once. Guide people through a path to more information. See the content layering principle for the why.

    Keep your sentences short.

    Choose simpler words when you can.

    Write a description that opens the page

    Every page has a description. It's the sentence under the page heading, the summary on cards that link to the page, and the text search engines show, so write one sentence that does all three jobs.

    Don't restate it in the body. The description is the page's opening line, so start the body with what comes next.

    Descriptions are plain text, so keep links in the body.

    Use active voice

    In active sentences, there is a clear subject doing an action.

    Before After
    Library patrons must sign into their library account to renew books. Sign in to your library account to renew books.
    Catalog search relevance is continually being improved. We're improving search results to make them more relevant.
    Interlibrary Loan Request Form. Request an item.

    Use parallel structure

    Use parallel grammatical structure in lists, headings, menus, and sentences. Our brains like patterns.

    Place link labels on menus, buttons, navigation elements, and in body text.

    Make your link labels meaningful and unambiguous. people should know where they'll end up when they select a link.

    This is especially important for visually impaired people who navigate with screen readers and may skip through the page reading links.

    Avoid phrases like "click here" or "more" that become meaningless out of context.

    Underline your links. This is the long-standing convention and best for usability and accessibility.

    Don't rely solely on hover as an indicator.

    Align your text

    Left-justify your text and let it rag right.

    Avoid justified text. It creates inconsistent spacing between words and makes reading harder.

    Don't center text. It's hard on the eyes when the next line starts in a different place.

    Format for emphasis

    Draw attention to content by structuring with headings or using bold for keywords.

    Avoid italics in large sections. Use bold for emphasis instead.

    Use proper capitalization

    Don't use ALL CAPS. It hurts your voice and tone, and it's hard to read because all letters are the same height.

    Capitalize common nouns when they are part of a proper name or designation (Delaware River, Market Street, Room 103). Capitalize formal titles before or after a name, but lowercase them on their own.

    Prefer sentence case over title case, although use title case for a page's main heading (h1).

    Use semantic headings

    Use proper semantic headings in your web content (h1 for Heading 1, h2 for Heading 2).

    This is especially important for screen reader people, but the clear structure helps everyone.

    Don't skip heading levels or use them just for formatting.

    Write alternative text

    Write alt text that provides a text equivalent to audio and visual content.

    Make your alt text approximate the purpose of the image in context.

    Keep your alt text accurate, equivalent, and succinct.

    Relevant guidelines

    For additional style guidance, see the Communications Resource Guide (staff login required).

    This content guide draws from Writing for the Web, a Library Juice Academy course.

    Design System

    Get started Foundations Patterns Release notes · v1.6.0 Design notes