Back to top


General notes on branding

In general, the NYPL web style is minimal, with subtle touches. (For example, we do use rounded corners, but at 2px for a gentle effect.) The colors used are flat, except for a subtle top-to-bottom gradient used on buttons.

The basis of color on the site is warm grays and white, with accent colors drawn from the primary palette. The primary accent color is blue #0090c4. Red is generally reserved, unless the project is not a core site and uses red as a primary palette color. (On the main site, red is specifically reserved for the "Donate" button.)

Text-on-background color combinations must provide enough contrast to be readable to users with protonopia; the recommended contrast ratio is 4.5:1 (see WCAG level AA).

Icons come from Icomoon's "Ultimate" icon set, and may be augmented by approved custom icons. All additional icons must be exported as SVG format for incorporation into the icon font.

Color palette

Primary palette colors

All colors in the palette have an associated class name, which are listed below. For example, if you want to give an element a light blue background, add the class .blueLight. The same naming convention applies to text color classes, appending "Text"; if you want an element's text to be light blue, add the class .blueLightText.

notes about branding usage for these colors

red #d62828
blue #0090c4

Secondary palette colors

notes about branding usage for these colors

orange #f0731f
green #acb737
purple #aa137e

salmon #fd986c
yellowLight #fbb55d
greenLight #dbdf92
blueLight #c2e7df
purpleLight #eae7ae

Warm grays

warmGrayDarkest #5e564b
warmGrayDarker #7d7872
warmGray #a29d97
warmGrayLighter #c5c2bb
warmGrayLightest #e2dedb



NYPL's default body text is set to 16px, with a 24px line height (or 1rem, 1.5rem line height). The heds and type size classes are set to the standard diatonic typographic scale (see Robert Bringhurst, The Elements of Typographic Style).

Paragraphs are set to a maximum width of 50rem, to prevent an unreadably long line.

NYPL's core web typeface is Lato.

Consider "real" bold/italic font usage vs. "fake bold/italic"; performance issues of many font weights being downloaded

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Use the class .lede or .lead for the first graf, if you want.

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.

It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can.

em and strong

The <em>, <strong>, and <blockquote> element default styles have also been set.

This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship.

Block quotes
There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.

Notes on using type styles

add notes on specific uses of uppercase, bold, etc.

Inuit comes with a set of classes that affect font size only. The first six classes (.alpha through .zeta) correspond to the six heading element settings. Then there are additional very large and very small classes, all listed below.


Our <ul> and <ol> elements adhere to browser default styles.

  • Officers
    • Ishmael
    • Ahab
    • Starbuck
  • Harpooners
    • Tashtego
    • Daggoo
    • Queequeg
  1. Ishmael
  2. Ahab
  3. Queequeg