VISUAL
Graphic Devices
Graphic devices are key visual elements used in branding and design to convey a brand's identity and values. At City National, the Ladder and Wedge play a crucial role in our visual storytelling, reinforcing our commitment to growth, inclusivity and upward mobility in all our communications.
The Ladder
A symbol of growth and aspiration, the "Ladder of Success" has a rich history at City National Bank. Originally introduced in 1962 as a step stool for children at our teller windows, it quickly became more than a functional tool, evolving into our iconic logo that symbolizes upward mobility and potential.
Integral to our brand identity, the Ladder forms a key component of the City National Bank logo mark. It can be used independently or in conjunction with the upward-pointing angles of the Wedge, symbolizing complementary paths to progress.
In special circumstances, the Ladder may stand alone, provided that it is accompanied by City National Bank's registered mark in the related content, ensuring brand consistency and recognition.
City National Bank Ladder
The Wedge
The City National Bank Wedge, inspired by the iconic ladder logo, serves as a dynamic graphic element that unifies and brings consistency to all client interactions. It’s more than a visual tool – it symbolizes upward mobility and represents ambition, determination, and the journey towards greater heights. It guides the viewer’s eye upward, encouraging a sense of aspiration
and progress.
This design tool is versatile, able to frame messages, emphasize themes and bring a harmonious balance between art and copy – making it a vital asset in creating visually appealing and efficient designs.
Angles: Based on The Ladder
We have identified three distinct angles derived from the Ladder. These angles can be easily created in common design software tools like Adobe InDesign and Adobe Illustrator.
Direction: Always on The Way Up®
Two of the angles can be rotated for a total of five distinct Wedges. For consistency, the Wedge always ascends from the left side of the layout.
Ladder and the Wedge together
The angles that form the wedge are derived from the ladder in the City National Bank logo. This creates a visual harmony when the two are together in layout. The examples below demonstrate the Wedge, Ladder and logo interaction.
There are some things to avoid while utilizing the graphic elements. For example, don't use secondary or accent colors in the Wedge. Adhere to correct angles and direction.
Do
use primary and secondary colors in the wedge.
Do
use an upward angle for the wedge.
Don't
use accent colors in the wedge.
Don't
use a downward angle for the wedge.
Content Hierarchy
Content hierarchy refers to the standard sequence of elements in our communications: headline and copy, call to action (CTA), logo, and disclosure. Typically, this order flows left to right, as shown in our examples, or top to bottom in vertical layouts. However, exceptions are possible if the layout demands it, subject to approval from the Creative Studio team.
Below are examples of layouts following the content hierarchy and utilizing various Wedge angles as appropriate.
QR Codes
For QR codes, our preferred color scheme is blue and white, though black may be used on occasion. When designing, the associated CTA with URL is placed to the right and center-aligned. For typography, use Proxima Nova Regular for the CTA text and Proxima Nova Bold for the URL. Omit periods as per our writing style guidelines.
Optimal size
Minimum Size
Maximum Size
Secondary Photography and the Wedge
Stick to the angles shown below when framing secondary photography with the Wedge. Either a single or double Wedge treatment can be used, whichever works best in layout.
Single Wedge
Single Wedge
Double Wedge
Do
use correct brand angles.
Don't
use additional angles.
Color and Styling
Styling choices for our custom photography are informed by the City National color palette. We can use primary, secondary and accent colors. Below are examples of wardrobe styling with corresponding swatches.
Color & Photography
Lifestyle photography is informed by the CNB color palette. We can use primary, secondary and accent colors. Below are examples of lifestyle images with corresponding swatches.
Color and Objects
Object photography is informed by the City National color palette. We can use primary, secondary and accent colors.
Iconography
Isn’t it iconic.
Iconography is a unified visual language used to indicate information and interactions in a simple and direct manner. In developing an iconography system for City National Bank, consistency, readability, and scalability are the core parameters. Consistency influences a general trustworthiness of a product, readability increases the speed of interactions, and scalability lets your product grow effectively.
Our illustration style is used to provide supporting graphics to products, services, processes, functions and other abstract matters. It follows the principles of simplicity and clarity.
Graphic Icons
The icons are simply designed to be easily scannable. Simplicity does not mean they can’t be dynamic, so for web and social, simple animations can be added to each graphic to add movement. Icon color, style and line weight should match our existing library assets
Various icons can be viewed in the PDF below.
Animation
The ability to move me.
Animation can help further distinguish and identify the City National Bank brand in consumers’ minds. Specific animated techniques, color palettes, transitions and other effects reinforces their brand principles effortlessly. This not only helps to amplify the brand’s emotional impact and power, but also provides a very distinctive look and feel to City National’s communications. This further results in establishing viewers’ recall of the brand.
The Wedge Wipe
We use the wedge as a transitional device to help move shorter narratives along. It is also used to segue between messages.
The speed of the movement should always embody the tone of that particular communication. For example: The Tony Awards is an upbeat event, so the wedge can reflect that mood.
The Ladder Scale
Creating a personality for the ladder is a great branding opportunity. We want to communicate growth and stability in the animation of the Ladder. We want people to feel connected to the brand through the use of the ladder.
Type that only Ladders Up
The movement of the headline type is very specific in that it is meant to mimic the upward scaling of the Ladder, and helps to reinforce The Way Up® in consumers’ minds.