ElevenLabs Guidelines

The number eleven is abstracted into two vertical lines, forming the distinct 11 icon, which integrates directly with the wordmark. This verticality of the 11 icon extends across the wordmark, with the letterforms adopting a subtly condensed and slightly squarish shape.

To ensure visual impact our logo needs to be surrounded by ample and unobstructed space. All communications must adhere to a minimum area of clearance, which is determined by the logo's size and is equal to its height.

Color comes through in our brand in many ways therefore our logo is primarily designed to be used in black on white backgrounds to ensure visibility among other elements. In cases where an inverse reproduction is needed, the logo can be used in white.

Our logo is our most recognizable brand element therefore it must maintain a consistent appearance everywhere people engage with us.

Construction

Given the simplicity of our icon, it might be a understood that it can be easily reproduced. To prevent ad hoc variations of the icon, we have a simple formula for constructing it.

Our default is to always use our full logo to represent our brand, however, there are occasions where using the icon alone is appropriate. Consider the audience of your communication carefully in such instances. This approach tends to be most effective when addressing audiences already familiar with ElevenLabs.

When using the icon independently, ensure it is centered both vertically and horizontally.

Avoid placing the icon along the edges of any format, as its meaning diminishes when it lacks sufficient surrounding space.

The 11 icon is most effective for representing us in situations where space is limited, such as social media platforms and app ecosystems. It is designed to work with various holding shapes, from circles to squares.

Construction

Our icon is positioned centrally and surrounded by generous space to ensure it stands out amidst others. The amount of surrounding space is calculated based on the logo's size, with height of the holding device equivalent to three times the height of the icon.

At the core of our brand palette are black and white: white serves as the canvas for our communications, while black is our default color for elements. We use a variety of neutrals to create hierarchy and structure.

Our color system consists of 9 distinct hues, each with 11 tints. These color values serve as the foundation for our brand's entire color palette. Whether applied to functional UI elements or expressive marketing assets, they not only inject vibrancy but ensure a consistent look and feel.

At ElevenLabs, accessibility is fundamental to our identity, and we are dedicated to making our products accessible to the widest range of users globally. From marketing materials to our product interface, we prioritize AA compliance across all our digital touchpoints.

To achieve this, our color system was designed for maximum flexibility, with straightforward rules governing the pairing of tints to maintain AA compliance.

Our tints also power our semantic colors, which convey specific meanings to users, including negative, warning, positive, and informative. These semantic colors are utilized in components such as toasts, alerts, and buttons.

Each semantic set has been designed to facilitate color application to text, backgrounds, and icons while ensuring AA accessibility compliance. Tints of 800 are recommended for applying semantic colors to text, while tints of 200 are suitable for backgrounds. Tints of 600 can be applied to non-accessible elements like icons.

As a foundational research company, we use black and white as our core brand colors. However, we also utilize a full spectrum of colors to highlight the broad applications of our technology. This diverse palette is used to showcase our own product development efforts as well as the innovative creations we empower our partners to create.

Default tints

Our matrix tints serves many functions across our brand and how it shows up on the world. For most everyday needs use tints of 50 and a mix of tints from 300 to 500 depending on the hue. Most design tasks can be accomplished using these tints and they keep our brand from feeling disconnected when we overuse too many different tint values. These tints have also been specifically chosen to work with black text.

Applying color

There are many visual elements which benefit from the use of color, however, we commonly find that color works best when applied to the following elements.

Gradient backgrounds

For the most expressive moments across our brand, use gradients as backgrounds, both in static and motion. There are two variations: a full-format gradient background, and a half-gradient that seamlessly blends from white to the gradient.

Gradient backgrounds in use

Examples of how we use gradient backgrounds across our marketing website and social media.

Eleven serves as our primary type family, it’s construction blends humanist and organic elements. Its precise construction is characterized by low stroke contrast and prominent vertical lines. The overall subtly condensed characters and the squared-off contours of round letterforms echo the design of our logo.

Eleven has two distinct cuts: Normal and Semi Condensed. The design of the Semi Condensed cut draws inspiration from our logo, allowing us to subtly echo its verticality throughout all our communications. It's typically used for headings and UI elements. The Normal cut, with its more functional design, is used for all paragraph text throughout our brand.

There are three weight of Eleven in the font family: Normal, Medium, and Bold. Normal serves as our default weight in the majority of situations, while Bold is used as the default weight for headings.

Our mission is to make content universally accessible in any language and voice, this necessitates a type system capable of supporting diverse language scripts from around the world. While our primary type family, Eleven, caters to all Latin languages, we rely on the Noto Sans family for all non-Latin languages.

An essential aspect of our product and its user interface is the capability to translate content into multiple languages. Multi-language fields must render all languages accurately. Loading Noto Sans for each language in this scenario would unnecessarily increase page load times, potentially compromising user experience and app performance.

In such cases, we opt for the system-ui or browser defaults to render this text. This approach ensures both optimal performance and usability. Given that these fields are primarily functional rather than brand-oriented, they do not require a branded feel.

Font fallbacks ensure we can collaborate with ease. Internally, our document and presentation creation relies on Google Workspace, where we employ the Roboto type family. In other platforms where custom fonts aren't available, we default to Arial. Our web font-stack also uses Arial as a fallback font.

Functional Headings

Our default heading style, Eleven Semi Condensed, serves as the optimal choice for the majority of everyday heading needs.

Expressive Headings

Our expressive heading style uses Eleven Semi Condensed in all uppercase letters. Reserved for creating impactful visual breaks, it should be used sparingly alongside our default heading style. This style is most effective for shorter, attention-grabbing headings.

Paragraphs

Our paragraph and description text is set in Eleven Regular, with slightly increased letter spacing and generous line height to enhance readability.

Functional UI

Our functional UI style uses Eleven Medium to create subtle contrast with paragraph and body text which uses Eleven Regular. It’s set slightly open with ample line height.

Expressive UI

Our expressive UI style is primarily used across digital marketing materials. The uppercase styling and wide letter spacing effectively differentiate interactive elements from other components.

Typography is essential to our brand's recognizability, so it's important to use it consistently. Avoid the following typographic practices, as they can feel out of place for our brand.

The Sound flow exists in three states: static, resting, and reactive. In its static form, the sound flow serves as a graphic element to express our brand. The resting state, default for the sound flow, is a calming and neutral animated state. It transitions to a reactive state, where the movement of the sound flow corresponds to speech or sound input.

Every parameter of the Sound Flow influences its appearance and behavior during motion. These controls enable the Sound Flow to be tailored to different use cases. We encourage experimentation, particularly with static assets, to infuse our brand with diverse and captivating elements.

Global amplitude

The 'Global amplitude' parameter controls the overall height of the Sound Flow in it's resting state. Decreasing the amplitude creates a short and flat Sound Flow, while increasing it leads to a taller overall height and accentuates the differences between the smallest and largest forms.

Density

The 'density' parameter regulates both the quantity and variation of forms across the plane. Decreasing the density results in a flat Sound Flow with fewer layers of depth, while increasing the density yields a more complex and layered Sound Flow.

Gradient repetitions

The 'gradient repetitions' parameter controls the frequency of gradient repetition across the plane. Fewer repetitions evoke a soft and simple gradient, while increasing repetitions intensifies and adds complexity to the gradient.

Audio reactivity

The Sound Flow comes to life when it dynamically reacts to audio input. While it can respond to any type of audio, speech often appears choppy when visualized. The Sound Flow includes parameters to control its reactions to different amplitudes.

The Sound Flow is a 3D plane with depth, where amplitude is mapped across the plane. Lower amplitudes cause the back of the plane to react, while higher amplitudes impact the front of the plane.

To color the Sound Flow, we blend engineered precision with human expression through a concept we call 'warm chrome’. This approach embraces chrome's visual attributes, which allude to engineering, while imbuing it with warm, rich, and deep hues reminiscent of human qualities.

Color sets

Tints are used to create 10 color sets which can be applied to the sound flow, they are the default options for most daily use cases and expression of the brand. While custom color combinations are an option, their usage should be thoughtfully considered, taking into account factors such as audience and reach.

Expressive tints

There are 9 expressive tints which align to the 9 hue color structure of our global platte of tints. They are highly saturated colors which create a sharp highlight against the other tints when applied to a Sound Flow.

Gradient stops

Each color set is applied to the Sound Flow through gradient stops. There are seven gradient stops positioned through the Sound Flow, beginning and ending with Alpha white. Each tint is allocated a specific position across the Sound Flow to ensure the correct visual behavior.

Applying color

The Sound Flow serves as our visual representation of sound, a key brand element utilized across all touchpoints. Given its significance, we use it purposefully to help us visualize and showcase the seamlessness, clarity, and depth of our technology across static, motion, and interactive mediums.

Layering

The Sound Flow can be layered with elements that use translucent materials, that adopt the color of the Sound Flow. Overlaid elements should primarily use neutral colors to avoid clashing with the Sound Flow. These elements typically include interactive UI components such as our Omnibox or iconography.

Typography

As one of our most recognizable brand elements, the Sound Flow is frequently paired with typographic elements. We typically combine the Sound Flow with typography in four main ways, all guided by two key principles. First, typography must remain legible and readable at all times. Second, the Sound Flow should take a leading role in the composition, used with intention rather than merely as a background graphic.

Captioning

Sound Flows can also be combined with captions in scenarios where users need to both hear and read the speech. Maintaining proper proportions between the sound flow and captions is crucial; while captions should be legible, they should complement and support the Sound Flow.

While we envision the Sound Flow to be open to interpretation in the future, currently, there are specific approaches we prefer to avoid when using it.

Similarly to the Sound Flow, Voice Signatures can be used across three states, static, resting and reactive to audio.

Each Voice Signature is created using a programatic system that visualises the unique characteristics of voices design or cloned using ElevenLabs. The sound traits of each voice—pitch, timbre, pace and expressivity are mapped to visual attributes.

Lightness

Each hue has 10 different lightness levels, ranging from dark to light. These lightness levels correspond to the pitch of a voice: lower-pitched voices are visualized with darker tones, while higher-pitched voices are visualized with lighter tones.

Saturation

Each Voice Signature can be visualized with three different saturation levels. Low saturation corresponds to more robotic-sounding voices, medium saturation is used for neutral voices, and high saturation is applied to expressive voices.

Texture

The timbre of a voice controls the texture of a Voice Signature. Smoother voices result in a softer, blurred visualization, while rougher voices produce sharper, more defined visualizations.

Color

Hue is assigned randomly to a voice reflecting the generative nature of how ElevenLabs technology creates or clones voices.

While each Voice Signature is controlled by a range of parameters which affect its appearance, all Voice Signatures align to the color matrix of our global brand.

There is a visual system for the usage of Voice Signature which spans the voice signature itself, to captioning speech and speech visualized using a Sound Flow. The Voice Signature should drive the color choice when paring a voice with captioned speech or a Sound Flow.

In the example below a Voice Signature which is Cyan should be paired with a background of Cyan 50, use the cyan for captioned speech and use the Cyan Chrome Sound Flow.

UI and interactive elements

Marketing assets

Blog posts and miscellaneous cards

Our icons adhere to a 32 x 32 pixel grid, facilitating easy scaling between 16, 24, 32px and 64px sizes. While most icons maintain uniformity with a 2px stroke width, some intricate details may use a 1px stroke in specific scenarios.

Our icons are designed to scale to four primary sizes: 16, 24, 32px and 64px. The default size for most use cases is 24px, while 16px and 32px icons are suitable for smaller or larger UI elements, respectively. Icons scaled to 64px are reserved for marketing materials only.

To maintain consistency across our icon set, we adhere to straightforward guidelines for endpoints and corners, resulting in a subtle rounded style. This approach ensures that our icons have a strong yet inviting feel when scaled.

Products

Technologies

Safety

Our motion behaviors apply our motion principles to typography and are informed by the Sound Flow, a central element of the identity. These behaviors encompass functional applications, such as captioning, to more expressions moments like intros and sectioning.

Captioning plays a vital role in our product, serving both marketing purposes to highlight the remarkable capabilities of our technology and functional aspects within our product.

Captioning by word

This style of captioning is ideal for expressive social content and should be used sparingly for short bursts of dialogue, rather than lengthy narrated speech.

Captioning by sentence

This captioning style is most effective in promotional videos featuring voice-overs narrated by an ElevenLabs voice. However, it's not optimal for showcasing the human-like capabilities of our speech models.

Captioning multilingual

This approach is excellent for showcasing the speech capabilities of our models and the diverse range of languages we support. Each language should be presented in its own section; different languages should not be mixed on the same line.

Chime combines our Voice Signatures with typography. Chime can flows through any written content text infusing it with our brand.

Chime titling

This style is best utilized in marketing videos for introductory text or to create sections within a video. It comes in two variants: the first flows linearly through typography from left to right, while the other appears randomly across the word or sentence.

Chime captioning

When used for captioning, Chime brings written text to life by synchronizing it with speech generated using ElevenLabs. It exemplifies how our technology transforms text input into human-like speech output.

Echo blends the layers the Sound Flow with typography to express the depth, richness and emotional range of ElevenLabs voices. Echo can be used in both mono or any of the 9 colors sets.

We start or end our video content with an animated version of our logo, available in two variants. The left-aligned animation is used when the logo is positioned on the left side of the composition, while the centered animation is used when the logo is positioned in the center of the composition.

Efficiency

Our tone of voice should be an extension of our research-oriented identity. Just as our models are well-engineered and efficient, our communications should convey maximum meaning briefly and with clarity. This doesn’t mean our tone should be formal, but we want to be coherent and respect the reader's time. Think what you want to say, then say it as simply as possible. Keep in mind these three rules:

1. Don't use a long word where a short one will work

2. If it's possible to cut out a word, cut it out

3. Don't use passive when you can use active

Simplicity

Use the language of everyday speech, not that of spokespeople or lawyers (so prefer let to permit, people to persons, buy to purchase, show to demonstrate). Strip away vague or empty words in favor of everyday ones. Ask yourself:

1. What am I trying to say?

2. What words will express it?

3. What image or idiom will make it clearer?

4. Could I put it more shortly?

5. Have I said anything that is avoidably awkward?

Clarity

Don't make unverifiable value judgments and let people come to their own conclusions. Don't use vague advertising language (so avoid adjectives like groundbreaking, unparalleled, exceptional, major etc). Similarly, avoid clichés and worn-out expressions (eg, pivotal moment, paradigm shift, the road ahead, unchartered waters etc.) - they make the reader lose focus. And while in some operational, legal, safety or financial contexts we may need to use the more hermetic syntax, we should try to avoid it spreading into our customer and product comms.

Freshness

We still want to catch people's attention because our tech is sure to keep it. For example: when writing a blog about a new product, try to seize the reader with the title and then draw them straight into the subject. Hold their attention by keeping the story moving. Do not spend several sentences setting the scene or sketching the background.

Brand name

We always write our name in plain text as ElevenLabs, ensuring that both the 'E' and the 'L' are capitalized, and there is no space between each word. We use short form versions of our name for internal use only.

What to avoid

Eleven Labs — With a space between Eleven and Labs
Elevenlabs — Without a capitalised L
elevenlabs — With lowercase E and L
ELEVENLABS — In all caps
IIElevenLabs — Using captialized I’s to recreate the 11 icon
11ElevenLabs — Using 11 to recreate the 11 icon

Product names

Dates

In the US dates are: month, day, year - eg, 9/7/2008. Elsewhere, the order is always: day, month, year - eg, 7/9/2008 for September 7th 2008. This can lead to misunderstanding. As our written language is American English we prefer to align to their format and avoid confusion.

Case

To keep consistency across all our writing and improve legibility and readability, we use sentence case, where the first letter of the sentence is capitalized, followed by lowercase letters.

Alignment

We always left align text in most cases, this ensures the best reading experience for the user and greatly improves hierarchy of content. Applications which use other types of alignment can feel off brand.

Edge cases might required centred text but rarely to ever need to right align or justify text.

Quotations

When aligning quotation marks, ensure that the opening quote hangs outside the text area to maintain vertical alignment. This technique, known as hanging punctuation, is typically accessible in most software through a type settings menu.

Uppercase text

When using uppercase ensure you enable the font setting ‘case-sensitive forms’ this will ensure that glyphs are like the @ symbol match the vertical height of the letterform glyphs.

Model lockup combine the 11 icon with our brand font Waldenberg for the model name followed by a model version number.

Syntax

All of our models follow the same structure consisting of three elements. Our 11 symbol followed by the model name and version number.

In plain text we write model names as Eleven English V2.

As the purpose of the watermark is to grow brand awareness the primary element of the watermark is our logo. The logo should be accompanied by uppercase text, aligned to the left and positioned above the logo, with a reference to the product or feature used to create the content.

To minimize the intrusion on the content, the watermark should be positioned in the bottom right corner of any format.

Action bar

The Action bar is a flexible component for simple interactions that enables user to easily manipulate audio.

Omnibox

The Omnibox is our most versatile UI component that allows our users to demo our technology simply and easily. It adapts to range of different ElevenLabs models and product features.

Cards

Cards serve as the foundation of our UI design, appearing consistently across both our marketing site and our product. While we employ cards in a variety of sizes, we maintain a unified approach to corner radius. Our card designs span from functional to more expressive uses.