Typography

Fonts

Publico Headline Bold

Publico Headline Black

Publico Text Roman

Publico Text Italic

Publico Text Bold

Publico Text Bold Italic

Proxima Nova Regular

Proxima Nova Bold

Primary Text Styles

alpha

beta

gamma

delta

epsilon

zeta

eta

Body Copy Styles

desktop

mobile

Metadata Styles

Metadata Normal

Metadata Large

Other Styles

Related

Dek

Pullquote (desktop)

Pullquote (mobile)

Color

Core Colors

• Off-Black

  #101010
  			rgb(16,16,16)

• Dark Gray

  #7F7F7F
  			rgb(127,127,127)

• Light Gray

  #E8E8E8
  			rgb(232,232,232)

• Off-White

  #F2F2F2
  			rgb(242,242,242)

• White

  #FFFFFF
  			rgb(255,255,255)

Chiclet Colors

• Live / Now Playing

  #B60505
  			rgb(182,5,5)

• Sponsored

  #BD10E0
  			rgb(189,16,224)

• Paid

  #4CAF50
  			rgb(76,175,80)

Gradients

• Hero Video Overlay (<768 & ≥768)

  linear-gradient(rgba(11,106,177,0.25) 0%, rgba(24,66,117,0.25) 50%, rgba(16,16,16,1) 100%)
• Hero Video Overlay (<1020 & ≥1360)

  linear-gradient(to right, rgba(16,16,16,1) 0%, rgba(16,16,16,0) 50%), linear-gradient(rgba(11,106,177,0.25) 0%, rgba(24,66,117,0.25) 50%, rgba(16,16,16,1) 100%)
• Article Lead Image Overlay

  linear-gradient(to right, rgba(16,16,16,1) 0%, rgba(24,66,117,0.2) 63%), linear-gradient(rgba(16,16,16,0.1), rgba(16,16,16,0.1))
• Video Shelf Player Overlay

  linear-gradient(236deg, rgba(65,65,65,0), rgba(34,34,34,0.55))

Gradients: Branded Video Shelves

• 48 Hours

  linear-gradient(to right, #0C1E2C, #275F91)
• 60 Minutes

  linear-gradient(to right, #4A0604, #A60A02)
• CBS Evening News

  linear-gradient(to right, #0A4BAA, #0078E6)
• CBS This Morning

  linear-gradient(to right, #042041, #0682B6)
• CBSN

  linear-gradient(to right, #122D4F, #1766B9)
• Face the Nation

  linear-gradient(to right, #7D1315, #9D0303)
• Sunday Morning

  linear-gradient(to right, #9D5A06, #DE9615)

Show & Channel Colors

• 48 Hours

  #275F91
  			rgb(39,95,145)

• 60 Minutes

  #A60A02
  			rgb(166,10,2)

• CBS Evening News

  #0A4BAA
  			rgb(10,75,170)

• CBS News Radio

  #041A56
  			rgb(4,26,86)

• CBS Sports HQ

  #033963
  			rgb(3,57,99)

• CBS This Morning

  #0682B6
  			rgb(6,130,182)

• CBSN

  #1766B9
  			rgb(23,102,185)

• Face the Nation

  #9D0303
  			rgb(157,3,3)

• Sunday Morning

  #DE9615
  			rgb(222,150,21)

Buttons

Grid "More" Button

• More in Lorem Ipsum
• Lorem Ipsum More

River "More" Button

• Show More

Commerce Button

• $399.95 at Amazon

Unmute Button

• Unmute

Circular Buttons

Refer to mocks for button dimensions in various contexts.

Form Elements

Text

Textarea

Select

Radio Buttons

Checkboxes

Button

Assets

SVG sprite file: http://design.cbsig.net/CBSNEWS_SITE_DESIGN/STYLEGUIDES/web/img/sprite.svg

Icons

• Caret

• Close

• Gallery

• Media

• Navicon (desktop)

• Navicon (mobile)

• Quote

• Search

• Unmute

• Video

Social/Share Icons

• Email

• Facebook

• Flipboard

• Instagram

• Link

• Twitter

• Youtube

Show Logos

• 48 Hours

• 60 Minutes

• CBS Evening News

• CBS This Morning

• CBSN AM

• CBSN Originals

• Face the Nation

• NCIS

• Red & Blue

• Sunday Morning

• The Takeout

Channel Logos

• CBSN

• CBSN Bay Area

• CBSN Boston

• CBSN Los Angeles

• CBSN Minnesota

• CBSN New York

• CBS Sports HQ

• ET Live

Prototypes

Components & Views

• River View: River (responsive, wireframe)
• River View: River With Hero (forthcoming)
• Grid View: Grid With Hero (responsive, wireframe)
• Grid View: Grid With List and Hero (responsive, wireframe)
• Video Shelf: Hero
  • responsive logic (responsive, mid-fidelity, no functionality)
  • functionality (archived, below)
• Video Shelf: Big Event
  • muted state (responsive, mid-fidelity)
  • playing state (partially responsive, mid-fidelity)
• Video Shelf: Non-Branded (responsive, mid-fidelity)
• List View: List (responsive, wireframe)
• List View: List with Lead Image (responsive, mid-fidelity)
• Show Promos & Footer (responsive, mid-fidelity)

Article

• text styles & images (responsive, hi-fidelity)
• third-party embeds (responsive, mid-fidelity)
• video, lead image, ads, etc. (responsive, mid-fidelity)

Other

• CBS News Investigative Unit (responsive, hi-fidelity)
• Desktop Header (not responsive, hi-fidelity)
• Door: spacing (responsive, wireframe)
• CBS News logo SVG

Archived

The below prototypes are not up-to-date. We may refer to certain general aspects of them (such as interactivity, animation, etc), but they are not definitive.

• Door: hovers (with proposed Heading treatment) (partially responsive, hi-fidelity)
• Gallery (responsive, mid-fidelity)
• Video Shelf: Hero functionality (partially responsive, mid-fidelity, partial functionality)
• Longform Article (desktop) (non-responsive, mid-fidelity)
• Longform Article (mobile) (non-responsive, mid-fidelity)