COLOR

PRIMARY COLORS

These are the core colors driving the personality of the site. They provide a modern take on our diverse past, and work well together to create the site’s visual brand.

supporting colors

These are the core colors driving the personality of the site. They provide a modern take on our diverse past, and work well together to create the site’s visual brand.

building blocks

page structure

These are the core colors driving the personality of the site. They provide a modern take on our diverse past, and work well together to create the site’s visual brand.

With its design inspired by urban streets and the posters found there, Montserrat is bold, strong, and official. Yet, it has a few small quirks that give it a friendliness and warmth that you don’t usually find in such sturdy sans-serifs. Use it small for navigation, links, and buttons, and use it large for primary headers. Always use it in UPPERCASE.

Montserrat BOLD

ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Montserrat normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

LORA

Lora is a well-balanced contemporary serif typeface with roots in calligraphy. It is polite, poetic, and warm as a typeface and is well suited for body text. Technically, Lora is optimized for screen appearance, but works equally well in print. Use it small for body text, or large and italic for quotes or other special secondary text. Pair with Montserrat whenever possible to reflect our bold, yet human voice.

LORA regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

lora italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

HTML TYPEFACE USAGE

accessibility

best practices & implementations

We design to meet each consumer where he or she is. We are sensitive to experiential level, timing, and biases and aim to design experiences that are equally accessible to everyone, and equally empowering no matter what the user’s skill set or familiarity. Simple, clean designs are the most effective and wide-reaching.

perceivable

Information and user interface elements must be presented to users in ways that they can perceive. This includes considering individuals using assistive technology (e.g., screen readers for blind users or captions for deaf users) and the limitations of different devices (e.g., grayscale screens or muted mobile devices).

operable

User interface components and navigation must be operable: an interface cannot require interaction that a user cannot perform. Following these guidelines will guarantee that all users can navigate a website or app regardless of their input device (mouse, keyboard, touchscreen, screen reader, etc).

understandable

Users must be able to comprehend content and how to operate an interface.  Create text content that is machine- and human-readable. Develop sites that behave in a predictable way. Always make sure to maintain context.

robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. A robust site will be broadly compatible with past, current, and future web browsers and devices.

attribution

This guide on accessible interfaces has been adapted from the Web Content Accessibility Guidelines (WCAG) 2.0. That document’s status is Recommendation. The document is copyright © 2008 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.