Our mission 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.
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.
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)
(Use when space is limited)
(Use in UI when space is limited. When used in a layout smaller than 25 x 25px, ® may be omitted.)
We also have the above logotypes available in white for use on darker backgrounds (see Logo Colors setion below):
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.
This is our main color, used most and always on a light background
Used on darker backgrounds, ideally TokBox blue
Here you will find the values for our primary TokBox brand colors. These include hexidecimal, RGB, CYMK, and Pantone values, when applicable.
TokBox BlueHEX: #0099CC
RGB: 0, 153, 204
CMYK: 78, 24, 6, 0
Rich BlueHEX: #003F5F
RGB: 0, 63, 95
CMYK: 100, 11, 0, 74
State GrayHEX: #5F6062
RGB: 95, 96, 98
CMYK: 62, 53, 51, 23
Toasted AshHEX: #C5BCB4
RGB: 197, 188, 180
CMYK: 23, 22, 26, 0
RGB: 241, 238, 235
CMYK: 4, 4, 5, 0
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.
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 :
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:
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:
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.
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:
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:
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:
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.
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 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:
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.