×

Menu

Design System

About

The WNYC Product Design team aims to maintain a consistent style across all WNYC products. To facilitate this, we have created the following style guide documenting a system of reusable components. Our goal is to achieve a faster and smarter process for product design and development.

Our design system is based on the principles of atomic design. The idea behind this methodology is that small elements of our products (atoms) can be designed and then combined into larger modules (molecules) which can then be combined into organisms. These elements can then be stitched together to form templates and pages.

This design system is a living document and will be updated regularly. As it exists now, it's a structured document meant primarily to be a useful foundation from a design perspective, with the future goal of integrating it with our existing code.

For branding/marketing guidance, please see the marketing team's WNYC Brand Book.

The Product Design Team

Marine Boudeau
Director, Design and User Experience

Fiona Carswell
Lead Designer, Design and User Experience

Atoms

Grids

2 column:

750px wide100% wide
300px wide

1 column:

800px wide100% wide

Colors

NYPR Global Digital Colors

    • $white
    • #ffffff
    • rgba(241,241,241,1)
    • $light
    • #f1f1f1
    • rgba(241,241,241,1)
    • $dark
    • #333333
    • rgba(241,241,241,1)
    • $black
    • #000000
    • rgba(255,255,255,1)

WNYC Digital Colors (in progress)

    • $wnyc-red
    • #de1e3d
    • rgba(222,30,61,1)
    • $wnyc-rouge
    • #8d2131
    • rgba(141,33,49,1)
    • $blue
    • #128cf4
    • rgba(18,140,244,1)
    • $lightgreen
    • #0EB8BA
    • rgba(14,184,186,1)

Typography

Open Sans is the primary font used throughout WNYC digital products. We’ve chosen this font because it was designed as a sophisticated yet neutral font. It is optimized specifically for high legibility, and quick load times, across print, web, and small mobile screens. It is also elegant and stylized to fit well with flat design, while still being open-source and easily-available to contractors and collaborators. We primarily use regular, semibold, and bold weights. Italic is also occasionally used.

In the past we’ve used Gotham. We retired this font from our digital products but it is still often used in images (ads, marquee images, logos, etc).

Our typography styles:

  • Heading Level One

    
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 45px;
line-height: 55px;
}

    h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 42px;
    }

  • Heading Level Two

    h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 32px;
line-height: 44px;
}

    h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    }

  • Heading Level Three

    h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 36px;
}

    h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    }

  • Heading Level Four

    h4 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
line-height: 24px;
}

    h4 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    line-height: 22px;
    }

  • This is normal paragraph text. If part of the text needs to be emphasized, it should be bolded. This is what a link should look like within a normal paragraph.

    p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 30px;
}

    p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    }

  • This is smaller paragraph text. This is typically used in list views.

    p.list {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
}

    p.list {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    }

  • This is small print. It's used for legalese text, metadata, or other info that is important but not primary to the page. This is what a link should look like here.
    small_print {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
}

    .small_print {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    }

  • "This is how we display a quote. The quote should be no more than 120 characters in length, including spaces."

    - Person quoted
    .quote {
max-width: 800px;
margin: 10px 0;
padding: 30px 30px;
text-align: center;
border-top: 4px solid #f1f1f1;
border-bottom: 4px solid #f1f1f1;
}

    .quote {
    max-width: 100%;
    text-align: center;
    margin: 10px 0;
    padding: 20px 0px;
    border-top: 4px solid #f1f1f1;
    border-bottom: 4px solid #f1f1f1;
    }

    • This is a bulleted list
    • Bulleted list item 2
    • Bulleted list item 3
    • Bulleted list item 4
    .bulleted li {
list-style-type: disc;
padding: 5px 0px;
margin: 0;
}
    1. This is a numbered list
    2. Numbered list item
    3. Numbered list item
    4. Numbered list item
    .numbered li {
list-style-type: decimal;
padding: 5px 0px;
margin: 0;
}

Links and Hover States

Dates and Times

Keep abbreviations consistent across WNYC products:
Hour = “hr”
Minute(s) = “min”
Seconds = should be rounded up to 1 minute

Dates should be written out in standard format, with the month shortened to the first three letters. For example: Jan 4, 2017.

Buttons

We have a variety of buttons depending on the emphasis desired for the call to action.

  • Basic button

    button {
width: auto;
border-radius: 50px;
font-weight: 400;
padding: 8px 25px;
font-size: 18px;
line-height: 30px;
border: 2px solid;
border-color: #f1f1f1;
background: none;
color: #128cf4;
cursor: pointer;
}

button:hover {
border-color: #ddd;
color: #1068b2;
}

  • Basic button, small

    button.small {
font-size: 14px;
line-height: 26px;
padding: 7px 20px;
cursor: pointer;
}

  • Basic button with emphasis

    button.emphasis {
background: #128cf4;
color: #fff;
font-weight: 600;
border: none;
}

button.emphasis:hover{
background: #1068b2;
}

  • Basic button small, with emphasis

Form Inputs

  • Dropdown styling coming soon.

  • Radio buttons styling coming soon.

  • Multi-select buttons coming soon.

Loaders and Transitions

If elements require any loading time and it's not possible to determine the accurate progressive load time, a spinning indicator can be used. This should only be used on elements within a page, not for the loading of an entire page. Here's an example of a spinning indicator used to indicate loading of audio:

  • Coming soon

Here's an example of a spinning indicator used to indicate loading of content within a section of a page:

  • Coming Soon

When loading an entire page, the impression of a quicker load time can be achieved by first loading a basic 'skeleton' of the page, using simple wireframed elements. Example:

  • Coming soon.

Icons

We maintain a custom icon set with a consistent style that is simple, airy, and legible, serving to compliment a visual aesthetic without detracting from usability. We heavily user-test our icons to ensure that they are interpreted correctly and perceived as consistent with the brand. As our user demographic is often not tech-savvy, any icons that are not easily recognized must also be accompanied with a text label. All icons used must be inline with WNYC’s icon style in terms of consistent line thickness and rounding of edges, and they must be legible on small mobile screens.

Our library of icons are from Noun Project, Fontawesome, or they are custom designed by our team. All icons must be in SVG format.

Here are icons we use (this list is in progress). These must only be used for products created while employed through New York Public Radio:

Images and Logos

All images that accompany stories must be a minimum of 800px wide at the highest resolution possible.

Wherever possible, logos should be delivered as svg files. If this isn't possible, they should be .pngs at the highest resolution and size possible.

Molecules

Forms

Coming soon.

Notifications

Example coming soon.

Call-To-Action Modals

  • A simple call-to-action modal that can be used for a variety of actions. It can be placed within a single column or stretched to fit the width of the page. The colors are customizable to match the brand.

    A modal such as this can link out to any page. It's also possible to link it to a quiz. Ideally the quiz should be built in Typeform. For visual continuity, colors from the modal should be replicated in the typeform quiz.

    Short title goes here

    Explanatory text goes here. These types of modals can be used for buying tickets, taking quizzes, and more.

  • The call-to-action modal can also have a customizable image in the background. If the modal stretches across the width of the page, the background image must either be a repeating pattern or it must fade to a solid color on the right and left sides.

    Short title goes here

    Explanatory text goes here. These types of modals can be used for buying tickets, taking quizzes, and more.

  • The background image can also move as you scroll down the page, as shown here. This works best when using a repeating pattern as the background:

    Short title goes here

    Explanatory text goes here. These types of modals can be used for buying tickets, taking quizzes, and more.

Mailing List Modals

  • The colors are customizable to match the brand, and relevant social links can be added at the bottom.

Organisms

    Lists: Stories

    Story lists can appear in many places. In some cases it's helpful to include the show name, such as a list of stories in a recommended stories section. In other cases this may be redundant, such as a list of episodes on a show page.

    Our Student Loan Secrets, Part 1

    More Americans are taking out more student loan debt and taking longer to pay it back. But we're not talking about the impact that it has on our lives. Until now. Jun 28, 2017

    The Leonard Lopate Show

    Mark Rylance on Rescuing Allied Forces in 'Dunkirk'

    Playwright/director Lila Neugebauer and playwright Branden Jacob-Jenkins explore the collaboration process between a playwright and a director. Jul 2, 2017

    WNYC Studios / Nancy

    You've Told Me This Before

    Asia Kate Dillon’s role on “Billions” helped them understand a non-binary gender identity. Tina Healy comes out as trans over and over again.
    Jan 22, 2017

More...

Accessibility

Text coming soon

File Templates

Here is a Sketch file template of the WNYC web design elements that we use. All design elements, including icons, within this file must only be used for products created while employed at New York Public Radio.