Education Technology

Brand elements

These guidelines describe the basic elements of the TI identity system and illustrate correct usage. Elements — the TI corporate signature, platform bar, color palette, typography and imagery style — convey a revitalized image for TI. They are the key to our visual identity program.

Corporate signature

The corporate signature comprises a symbol and wordmark. Together, they form the primary visual element of the TI identity.

The signature should appear exactly as shown in these guidelines; the elements, proportions and relationships never change.

You can use the symbol by itself only where severe spatial or other constraints would result in a loss of legibility of the corporate signature. On marketing materials, however, never use the symbol by itself.

An example of an appropriate use would be company identification on an extremely small product, such as a chip.

Download TI stacked logo – 1 color positive Download TI stacked logo – 2 color positive Download TI stacked logo – 1 color reverse Download TI horizontal logo – 1 color positive Download TI horizontal logo – 2 color positive Download TI horizontal logo – 1 color reverse

Clear space

To ensure its clarity and importance, the signature must always be surrounded by an adequate amount of clear space.

Clear space in the TI signature is measured by the height of the “T” in “Texas,” shown here as X. The minimum clear space must always be 1X on all sides of the signature. Whenever possible, the amount of clear space should be greater than 1X.

Minimum size

We have established minimum sizes for the TI corporate signature. These are the smallest sizes at which the signature may be reproduced on any application.

For print applications, the stacked version of the TI signature should never appear smaller than 1 inch wide. The horizontal version should never appear smaller than 1.75 inches wide.

For electronic applications, the stacked version of the TI signature should never appear smaller than 100 pixels wide. The horizontal version should never appear smaller than 150 pixels wide.

In exceptional circumstances, smaller sizes may be necessary for certain applications and are available upon request. Remember that legibility should always be the top priority.

Animated logo

Videos and other visual media may require an animated logo. Typically, this is used in the last slide of a presentation or during the conclusion of a video.

If an animated logo is necessary, ensure the integrity of the logo is maintained in terms of color, proportion and clear space around it.

Back to the Top

Platform bar

The platform bar helps us express and stage key ideas, messages and benefits. It features the newly refined TI corporate signature in a modern and simple way. Multiple colors and dynamic placement variations are fresh and provide flexibility. This unique and ownable graphic element helps deliver impact, unifies communications and builds TI’s visual identity over time.


Schematic

In most cases, when using a single “big idea” or benefit, content appears both above and below the platform bar.

The signature should appear exactly as shown in these guidelines; the elements, proportions and relationships never change.

You can use the symbol by itself only where severe spatial or other constraints would result in a loss of legibility of the corporate signature. On marketing materials, however, never use the symbol by itself.


Schematic examples

Below are examples of various images used in the “big idea” section of the layout, showcasing either a metaphorical image or a product image. For communications that are information-heavy, we recommend placing the platform bar at the bottom of the layout.



Attribution statements

If tests or third parties are mentioned that have either a ® or ™ after their name or product, we need to add a disclaimer for them at the bottom of the website or document. Go to the “Testing Statements” or “Trademarks and acknowledgement” sections for help with attribution.

Testing disclaimers go first. If possible, a new paragraph follows underneath with third-party information. Any additional annotated information (using symbols like asterisks, etc.) follows as an additional paragraph. (See the “Formatting footnotes” section here.)

On documents, the platform bar disclaimer goes last.
Use this trademark attribution statement for the platform bar: 
The platform bar is a trademark of Texas Instruments.

Variations

The platform bar can vary in color and appearance depending on the background.

Preferred: Solid platform bar

A solid platform bar is the preferred version. Use a red or black solid platform bar on white or full-bleed image backgrounds. You can also use a solid white platform bar on full-bleed images, provided there is enough contrast.


Alternative: Outline platform bar

The alternative platform bar is in outline form. The outline colors are the same as the solid platform bar: red, black or white. The platform bar only works on solid color backgrounds. Use the outline platform bar with illustration artwork or for applications such as PowerPoint.


Grid use

A grid divides a page into uniform sections. It helps maintain the placement and integrity of the platform bar.

Place the bar on the page in one of the predefined vertical increments. The wordmark in the corporate signature is aligned on the left margin of the right column. Never place the platform bar in the top section, known as the “no-fly zone” of the grid.



Platform bar templates

You can use the platform bar in many different layouts and at various sizes. The templates shown below will guide you in scaling the bar in ways that will not compromise the bar’s integrity or consistency. You can also download these templates.

All layouts contain a grid on which to place the platform bar. Use the appropriate grid orientation for your application, and simply scale the template to fit.

Never scale the platform bar in a way that would violate the signature’s minimum size (see “Minimum size” section above).

Download »

How to use the templates

1. Based on the size of your communication piece, choose the template closest to the proportions of your application.


2. Scale all elements of the template until the top edge of the template meets the top edge of your piece.


3. Stretch or reduce the template horizontally until it fits the size of your piece. Always deselect the signature before altering the horizontal dimension. Make sure that the signature aligns to the left margin of the right column.

Back to the Top

 

Color palette

Our color palette, when used effectively with other elements in our system, will lead to the creation of many successful communication pieces. All of the colors in our palette have precise color references, shown in the specifications chart below. Use the exact color values listed.

For print: Use Pantone or CMYK
For digital: Use RGB or Hex values

Primary colors


Secondary colors


Social Media color palette (for social media use only)

We have developed a specific color palette of additional colors that brighten and lighten the social media space. These colors are to be used in addition to our TI primary color palette. These colors are compliments and must be used with our Texas Instruments red.



Web colors

Here is a complete list of text colors and buttons as they would appear with their corresponding backgrounds on the web.

Standard Link Color: #007C8C




Back to the Top

 

Typography

Print

Our corporate typeface is Helvetica Neue, which is simple, clean and precise. The Helvetica Neue family of fonts is versatile and contemporary, allowing flexibility across many applications.

When setting type for different applications, use Helvetica Neue 45 Light for entity names on communication pieces. Helvetica Neue 55 Roman is the primary typeface for body copy, while Helvetica Neue 75 Bold is for headlines.

Alternatively, for Ed Tech collateral pieces, Helvetica Neue 45 Light is also acceptable for use in body copy and headlines.

To call out text such as business taglines, set the type in Texas Instruments Red (see the color section).


Web

Our corporate typeface for the web is the Lato family (Regular, Light, Bold and Italic), which is meant for readability when viewed on any screen or device.

Email, PowerPoint, editable digital files

Our corporate typeface for email communications, PowerPoint presentations and editable digital files is the Arial family (Regular, Light, Bold and Italic), which is clear and unobtrusive to maximize presentations to outside partners and customers.

Back to the Top

Heading H1

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Heading H2

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Heading H3

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Heading H4

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Heading H5

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Heading H6

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Full Width

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


One Half

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


One Third

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod


One Fourth

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

 

Design elements

We have created a toolkit of brand elements to allow designers flexibility and creative freedom while also maintaining a recognizable brand identity across various media channels. The plus sign and chevron design assets should be used across all marketing mediums. These design assets can be manipulated for scalability, cropping, coloration or to create patterns. So long as the overall integrity of the asset is preserved, the designer is generally free to use these elements as they see fit.

Chevrons / Pluses



Scale / Patterns





 Textures



Back to the Top

Iconography

These are guidelines to give all of our icons a clean and uniform look no matter where they are used.

Icon sizes

Icons should be built in a square format at a size of 75 x 75px. This will allow them to be displayed on the web at either the native size, or scaled down to 50px, or 25px in the case of a legend with minimal anti-aliasing.

Icon colors

Icons should always appear in one color,  our TI gray, PMS Cool gray 8C, #AAAAAA


Illustrative icons

Illustrative icons are representational symbols that can quickly convey an idea to a universal audience. They are used as thematic, categorial and decorative elements to visually enhance and support content or a theme.



UI icons

User Interface icons are used to represent actions, functions or utilities. They are small in size and are primarily used in line with a text link. These icons have minimal detail due to their functional usage. UI icons are designed to material guidelines standards.


Imagery

Whenever possible, use silhouetted images on white backgrounds. You may also use full-bleed images or illustrations. Use illustrations when photography is not practical or appropriate (such as technical manuals). Use only TI-approved background patterns and textures.

[Imagery example images for silhouetted, full-bleed and illustration]

Print collateral samples

[Print collateral example mosaic]

Photo attribution

To attribute third-party photos used in blog posts, we need to add the source in our caption style (italics) under the image. Verbiage can say “Image courtesy of …” or “Data chart courtesy of …” (or similar) and then the site/person who provided the image. If possible, we can also link to the source, although it’s not necessary. For an example, check out this blog post.

Back to the Top

 

URL usage

Print

Bold, underlined, red or black (depending on placement)

Web

In-line link Hex color: #1973B4

Company URL

Use caps on TI for the singular usage of company URL:

TI.com

(It is not necessary to include www.ti.com — “www” is understood.)

Longer URLs

For usage in longer URLs, it is recommended to use all lowercase letters. Examples:

education.ti.com
education.ti.com/codescontest

Vanity URLs

In the case of longer vanity URLs, it is okay to use camel case or initial caps to ensure the visual separation of words.

TICodesContest.com
TIstemProjects.com (This one is a special case because it’s two acronyms followed by a word.)

Back to the Top

 

SEO

Meta data title, description and keywords

SEO (search engine optimization) helps our website’s position in webpage result searches. One of the best ways to improve rankings is to ensure the meta titles and descriptions are optimized to capture search engines.

The targeted keyword (or keyword phrase) for a webpage should, ideally, be in the meta title, meta description and H1 section (main headline), as well as in the body copy. Additional keywords/keyword phrases can also be included in the meta keyword section.

For TI Education Technology websites, our standard template for meta information goes at the top of any copy information, and looks like this:

< Page Metadata >

 

< Title – Character Count: XX/50-60 >

Primary Phrase – Secondary Phrase | Texas Instruments

 

< Meta Description – Character Count: XX/50-160 >

Txt

 

< SEO Keywords >

Txt

 

In the meta description, it’s helpful to include a CTA (call to action). Also, it’s preferred to not go over the suggested character count.

Back to the Top