Mobile TV styleguide

Colour palette

NameHex or RGBA value
mobile-pink#f54997
air-aroma#C7C7C7
another-gray#212020
battered-gray#323232
black#000
canvey-mud#343434
carousel-gray#2E2E2E
dark-gray#111111
dark-transparentrgba(0, 0, 0, 0.8)
darker-gray#1a1a1a
deep-gray#262525
definition-gray#808080
gray#404040
gudiance-red#AF372A
gunship#777
iplayer-pink#f54997
light-gray#dedddd
light-list-gray#1e1e1e
light-transparentrgba(52, 52, 52, 0.85)
lighter-gray#474747
list-gray#555555
madison-gray#6b6b6a
metallic-gray#4a494a
midnight-gray#979797
mist-gray#353535
not-quite-iplayer-pink#cf3e80
onnow-pink#e92f83
silver#BDBDBD
slate-gray#3B3B3B
tangerine#ff9600
unavailable-gray#909090
white#fff
white-rock#eee

Layout

Font sizes

  • Masterbrand: 11px, uppercase
  • Episode title: 18px
  • Episode subtitle: 14px
  • Episode synopsis: 14px

Channels

  • Channels live panel, off-air

Collections Android

  • Title: Android Tablet portrait
  • Subtitle:

Collections iOS Phone Portrait

  1. Collection Promo: 640x360 @2x / 320x180

Collections iOS Phone Portrait - Open

  1. Channel Attribution - Helvetica Neue, Reg, 20px
    Programme title - Helvetica Neue, Light, 32px
    Episode programme count - Helvetica Neue, Reg, 24px
  2. Programme title - Helvetica Neue, Light, 34px
    Episode title - Helvetica Neue, Reg, 24px
  3. Promo image: 288x162 @2x / 144x81
  4. 1px divider - 12px padding

Collections iOS Tablet Landscape

  1. Collection Promo: 754x1084 @2x / 377x542

Collections iOS Tablet Landscape Open

  1. Programme Title - Helvetica Neue, Light, 52px
    Episode count - Helvetica Neue, Regular, 28px
  2. 12px padding - 1px divider - 12px padding
  3. Promo:288x162px @2x / 144x81
  4. Programme Title - Helvetica Neue, Light, 36px
  5. Episode Title - Helvetica Neue, Regular, 24px

Collections iOS Tablet Portait

  1. Main Promo: 1152x648px @2x / 576x324px
  2. Promo images: 384x216px @2x / 1926x108px
  3. Programme Title - Helvetica Neue, Light, 52px
    Episode count - Helvetica Neue, Light, 28px
  4. Programme Title - Helvetica Neue, Light, 36px
    Episode title - Helvetica Neue, Light, 28px
  5. Overlay panel #000000 @ 60% opacity
  6. Padding 120px @2x / 60px

Collections iOS Tablet Portrait Open

  1. Overlay panel #000000 @ 70% opacity (so you can see the main promo image)
  2. Programme Title - Helvetica Neue, Light, 52px

  1. Promo:754x270px @2x / 377x135px
  2. Promo:754x270px @2x / 377x135px
  3. Promo:754x270px @2x / 377x135px
  4. Promo:754x271px @2x / 377x135px
  5. 1px divider
  6. BG Colour #2a2a2a
  7. Nav BG Colour #141414
  8. Channel Attribution - Helvetica Neue, Reg, 24px
    Programme Title - Helvetica Neue, Light,52px
    Episode Title - Helvetica Neue, Light,28px

  1. Today's - Helvetica Neue, Reg, 24px
    Most Popular - Helvetica Neue, Light, 52px
    Programmes - Helvetica Neue, Light, 32px
  2. Promo:288x162px @2x / 144x81
  3. Channel Attribution - Helvetica Neue, Reg, 20px
    Programme Title - Helvetica Neue, Light, 36px
    Episode Title - Helvetica Neue, Regular, 24px
  4. 12px spacing - 1px divider
  5. Overlay panel - 60% semi-transparent #FFFFFF
  6. Helvetica Neue, Bold, 32px

  1. Touch state area, user can either swipe down the overlay panel or tap the close button.

A-Z iOS Portrait Phone

  • A-Z CTA - View "Category"A-Z

A-Z iOS Portrait Phone - Selected

  • A-Z - CTA Hit State

Links and buttons

Links hover colour is iplayer-pink whereas buttons (or areas that get highlighted) are not-quite-iplayer-pink:

This is a link and

Breakpoints

BreakpointBreakpoint descriptionWidth range
1Small phonesup to 400px
2Regular phonesdrom 401px to 600px
3Small tablets and portrait iPadsfrom 601px to 1008px
4Desktops and landscape iPadsfrom 1009 pixels onwards

Popups

Modal

Background fade: dark-transparent

No modal

Background colour: Slate gray

Icons

Channels

BBC One

NameColour
Main brand colour#ea2923

BBC Two

NameColour
Main brand colour#005761
Secondary brand colour#B0DfDD

BBC Three

NameColour
Main brand colour#3e1638
Secondary brand colour#ff0d7a

BBC Four

NameColour
Main brand colour#fff
Secondary brand colour#000
Blue brand colour#468091

CBeebies

NameColour
Main brand colour#29c5fe

CBBC

NameColour
Main brand colour#bfd832
Secondary brand colour#4e6919

BBC News

NameColour
Main brand colour#990000

BBC Parliament

NameColour
Main brand colour#e61512
Secondary brand colour#e22402
Gray brand colour#2f1b05

BBC Alba

NameColour
Main brand colour#003167
Secondary brand colour#6f9ecd