WNYC Web Styleguide

Hello

This is the new home to our web styleguide. It's in progress, as of June 2016.

Styles

Colors

Nullam quis risus eget urna mollis ornare vel eu leo.Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    • .wnyc-red
    • #DE1E3D
    • rgba(222,30,61,1)
    • .grey-blue
    • #201F27
    • rgba(32,31,39,1)
    • .light-blue
    • #627FDD
    • rgba(98,127,221,1)
    • .light
    • #F1F1F1
    • rgba(241,241,241,1)
    • .wnyc-red
    • #DE1E3D
    • rgba(222,30,61,1)
    • .grey-blue
    • #201F27
    • rgba(32,31,39,1)
    • .light-blue
    • #627FDD
    • rgba(98,127,221,1)
    • .light
    • #F1F1F1
    • rgba(241,241,241,1)
    • .wnyc-red
    • #DE1E3D
    • rgba(222,30,61,1)
    • .grey-blue
    • #201F27
    • rgba(32,31,39,1)
    • .light-blue
    • #627FDD
    • rgba(98,127,221,1)
    • .light
    • #F1F1F1
    • rgba(241,241,241,1)

This is what an inline color swatch looks like in case you were wondering.

Hover States

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

Typography

Open Sans is the primary font used throughout the WNYC.org website and apps. We’ve chosen this font because it was designed as a sophisticated yet neutral font, 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, bold and medium. We retired this font from the site but it is still sometimes used in images (ads, marquee images, logos, etc).

Paragraphs

When used on a white or light background:

font-family:'Open Sans', sans-serif;
font-weight:300;
font-size:16px;
letter-spacing:0;
line-height:1.5em;

Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.

When used on a color background:

font-family:'Open Sans', sans-serif;
font-weight:600;
font-size:16px;
letter-spacing:0;
line-height:1.5em;

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Small Headers

Among other purposes, small headers are used for article sections, and names of shows in lists of audio content.

font-family:'Open Sans', sans-serif;
font-weight:600;
font-size:16px;
text-transform:uppercase;
letter-spacing:2px;
line-height:1.5em;

Small header text

Small header text on dark background

Dates and Times

How do we handle time:

  • 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 3, 2016.

Buttons

Here’s a button.

box-sizing:border-box;
        padding:10px 12px;
        -webkit-appearance:none;
        border-radius:6px;
        box-shadow:0px 2px 4px rgba(0,0,0,0.2);
        border:1px solid #e9e9e9;
        outline: none;
        background-color:#F4F4F4;
        font-size:0.9em;

Forms

Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

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.

If you want to use an icon, first check that one does not currently exist on our site for the concept you’re illustrating. If not, you can reach out to the digital team to have them create one. Or you can find icons on The Nounproject or Fontawesome. All icons must be in SVG format.

  • antenna icon antenna
  • arrow-down icon arrow-down
  • pause-hollow icon pause-hollow
  • play-hollow icon play-hollow

Assets

Kits and Templates

Nullam quis risus eget urna mollis ornare vel eu leo.Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Imagery

Nullam quis risus eget urna mollis ornare vel eu leo.Praesent commodo cursus magna, vel scelerisque nisl consectetur et.