Pattern Library

The Seattle Times' Pattern Library is a collection of design standards and code snippets for quickly and easily designing and building consistent user interfaces.

What it covers

This is a living styles library for two core Seattle Times products:

• The Seattle Times news site (seattletimes.com)
• SSO/subscription pages (funnels, log in, profile pages and My account)

What it does not cover

The Seattle Times collection of products have pattern distinctions that crossover to varying degrees. Some of the products not represented here include:

• Mobile apps (iOS and Android): Check with the Mobile team for a style guide
• Marketing sites (LiveWire, Fund for the Needy, etc.) View The Seattle Times Brand Guide for details. Requires a ST username and password.
• Company site: Primarily used by Marketing to post Press Releases and students looking for internships
• The Print Replica
• The Seattle Times store
• Classifieds, Autos, Homes, Obituary, Jobs
• The Media Kit site with advertising guidelines

What is a pattern?

A pattern is a reusable, global design solution. Designs that are short-lived (AB tested or one-offs) should not be added to the library.

Who maintains the library?

As our digital products grow, so does the living library. For larger updates, dev and design work together to define how to add new sections, patterns or resources to the library.

For maintenance updates, dev and design are responsibility for their sections. There can be crossover with dev, but typically designers update documentation involving style, UX best practices and creating new icons while developers add new patterns as live code and the documentation.

Accessibility

To ensure ST digital products are inclusive to everyone in our community, the UX, IT and Product teams agreed on a set of minimum requirements in the summer of 2019. These are defined by the Accessibility Checklist that is located in the Accessibility section of this site. Guidelines are also provided in context throughout the Pattern Library. Be familiar with the WCAG 2.0 AA guidelines to ensure our products are compliant with Section 508 of the Rehabilitation Act.

Getting Started

The Seattle Times Pattern Library is composed of two sets of tools:

• Pattern Library - documentation and assets for designing UIs
• ST UI - HTML & Sass code used for building UIs

Whether you are a developer in need of UI components or a designer putting together a wire frame, the following guides will help get you started: