About TokBox

Our mission - TokBox, a Telefónica company, is changing the way people communicate in the digital world. The OpenTok platform, a TokBox product, is enabling customers to seamlessly incorporate real-time audio and video experiences into their websites and mobile applications.

Our history - Established in May 2007, TokBox started life as a venture-backed consumer video chat service. As more customers wanted to integrate TokBox technology directly into their applications, we launched the industry's first real-time video communications platform, OpenTok.

Brand Guide

TokBox is proud to develop and operate the OpenTok platform. We believe that real-time communications should be seamless to integrate, clearly accessible, and beautiful to experience. When referencing the company, please follow the guidelines for using the TokBox logo and TokBox in writing below.

Logos

Below you will find the TokBox brand logo plus a few helpful do's and dont's when it comes to logo usage.

TokBox logo - horizontal

Ideal logo type - use when possible

Downloads

TokBox logo - vertical

Use when space is limited

TokBox logo - bug without name

Use in UI when space is limited (When used in a layout smaller than 25 x 25px, ® may be omitted.)

TokBox logo - white resources for download

We also have the above logotypes available in white for use on darker backgrounds (see Logo Colors setion below):

Spacing requirements
Exclusion zone
Exclusion zone
Exclusion zone
Incorrect usage

Please don't alter the TokBox logo in any way. That inludes animation, change in color, rotation, skewing, and adding of effects. Here are a few of our favorite faux pas:

Logo Colors

Here we've highlighted the primary and secondary colors for the TokBox logo and backgrounds. We appreciate your not tweaking these colors in any way.

TokBox blue

This is our main color, used most and always on a light background

White

Used on darker backgrounds, ideally TokBox blue

TokBox Colors

Here you will find the values for our primary TokBox brand colors. These include hexidecimal, RGB, CYMK, and Pantone values, when applicable.

PRIMARYUse for Tokbox logo, header copy, and copy you want to draw attention to. d

TokBox blue

HEX: #0099CC
RGB: 0, 153, 204
CMYK: 78, 24, 6, 0
Pantone: 2995

Rich Blue

HEX: #003F5F
RGB: 0, 63, 95
CMYK: 100, 11, 0, 74
Pantone: 303
SECONDARY Use this set for background colors, graphic elements.

State Gray

HEX: #5F6062
RGB: 95, 96, 98
CMYK: 62, 53, 51, 23
Pantone: --

Toasted Ash

HEX: #C5BCB4
RGB: 197, 188, 180
CMYK: 23, 22, 26, 0
Pantone: --

Cream

HEX: #F1EEEB
RGB: 241, 238, 235
CMYK: 4, 4, 5, 0
Pantone: --
ACCENT Use as accent color to make certain information pop. Should be used minimally.

Crimson

HEX: #C40D49
RGB: 196, 13, 73
CMYK: 17, 100, 64, 4
Pantone: --

Gold

HEX: #EAA430
RGB: 234, 164, 48
CMYK: 14, 11, 22, 0
Pantone: --

Iconography

The TokBox icon family is light and clean, yet expressive. The color of an icon is always determined by neighboring content and follows the above color parameters. The family is comprised of three sizes - 30 x 30px, 60 x 60px, and 120 x 120px- which you can learn more about how to use properly below:

Primary icon size: 30 x 30px

This is the most common icon size used throughout our digital and print materials. If an icon’s proportions cannot live within a square boundary, the largest dimension will be 30 px. The most common usage of the 30x30 icon is in-line with text, for example next to an H2. This icon size is also used in CTA buttons, where applicable:

ICON WITH HEADERS. This example showcases a 30 x 30px icon in-line with an H2. The color of icon is the same as the text:

Reliable & secure

This example showcases a 30 x 30px icon in-line with an H3. The color of icon is complimentary the text:

Healthcare

ICON IN A BUTTON. This example showcases a 30 x 30px icon within a call-to-action button:

Contact BizDev
Secondary icon size: 60 x 60px

This icon size is used more sparingly than the 30px family and in order to bring more visual weight to a piece of content. The lineweight of a 60px icon includes both 1px and 2px lines to create greater depth. This icon set has a higher level of detail than the 30px family. The most common usage of the 60 x 60 would be preceding a heading with small paragraph of text:

ICON WITH HEADERS AND BODY CONTENT. This example showcases a 60 x 60px icon in-line with a header and block of text. The color of icon is the same as the text:

Customer Service Kit

This starter kit provides sample code to deploy a customer service video chat application with click-to-call functionally, call queueing and matching algorithm. Written in PHP.

This example showcases a 60 x 60px icon above a header and block of text. The color of icon is complimentary the text:

Audio detection

Responsive technology that reacts and adapts to audio activity.

Tertiary icon size: 120 x 120px

This icon size would be used in rare circumstances to really highlight and call attention to particular content. The lineweight of a 120px icon includes 1px and 2px lines as well as patterns and visual effects like outer glow. This icon size contains the most detail. The most common usage of the 120 x 120 icon would be preceding a headline with a larger block of supporting content or incorporated within a graphical element.

ICON WITH HEADERS AND BODY CONTENT. This example showcases a 120 x 120px icon in-line with a header and block of text. The color of icon is the same as the text:

ICON WITHIN A GRAPHICAL ELEMENT. This example showcases several 120 x 120px icons in a bold container with headline and body copy:

Powerful communication experiences

Build rich, embedded communications experiences with any combination of:

Video
Voice
Messaging
Screen sharing
d

Illustrations

The TokBox style for illustration, infographics, and data visualization focuses on clarity, simplicity, and authority. Whether we’re showcasing data on usage trends or how our platform ensures secure communications, our illustrative approach expands beyond our baseline color story to achieve a bold result. Additionally, we often utilize subtle gradients, textures, shadows and photography to help our graphics jump off the screen.

INFOGRAPHICS. This example shows an infographic for firewall traversal that utilizes vector graphics, branded material, iconography, and imagery to achieve a simple, on-brand result.

dd

Photography

The TokBox approach to photography is to find images that are contextual and tell a story. Our photos capture experiences across use-cases that users and partners can relate to. TokBox images are inspirational, while remaining true to life in subject diversity, tonality, and brightness. The result is photography that moves away from stiff and stock, towards light and candid.

The TokBox image family can be categorized in three groups: end-user portraits, candid context, and product showcase.

End-user portraits

The end-user brings the OpenTok platform to life. Our portraits showcase users who are engaged and confident, as well as from a variety of backgrounds and professions. In these photos, our users are relaxed and natural, yet professional and situationally appropriate.

A VARIETY OF FACES. In addition to meeting the above objectives, we generally present our portraits in two formats: bordered frame for smaller portraits within the body of a page, and full-bleed for larger portraits in either a hero header or dedicated panel:

Candid context

Environment is hugely important in telling our product story. The OpenTok platform powers real-time communications in apps across industries and use-cases: seeing those interactions in-context transforms technology into an accessible and relatable tool.

A RANGE OF PLACES. In addition to meeting the above objectives, we generally present our contextual shots in two formats: bordered frame for smaller images within the body of a page, and full-bleed for larger images in either a hero header or dedicated panel:

Product showcase

The OpenTok platform enables partners and customers to build unique communications solutions that can be experienced seamlessly with their brand and other product features - their solutions and our best practices are displayed boldly, forward-facing, and almost always in a device.

ACROSS ENDPOINTS. In addition to meeting the above requirements, we strive to showcase that our platform supports products on all endpoints by displaying a range of devices and operating systems:

Typography

TokBox’s primary typeface is Avant Garde Gothic, which should be used to communicate key brand messages in display copy and headlines. To achieve optimal balance between professional clarity and a bold statement, we’ve specified which Avant Garde font weights should be used for which headers:

h1 - Avant Garde Gothic - Extra LightOur font of choice for text that will be large display and needing to make a bold statement without being visually overwhelming. 48px unless otherwise noted.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ? . , ; ' "
h2 - Avant Garde Gothic BookOur font for button text and secondary headlines, usually beginning their own section on the page. 30px for h2, 16px for button text.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ? . , ; ' "
h3 - Avant Garde Gothic MediumOur font for paragraph titles, tertiary headlines, or smaller content that needs to pop within the page. 18px unless otherwise noted.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ? . , ; ' "
TokBox’s secondary typeface is Muli, which should be used for body copy and any other large blocks of text content:
p - Muli RegularOur font for body text. 16px unless otherwise noted.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ? . , ; ' "

TokBox in Writing

TokBox as a company and brand name has a particular spelling. Here are some tips to help you along the way.

The "B" in TokBox is always capitalized as well as, of course, is the "T"
TokBox
Please write TokBox in plain text rather than embedding the logo into text
Some mistakes we'd like to help you avoid:
Tokbox
Tok box
tokBox
tokbox
Do not use TokBox registered trademarks in the possesive or plural formPlease don't pluralize or use the TokBox trademark in the possessive. It's best to introduce TokBox as the proper adjective followed by the appropriate descriptor.

The OpenTok Platform, powered by TokBox


The OpenTok Platform powered by TokBox, is a powerful, embedded communications platform powered by WebRTC. It offers a suite of industry leading APIs, a global cloud infrastructure, and pre-configured solutions tailored for an enterprise experience.

When referencing the platform, please follow the guidelines for using OpenTok in writing below.

The OpenTok Platform in Writing

Just like our name, we're particular about how you refer to our flagship product. When first referencing the platform, please write out “The OpenTok Platform powered by TokBox.” Afterwards, you can simply refer call it “The OpenTok Platform.” Here are some tips to help you along the way:

The "O" in OpenTok is always capitalized as well as, of course, is the "T"
OpenTok
Some mistakes we'd like to help you avoid:
Opentok
Open tok
openTok
opentok

TokBox and Telefónica


In 2012, TokBox was acquired by Telefónica Commercial & Digital, a division of Telefónica S.A. Telefónica Commercial & Digital is the global digital technology and innovation arm of Telefónica, the leading global integrated communications operator. Telefónica is our parent company with whom we collaborate so it is sometimes necessary to visually represent this relationship.

Logo Relationship

It is a rare case to see the TokBox and Telefónica logos directly next to each other. However, if you are looking to present them together we have a few tips to help you get it right:

Let the logos breathe

Preserving a minimum space of 40px between the TokBox and Telefónica logos is critical for maintaining visual distinction of the respective brands.

Maintain consistency in relative size

Balance is key - if one logo has been established at a certain height, the second logo should be established at that same height.

Respect the unique brand colors

If you are showcasing the TokBox and Telefónica logos together on a light background, please preserve the respective brand logo colors.

If you are presenting the two logos together on a dark background, please use the white logos.

TokBox and Telefónica in Writing

If you’re highlighting to the relationship between TokBox and Telefónica, please defer to the language of “TokBox, a Telefónica company.”

Oldies but not goodies


The original TokBox logo, OpenTok logo, older graphic language and color story are all an important part of our company's history and growth, but are now only used in select and internal scenarios. We appreciate your using the current logo and branding materials highlighted here on all current and future executions. Check back to this style guide for future updates.