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.
![](/-/media/ti/education/images/web-style-guide/ti-style-corporate-signature.png?rev=df222f0c-c657-43ca-a0dc-1259d95689f1&la=en&h=420&w=420&hash=7B6DE865AAE09548E630EA3A9149888A)
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
![](/-/media/ti/education/images/web-style-guide/ti-style-clear-space.png?rev=51618e63-b64a-4b58-bdef-b12e5cc507fa&la=en&h=420&w=442&hash=1404CE004B0DEEE3EC34828400796E55)
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.
![](/-/media/ti/education/images/web-style-guide/ti-style-minimum-size-vertical.png?rev=fa201d4f-bf58-43f5-85ef-bd05a923c008&la=en&h=420&w=420&hash=871F5E58BEB17A7C9D9EFBFF5345A7CB)
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.
![](/-/media/ti/education/images/web-style-guide/ti-style-animated-logo-stacked.gif?rev=97d61dfa-603c-49d3-99ca-64c4e22b7266&la=en&h=236&w=420&hash=3004FBF98C5A8DAD3267110B5C0047F1)
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.
![](/-/media/ti/education/images/web-style-guide/plat_bar_variations1.jpg?la=en&rev=83ac4c6c-2927-409f-9f87-53ce5867b67c&h=281&w=600&hash=7325619B361F6A20A8CF32A48904095A99B1F3AF)
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.
![](/-/media/ti/education/images/web-style-guide/plat_bar_variations2.jpg?la=en&rev=be31b33b-69f2-4741-9590-82ad4ca7c370&h=283&w=600&hash=6E86CF2812E8A2CDE67DE6C1D738CBDC01BD89C9)
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.
![](/-/media/ti/education/images/web-style-guide/vertical_grid.jpg?la=en&rev=49be3adc-6be2-4aaa-9981-0a42f46c0d61&hash=7DAF80683EAA44370E278CB0ACA3A2ED09BF9D84&h=481&w=604)
![](/-/media/ti/education/images/web-style-guide/landscape_grid.jpg?la=en&rev=9ac5d159-ac08-44cb-9a1e-ad43c1e87349&h=329&w=605&hash=A022067DA8367C22423C56AE9849BEE439CBCB6D)
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
![](/-/media/ti/education/images/web-style-guide/ti-style-how-to-template-1.png?la=en&rev=a98a780f-588b-4133-8429-a8db28f2b205&h=260&w=420&hash=8F24E78610C05D0097289D0551CAA24A)
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
Typography
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.
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
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
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.)
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