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.
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
SECONDARYUse 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: --
ACCENTUse 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 has a straightforward approach, focusing on simplicity and clarity. The color of an icon is always determined by the context’s background, varying between either white, gray and blue. An accent color may be used to quickly highlight the icon’s core concept. If more contrast is needed, an icon may have a thicker 2px outer stroke instead of our standard 1px. A light fill color may also be used to help establish further differentiation between elements.

The family is comprised of two sizes: 60 x 60px and 120 x 120px. A 25x25 series is used in our navigation.

Primary icon size: 60 x 60px

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 60 px. The most common usage of the 60x60 icon is next to a title.

These examples showcase a 60 x 60px icon in-line with an h4 and button in a column arrangement. The color of icon is the same as the text, and the blue is used as an accent to the idea’s core concept :

Secondary icon size: 120 x 120px

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

This example showcases a 120 x 120px icon in-line with an h3. The color of icon is the same as the text:

d

Infographics

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 use the same visual rules as icons but expands beyond our baseline color story to achieve a bold result.

This example shows an infographic for SIP that utilizes vector graphics, branded material, iconography, and special color and strokes to achieve a simple, on-brand graphic:

dd

Photography

The TokBox images are the main storytelling device to our pieces. It 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 heading typeface is Raleway, which should be used to communicate key brand messages in display copy and headlines. As Raleway has a bit of flourish to it, we use it minimally in H1s and major section headings. To achieve optimal balance between professional clarity and a bold statement, we’ve specified which Raleway font weights and colors should be used for which headers:

H1 - Raleway LightOur font of choice for text that will be large display and needing to make a bold statement without being visually overwhelming. 50px and TokBox blue unless otherwise noted.
Professional & accessible.
H2 - Raleway LightOur font for secondary headlines, which visually breaks up major sections on a page. 38px and slate gray unless otherwise noted.
Here's a new section, bold & clear.
H3 - Proxima Nova Semi-boldOur font for minor headings, which may be subsections or descriptor copy under images. 24px and black unless otherwise noted.
For some additional focus within a major section.
H4 - Proxima Nova Semi-boldOur font for secondary section headings or inline callouts, which require differentiation but less emphasis that major or minor sectio headings.
Bringing your attention to some supporting material.
P - Proxima Nova RegularOur font for body text. 16px unless otherwise noted.
Jeggings live-edge ramps godard dreamcatcher mlkshk green juice quinoa mumblecore lyft roof party etsy. Austin man braid typewriter kinfolk, next level truffaut meggings occupy vice shaman flannel lo-fi poke. You probably haven't heard of them kombucha selvage schlitz lyft air plant umami crucifix typewriter gochujang aesthetic synth. Four dollar toast scenester pinterest DIY keffiyeh. Poutine chia post-ironic cold-pressed, etsy deep v sustainable kinfolk craft beer cronut cornhole put a bird on it.

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.