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.
headers/footers/partnerships on third party websites
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
notes about branding usage for these colors
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
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.
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.
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.
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.
alpha
beta
gamma
delta
epsilon
zeta
big
kilo
mega
giga
smallprint or milli
micro
Our <ul> and <ol> elements adhere to browser default styles.