Brand Guide
Next page
If you have questions regarding compliance, brand policies or procedures, please email ds-brand@trustage.com
Who we are How we speak AP style How we look Logo Color Typography Photography Icons Color block Grid & layout Data visualization Motion & video Brand strategy
TruStage Brand Guidelines
Who we are
TruStage is our corporate brand uniting us as one team working as one organization. A well-articulated corporate brand is the north star to guide teams internally, compel audiences externally and sustain the organization over time. The following pages define our brand strategy.
Purpose
Principles
Promise
Values
Our brand strategy is the foundation of our verbal and visual identity and is made up of our: Purpose Why we exist Promise What we exist to do Principles How we uniquely deliver Values How we act
We build relationships that matter. Rooted in deep empathy, we are a partner dedicated to respecting everyone's unique situation and creating value every step of the way.
We provide clear and unbiased guidance, education and tools to build the knowledge needed to make confident financial decisions.
We are experience-focused, technology enabled. By reducing complexity we make it easy for people to choose solutions that work for them—no matter where they are in their financial journey.
We advance with intention and responsibility, bringing forward relevant solutions to everyday challenges and pushing the boundaries of what's possible.
Our brand strategy is the foundation of our verbal and visual identity.
Intuitive experiences. Simplicity and speed. Access anytime, from anywhere. Today’s customers expect brands to be always on, and able to meet their needs in the moment. And in financial services and insurance, this is amplified. Because everyone’s journey is different. It’s ever-changing — and deeply personal. Not only does everyone deserve expert support and guidance, they deserve a partner who is committed to them every step of the way. At TruStage, that’s what makes us different. We believe that a brighter financial future should be accessible to everyone, no matter where they’re starting from. We work hard every day to truly understand those we serve, to provide reliable solutions and experiences that protect and enable more people — in more ways — to confidently make financial decisions that work for them. Now, and tomorrow. Rooted in deep empathy, our financial and insurance experts are dedicated partners who care about building relationships that last. By walking alongside our customers, we strive to create value at every stage of their lives. We know everyone is on their own unique journey. That’s why we give people the tools they need along with clear and unbiased guidance to empower them to make confident financial decisions. Making financial decisions can be overwhelming, but the process doesn’t have to be. By being experience led and technology enabled, we make experiences easy and intuitive. Thinking one step ahead helps us anticipate evolving needs and challenge industry norms, so we’re able to shape what’s next and push the boundaries of what’s possible. At TruStage, we focus on people, always working hard to deliver on the promises we make to them — ultimately building a better organization, a more honest and inclusive financial industry, and a stronger society.
How we speak
AP style guide
AP style
Capitalization, period punctuation, comma usage, writing numbers and our brand voice. These standards are based on AP Guidelines as a framework to help shape how our brand communicates in a consistent voice.
Hallmarks of AP style
Consistency
Clarity
Accuracy
Brevity
Numbers
In text, spell out numbers one through nine. Use Arabic numerals for 10 and higher, except with: • Addresses • Age • Date • Dimensions • Dollars and cents • Highways • Millions & billions • Percentages • Speed • State roads • Temperatures • Times For large numbers, use a hyphen to connect words ending in y to another word: twenty-one, one hundred forty-three. Spell out casual expressions. Millions and billions are abbreviated in headlines, subheads, graphs and charts as M and B respectively.
The webinar will take place on Thursday at 2:00 PM CT and runs for 60 minutes.
Peter has a bachelor’s degree in English and finance from Indiana State University.
Capitalization
AP favors a downstyle approach to capitalization, meaning we use basic sentence case capitalization. Do not capitalize words unless necessary — for example, proper nouns (a state name or the name of a specific school or university) or unless the capitalization is added for emphasis, legal or compliance standards. For academic degrees and areas of study: • Capitalize the formal names of specific degrees, for example: Bachelor of Arts, Master of Business Administration. • Do not capitalize informal references to degrees, for example: Jake has a bachelor’s degree in anthropology. • Note that informal names often take the possessive (use an apostrophe), but formal names of specific degrees are never possessive. There is no apostrophe in Bachelor of Arts or Master of Science. • An associate degree is never possessive. • Do not capitalize general areas of study, for example: Sue has a bachelor’s in English and philosophy.
Punctuation
• Use a single space after a period. • Capitalize the first word after a colon only if it is a proper noun or the start of a complete sentence. • Do not use commas before conjunctions in a simple series: red, white and blue. • Do use a comma before the last conjunction in a complex series. • Commas and periods always go within quotation marks. • Footnotes should be placed following end-line punctuation. • Avoid scare quotes, as they can imply a derogatory or condescending tone.
3
All enterprise, business-to-business and consumer brands will unify under the single brand name of TruStage; and will be reintroduced in 2023 to represent all the company has become.
Make a one-time secure payment.
Em dashes, hyphens and en dashes
Em dashes can be used to separate phrases and add emphasis by setting a clause or phrase apart — much as you would use a comma, semicolon or colon. Em dashes are longer than en dashes and hyphens. Make an em dash by striking the hyphen key twice or shift + option + hyphen on a Mac. In text, em dashes (—) should have a space on either side of the dash. The en dash (–) is a bit wider than the hyphen (-) and narrower than the em dash (—). En dashes are used to connect values that are related or in a span/range of numbers, dates or time. It’s commonly used to symbolize the word “to” or “through” between values. Hyphens are used to join compound words, separate syllables, break words from one line to the next, or hyphenate names.
Bullets
• Bullets in a series should either be all fragments or all full sentences. Avoid a mix. • Use a period or other full stop after every bullet that is a sentence. • If there is more than one sentence within a single bullet, all bullets in that list should end with a period. • Use a period after a bullet list that completes the opening stem sentence that introduces the bullets. • Do not use a period after bullet lists that are not complete sentences or do not complete the opening stem. • Do not use semicolons ";" or "; and" as though the bullets are all one sentence to end punctuation.
Groups include: • African American • Allies for Disabilities • Amig@s (Latinx) • Asian Heritage Network • Advocates for Domestic Abuse Awareness • Belief Network • Caregiver • Modern Family • Prism (LGBTQA) • Veterans • Women's Leadership Network • Women in Technology • Young Professional Society
Over the course of the system’s 25-year life expectancy, we’ll reduce our carbon footprint by more than 9,000 tons of carbon dioxide. That’s equivalent to: • Planting more than 200,000 trees. • Recycling some 28,000 tons of waste instead of sending it to a landfill. • Displacing carbon dioxide emissions from the annual electrical use of about 1,000 homes. • More than 8,000,000 pounds of coal burned.
States and cities
• State abbreviations should be avoided in headlines. • Spell out the names of states in the text when they appear alone. • Abbreviate them when they appear in conjunction with the name of a city, town, village or military base. Note that Alaska, Hawaii, Idaho, Iowa, Maine, Ohio, Texas and Utah are never abbreviated.
State abbreviations in AP style:
It is not necessary to associate the following cities with their states in text:
Atlanta Baltimore Boston Chicago Cincinnati Cleveland Dallas Denver Detroit Honolulu Houston Indianapolis Las Vegas Los Angeles Miami
Milwaukee Minneapolis New Orleans New York Oklahoma City Philadelphia Phoenix Pittsburgh St. Louis Salt Lake City San Antonio San Diego San Francisco Seattle Washington
Alabama — Ala. Arizona — Ariz. Arkansas — Ark. California — Calif. Colorado — Colo. Connecticut — Conn. Delaware — Del. Florida — Fla. Georgia — Ga. Illinois — Ill. Indiana — Ind. Kansas — Kan. Kentucky — Ky. Louisiana — La. Maryland — Md. Massachusetts — Mass. Michigan — Mich. Minnesota — Minn. Mississippi — Miss. Missouri — Mo. Montana — Mont.
Nebraska — Neb. Nevada — Nev. New Hampshire — N.H. New Jersey — N.J. New Mexico — N.M. New York — N.Y. North Carolina — N.C. North Dakota — N.D. Oklahoma — Okla. Oregon — Ore. Pennsylvania — Pa. Rhode Island — R.I. South Carolina — S.C. South Dakota — S.D. Tennessee — Tenn. Vermont — Vt. Virginia —Va. Washington — Wash. West Virginia — W.Va. Wisconsin — Wis. Wyoming — Wyo.
Credit union loan balances rose 19.4% in 2022, up from the 7.7% reported in 2021.
20M people protected
Founded in 2021, the Discovery Fund has invested $6.75 million in 17 companies and is on track to invest $15 million in its first three years.
“Now is the time for our brand to reflect all we do.”
Our hours are Monday – Friday, 7 a.m. – 9 p.m. CST.
We focus on the most important part of financial services — the people.
Who we are How we speak AP Style How we look Logo Color Typography Photography Icons Color block Grid & layout Data visualization Motion & video Brand Strategy
How we look
89
Our design ethos is born from our brand strategy and underpins all of our communications both internally and externally. Our key brand elements are: • Logo • Color • Typography • Iconography • Photography Our visual identity brings our brand to life through: • Typography that is approachable • Simple, clear layouts with distinct graphic elements • A refined use of TruStage Yellow balanced with vibrant accent colors • A set of icons and illustrations that are expressive and distinct • Intentional use of photography to engage and represent our target audiences
Sul Sans Bold
Sul Sans Medium
Sul Sans Regular
Sul Sans Light
Aa
The TruStage logo is our most important visual asset. It is the unifying visual element that appears across all our communications. Consistent application of the TruStage visual identity is vital to building and reinforcing a cohesive brand image. Our logo is comprises of two elements: the wordmark and the Ascend symbol. We refer to these combined elements as the “logo.” Always use the original logo asset and never re-create a different version of the logo.
Logo clear space and minimum size
To ensure maximum impact, the TruStage logo should always stand out from other graphic elements by using a defined “clear space.” This space should be kept clear of all type and other graphic elements.
Clear space To preserve the integrity and visual impact of the logo, always maintain clear space around it as defined on this page. The clearspace equivalent to the height of TruStage’s ‘T’ is maintained around our logo. No other graphic elements—copy, illustration, imagery— should enter this space.
Minimum size Please also observe the minimum logo size and never scale the logo below this size. The minimum width of our logo is 1.35 inches in print and 85 pixels for digital. For extremely limited print spaces, such as a promotional pen, print test the size of the logo to ensure legibility.
Logo
Logo color usage
The following illustrates how we use color to bring vibrancy and energy to the TruStage logo. These colors are chosen intentionally for visibility and contrast.
Standard logo We lead with our standard logo which is in the TruStage yellow and deep blue. It should always be applied on a light background as it allows us to keep the energy and distinction of our word mark.
Knockout logo The knockout logo is designed to work on dark backgrounds while maintaining the impact of the TruStage yellow in our Ascend mark.
Reverse logo The reverse logo is designed to work well on TruStage Yellow backgrounds.
Grayscale logos Our grayscale logo is used in limited cases where color cannot be used (such as one-color printing). There is no spot color version of the grayscale logo. Single color black logos are only available upon request for special printing needs.
Our logo applied
To ensure our logo has prominence on or in printed and digital applications, please observe the rules on this page. •The TruStage logo should sit at the top or bottom of the page aligned within the page margins. •The TruStage logo should always be within the range of 0.25–0.35 of the width of the printed page. •The TruStage logo should ideally be 0.3x the width of a mobile screen to account for navigational items (i.e., hamburger menu, profile icon, shopping cart icon, get quote button, etc.) or partner logos.
TruStage in text When the TruStage name is written in text, use title cases to differentiate “Tru” and “Stage." TruStage should never be written in all capitals.
Logo placement
The placement of our logo is dictated by the amount and position of content within a given layout. Here are the following ways to place our logo: Top-aligned The TruStage logo can be top-aligned in either the top left or top right of an application. Bottom-aligned The TruStage logo can be bottom-aligned in either the bottom left or bottom right of an application. Center-aligned (limited usage) The TruStage logo can be center-aligned in certain applications where a center alignment is preferable (e.g., an end-slide in an animation or a desktop wallpaper).
Ascend symbol
Our logo contains the Ascend symbol that can be utilized for small-scale instances such as an app icon or favicon.
Logo misuse
The integrity of the TruStage logo must be respected at all times. Ensure that our logo is clearly visible. Always use approved artwork in correct colors when working with our logo. Do not alter our logo in any way. Here are some examples of what is considered off-brand.
Wordmark
Standard logo
Knockout logo
Reverse logo
Grayscale reverse logo
Grayscale logo
Color
The specifications for our color palette, illustrated at right, ensure that we consistently look our best at all times, whatever the format. Always use the color specifications listed here to maintain consistency across all applications. Variances in color may occur through different processes and media.
The range of colors in the TruStage palette has been designed to provide flexibility across our visual identity while also being simple, easy to use, and optimized for both print and digital applications. We use color to establish and reinforce a distinct and consistent TruStage look and feel. Color is an integral part of our visual system and brings out the depth and dimension of our identity. Rather than viewing white space as a blank area, we see it as a pause. Whether it’s in a photo or a layout, we don’t rush to fill negative space. What’s absent can focusattention on the content that’s there. Use the ratios on this page as a guide for balancing White space, Light Gray and TruStage Yellow with the rest of the color palette.
Secondary colors can be used as tints to provide additional tones for data. Note: there are not tints for Dark Gray. When needed use Light Gray.
TruStage Yellow is one of our primary brand colors and is used purposefully and strategically across communications. Just because TruStage Yellow is one of our primary brand colors does not mean that it needs to be used most predominantly. White and Light Gray are also primary colors, which helps create clean layouts with ample negative space, allowing TruStage Yellow to be used in key moments. TruStage Yellow may be used as a full background color when a strong brand color presence is preferred. More often, TruStage Yellow is used strategically as an accent. Every application should contain some moment of TruStage Yellow, whether it's in our logo or in some other graphic instance.
The primary colors for backgrounds are White, Light Gray and TruStage Yellow. These colors should be used in the majority of applications to maintain a consistent look and feel for our brand. The secondary color palette can also be used in scenarios where the primary colors are exhausted (such as the inside of a brochure, or divider slide in a multi-page presentation.) We recommend using these additional colors thoughtfully.
Care must be taken to ensure that text and base color combinations provide maximum contrast and legibility. Please follow these color specifications when creating digital compositions. Primary background/text color combinations are compliant in all text sizes and are used throughout the brand in most instances. Note: This list is not exhaustive of every possible color combination in the palette, only the most commonly used combinations. Always test to ensure AAA color compliance when using a combination not listed. The online tool below can be used toverify compliance of color combinations: webaim.org/resources/contrastchecker/ For all applications, body text should be Dark Gray. Color combinations in print Printed materials should follow this same guidance for color and text combinations. For printed applications, text should be 80% Black — do not use the Dark Gray swatch.
Our color adds a unique aspect to our brand and should be used in adherence to our style principles. Here are some examples of what is considered off-brand.
Deep Blue #193062 R 25 G 48 B 98 C 100 M 78 Y 0 K 57 PMS 281 C / U
Tree Green #103E2E R 16 G 62 B 46 C 91 M 13 Y 60 K 53 PMS 561 C / U
Clothes Purple #591B46 R 89 G 27 B 70 C 58 M 96 Y 6 K 49 PMS 262 C / U
Bright Blue #608CFF R 88 G 128 B 255 C 75 M 45 Y 0 K 0 PMS 2727 C / U
Bright Green #66CC99 R 46 G 199 B 140 C 55 M 0 Y 45 K 0 PMS 3385 C / U
Pop of Pink #D13289 R 209 G 50 B 137 C 14 M 76 Y 0 K 0 PMS 674 C / U
Dark Gray #646468 R 69 G 69 B 71 C 0 M 0 Y 0 K 80 PMS Cool Gray 11 C / U
Primary colors The TruStage primary color palette is white, light gray and TruStage Yellow. The ratio of white and light gray to TruStage Yellow elements should be 70/30. White and light gray help to balance TruStage Yellow and keep our applications clean with ample clear space. TruStage Yellow is used purposefully and strategically across communications.
White #FFFFFF R 255 G 255 B 255 C 0 M 0 Y 0 K 0 PMS N/A
Light Gray #F2F2F2 R 233 G 233 B 233 C 10 M 7 Y 5 K 0 PMS Cool Gray 1 C / U
TruStage Yellow #FAE07E R 250 G 224 B 126 C 0 M 3 Y 58 K 0 PMS 2002C / 2002U
Secondary colors Our secondary colors can be used as backgrounds for small moments and to account for places where more colors are needed (e.g., icons, illustrations, infograhics or CTAs).
Typography
Sul Sans is our typeface. It’s made of bold, simple and geometric forms that are clean and friendly. It has a large family of weights, perfect for use across applications. Sul Sans provides a fulls pectrum of typographic expression. When used consistently, it helps create powerful recognition for our brand.
Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234?!%$@#
Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234?!%$@#
Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234?!%$@#
Light ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234?!%$@#
Alternative system typeface Century Gothic is chosen for its similarities to Sul Sans, and it is a free downloadable font. Use Century Gothic in PowerPoint, email and other digital applications where Sul Sans is not available. Alternative Google typeface Poppins is our alternative typeface only used in web applications where Sul Sans is not available. Alternative production typeface Arial is intended to be used as a solution for production/mass printing as a substitute typeface when Century Gothic is not available to our partners and clients.
These are guidelines for print type hierarchy. The type sizes listed are our preferred specs toestablish the order of elements within a layout. For color usage within type, please refer to the color section of the guidelines in order to maintain legibility and accessibility standards. 1x to 1.5x the line spacing is recommended. TruStage follows the guidelines of the Associated Press. AP style sets standards for writing, including recommendations for grammar, punctuation and usage. • Headlines and subheads are always sentence case. • Proper punctuation, even on bullets, should end with a period. A "call to action" that ends in a URL would not end with a period. • Include the prefix "www" on all URL's.
These are guidelines for digital type hierarchy. The type sizes listed are our preferred specs to establish the order of elements within a layout. For color usage within type, please refer to the color section of the guidelines in order to maintain legibility and accessibility standards. 1x to 1.5x line spacing is recommended.
These guidelines should be used for email communications when creating emails that are not sent through Outlook. Corporate Outlook brand standards should still be followed for individual communications. For color usage within type, please refer to the color section of the guidelines in order to maintain legibility and accessibility standards. 1x to 1.5x line spacing is recommended.
This is a guideline for presentation typography hierarchy. It outlines the difference in type size and weight between text elements typically found in PowerPoint applications and establishes the order for elements within a layout. The type sizes listed are our preferred specs. For color usage within type, please refer to the color section of the guidelines in order to maintain legibility and accessibility standards. 1x to 1.5x line spacing is recommended.
It is essential to preserve a clear and effective typographic language at all times. Our type should maintain a proper visual balance between headline and body copy. Typefaces should never be substituted with those not approved within this guideline. Please do not stretch, squeeze or otherwise morph or manipulate typography. Any modification of our typefaces compromises their meaning and diminishes their impact.
Photography
We serve a wide range of audiences, andour photography plays an important role in communicating our commitment to provide a brighter financial future for everyone we serve. Our style is bright, accessible, authentic and natural. We put people at the center, capturing candid moments and celebrating human potential. Our images follow the three following guiding principles: • Accessible to everyone • Authentic experiences • Candid confidence Whether shooting original photography or selecting stock imagery for purchase,the following guidance will help with the creation and selection of brand images.
Whether selecting stock photos or doing a custom shoot, our photos should always follow our guiding principles: authenticity, diversity and emotion, supported by strong color and saturation. All photography should reflect a brand that is genuine and approachable, imagery that captures an environment and a moment every viewer can relate to.
Use lifestyle when the aim is to: • Capture candid moments that highlight the impact TruStage has on our audiences.
Use portraits when the aim is to: • Celebrate and showcase confident customers, employees and business partners, making a clear connection to the brand.
Lifestyle
Portraits
Our first category captures people, employees and business partners confidently living their lives, knowing TruStage is by their side. Lifestyle images are candid, bright, and full of natural and warm light.
To address our wide range of audiences, lifestyle photography focuses on two main groups: Consumers / Community Capturing people in their real environments Employees and Business Partners Capturing people in office and business settings
In our photographs, we use gaze strategically to tell a story. We have the optionality to show people either not looking directly at the camera, or looking at the camera: Not looking directly at camera Use this style to capture candid moments Looking directly at camera Use this style to show confidence and connect with audiences
Balanced contrast All images should have a balance between light and dark, creating a warm, bright and crisp look. Avoid images with too much contrast and shadow, as well as images that look filtered and flat. Natural light Images should have a natural light source whenever possible, preferably morning light. Avoid having hard shadows and dark spaces.
Balanced saturation Use photos that include soft hues and that aren’t overly saturated. Natural color Our selection and use of color shouldn’t feel overly art-directed but should feel considered, complementing our palette.
Composition The Rule of Thirds uses key intersection points and breaks the scene up into thirds vertically and horizontally.
Through portraits, we celebrate and showcase confident customers, employees and business partners. We showcase people’s individuality by capturing natural facial expressions. Colors from our palette can be used as seamless backdrops to make a clear connection to the brand. Images must reinforce the authenticity, engagement and optimism of our diverse workforce.
Short lighting is preferred. We want to see some depth and dimension on the facial features, but lighting should never over-dramatize the shot. Backgrounds should be flat and seamless. Subjects should be placed with enough distance from the backdrop to allow for some light shadowing to occur. Headshot Our headshots are from the shoulders up. The image must be adaptable for a square and a circular cropping. Candid Recommended as a 3/4 or 1/2 or full body shot, this image is designed to capture the subject’s true character. It should display a bit more personality than the headshot and is used more editorially.
Our branded colors give a quality to our portraits that make them uniquely TruStage. The following guidance outlines the appropriate color backgrounds for portrait shots. Always ensure there is sufficient contrast with the subject and the background. Garment colors The primary background color is Light Gray. Other background colors include TruStage Yellow, Deep Blue, Bright Blue and Dark Gray. Garments should be either neutral (white, grays, blacks) and/or complement the background color. However, when using Light Gray backgrounds it is preferable to have more colorful garments within the brand color palette. Avoid garments that have busy patterns. Note: This is applicable to marketing materials only not employee headshots.
The following rules will guide how to achieve our portrait style.
Like all elements of our visual identity, our photography approach must ensure a clear connection to our brand. Avoid these mistakes when selecting or creating brand photos.
Who we are How we speak How we look Logo Color Typography Photography Icons Color block Grid & layout Data visualization Motion & video Contact
Accessible to everyone
We show our inclusivity by highlighting a diverse range of subjects and people.
We use natural lighting and unposed, candid shots to show authentic experiences.
Authentic experiences
We show how we confidently empower our customers, employees and business partners through genuine confident portraits.
Candid confidence
Our icons are an important part of our visual system. They help to convey ideas in a simple and cohesive way. Our icons are styled in a way that is uniquely TruStage and help to bring our brand style to life. The following pages outline the different types of icons, how and when they are used, and guidance for creating them. Our icons have been created in two different styles. These different styles help to create flexibility when using our icons in different applications. The icon styles areas follows: • Supportive Icons • Functional Icons
Supportive icons are graphic elements that enrich our visual system by supporting a specific topic. Please use icons correctly by utilizing the visual associated with the topic. Supportive icons are to be used with copy to help reinforce their meaning.
To ensure that our icons are flexible and work across different layouts and applications, they can be colored in the following ways: Dual-color icons The dual-color icons combine Deep Blue strokes with pops of Bright Blue fills. These icons were designed to be unique to the TruStage brand. Dual-color reverse icons Our unique dual-color icons have also been designed with a white stroke, to have sufficient contrast on dark colors. The accent color should also be Bright Blue. Dual-color reverse icons should be placed over a dark blue background. Single color icons These Deep Blue icons have been designed to work in a single color for limited applications where two-color icons cannot be used. These icons can print in black or reverse out to white.
Our icons follow these key style principles: 1. We use miter-join corners where two straight lines intersect to create a sense of precision and expertise. 2. Our icons use a consistent medium stroke width that makes them legible and prominent without becoming too heavy. 3. We use butt cap stroke terminals to create pixel perfect edges. 4. Our icons combine both an outline stroke and solid fill to create visual interest and uniqueness to TruStage.
When creating new supportive icons, it is important to adhere to the grid and style principles to ensure the icon set is standardized and visually cohesive. Grid We draw our icons on a pixel-based gridof 64 x 64 units, which can be sized up or down to 32 x 32 (min. size). The pixel grid has a layer of clear space on all four sides equal to 4px. Iconography lines should be drawn with a 2px stroke, which allows elements to align within the pixel grid.
Backgrounds Icons should always be applied to solid color backgrounds. When using icons in combination with a photograph, use a color-device to create sufficient legibility and contrast. Use cases Icons should be used to help convey and organize key information. Icons are usually tied to copy and may be used on their own. Do not combine multiple icons.
The following applications show different examples for how our icons can get utilized across different touchpoints.
When creating new functional icons, it is important to adhere to the grid and style principles to ensure the icon set is standardized and visually cohesive. Grid We draw our icons on a pixel-based grid of 64 x 64 units, which can be sized up or down to 32 x 32 (min. size). The pixel grid has a layer of clear space on all four sides equal to 4px. Iconography lines should be drawn with a 4px stroke, which allows elements to align within the pixel grid. Non-connecting elements should also maintain a minimum of 4px padding.
Functional icons are the most simplified version of our icons and are primarily used for digital applications such as desktop and mobile navigation. They are created to be highly legible and to work well at small sizes. Color usage To maintain the highest contrast and legibility of our functional icons, they can be colored in the following ways: • Deep Blue or Black (used on light backgrounds) • White (used on dark backgrounds)
Icons can also be placed within a holding shape of either a square or a circle. In either case it is important to keep all the icons placed in the same area the same size to one another, including the holding shape. Squares If you are placing more than one icon on a page, place all the icons before determining holding shape size. Determine the larges thorizontal or vertical measurement for all the icons you are using and create a squaret hat size (A). Place the square behind the largest icon and center (B). Then enlarge the square 125% of its original size (C). Use same size square for all icons, centering them accordingly. Circles Place the circle behind the largest icon and enlarge 140%. Use same size circle for all icons, centering them accordingly.
Icons
Our icons add a unique aspect to our brand and should be used in adherence to our style principles. Here are some examples of what is considered off-brand.
Dual-color icons
Dual-color reverse icons
Single color icons – Black
Single color reverse icons
Single color icons – Deep Blue
Functional icons color 1. Deep Blue or Black icons on light backgrounds
2. White icons on light backgrounds
Functional icons usage example
Color block
We use a color block device to help ground photography and content as one. These strategic shapes help to give our applications a sense of depth and help draw the eye to key information. The color block device can be leveraged across a range of applications and media. Refer to the grid & layout section for details on sizing and placement of the color block within the TruStage grid system.
Use of the color block device can add flexibility and dynamics to our brand assets. By applying this device in a variety of ways, such as contained within a full-bleed image or overlapping inset photographs, we can create differentiation between various types and levels of materials. Size and placement The color block should be sized and positioned within the TruStage grid system. Please refer to the grid & layout section of this guide for more examples.
Fill color Approved fill colors are limited to: • White • TruStage Yellow • Deep Blue When choosing a color, it is important the color block has sufficient contrast with relation to the selected photograph. Opacity The fill is to be only used at 100% opacity. Inset Spacing The inset spacing for content within color blocks will vary based on the size and scale of the collateral being created. Spacing should remain consistent within any given piece. As a general rule of thumb, this inset spacing can be sized equally to the Ascend symbol in the TruStage logo. Navigate to the logo section for logo sizing.
While the color blocks add flexibility and dynamics to our brand assets, it should be used with finesse. Here are some examples of what is considered off-brand.
Grid and layout
A grid plays an important role in conveying voice, maintaining cohesion and clarity, and improving navigation. Our grid provides an underlying structure that ties the components of our identity, typography and imagery together. Margins The margins, shown in gray, take up the space between the edge of the document and the first type grid line. The TruStage logo and text should never live outside the page margins. However, photography and color blocks may go past the margins. Columns and Rows The grid is structured by a series of columns and rows. As a general rule, columns should come in sets of 6, 8 or 12 depending on the size of the page. Rows are for consistency of color blocks and photographs. Vertical placement of type can break rows if necessary.
Use of the grid’s rows and columns will aid in a harmonious look and feel amongst various collateral pieces. In order to help foster dynamic page layouts within this structure, flexibility has been built into the system. Photography and color blocks Photographs and color blocks can be fully contained within the page margins or may bleed one or more sides. It will be necessary to have these elements inset when edge-to-edge printing is not available. Use of both the grid’s vertical columns and horizontal rows will aid in sizing photographs and color blocks. Heights and widths should maintain a minimum of 25% and a maximum of 75% of the page dimensions. Elements exceeding 75% should be increased to a full-bleed background. Typography While typographic elements should always align with vertical columns, type does not need to adhere to horizontal grid lines. Horizontal grid lines can be used to help with structure when needed.
These examples show how the margin and grid can be used to build a variety of vertical layouts.
These examples show how the margin and grid can be used to build a variety of horizontal layouts.
The digital grid is the framework for all visual and typographic elements of the web design. It gives just enough structure and guidance to focus on the creative idea. Columns Within the grid, columns are especially important—they give layouts their structure and should be set at 80px. Gutters Gutters are the space between the columns and should be set at 20px.
The digital grid is the framework for all visual and typographic elements of the web design. It gives just enough structure and guidance to focus on the creative idea. Responsive grids The number of columns displayed in the grid is determined by the breakpoint range (a range of predetermined screen sizes) at which a screen is viewed, whether it’s a breakpoint for mobile, tablet or another size. A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation. In this case, as the screen size shifts to tablet, columns begin to reduce and content starts to stack and center on page. For example, when reducing size from desktop to tablet, 12-column grids reduce to 8 columns. Then from tablet to mobile, 8-column grids become 4 columns.
Here are some examples of misuse of our grid and layout guidance.
Data visualization
Data Visualization
Data visualization overview
Data visualization is a genera term that describes any effort to help people understand the significance of data by placing it in a visual context.
Patterns, trends and correlations that may go undetected in text-based settings can be communicated and recognized more easily through visualization.
Chart Title
Headline
Doughnut Chart
$78.3bn
45%
23%
Volectiis ut la nimi offictiorere lia
Area Chart
Bar Chart
Line Chart
Doughnut
Quantity (dots)
Bar
Pie
Stacked column
Ratio
Line
Stacked bar
When not as many colors are necessary, mono color application for data visualization can help to simplify visual elements.
The illustrations at right show the preferred color application for the data visualization elements in mono color, over light and dark backgrounds.
The illustrations at right show the preferred color application for the data visualization elements over light and dark backgrounds.
Note: Refer to the color section for individual color breakdowns.
Always check for graphic compliance "PASS" in order to keep clear contrast between graphs and background for visibility.
Pie charts are divided into sectors, illustrating proportions. Use pie charts only when the different values add up to a total of 100% and there is a need to highlight percentages. Use this model to: • Compare • Show subdivisions For this kind of data set: • Categorized data
Use this model to: • Compare • Show subdivisions For this kind of data set: • Categorized data
Doughnut charts are similar to pie charts, but removing te center provides more room for information.
Data visualization: Doughnut charts
Data visualization is a general term that describes any effort to help people understand the significance of data by placing it in a visual context. Patterns, trends and correlations that may go undetected in text-based settings can be communicated and recognized more easily through visualization.
Charts and graphs are most effective when they are uncomplicated and easy to read. Flat geometric shapes—such as simple lines, rectangles for bar or column graphs, and circles for pie charts—provide an effective foundation for presenting data. Keep it simple. Applying additional decorative or unnecessary elements can prevent our audience from taking in the information quickly and easily.
The illustrations at right show the preferred color application for the data visualization elements over light and dark backgrounds. Note: Refer to the color section for individual color breakdowns. Always check for graphic compliance "PASS" in order to keep clear contrast between graphs and background for visibility.
When not as many colors are necessary, mono color application for data visualization can help to simplify visual elements. The illustrations at right show the preferred color application for the data visualization elements in mono color, over light and dark backgrounds.
Enlarged graphic numbers offer a more impactful view of important figures. This page shows the preferred color application for graphic numbers over light and dark backgrounds.
Doughnut charts are similar to pie charts, but removing the center provides more room for information. Use this model to: • Compare • Show subdivisions For this kind of data set: • Categorized data
Bar charts have rectangular bars with lengths proportional to the values that they represent. Use bar charts to compare different values that are hierarchically equivalent. Ordinal variables have vertical bars; nominal variables have horizontal bars. Use this model to: • Explore in time • Compare • Show correlations For this kind of data set: • Time-based data • Categorized data Bar thickness should always be scaled to fill the chart space evenly.
The line chart displays information as a series of data points connected by straight line segments. Line charts/graphs are used to track changes over short and long periods of time. To illustrate smaller changes, it’s better to use a line graph than a bar graph. Line graphs may also be used to compare changes over the same period of time for more than one group. Use this model to: • Explore changes in time • Compare • Show correlations For this kind of data set: • Time-based data Avoid using a line chart/graph when not comparing values over time. Instead, select a bar chart.
Area charts depict a time-series relationship but, unlike line charts, they can also visually represent volume. Information is graphed on two axes, using data points connected by line segments. The area between the axis and the line segment is commonly emphasized with color or shading for legibility. Most often, area charts compare two or more categories. Use this model to: • Explore changes in time • Compare • Show correlations • Show distributions of parts to a whole where the cumulative total is unimportant For this kind of data set: • Time-based data • Volume • Categorized data When the cumulative total is important, use a stacked bar chart.
Following are examples of stylized data in charts and graphs created using the suite of applications in the Microsoft Office bundle.
Following are examples of "do nots" across all types of data visualization.
x
1/10X
Motion & video
Although essential in all people's lives, insurance and investement solutions are not a tangible or easily understood subject. The goal with our motion is to show complex and sometimes dry subjects in a way that is both accessible and visually captivating to our audience. These themes should remain consistent in our approach and execution of motion. As we strive for accessibility in all aspects of our brand, we caption videos and provide transcripts whenever possible.
These guidelines will help bring our TruStage brand experience and values to life. This page provides the general principles for video: 1. Wide shots show the beauty of an environment and create intimacy. 2. TruStage textures can be added to moments of video to build on a moment or introduce a transition. 3. Live action imagery should closely align with our photography guidelines. Refer to the photography section for style guidance. The following pages are not an exhaustive list, but are examples of some simple transitions you can utilize in your work.
Color block placement
Edge-to-edge
Contained
When a color block is anchored to the bottom of the screen, it should animate downward.
When a color block is contained within the margins— it should animate to the right. In application, this works for call-outs on graphs and CTAs.
Examples Anchored example
Color blocks help to provide enough contrast to ensure legibility of text over moving footage. A color block can either be placed edge-to-edge or contained within the margins. Color It is important that color blocks have sufficient contrast over the background footage. Refer to the color section for approved color combinations.
Our color block device may be used to transition from one segment to another or to reveal new information. Swipe transitions Swipe transitions are used with edge-to-edge color blocks to reveal new segments. Fade Fade transitions are used with contained color blocks to reveal new content. Ensure that the fade is gradual and that it doesn’t occur too slowly or too abruptly.
We utilize subtle transitions for text to guide the viewer’s attention so the right information is being read at the right time. Dynamic Large text, set in Sul Sans Medium, animates in the same way: each line flies in upward and gradually increases in opacity as it nears its destination. Color Color transitions can also be used to call attention to key information. Fade For smaller text, animations should be minimal and simply increase (transitioning in) or decrease (transitioning out) in opacity.
We use a video grid that helps to size, divide and organize content. Safe area A safe area ensures that text or graphics show neatly: with a margin and without distortion.
Videos can begin and end with a logo intro or outro slide. The logo should be placed prominently in the center of the screen with a minimum size of 4 columns and maximum size of 10 columns. Color Our logo artwork should be utilized on the correct color background to ensure readability and contrast. Refer to "Logo overview" on page 92 for logo color guidance.
In some cases, an end-frame for example, you may need to include a simple call to action or legal disclaimer with theTruStage logo. Logo placement Consistently sizing and positioning the logo in animated sequences unifies the brand across mediums. The size of the TruStage logo should be equal to 6 rows on the grid.
We push the boundaries of what's possible. Be creative with how you animate. Elevated your animation by exploring how we build imags and transition frames. Think: Creative, Curious, Futuristic
We are experts at what we do, and that should be reflected in our motion. Our motion is simplified, but meticulous. Aim to finesse your video by polishing your eases, overshoots and pacing. Avoid overly cartoonish movements and the over-use of motion in type. Think: Confident, Bold, Trustworthy
Keep things concise. Avoid flashy techniques or flourishes that do not have clear reasonsing in the represented narrative. Easy on the eye and thoughtful solutions are often the most refined, assessible and impactful. This does not mean we cannot add "surprised and delight" moments. Analogies can be a great way to express difficult concepts. Think: Clear, Bright, Easy
At our core, we are people helping people. Easy to understand language, organic movements/textures and playful builds help make us accessible to everyone. Think: Empathetic, Accessible, Approachable
Resonates with Customers •Drives clarity and reduces current-state confusion over multiple brands, affiliations with CUNA, offerings, etc. •Builds off TruStage brand, which is positively perceived among those that know it •Enables us to tell a single, unified brand story to both existing and prospective customers
Creates Operational Efficiencies •Leverages existing brand assets •Lowers ongoing maintenance and effort required to support brand in future •Creates clear structure and guidance for future expansions
Support B2B2C Strategy •Enables expansion into new businesses and customer types (e.g., banking and new partners) •Recognizes the consumer as the ultimate end-customer •Feels authentic and credible for us and our key stakeholders
Brand Strategy
Core principles
A single brand architecture provides benefits across our business
Single brand enables acceleration of profitable growth by focusing on one vs. many brands
One Single Brand
Hybrid
Many Brands
3 Series 5 Series 7 Series X3, Z4, etc.
Several Independent Brands
Overarching brand with sub-brands
Brand Relationships Spectrum
One overarching brand descriptors
Improves efficiency and effectiveness of brand-building efforts by investing in and supporting one insted of many brands, supported by clear and consistent naming.
In a single brand strategy, we hold ourselves accountable to two core principles Efficiently prioritize investment Prioritize investment in one brand (TruStage) rather than many sub-brands and independent brands to maximize impact and amplify enterprise growth. Unite the organization Success takes unity as an enterprise. Being disciplined about using a single brand allows the organization to unite around a common purpose and reduce silos that impact the quality of our collective work and offers.
TruStage as a the single parent brand provides strategic focus and consistency in the market.
Legal Entity
TruStage Financial Group, Inc. ("TruStage Financial")
Go-to-Market Brand
Aligns organization to singular view and shared definition of enterprise business
Connects employees to a bigger enterprise purpose + portfolio
Reduces customer confusion in navigating our portfolio of offers
Improves cross-sell and up-sell across the portfolio of offers
Minimizes investment required for building and sustaining brands
Improves profitability and scale by not replicating enterprise brand functions across business units
Efficiently prioritize investment
Unite the organization
TruStage Brand Gudielines
Business Protection
Solutions
Offers
*As part of Solutions and Offers, we will reference the tools and resources available (e.g., Lender Development Program) *Ventures reflected as individuals Business Unit, rather GTM offer **See detailed naming slides for context
Protection -Fidelity Bond -Management & Professional Liability -Workers' Compensation -Property & Business Liability -Cybersecurity Protection -Auto Collateral Protection Real Estate Collateral Protection -Plastic Card Insurance -Business Auto Insurance
Protection -Credit Insurance: -Life, Disability -Debt Protection (GAP) -Private Mortgage Insurance (proivded by MGIC) -Mechanical Repair Coverage** (provided by Assurant) -Payment Guard (Formerly Lending Lane 2)
Term Life Insurance -Simplified Issue Term -Simplified Issue term High Face Whole Life Insurance -Simplified Issue Whole Life - Age Last Birthday -Simple Conversion Whole Life Guaranteed Acceptance Whole Life Insurance
Home -Home Insurance -Condo Insurance -Renters Insurance - (all provided by Liberty Mutual) Auto -Auto Insurance (provided by Liberty Mutual) -Motorcycle Insurance (provided by Liberty Mutual) -RV Insurance (provided by Liberty Mutual) -Boat Insurance (provided by Liberty Mutual) -Umbrella Insurance (provided by Liberty Mutual)
Funeral Preplanning -Preneed Life Insurance Final Expense Planning -Final Expense Insurance Additional Services -Travel Protection -Final Document Services -Executor Protection -Wills and Estate Planning
Credit Union Funding: -Charitable Donation Account -Total Beneftis Pre-Funding
-MaxProtect Fixed Annuity Income Annuities -Future Income Annuity -Single Premium Immediate Annuity Registered Index-Linked Annuities -Zone Choice Annuity -Zone Income Annuity Variable and Index-Linked Annuities -Horizon II Annuity
Qualified Plan Services Nonqualified Executive Benefit Plan Services Pension/Defined Benefit Plan Serivces Pension Risk Transfer
Consumer Lending Compliance Commerical Lending Compliance Deposits Compliance Tax Favored Accounts Treasury Managment Compliance
Lending -Perpetual Offers -Invitation to Apply -Embedded Finance -Loan Application -Loan Decision Workflow Automotive -Vehicle Upgrade (provided by CarSaver) ForeverCar TBD Member Service -New Account Services -Embedded Member Enrollment
AD& D Insurance
Insurance
Lending
Life
AD&D
Property & Casualty
Final Arrangements
Investments
Investment Advisory
Annuities
Workplace Solutions
Technology
Compliance
Ecommerce
Categories
Offer Areas
Coordinated solution of business protection policies and risk management services across different industries.
Business Protection Solutions
Protection policies and advisory support to build a better lending program.
Multi-policy insurance bundle integrates Life. Property & Casualty, and/or AD&D. Partners gain access to marketing and sales support when offering TruStage.
Advance your Credit Union's wealth managment program with competitive members insights and targeting, strategic consulting and coaching, financial advice on demand and leading advisor solutions (in partnership with LPL)
Documents, technology solutions and consulting support to ensure adherence to ever changing regulatory obligations, manage risk, increase efficiency and deliver better outcomes.
End-to-end auto buying solutions combine dealer auto inventory with automated loan offers, point of sale financing and compliant, personalized payment options to grow earning assets and maximize consumer value.
Lending Protection Solutions
Consumer Insurance Solutions
Wealth Managment Solutions
Compliance Solutions
Loan recapture solutions designed to retain or bring back consumers to your financial institution (automotive, personal loans, HELOC, credit card loans, debt consolidation, etc.)
Loan Recapture Solutions
Automotive Purchasing Solutions
Lending Protection
Term Life Insurance
*Representative not exhaustive
Whole Life Insurance
Guaranteed Acceptance Whole Life Insurance
AD&D Insurance
Consumer Insurance
Home Auto
Funeral Preplanning Final Expense Planning Additional Services
Wealth Management Credit Unit Funding
Fixed Annuities Income Annuities Registered-Index Linked Annuities Variable and Index-Linked Annuities
Qualified Plan Services Nonqualified Executive Benefit Plan Services Pension/Defined Benefit Plan Services Pension Risk Transfer
Consumer Lending Commercial Lending Deposits Tax Favored Accounts Treasury Management
Automotive Lending Member Service
