Design Elements

• Colors
• Type
• Icons
• Buttons
• Forms

Colors

Sass variables | Sketch Palette (requires Sketch Palettes plugin)

Neutrals

Hues

We have a collection of eight ‘pure’ hues. Using the pure hues whenever possible is encouraged.

However, if there is a situation where there is not sufficient contrast, tints of 10% and 20%, both in darkening and lightening, are allowed.

In Sass, these colors should be acheived using the mix function with the hue and $gray-0 or $gray-100, not the default darken or lighten function.

Tints can be acheived in design software by overlaying the pure hue with a layer of white or black, set to 10% or 20% opacity.

Color Combinations

We strive to meet WCAG 2.0 color contrast ratios to ensure accessibility. These are solid backgrounds with neutral text on top, with indications of what passes the required contrast ratios.

• passes for all type sizes;
• ⚠ passes for large type sizes (above 18px or 14px/bold);
• fails at all sizes

Show Only Passing Combinations

Neutrals

Hues

Show

Darken 20% Darken 10% Pure Hue Lighten 10% Lighten 20%

Type

The needs of typography vary greatly from project to project, so we tend to not be very prescriptive. There are some general rules listed below. Note that we don’t tend to rely much on global generic styles - components tend to supply their needed styling through class names.

We rely on two typefaces: Open Sans and, as an accent typeface, Arvo.

Open Sans

• We make use of the 300, 400, 600 and 700 weights
• Of the four weights, within a given project choose three
• Italics are rarely used, and are usually just when associated with funders or meta information. Think hard before including the actual italic font in consideration of file size. Faux italics are acceptable if not detrimental to the overall aesthetic.
• Use of the 300 weight is restricted to type sizes of 16px/pt or greater, or the same size as the overall body copy - whichever is greater

Arvo

• Is an accent typeface, to be used sparingly. It is not present at all in some projects.
• When used to present the title of a show, is set in ALL CAPS
• Is used a lot in buttons, but not always

Use of ALL CAPS

• Usually used to present meta information of some kind - as an “over title” or other similar concept
• Can be used in a tabbed interface for the tab names
• Must be 20px or smaller
• Keep use restricted to places where you will typically have four words or less - e.g. show titles

Icons

Icon font | SVG Sprite | SVG Individual Files

Brand

Media Playback

Interface

Components

Social Media

Buttons

There are a set of rules that we have around buttons:

• Typefaces: Open Sans (400 weight or greater).
• Border radius is always 2px
• Icons, if used, always appear on the left, and are the same color as the text of the button. Pipes are used to separate the icons only in the case of social sign on buttons
• Trasitions are set to .3 seconds / 300 milliseconds

Fill buttons

A $blue-digital button A $red button A $green button A $magenta button An $orange button A $blue-antique button* A $blue-brand button* A $gray-56 button

• Colors: The above hues and $gray-56 are availble for regular fill buttons
• $yellow is never an option, as it doesn’t have sufficient contrast with $gray-0
• Text is always $gray-0 (i.e., white)
• No border - unless the button’s default state is a “ghost” button, and it fills in when active (e.g. a favorited show) - in that case, retain the original border color
• * These buttons need the “darken 10” variation of the hue to pass contrast tests
• Hover/Focus state: 20% darker color
• Focus state carries the same $blue-brand outline that all focusable elements have
• Active/Pressed state: Scale down by 5%

“Ghost” Buttons

A $blue-digital ghost button A $red ghost button A $green ghost button An $orange ghost button A $gray-87 ghost button A $gray-56 ghost button

• Border and text colors are the same
• Background is transparent
• Hover/Focus state: the button fills in with the color, and the text goes to $gray-0
• Active state: the fill is a 20% darker, scale down by 5%

“Grey” Buttons (with their Active State)

Add to Watchlist In My Watchlist

Add to Favorites Favorite Show

• These are buttons that are meant to convey the “default/activated” state of a related object (usually a video or show).
• The “default state” border and text are $gray-56, and the fill is $gray-5.
• There usually is an icon on the left, that does not change with the state
• The text label in the button changes with state
• The “activated” state can have either a $green or $magenta fill

Social Sign In Buttons

• Sign in with Google
• Sign in with Facebook
• Sign in with PBS Account

Button Sizes

Default button Min button

• Buttons have a default amount of padding
• There is a “min” variation with half the padding in both directions
• There are also “half” and “full” variations that have widths relative to their containers

Forms

• Form inputs should be at least the font size of body copy

“Box” Inputs

• Text inputs of all kinds should have a 2px border radius
• Text inputs should be rendered with a 1px rule all the way around - color should be one of the neutrals that provides sufficient contrast with background
• Text inputs should have white backgrounds, unless you have a very good reason
• Default input text color should be the default body copy color
• Padding in inputs should be consistent within a product

Other Form Inputs

• Should be left to the platform default
• Should only be overridden/styled if there is a VERY compelling reason
• “Stylized” inputs need to replicate the accessibility features of the platform defaults

Form layout

• In wide forms, labels to the left, inputs to the right
• In narrow forms, labels on top, inputs below
• It is up to the designer to decide what is “narrow” and what is “wide”
• At mobile breakpoints, buttons can be 100% wide
• At non-mobile breakpoints, affirmitive actions (e.g. save) is always bottom, left aligned
• Affirmative actions are always a fill button
• At non-mobile breakpoints, secondary (e.g. cancel) buttons are presented next to the affirmative action
• Secondary buttons are ghost buttons in a neutral
• At non-mobile breakpoints, destructive (e.g. delete) buttons are right aligned
• Destructive buttons are ghost buttons in $red, an icon is optional