Download the 4:1 PSD Template with guidelines and examples here.


iOS = Apple products | OTT = Over the Top devices (Roku, Apple TV, Xbox).

White Logo 4:1

Where it appears

Details

Example (click image to enlarge)

PBS.org Homepage Carousel

  • Dimensions: 680x170
  • File type: PNG
  • Aspect ratio: 4:1
  • Color: #ffffff
  • Alignment: Left-aligned horizontally, center-aligned vertically


If logo not added, fallback is show name in text

PBS.org Show Page Carousel

  • Dimensions: 680x170
  • File type: PNG
  • Aspect ratio: 4:1
  • Color: #ffffff
  • Alignment: Left-aligned horizontally, center-aligned vertically


Show Page Carousel (Text Fallback)

If logo not added, fallback is show name in text

iOS App Tablet - Show Detail Page

  • Dimensions: 680x170
  • File type: PNG
  • Aspect ratio: 4:1
  • Color: #ffffff
  • Alignment: Left-aligned horizontally, center-aligned vertically

 

iOS App Tablet - Show Detail Page (Text Fallback)

If logo not added, fallback is show name in text

  • Text truncates at ~60-70 characters, or 2 lines of text.


Android App Tablet - Show Detail Page
  • Dimensions: 680x170
  • File type: PNG
  • Aspect ratio: 4:1
  • Color: #ffffff
  • Alignment: Left-aligned horizontally, center-aligned vertically

 

Android App Tablet - Show Detail Page (Text Fallback)

If logo not added, fallback is show name in text

  • Text truncates at ~60-70 characters, or 2 lines of text.


OTT Roku - Show Detail Page

  • Dimensions: 680x170
  • File type: PNG
  • Aspect ratio: 4:1
  • Color: #ffffff
  • Alignment: Left-aligned horizontally, center-aligned vertically

OTT Roku - Show Detail Page (Text Fallback)

If logo not added, fallback is show name in text

tvOS OTT Dark Theme - Show Detail Page
  • Dimensions: 680x170
  • File type: PNG
  • Aspect ratio: 4:1
  • Color: #ffffff
  • Alignment: Left-aligned horizontally, center-aligned vertically

 

tvOS OTT Dark Theme - Show Detail Page (Text Fallback)

If logo not added, fallback is show name in text next to show poster

  • Text truncates at ~40-50 characters, or 1 line of text.


Color/Black Logo 4:1

If both a color and a black logo asset are available:

  • Color/black logos always display over a white background. For color logos, please check that the color passes the contrast test with a white background here: https://contrast-ratio.com/
    • If the color logo does pass the contrast test, use the color logo.
    • If the color logo does not pass the contrast test, use the black logo.

Where it appears

Details

Example

PBS.org - Franchise only (found on Episode page)If logo not added, fallback is Franchise name in text

iOS App Handset - Show Detail Page

  • Dimensions: 680x170
  • File type: PNG
  • Aspect ratio: 4:1
  • Full color logo
  • Alignment: Left-aligned horizontally, center-aligned vertically

 

iOS App Handset - Show Detail Page (Text Fallback)

If logo not added, fallback is show name in text

  • Text truncates at ~30 characters, or 1 line of text.

Android App Handset - Show Detail Page

  • Dimensions: 680x170
  • File type: PNG
  • Aspect ratio: 4:1
  • Full color logo
  • Alignment: Left-aligned horizontally, center-aligned vertically

Android App Handset - Show Detail Page (Text Fallback)

If logo not added, fallback is show name in text

  • Text truncates at ~30 characters, or 1 line of text.


tvOS Light Theme - Show Detail Page
  • Dimensions: 680x170
  • File type: PNG
  • Aspect ratio: 4:1
  • Full color logo
  • Alignment: Left-aligned horizontally, center-aligned vertically

tvOS Light Theme - Show Detail Page (Text Fallback)

If logo not added, fallback is show name in text next to show poster

  • Text truncates at ~40-50 characters, or 1 line of text.


Longer Show Name Examples

Example

Details

Example (click image to enlarge)

Longer Show Name Example 1

A good practice example of how a longer show name would display on PBS.org.

As a general rule, the most important part of the show name should be the largest in the visual hierarchy.

Longer Show Name Example 2

A good practice example of how a longer show name would display on PBS.org.

As a general rule, the most important part of the show name should be the largest in the visual hierarchy.


Stacked/Shorter Logo Display Examples

Example

Details

Example (click image to enlarge)

More stacked logo

Example of how a more stacked logo would display on PBS.org.

The PBS GA UX + Design team is available to assist with any producers who need help with making a horizontal version of their logo.

Shorter logo

Example of how a shorter logo would display on PBS.org.

The PBS GA UX + Design team is available to assist with any producers who need help with optimizing their logo.