Style Guide Version 3.0 -- 1 of 60 -- style guide 3.0 Updates 2 Page 10 Page 16 Pages 19-20, 22 Page 24-25 Page 26 Page 27 Page 28 Pages 29-34 Pages 35-44 Page 51 Page 52 Page 55 Page 58-59 Pages 63-68 Page 70 Page 71 Page 74 Page 75-78 Pages 112, 114 Page 117-118 Updated Voice Principles Updated: Light Blue as Secondary Blue, Light Blue CMYK and PMS values Added: Neutrals, Primary Accent Alts Includes Light Blue as a Secondary Blue, no longer a Primary Accent Updated: Navy Blue CMYK values, Light Blue CMYK and PMS values New: Primary Accent Alts Light Blue is no longer a Secondary Accent color, it is now a Secondary Blue Updated: Purple HEX, CMYK, and PMS values Colors now include names Includes Primary Gradient as approved overlay over darker imagery Updated with new and updated colors Updated to include note about WCAG AA Accessibility Standard New: Gradients Added: Additional example Updated to include new brand photography Includes new Graphic Elements New: Circle Crop with Gradient New: Curve Added: Light Blue as Circle Highlight fill color New: Circle Highlight over Gradient background New: Do not fill the Circle Highlight with the Gradients Updated: Use of circular forms with longer text New: Large Circle Highlight Introduces Pattern animation styles New: Pattern Corners -- 2 of 60 -- Table of Contents LOGO . . . . . . . . 12-18 Logo Versions . . . . . . . . . . . . Minimum Padding . . . . . . . Improper Use . . . . . . . . . . . Color Accessibility . . . . . . . 13 14 15 16 INTRODUCTION 4-11 Our Purpose . . . . . . . . . . . . . Our Identity . . . . . . . . . . . . . Our Commitments . . . . . . . Our Design Principles . . . Our Voice . . . . . . . . . . .. . . . . Our Visual System . . . . . . . . 4 5 6 7-9 10 11 COLOR . . . . . . . GRADIENT. . . . 19-34 35-44 20 21 22 23-25 26 27 28 29-34 36-37 38 39 40 41 42 43-44 Primary Palette . . . . . . . . . . PBS Blue . . . . . . . . . . . . . . . . Secondary Blues . . . . . . . . . Primary Accents . . . . . . . . . Secondary Accents . . . . . . . Recommended Neutrals . . Overlays . . . . . . . . . . . . . . . . Text Accessibility . . . . . . Primary Gradient . . .. . . Secondary Gradient . . . . . Light Source. . . . . . . . . . . . Filling the Area . . . . . . . . . Shadow . . . . . . . . . . . . . . . . Grain . . . . . . . . . . . . . . . . . . Approved Use and Improper Use . . . . GRAPHIC ELEMENTS . . . . 55-92 Circle Crop . . . . . . . . . . . Curve . . . . . . . . . . . . . . . . Circle Highlight . . . . . . . . Large Circle Highlight . . Symbol Crop . . . . . . . . . . Line and Highlight . . . . 56-62 63-68 69-74 75-78 79-85 86-92 93-96 ILLUSTRATION 94 
 95-96 Style . . . . . . . . . . . . . . . . . . . Approved Use and Improper Use . . . . . Print Guidelines . . . . . . . . . . Translucent Applications . . 17 18 45-49 TYPOGRAPHY 46 47 48 49 PBS Sans . . . . . . . . . . . . . . . Type Styles . . . . . . . . . . . . . Guidance . . . . . . . . . . . . . . Improper Use . . . . . . . . . . . 50-54 IMAGERY . . . . 51 52 53 54 Examples . . . . . . . . . . . . . . . Selection . . . . . . . . . . . . . . . Brand Imagery . . . . . . . . . . Approved Use and Improper Use . . . . . . . PATTERN . . . . 97-118 Color Versions . . . . . . . . Print Use . . . . . . . . . . . . . . . Pattern Rows and Columns . . . . . . . . Filling the Area . . . . . . . . . . Alignment with Cropping . . . . . . Approved Overlays . . . . . . With Logo and Typography . . . . . . . . . With Other Graphic Elements . . . . Animated Pattern . . . . 98-99 100 101-103 104 105-106 107 108-109 110-111 112-118 3 -- 3 of 60 -- PBS is the beacon of thoughtful and thought-provoking media. Our brand evokes a sense of energy and vibrancy, reflecting modern cues while recognizing our legacy. We are a source of thoughtful and thought-provoking media, committed to meaningful and rigorous storytelling and always focused on serving the American public. Our visual and verbal brand expressions are grounded in our design principles: moving, welcoming, and bright. our purpose 4 -- 4 of 60 -- Today, there is no shortage of media. It’s on demand, on every corner, and designed to bring heat—but at PBS, we want more. We want to bring light. For half a century, you’ve welcomed us into your home. You’ve transformed your televisions into history lessons and cooking classes, into National Parks and Great Performances. You’ve proven that Americans are hungry for more than sensationalism. PBS is American: diverse in perspectives, but singular in purpose. We believe that the best ideas illuminate, and even challenge. Most of all, we believe that no matter your experience or age, interests, or income, PBS is yours, a space and community for everyone. Together, we’ll ignite a love of learning, deepen understanding, broaden horizons, and connect people to the world around them—anywhere, anytime. We’ll transform our living rooms, communities, and ourselves. This is what media is capable of. This is PBS. The beacon of thoughtful and thought- provoking media. Our Identity WHO WE ARE 5 -- 5 of 60 -- 24 COMMUNITY WITH PURPOSE We inspire, connect, and strengthen a community that is enthusiastic about shared stories and ideas. BRAVE ENGAGEMENT We foster engagement by uncovering new topics and ideas, never shying away from what's tough or unfamiliar. STORIES WITH MEANING We strive to make a difference by telling our audience the significant and relevant stories that matter to our lives. RIGOR AND REASON Our content is informed and informative. We go in-depth to be complete and truthful. Our Commitments what we deliver 6 -- 6 of 60 -- We’re Moving For over half a century, we’ve been welcomed into homes because of our commitment to inspiring programs that people can connect with on a human level. Fascination is guaranteed when exploring new horizons and perspectives. We zoom out and reveal greater context. We also close in and find beauty in the details. OUR DESIGN PRINCIPLES 7 -- 7 of 60 -- We’re Welcoming One of our hallmarks is celebrating the diversity of what it means to be American. We always want to be inclusive and respectful of everyone who watches, and when we interact, what we say and do is from the heart. We use open, simplified layouts to complement our warm and engaging tone of voice. OUR DESIGN PRINCIPLES 8 -- 8 of 60 -- We’re Bright We stay up-to-date with what's happening in the world today. This makes us not only a reliable source of information, but a refreshing one. We're smart, approachable, and never the loudest voice in the room. Our contemporary expression is reflected in our vibrant color palette and natural, luminous imagery style. We use vibrant colors and natural, luminous imagery. We keep layouts clean and give emphasis to key information. OUR DESIGN PRINCIPLES 9 -- 9 of 60 -- We’re impactful 24 Present/Future Perspective We pull from our heritage to create a better understanding of today and
 tomorrow, and to show PBS's future
 impact to encourage people to donate. Spark curiosity We ignite imaginations by posing
 open-ended statements or questions
 that draw people in. BENEFIT FRAMING We show the impact of our narrative
 through personal stories that deliver
 positive outcomes. We’re celebratory 24 Viewers like you We make direct connection with our audience by leveraging the human importance of each story to demonstrate that we’re in it together. Positive connections Our pride in our shows/content results in confident recommendations. EMOTIONAL LINKS We find mutual interest through common connection inherent in viewers from all walks of life. We’re illuminating 24 More to the story To introduce new programs or initiatives,
 we demonstrate an angle, and a benefit
 for investing time. SHINE A light We see the bright side. Across our topics—from humorous to heavy—we’re positive, uplifting, and action-oriented. facts for perspective We lean into facts to let the story speak
 for itself, and let the viewers form their
 own informed opinions. We have an eye for insight, the light to guide, and the power to illuminate the bigger picture. Our voice powers connections, inspires experiences, and drives how we communicate.
 For more information, download our Voice & Tone Guide and Messaging Training on the Source at and the Hub at . source.pbs.org hub.pbs.org Our Voice 10 -- 10 of 60 -- Our Visual System This style guide explains how to use our brand elements across platforms, including examples to help visualize each element’s intended use and tools to help bring our brand to life. By focusing on our design principles, we can consistently present an impactful and unified identity across experiences. 11 -- 11 of 60 -- Shield Logotype Profiles Registered trademark symbol* *Only used in print Logo Our logo instantly signals who we are—a source of thoughtful and thought-provoking programming for over 50 years. Our iconic shield reflects our community of viewers, gazing slightly upward and engaging with our illuminating content. Our letterforms are modern and highly legible. Their humanist form, scale, and placement take cues from the shield, together forming an inseparable unit and a strong singular brand expression. 12 -- 12 of 60 -- Logo Versions There are two versions of our logo, a white logo and a blue logo They can be used interchangeably One logo might be used more than the other, depending on the platform and background color or imagery The logotype was custom-made for the logo only. Do not recreate the logotype in the PBS Sans font 1 2 3 4 Profiles are always PBS Blue WHITE LOGO Profiles are always White BLUE LOGO 13 -- 13 of 60 -- LOGO | MINIMUM PADDING X 25%X 25%X 25%X 25%X MINIMUM PADDING Minimum padding around the logo is equal to 25% of the height of the logo 14 -- 14 of 60 -- LOGO | IMPROPER USE Do not separate profiles, shield, and logotype DO NOT: Do not rearrange the elements, change the scale of elements, or flip or rotate the elements in the logo DO NOT: Do not alter the colors of the logo DO NOT: Do not place or embed the logo or shield within a box or carrier shape DO NOT: Do not add decorative effects such as emboss or drop shadow to the logo DO NOT: Do not stretch, distort, or otherwise modify the logo DO NOT: DO NOT: Do not use the logo within text Watch your favorite shows. DO NOT: Do not typeset or recreate the logotype using the PBS Sans font PBS PBS Do not knock out profiles of the logo DO NOT: 15 -- 15 of 60 -- LOGO | COLOR ACCESSIBILITY PBS Blue Blue logo Navy Blue Medium Blue Light Blue White Teal Yellow Coral Red Green Purple White logo FAILFAIL FAIL PASS FAILPASS PASS PASS PASS FAIL FAIL FAIL PASS PASS PASS FAIL To ensure readability on digital screens, the logo must pass color accessibility. 16 Sky Honey Peach pass pass pass FAIL FAIL FAIL FAIL FAIL PASS PASS FAIL FAIL Pass Pass Cloud Blue logo Fog Slate Deep Sea Midnight White logo Pass FAIL PASS FAILPASS FAIL FAIL FAIL -- 16 of 60 -- LOGO | PRINT GUIDELINES PRINT VERSIONS Only use the CMYK or PMS print versions of the logo with registration symbol for print materials (see page 21 for CMYK and PMS values) MINIMUM SIZING IN PRINT Logo should never print less than 0.5” 0.5” Do not make the logo grayscale DO NOT: BLACK AND WHITE LOGOs FOR PRINT Use is limited only to black and white printing where color is not available Use is limited to one-color printing where PBS Blue is not available, or in material treatments (e.g., stamping, frosting, debossing, embossing) For guidance on when to use a translucent application of our logo, see Page 18 17 -- 17 of 60 -- LOGO | Translucent Applications Do not knock out profiles in the logo DO NOT: For translucent applications, use the black and white logo with black profiles at 25% opacity. Examples of use cases: Social watermarks On digital video 1 2 18 -- 18 of 60 -- Color Few tools are as powerful as color. Used imaginatively, color can evoke a strong emotional response. Our PBS Blue is bright and bold, while also projecting a sense of trust and integrity. Our primary palette consists of PBS Blue, secondary blues, and White, as well as primary and secondary accents that complement our logo. 19 -- 19 of 60 -- 38 1 Primary Palette NAVY BLUE #0A145A C100 M80 Y0 K50 PMS 2757 MEDIUM BLUE LIGHT BLUE #0F1E8C #486CD8 C100 M80 Y0 K21 C75 M35 Y0 K0 C0 M0 Y0 K0 PMS 280 PMS 2130 PBS BLUE #2638C4 C100 M65 Y0 K0 PMS 293 PMS 3252 C49 M0 Y23 K0 TEAL #48D3CD WHITE #FFFFFF PMS 109 C0 M9 Y100 K0 YELLOW #FFCF00 PMS 2345 C0 M59 Y50 K0 CORAL #FE704E 2 3 PBS Blue is our signature color and should be prominently placed for brand impact Primary accents (Teal, Yellow, and Coral) are to be used minimally to emphasize important content CMYK colors are recommended for a majority of print jobs; PMS colors should be used for limited color print jobs (ex: spot colors for high profile print jobs and for selecting blue products including fabrics, paint, other custom color materials); RGB and hex values are for digital use cases only -- 20 of 60 -- PBS BLUE #2638C4 C100 M65 Y0 K0 PMS 293 PBS Blue PBS Blue is our signature color and should be prominently placed for brand impact For a majority of print materials, CMYK color builds are recommended 1 2 Examples of digital use cases: Color for primary elements on a screen Button color for primary calls-to-action Text color for links 1 2 3 21 Start Watching My List -- 21 of 60 -- Secondary Blues MEDIUM BLUE #0F1E8C C100 M80 Y0 K21 PMS 280 LIGHT BLUE #486CD8 C75 M35 Y0 K0 PMS 2130 NAVY BLUE #0A145A C100 M80 Y0 K50 PMS 2757 Alongside PBS Blue for added dimension Alongside content with a more serious tone As text over white or light backgrounds that pass color accessibility 1 2 3 Best when used: 22 -- 22 of 60 -- TEAL #48D3CD C49 M0 Y23 K0 PMS 3252 YELLOW #FFCF00 C0 M9 Y100 K0 PMS 109 CORAL #FE704E C0 M59 Y50 K0 PMS 2345 Primary Accents Best when used: Minimally to emphasize important content One at a time, in a majority of cases 1 2 All three primary accents are interchangeable Best when used: Only include more than one primary accent color if each color has a different and distinct purpose DO: 23 -- 23 of 60 -- 24 COLOR | primary accents | PRIMARY ACCENT alts SKY #8DDFFF C38 M0 Y0 K0 PMS 163 PEACH #FFB699 C0 M35 Y37 K0 PMS 1555 HONEY #FFBD00 C0 M20 Y100 K0 PMS 7549 To ensure readability on digital screens, color pairings must pass color accessibility. YELLOW TEAL CORAL Do not pair Primary Accent Alts with Secondary Accents DO NOT: Infrequently, after it's been determined that Teal, Yellow, and/or Coral will not meet the needs at hand The Primary Accent Alts are used: When the Primary Accents don't meet contrast and accessibility standards When less vibrancy is required due to tonal needs of the piece 1 2 3 -- 24 of 60 -- color | primary accents | primary accent alts | approved use USE as a text color over solid color backgrounds for optimized accessibility USE as a subtle background under text when less vibrancy is NECESSARY USE as an alt text color over footage for higher contrast Primary Accent Alt color options: Sky Honey Peach 25 Primary Accent Alt color options: Primary Accent Alt color options: Sky Sky Honey Peach Peach Make sure there is sufficient contrast between the text and the Primary Accent Alt background (page 32). -- 25 of 60 -- 26 PURPLE #4E05AC C84 M96 Y0 K0 PMS Violet C RED #D6383A C0 M95 Y100 K0 PMS 485 GREEN #087B45 C89 M0 Y100 K10 PMS 2426 Secondary Accents In addition to our primary color palette in infographics and social graphics 1 Best when used: Do not use any secondary accents On-Air Do not use secondary accents in place of primary accents DO NOT: Secondary accents expand the color palette for use in illustration and special use cases in digital and print -- 26 of 60 -- 44 FOG #EEF0F5 C5 M3 Y1 K0 SLATE #5C6E85 C69 M52 Y34 K9 DEEP SEA #040C41 C90 M80 Y0 K70 MIDNIGHT #000525 C50 M30 Y0 K95 CLOUD #F6F8FA C3 M1 Y0 K0 Recommended as a darker background color, alongside or as an alternate to PBS Blue or Secondary Blues Recommended as a lighter background color, alongside or as an alternate to White Recommended as a text color on White backgrounds or as a background color with White text COLOR | RECOMMENDED NEUTRALS These are the recommended neutrals which can be shifted lighter or darker as needed The option to shift colors is limited to a cool color palette. When paired with text, check for color accessibility (see pages 29-34) Best when used: As non-primary elements in a design (ex: boxes that hold content, as a key or legend) 1 Do not use neutrals as a replacement for our primary or secondary palettes Do not create neutrals by modifying primary accents or secondary accents Do not use neutrals On-Air DO NOT: -- 27 of 60 -- lighter imagery Darker imagery COLOR | OVERLAYS Do not make the overlay too dark to obscure the imagery or footage DO NOT: Do not make the overlay too light to create inadequate contrast DO NOT: Solid color fill and the Primary Gradient are used for darker imagery. If using a Primary Gradient fill, set the overlay to 80% opacity. Overlay color options over darker imagery: Overlay color options over lighter imagery: White Premieres SUN MAY 13 8/7C 28 PBS Blue Navy Blue Medium Blue Primary Gradient* *For more information about the Gradients, see pages 35-44. -- 28 of 60 -- COLOR | TEXT ACCESSIBILITY | primary blue backgrounds PBS Blue PBS Blue Light Blue Navy Blue Medium Blue White Teal Yellow Coral Red Green Purple Navy Blue Medium Blue White FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL PASS PASS PASS PASS PASS PASS FAIL FAIL PASSFAIL FAIL FAIL PASS PASS PASS PASS PASS FAIL FAIL FAILFAIL FAIL FAIL FAIL PASS PASS PASS FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL PASS PASS PASS To ensure readability on digital screens, color pairings must pass color accessibility. Each color marked with a check shows passed WCAG AA ratio for Normal Text. 29 Light Blue FAIL FAIL FAIL FAIL PASS -- 29 of 60 -- COLOR | TEXT ACCESSIBILITY | primary blue backgrounds PBS Blue Light Blue Navy Blue Medium Blue White To ensure readability on digital screens, color pairings must pass color accessibility. Each color marked with a check shows passed WCAG AA ratio for Normal Text. Sky Honey Peach FAIL FAIL FAIL FAIL FAIL FAIL PASS PASS PASS PASS PASS PASS PASS PASS PASS 30 -- 30 of 60 -- COLOR | TEXT ACCESSIBILITY | PRIMARY ACCENT backgrounds PBS Blue Teal Navy Blue Medium Blue White Yellow Coral PASS PASS PASS FAIL PASS PASS PASS FAIL PASSFAIL PASS FAIL 3 No primary accents pass when paired with White To ensure readability on digital screens, color pairings must pass color accessibility. Each color marked with a check shows passed WCAG AA ratio for Normal Text. Only Teal and Yellow pass when paired with PBS Blue All primary accents pass when paired with Navy Blue and Medium Blue 1 2 31 Light Blue FAIL FAIL FAIL -- 31 of 60 -- FAIL COLOR | TEXT ACCESSIBILITY | neutral backgrounds PBS Blue Cloud Deep Sea Navy Blue Medium Blue White Teal Yellow Coral Red Green Purple Fog Slate Midnight FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL PASS PASS PASS PASS PASS PASS PASS PASS PASS PASS FAIL FAIL PASS PASS FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL To ensure readability on digital screens, color pairings must pass color accessibility. Each color marked with a check shows passed WCAG AA ratio for Normal Text. 32 Light Blue FAIL FAIL FAIL FAIL PASS PASS FAIL FAIL FAIL FAIL FAIL FAIL FAIL PASS PASS PASS FAIL PASS PASS PASS PASS -- 32 of 60 -- COLOR | TEXT ACCESSIBILITY | PRIMARY accent alts backgrounds PBS Blue Sky Navy Blue Medium Blue Honey Peach PASS PASS PASS PASS PASS PASS PASS PASS PASS To ensure readability on digital screens, color pairings must pass color accessibility. Each color marked with a check shows passed WCAG AA ratio for Normal Text. All Primary Accent Alts pass when paired with PBS Blue, Navy Blue, and Medium Blue 1 33 Light Blue White FAIL FAIL FAIL FAIL FAIL FAIL -- 33 of 60 -- COLOR | TEXT ACCESSIBILITY | SECONDARY ACCENTS backgrounds PBS Blue Navy Blue Medium Blue White Teal Yellow Coral Red Green Purple To ensure readability on digital screens, color pairings must pass color accessibility. Each color marked with a check shows passed WCAG AA ratio for Normal Text. 34 Red Green Purple FAIL FAIL FAIL PASS FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL PASS FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL PASS PASS PASS FAIL FAIL FAIL All secondary accents pass when paired with White 1 Light Blue FAIL FAIL FAIL -- 34 of 60 -- Gradient 35 Primary gradient secondary gradient Gradients enhance the depth of color pairings. Our Gradients use PBS Blue and our Secondary Blues, and can be used in both digital and on-air applications to add a more cinematic quality to our designs. The Primary Gradient is used for backgrounds and within graphic elements. The Secondary Gradient can be used full screen, when more light and color are needed to add depth and dimension. Best when used: Sparingly and thoughtfully To add visual interest to simple layouts with minimal text 1 2 -- 35 of 60 -- 19 Medium Blue PBS Blue Light Blue 36 gradient | primary gradient The Primary Gradient is our most versatile gradient that should be used for the majority of applications. It can serve as a full bleed background, an overlay for imagery, and in combination with our graphic elements. Download Gradient Illustrator and Photoshop assets for print and digital use on the Source at . The Primary Gradient must always: source.pbs.org Consist of three colors from the brand palette: Light Blue, PBS Blue, and Medium Blue 1 Do not use other colors in the palette to create new gradients DO NOT: The Gradients were created to show a diagonal color shift from light to dark with the lightest color in the top right or left corner. -- 36 of 60 -- gradient | PRIMARY GRADIENT | approved use 37 Use as a full-bleed background for type-driven assets Use as an overlay at 80% opacity over imagery to improve legibility for type as an overlay as a BACKGROUND Gradient fills can be used with graphic elements, like the Circle Crop, the Curve, and the Large Circle Highlight with graphic elements 24 This Night Sunday -- 37 of 60 -- 19 38 gradient | Secondary gradient The Secondary Gradient incorporates Sky in the top corner. This added brightness is useful for providing more visual interest and contrast in compositions that do not have any other competing graphic elements or footage. Download Gradient Illustrator and Photoshop templates on the Source at . The Secondary Gradient: source.pbs.org Must always consist of four colors from the brand palette: Sky, Light Blue, PBS Blue and Medium Blue Can be used as a full-bleed background only when there is no imagery, footage, or competing graphic elements. 1 2 Medium Blue PBS Blue Light Blue Sky Do not use other colors in the palette to create new gradients DO NOT: -- 38 of 60 -- Presentation example title PRESENTER name DATE OF PRESENTATION gradient | light source When using the Gradients WITHOUT footage or imagery, the light source is in the top corner of the frame When using the Gradients WITH footage or imagery, the light source is on the OPPOSITE side of the frame The “light source” within the Gradients (the lightest shade of blue) should be positioned according to the guidelines below. 39 without footage or imagery with footage or imagery -- 39 of 60 -- gradient | Filling the area 40 Include the full range of the Gradient to fill the intended area. The Gradients can be rotated or flipped for vertical layouts with the light source in the top left or right corner. Download the Primary and Secondary Gradient Photoshop and Illustrator assets on the Source at . source.pbs.org FILLING THE AREA The Primary and Secondary Gradient assets include horizontal, vertical, and square versions. 16:9 Version 1:1 Version 9:16 Version -- 40 of 60 -- gradient | Shadow When using a gradient background with curved graphic elements (Circle Crop and Curve), a hard shadow can be added to create more depth. 41 SHADOW PLACEMENT SHADOW color The placement of the hard shadow is always OPPOSITE of the highlight color and at the bottom of the frame. Use Medium Blue for the shadow color. Depending on the background, the blending mode of the shadow layer can be adjusted (page 66). -- 41 of 60 -- gradient | Grain Adding grain can help reduce banding in gradients. The On-Air After Effects toolkit and Photoshop templates for Gradients can be downloaded on the Source at . source.pbs.org 42 without grain with grain After effects photoshop In our On-Air After Effects toolkit, each comp includes a grain layer placed on top of the other layers. You can turn it on or off as needed. Make sure to set the color depth to 16-bit. We also recommend rendering MOV ProRes 422 HQ when possible to further eliminate banding. When building digital assets in Photoshop, you can add a grain layer to avoid banding. Create a gray-colored layer, go to ‘Filter’ > ‘Add Noise,’ and apply the Soft Light blending mode to make the grain subtle over the gradient background. Changing the color depth to 16-bit also helps reduce banding. -- 42 of 60 -- gradient | APPROVED AND improper use 43 Do not place light source of the Gradient on the same side as footage or imagery DO NOT: Do not place the light source of the Gradient on the bottom of the frame DO NOT: Do not use the Gradient with banding DO NOT: Do not use Secondary Gradient with imagery or footage DO NOT: This Night Sunday Do not use other colors in the palette to create new Gradients DO NOT: Use Gradients as background for horizontal layouts DO: This Night Sunday Consider using Primary and Secondary Gradients for simple
 vertical layouts ACCEPTABLE USE: -- 43 of 60 -- gradient | SHADOW | improper use 44 DO NOT: Do not place the light source on the same side as the shadow Do not add a shadow when pairing Gradients with Patterns DO NOT: Do not any other color than Medium Blue for the shadow DO NOT: -- 44 of 60 -- Typography Typography is a key element used to communicate a unified personality for PBS. Our custom PBS Sans font family is inspired by our logotype. It is human, contemporary, and highly legible. Black Black Italic Bold Bold Italic Condensed Bold Light Light Italic Regular Italic Condensed Condensed Italic Medium Medium Italic 45 -- 45 of 60 -- PBS Sans Use PBS Sans for all applications whenever possible Use Arial (Regular and Bold, plus Italics) only on platforms where custom fonts are not available DO: Text color must pass accessibility and be legible on all platforms (see pages 29-34) Black Bold Light Regular Medium As font size larger than 14pt 1 Best when used: 46 -- 46 of 60 -- Type Styles Italic is best when used for: Captions Quotes AP Style Rules 1 2 3 Do not use for primary messages (ex: headers, body copy, etc.) DO NOT: Condensed is best when used for: Credits Fine print 1 2 Do not use for primary messages (ex: headers, body copy, etc.) DO NOT: Black Italic Bold Italic Condensed Bold Condensed Bold Italic Light Italic Italic Condensed Condensed Italic Medium Italic 47 -- 47 of 60 -- TYPOGRAPHY | GUIDANCE TONIGHT Summer of Space Title Case is preferred for headers, titles, and labels ALL CAPS is preferred for brief secondary messages (ex: TONIGHT, ALL NEW, TUNE IN) In the aftermath of the Syrian conflict, millions of people fled their country, joining migrants and refugees from across the Middle East and Africa seeking better lives in Europe and the United States. Many gathered at an informal French refugee camp known as “The Jungle.” Jeffrey Brown reports on a new play that’s putting their stories in the spotlight. The Latest News For these refugees, theater plays a ‘vital role’ in healing Title Case is preferred for headers, titles, and labels Sentence case is preferred for subheaders Sentence case and left-aligned text is preferred for all body copy 48 -- 48 of 60 -- Do not use unapproved fonts DO NOT: Do not use justified paragraph text DO NOT: Do not add effects such as gradients, emboss or drop shadow DO NOT: Typography is a Key Element TYPOGRAPHY | IMPROPER USE Bringing People Together Typography is a key element used to communicate a unified personality for PBS. Our custom PBS Sans font family is a direct extension of our logotype. It is human, contemporary and highly legible. 49 -- 49 of 60 -- Imagery Imagery is at the heart of our brand package and is key to everything we create. Our visual system aims to highlight and elevate the beauty of our content, introducing our audiences to new worlds through immersive experiences and storytelling. 50 -- 50 of 60 -- imagery | examples UP NEXT TONIGHT New Episode 51 -- 51 of 60 -- imagery | selection IMMERSIVE UNEXPECTED SIMPLE Keep it simple. Favor clean, uncluttered compositions Select images that are immersive and invite viewers into being a part of the moment Deliver a perspective that’s unexpected. Explore new angles Show imagery Brand imagery 52 -- 52 of 60 -- Our brand imagery focuses on finding new perspectives on the things we love and offers a window into every corner of America. Recommended: For brand-forward experiences outside of show promotion 1 Download brand imagery on the Source at source.pbs.org. imagery | BRAND IMAGERY 53 -- 53 of 60 -- Do not rotate or vertically flip imagery DO NOT: Do not alter the colors or tones of the imagery DO NOT: Aim to keep imagery full frame when possible DO: Do not alter imagery to be black and white DO NOT: Avoid staged shots that are conventional or appear posed DO NOT: Keep all imagery in full color, even if paired with a color overlay DO: Imagery | Approved use and improper use 54 -- 54 of 60 -- Graphic Elements Our design elements provide flexibility in expressing our brand across platforms. Download Illustrator and Photoshop templates for Circle Crop, Curve, Large Circle Highlight, Symbol Crop, and Line and Highlight on the Source at source.pbs.org. CIRCLE CROP Large circle highlight CIRCLE HIGHLIGHT ALL NEW LINE AND HIGHLIGHT TONIGHT Season Premiere 55 curve SYMBOL CROP -- 55 of 60 -- Circle Crop Inspired by the circular form of our logo, the Circle Crop holds content and adds visual interest across platforms. Call the Midwife Tonight 8/7c NEW EPISODE Harvest Season Independent Lens TONIGHT Best when used: To hold text To hold imagery 1 2 Download Circle Crop Illustrator and Photoshop templates on the Source at . source.pbs.org 56 -- 56 of 60 -- Circle crop | color and imagery option b: Circle crop is image or footage OPTION C: CIRCLE CROP AND BACKGROUND ARE SOLID COLORS option a: background is image or footage Circle Crop fill color options: PBS Blue Navy Blue Medium Blue White PBS Blue Navy Blue Medium Blue White PBS Blue Navy Blue Medium Blue White Background fill color options: Make sure there is sufficient contrast between the Circle Crop fill color and background fill color (see pages 27-31) Circle Crop and background fill color options: 57 -- 57 of 60 -- Circle crop | gradient and color 58 The Circle Crop can also be used with the Primary Gradient to add visual interest to a simple layout. OPTION D: BACKGROUND is primary gradient and circle crop is solid color 58 Navy Blue Medium Blue White Circle Crop fill color options: option e: Circle crop is PRIMARY GRADIENT and background is solid color Do not pair PBS Blue or Light Blue with the Primary Gradient in a Circle Crop layout for
 max contrast DO NOT: Medium Blue Shadow is set to Multiply blending mode*: Depending on the solid background color, the blending mode of the shadow element can change (page 66). Navy Blue Medium Blue White Background fill color options: Medium Blue Shadow is set to Normal or Multiply blending mode*: *A shadow can be added when using Gradients with the Circle Crop but is not required. -- 58 of 60 -- 59 Circle crop | gradient and imagery OPTION f: CiRCLE CROP IS A GRADIENT OVERLAY OPTION g: BACKGROUND IS IMAGE WITH GRADIENT OVERLAY Fill the Circle Crop with Primary Gradient at 80% opacity when behind copy and overlayed on images or footage Set Primary Gradient overlays to 80% opacity when behind copy and overlayed on images or footage The Circle Crop can also be used with the Primary Gradient at full opacity or with transparency when in motion. Background Gradient overlay color options: Circle Crop Gradient overlay color options: Primary Gradient Primary Gradient This Night Sunday -- 59 of 60 -- ROUNDNESS A perfect circle must be used to create the Circle Crop. The recommended roundness of the Circle Crop matches the roundness of the shield in the Symbol Crop (see page 81) CIRCLE CROP | ROUNDNESS When designing with a Circle Crop, download templates on the Source at . source.pbs.org Do not make the Circle Crop too flat DO NOT: Do not make the Circle Crop too round DO NOT: 60 -- 60 of 60 --