🚨This repo has been deprecated: Please reference the style guide in Storybook, which is part of the aclu-vue-library repo.

Intro

This guide shows how to make your website look consistent with the rest of ACLU.org. It collects patterns and best practices that work well for us, and that we try to stick to. They are intended to be diverged from when there is good reason.

It is intended as a specific application of what’s laid out in the wider brand guidelines, so refer to these as your first resource:

Discuss

You can submit questions and comments using Github Issues.

Logo

Common colors: white, black, blue, red

Selected sections have a blue left border with bolded text.

(WIP)

Grid & Layout

Pages are divided into 12 uniform columns, inside either a full-span container or an inset container. Container types could be mixed and matched on the same page, for example to have a full-span header and inset content below.

Layout areas use 1 or more columns, common page layouts divide evenly by 2, 3, or 4.

Columns have left/right padding of 15px so that content always sits inset inside a column.

On mobile and tablet, a good rule of thumb is to stack all elements vertically by default. Then make exceptions case by case when elements are related (such as buttons, navigation links, etc).

Example of HTML/CSS implementation, using floats or flexbox

Breakpoint Specifications

	Viewport	Container
XS	599px and below	100% with 8px margins
S	600px-999px	540px container, centered
M	1000px-1199px	960px container, centered
L	1200px and above	1140px container, centered

Color

(For suggested color combinations, see the brand guidelines.)

When choosing colors, remember to check for accessibility following WCAG AA guidelines. It’s often a small change to darken/lighten something that can have a large impact. You can use this cheatsheet, or any of the following tools to check for proper contrast:

Contrast Checker (Web)
Contrast (Mac only)
Color Oracle (Mac, Windows)
CSS Analyser (Web)

As with anything, apply common sense using the above for guidance. Essential elements (like body text) should take priority while optional elements have some flexibility.

Typography

(See brand guidelines on when to use GT America and when to use Century Schoolbook.)

Download the full set of required web fonts here

Common sizes:

We use a base font-size of 18px
Font sizes are specific to the font-family and limited to: 13, 16, 18, 21, 24, 36, 42, 60
See the figma page above for guidelines on when to use each size.

Text colors

#231F20 for all headers, buttons and form elements

#333333 for body copy

TK guidelines for

Headings, body text, links, lists, inset text, asides, hidden text, captions, microcopy, UI.

Century Schoolbook

doesn’t look great online by default, the suggested typesetting is to decrease wordspacing and very slightly increase letterspacing:

Spacing

Between related elements: 5, 7, 10, 15 (generally, use multiples of 5)
Between unrelated items: 15, 30, 45, 60 (generally, use multiples of 15)

Imagery & Icons

Common ratios: 4:3, 1:1
Avatars/portraits?
Video: 16:9

Search

Interactive Elements

Tap target sizes: on non-touch devices, aim for at least 30px wide/high, on touch devices, aim for at least 45px wide/high.

TK

Sliders/slideshows
Tabs
Share tools
Modals
Embeds & clickwalls

Forms

TK

Disclaimers

Animation

TBD

Accessibility

Some general best practices for creating and maintaining accessible websites:

Consistent page structure
- Use semantic HTML5 markup (e.g, <header>, <footer>) and/or ARIA landmarks (e.g., <div role="banner">, <div role="contentinfo">) wherever possible (read more)
- Use headings (<h1>, <h2>, <h3>) to help maintain coherent page structure
- Nest headings by rank
- Include a sitemap (visually impaired users sometimes rely on sitemaps to help navigate a website)
Prioritize readability
- Avoid placing text over an image
- Avoid all caps–screen readers will spell out words that are entirely capitalized! (Note: this applies to the underlying data; styling via CSS [e.g., font-variant: small-caps] is fine though, again, readibility for sighted-users should also be considered.)
- Do not use the link style for non-linked text
- Do not underline text (reserve underline for links)
Clear and consistent links
- Use consistent styling for links
- Use an external link indicator (icon and/or aria-label? rel="external"?)
- Do not open links in a new window or tab
- Include a:focus styles with all a:hover styles (aids keyboard-only users)
- Ensure links make sense out of context (avoid the generic “more” or “click here”)
Use skip links
- Add “Skip navigation” or “Skip to main content” to skip over nav
- Add “Skip to footer” to pages with lots of links or other tabbable content
Forms
- Every form element should have an associated label
- Error states should have the following:
  - Error message at the top with icon and list the fields to check
  - Each form element should be highlighted in red with icon
Images and Media
- Include alt text on all images
- Add role="application" to html <vide> elements to allow keyboard-only users to access the video controls
- Add captions and transcripts to all video and audio elements
Visualizations
- For maps and visualizations, include an alternative view of the data in table markup

Additional Accessibility Reading

Guide to browsing mockups on Figma

Many sections in this style guide include examples illustrated by mockups on Figma. A few pointers on how to browse:

space bar + mouse click and drag to pan around
command/control] + [0] to view at 100% size
command/control + [=] to zoom in
command/control + [-] to zoom out
scroll to move up and down (if you have a mouse or trackpad that allows for scrolling in other - directions, that will work too)

You can get information on color, type, spacing, etc by clicking on elements and looking at the right sidebar (you’ll need to create a free Figma account to see them).

Style guidelines for ACLU.org