Welcome to the INFINITI Digital Brand Guideline, created to help you communicate and execute the INFINITI brand in a clear and consistent way through digital touchpoints.
1. Introduction
Brand Promise
2. Foundation
Logo
Primary & Secondary Logos
Isolating the Symbol
Color
Primary Palette
Secondary Palette
Additional Colors
Color Usage
Typography
INFINITI Brand Typeface
Typesetting
Fallback Fonts
Don’ts
Horizon Graphic
Alignment
In Motion
Variations
In Use: Dynamic Horizon Graphic
In Use: Static Horizon Graphic
Horizon Graphic Assets
Don’ts
Graphic Line
Icons
Characteristics
Color Usage
3. UI
CTA
Primary
Secondary
Tertiary
Additional CTAs
Forms
Input Field
Radio Buttons and Checkboxes
Drop Down
Messages
Alert Bar
Tooltip
Modal
Accordions
Lists
Accessibility
4. Imagery and Video
Photography Style
Image Ratios
Retaining Ratios
Ratio Exception
DNA Portal
Vehicle Photography
Full-bleed Asset Composition
Exterior
Interior
Figures
When to Use
Don’ts
Vehicle Jellybean
Premium Renderings
Soft Space Environments: When to Use
Soft Space Environments: How to Use
Soft Space Environment Assets
Soft Space Environments: Dont's
Thumbnail Environments: When to Use
Thumbnail Environments: How to Use
Thumbnail Environments: Don’ts
360s
Exterior
Interior
Text on Imagery
Gradient
Don’ts
Video
Closed Captions
Background and Padding
Disclaimers
Safety Zone
5. In Use Examples
In Use: Examples
Brand Promise
Power & Serenity
INFINITI promises its customers a unique take on Modern Japanese Luxury by combining Power and Serenity. In today’s busy, chaotic and unpredictable world, INFINITI offers a powerful and serene experience to empower people on the road and in life.
Our visual identity is a visual manifestation of this ambition. The horizon is the core inspiration for our graphic system. Building off of our logo’s original meaning, it takes inspiration from natural elements, and leans into traditional notions of Japanese beauty. We stand for a premium, luxurious minimalism that prioritizes the experiential over the material, and aims to provide an impression that inspires the senses.
For more information about the INFINITI Brand Promise, please refer to the Core Brand Guideline.
Logo
PRIMARY LOGO
Our primary logo consists of a symbol and a wordmark. Our symbol visualizes the open road, going off into the horizon. Our wordmark is spaced out to echo that horizon even more. The primary version of the logo should always be considered first when selecting a logo. Always ensure it is legible. When little space is available, utilize the isolated symbol (e.g. mobile nav, app icons and social media avatars).
SECONDARY LOGO
The secondary logo has a more horizontal composition, and thus provides us with another option for very wide applications, or better alignment with text that is justified to the left.
ISOLATED SYMBOL
In specific use cases, the symbol can be isolated from the logo and used on its own for further brand flexibility.
Whenever the symbol is isolated from the wordmark, it should still be positioned within the same field of vision, or in close proximity to either the wordmark or the INFINITI brand name.
For full rules and considerations around the INFINITI logo,
please refer to the Core Brand Guideline.
Color
PRIMARY PALETTE
Our primary color palette consists of INFINITI Blue, INFINITI Gold and White.
INFINITI Blue
INFINITI Gold
White
#020B24
RGB (2, 11, 36)
In digital applications, INFINITI Blue should be used sparingly and is only used as a background color, text or icon color within CTAs and our Horizon Graphic.
#B0A591
RGB (176, 165, 145)
INFINITI Gold can be used sparingly for graphical elements such as a background color for small components, icons on dark backgrounds and CTAs. It is not recommended as a background color for content-heavy, long-form text contexts.
#FFFFFF
RGB (255, 255, 255)
White is used as the main color for text and logo on dark backgrounds and provides content-heavy layouts with a clean background.
Primary Palette Proportion
SECONDARY PALETTE
Our secondary palette should be used intentionally and for particular instance where we need increased legibility – such as larger amounts of text – or have a need for less dominant colors.
INFINITI Gold 20%
Black
Secondary Blue
#EFEDE9
RGB (239, 237, 233)
INFINITI Gold 20% provides content-heavy layouts with a clean background, in addition to white.
#000000
RGB (0, 0, 0)
Black is to be used for text, icons and logo on light backgrounds.
#6E8AA8
RGB (110, 138, 168)
Secondary Blue is available for instances where we need an additional color to draw attention to specific information alongside our INFINITI Blue or Gold, such as an additional CTA, selected states or infographics. Secondary Blue is to be used as an accent color only.
Secondary Palette Proportion
FUNCTIONAL COLORS
Our functional colors are used for UI and have a functional purpose. INFINITI Gold 40% is used as the stroke color in component designs or can be used sparingly as an additional background color. Dark Gray, Gray and Light Gray are used in UI environments where subtle colors are needed to indicate dividers, form fields, text elements, etc. For limited use – Dark Gray, Gray and Light Gray should never be used as background colors.
See the Forms section for more context.
INFINITI Gold 40%
Dark Gray
Gray
#DFDBD3
RGB (223, 219, 211)
#646464
RGB (100, 100, 100)
#B4B4B4
RGB (180, 180, 180)
Light Gray
#E7E7E7
RGB (231, 231, 231)
SIGNAL COLORS
Our signal colors are used for notifications, warnings and status messages if a color differentiation is required. Warning is used for warning messaging, general alerts or CTAs and icons that communicate warnings. Error is used for incomplete or negative states, form field errors, incomplete email or CTAs and icons that communicate errors. Error Form Field Fill is used solely as the background color for error state form fields. Success is used for confirmation messaging, general alerts or CTAs and icons that communicate success.
The Success green color was developed for digital experiences and should be used for digital experiences ONLY.
For limited use and should never be used as background colors. DO NOT USE with the Horizon Graphic.
See the Messages section for more context.
Warning
Error
Error Form Field Fill
#F1B03D
RGB (241, 176, 61)
#D0573A
RGB (208, 87, 58)
#F6DDD8
RGB (246, 221, 216)
Success
#5B8662
91, 134, 98
This green color is strictly for digital use ONLY.
OVERLAY COLORS
Our overlay colors are lighter shades of Blue and signal colors and are used as backgrounds for banners, tooltips and modals. For limited use. DO NOT USE with the Horizon Graphic.
See the Messages section for more context.
Overlay Blue
Overlay Warning
Overlay Error
#9AADC2
RGB (154, 173, 194)
#F6C978
RGB (246, 201, 120)
#DE8A75
RGB (222,138,117)
Overlay Success
#ADB8AF
RGB (173, 184, 175)
Color Usage
INFINITI Blue, White, INFINITI Gold 20% and INFINITI Gold are the only colors that can be used as background colors for digital applications. Exceptions are banners, tooltips and modals, which can use overlay colors as background colors.
White and INFINITI Gold 20% should have the largest proportion of color in most digital applications. Most components and content sections will use White or INFINITI Gold 20% as the background color, and sections of content should alternate between White and INFINITI Gold 20% to help group like content and make pages and applications more digestible. INFINITI Gold 40%, Gray, Light Gray and overlay colors are not accessible for text or graphic elements on White or INFINITI Gold 20%. Signal colors Error and Success are accessible for graphic elements on White. Signal color Warning is not accessible for text or graphic elements on White or INFINITI Gold 20%.
CTAs in INFINITI Gold, Secondary Blue and Signal colors are accessible on White or INFINITI Gold 20% because the INFINITI Blue text within CTAs is accessible on INFINITI Gold and signal colors. Signal and overlay colors should only be reserved for moments mentioned in the previous section.
INFINITI Blue should have the second largest proportion of color in most digital applications. It should be used for brand-heavy moments in touchpoints (e.g. for use on the homepage and PFA sections). All colors are accessible on INFINITI Blue except Black and Dark Gray. Disabled CTAs in Dark Theme are accessible on INFINITI Blue because the INFINITI Blue text within CTAs is accessible on Dark Gray. Signal and overlay colors should only be reserved for moments mentioned in the previous section.
INFINITI Gold should have the smallest proportion of color in most digital applications. It should be used for content-light components and sections. Use only Light Theme Primary INFINITI Blue CTA and Secondary CTA on INFINITI Gold. DO NOT USE CTAs in INFINITI Gold, Secondary Blue or signal colors on INFINITI Gold.
INFINITI Gold Presence
The subtle presence of INFINITI Gold alongside INFINITI Blue is what brings our
primary palette to life. This can be achieved in 3 ways: through the horizon graphic, buttons (when applicable) or text.
INFINITI Gold Presence: Text
Applying INFINITI Gold to text is most effectively done in the absence of the Horizon Graphic or to aid with visual hierarchy for content heavy applications. Keep in mind that by effect, the gold text recedes and allows other text to stand out.
The following diagram shows the effect of integrating INFINITI Gold through text and how it helps bring our primary palette to life and add additional hierarchy.
INFINITI Gold Presence Don'ts
Avoid making all text within an application INFINITI Gold or using INFINITI Gold text when the Horizon Graphic is being used.
Typography
The INFINITI typeface was created in 2016 and has not changed with the development of this guideline.
INFINITI BRAND LIGHT
INFINITI Brand Light is our primary typeface and should always be considered first when typesetting. It is used for headlines, titles and body copy.
INFINITI BRAND REGULAR AND BOLD
INFINITI Brand Regular is used for small body copy and whenever the light weight becomes too thin to read easily.
INFINITI Brand Bold is used for subheads, highlights and whenever there is a need to add hierarchy to information-dense applications.
Typesetting
As a departure from the previous visual identity, all copy is left-aligned and should not be centered. Exceptions to this are alerts and modals which can utilize center alignment.
HEADLINE
Headline style is utilized for titles in content sections in digital applications. There are four sizes that establish content hierarchy. H1 is reserved for sections that are most important, H2 is reserved for sections that are next important and so forth for H3, H4 and H5. Headline style uses INFINITI Brand Light and is set in title case.
SUBHEAD & SMALL SUBHEAD
Subhead style is utilized for eyebrows in content sections and other labeling moments in digital applications. Subhead style uses INFINITI Brand Bold and is set in upper case.
LARGE BODY, BODY & SMALL BODY
The body style is utilised for sentences and text paragraphs in digital applications' content sections. Three sizes establish content hierarchy: Body Large is used for hero sections, Body is used in most content sections, and Body Small is used for less prominent text or to de-emphasize long-form text sections. Body copy style uses INFINITI Brand Light and Bold and is set in sentence case. Body Small can be set in INFINITI Brand Light, Regular, and Bold to increase legibility.
CTA, SMALL CTA & LINKS
CTA and link style are utilised for buttons and text links as stand-alone all or within-paragraph content sections in digital applications. Two sizes establish content hierarchy. Global CTA text size is used for primary and secondary buttons, and small CTA text style is used for tertiary buttons. CTA and link style uses INFINITI Brand Light and Bold and is set in sentence case. CTA, Small CTA and link style can be set in INFINITI Brand Light and Bold.
LEGAL
Legal style is utilised for legal copy and disclaimers in digital applications. Legal copy is the smallest type style and should never be below 12px. Setting legal under 12px is not accessible. Legal style uses INFINITI Brand Regular and is set in sentence case. Legal style can be set in INFINITI Brand Bold to increase legibility.
INFINITI NAME
Our brand name should be set in upper case at all times in both internal and external communications – for example: "From technology that reduces driving stress, to breathtaking design that is every bit as functional, INFINITI fuses luxury with everyday purpose."
Typesetting Don'ts
In order to build more recognition and equity in our brand font, we need to use it consistently and as intended. Avoid prominent use of INFINITI Brand Bold or uppercase typesetting. Both communicate in a tone and style that is not ideal.
Headline Linebreaks
Being mindful of the amount of line breaks can aid in achieving clean and thoughtful layouts. Avoid using more than 4 line breaks for headlines.
Headline Placement
When placing headlines on-top of photography, ensure there is sufficient contrast and that the headline is away from the focal point of an image.
Headline Placement Don'ts
Avoid placing headlines directly on top of vehicles, or over busy parts of an image.
Type Hierarchy and Placement
The following example shows how to establish a clear hierarchy for content heavy moments. As a general rule, avoid having more than 5 different sizes/styles of typography within a given application.
FALLBACK FONTS
In situations where typeset communications will be viewed externally and the INFINITI Brand typeface cannot be embedded, use Arial Regular and Bold as a temporary measure.
TYPOGRAPHY DON'TS
Don't use all caps in anything other than subheads and the INFINITI name.
Don't center or right-align copy.
Don't over-track headlines.
Don't use regular or bold for headlines or large copy.
Don't right-align body copy.
Don't set body copy leading too large or too small.
Don’t place text on imagery without a gradient or other way to pass accessibility standards.
Don’t apply a color underlay to text.
Don’t apply text vertically.
TYPOGRAPHIC SCALE
The updated INFINITI typographic system uses a fluid type system in which the viewport sizes correspond to font size values. The styles scale down between the breakpoints, with the exception of body copy, legal, and CTAs, which stay consistent across breakpoints.
The base font size is 16px. The Type scale multiplier ratio used is 1.125
Note: This type scale is NOT currently being utilised by INFINITI USA or INFINITI Canada and will predominately apply to all other INFINITI markets.
Horizon Graphic: Static and Dynamic
ORIGIN
The Horizon Graphic visualizes the horizon at the end of the road and serves as an extension of our logo. It signals a sensory approach to luxury and embodies traditional Japanese notions of beauty.
USAGE
The static Horizon Graphic is only used for big moments like headers or background graphics such as login states, quotes, etc. The graphic is also used for banners or other marketing materials when there is singular text and CTAs or with the logo. In certain digital applications, the dynamic Horizon Graphic can be used to elevate designs and experiences with animation.
ALIGNMENT WITH LOGO AND TYPOGRAPHY
When using the Horizon Graphic in a layout, always consider its position in relation to the logo and typography. We can reinforce its meaning by locking it up with the logo or a singular message.
When locking the logo up with the Horizon Graphic, make sure the horizon line aligns with the top of the wordmark and the end of the road in the symbol.
DYNAMIC HORIZON GRAPHIC
A moving version of our Horizon Graphic can be used in digital applications.
When applicable, the Dynamic Horizon Graphic should be utilized to draw attention and add interest to a design. We recommend using it for web page heros, as a loading asset for special pages, app usage or in digital banners.
The Dynamic Horizon Graphic can be downloaded and accessed through DNA. DNA has two regional servers, so if one link doesn't work, please try the other.
HORIZON GRAPHIC VARIATIONS
The following Horizon Graphic variations can be used as alternatives to the primary version when needed. Each variation retains our signature blue and gold color scheme.
LEFT-ALIGNED
The left-aligned variation may be more suitable depending on the placement of the logo, typography or photography in layout. Use accordingly. Simply flip or mirror the Horizon Graphic asset to achieve this.
CENTER-ALIGNED
The center-aligned variation is most suitable when an application is very tall and narrow.
FULL-BLEED
The full-bleed variation can function more as a background. It retains the essence of our Horizon Graphic but is a less distinct expression, so it should be used sparingly. Simply crop the Horizon Graphic asset at the bottom of a layout to achieve this.
FULL-BLEED COLOR VARIATIONS
The following Horizon Graphic color variations can be used to create a different tone and feeling. These variations retain the use of Gold, but integrate White or INFINITI Gold 20% values instead of INFINITI Blue.
These should be used as secondary touchpoints, and never as an alternative to the primary Horizon Graphic.
For full rules and considerations around the Horizon Graphic, please refer to the Core Brand Guideline.
IN USE: DYNAMIC HORIZON GRAPHIC
The dynamic Horizon Graphic should be paired with short, simple messaging (e.g.: headlines, etc.). Text should bottom-align to the horizon. The aim of these moments should be to draw attention and add visual interest to a design.
An overabundance of text, color or CTAs are not to be used on the Horizon Graphic. The graphic should have enough space to breathe in order to feel purposeful.
The dynamic Horizon Graphic, when featured on INFINITI websites, is created using code in order to avoid impacting site speed metrics.
IN USE: STATIC HORIZON GRAPHIC
The static Horizon Graphic should be used as a background element in situations where there are larger amounts of content to accommodate – including, for example, copy-heavy heroes, navigation and quote treatments. These moments are best accounted for utilizing the full-bleed variation.
DOWNLOADABLE ASSETS
Below are downloadable Horizon Graphic assets at various sizes for digital use.
HORIZON GRAPHIC DONTS
Don’t use color variations in a primary way.
Don’t over or under crop the Horizon Graphic.
Don’t change the color of the Horizon Graphic.
Don’t place the logo in the light of the Horizon Graphic.
Don’t align more than one element to the horizon.
Don’t use a photograph of a horizon in its place.
Don’t use the Horizon Graphic on images.
Don’t use the Horizon Graphic as a jellybean background.
Don’t use the Horizon Graphic repeatedly on a page.
Don't flip the Horizon Graphic.
Don't misalign content to the Horizon Graphic.
Don't crop the centered version of the Horizon Graphic.
Don't use the Horizon Graphic amongst a lot of visuals.
Graphic Line
An extension of the Horizon Graphic, the graphic line serves as an additional tool within the INFINITI visual identity. The graphic line can provide structure and visual interest in digital applications.
The graphic line mimics the Horizon Graphic through color that begins to fade from right to left, alluding to the concept of light.
The graphic line can be used to break up content in digital applications and should be edge to edge. The graphic line should be used intentionally and not overused.
Color variations are possible depending on the background color that is used.
There are three color variations of the graphic line in digital applications that utilize gradients going from right to left. INFINITI Blue and INFINITI Gold should only be used on INFINITI Blue backgrounds. INFINITI Gold 20% and Black should only be used on INFINITI Gold 20% backgrounds. White and INFINITI Gold should only be used on White backgrounds.
White and INFINITI Gold is not an accessible color combination, but is acceptable for the graphic line. Because the graphic line is a decorative element and not important information, it’s okay if users can’t see it. Seeing the graphic line or not won’t hinder a user’s experience or comprehension in digital applications.
For a smooth transition, the gradient slider should be situated in the middle (50%) of both colors.
For further direction around the graphic line, please refer to the Core Brand Guideline.
Icons
An initial set of icons has been developed to establish a common visual style with the INFINITI brand typeface and logo. The icons have been designed to be used at both large scales (e.g. for use in lists, callouts and infographics) and small scales (e.g. for use in navigation and wayfinding).
New icon creation by global or region teams will need to be approved by local clients and validated by the Global Brand Team. Icons can be downloaded and accessed through DNA. DNA has two regional servers, so if one link doesn't work, please try the other.
CHARACTERISTICS
The distinct look of our icons echoes a defining trait of our logo: the horizon crop. Combined with an elegant, single-width stroke, it makes for a premium, bespoke look. Generally, only one crop is applied to the icons. However, there are some exceptions.
SINGLE CROP
Generally, only one crop is applied to the icons. Crops are always oriented either horizontal or on a 45° angle.
MULTIPLE CROPS
When icons are symmetrical in composition, multiple crops can be used to maintain a balanced look.
NO CROP
Use no crops at all when it feels unnecessary or forced. Examples: closed circles, curves or single lines.
COLOR USAGE
Icons should only appear on background colors of INFINITI Blue, White, INFINITI Gold 20%, INFINITI Gold, overlay Blue and overlay Warning. DO NOT USE any other colors for icon backgrounds as they are not preferred or are not accessible for digital applications.
White and INFINITI Gold are accessible and are the main colors to use for icons on INFINITI Blue.
Warning, Error and Success are accessible and are the only other colors for icons on INFINITI Blue –use these to communicate moments of warning, error and success. For limited use. The Success green color was developed for digital experiences and should be used for digital experiences ONLY.
Black, Error and Success are accessible and are the only colors to use for icons on White. Black is accessible and is the only color to use for icons on INFINITI Gold 20%, INFINITI Gold, overlay Blue and overlay Warning. Again, the Success green color was developed for digital experiences and should be used for digital experiences ONLY.
See the Messages section for more context.
For further direction around icons, please refer to the Core Brand Guideline.
CTAs
PRIMARY CTA
Primary CTAs are 16px font set in INFINITI Brand Light and utilize a solid pill shape. The arrow signals that a user will be taken to a destination within the same experience. The default version of the Primary CTA has 6 color variations and INFINITI Blue is the main color. INFINITI Gold can be used as an alternate color when an additional Primary CTA is needed next to an INFINITI Blue Primary CTA. Primary CTAs should be used for the single most important call-to-action in a page design or digital experience.
In user flows, shopping tools, forms and other progressive experiences, Primary CTAs can be in colors Secondary Blue, Warning, Error and Success. For limited use. The Success green color was developed for digital experiences and should be used for digital experiences ONLY.
INFINITI Gold CTAs are not recommended for use on INFINITI Gold 20% backgrounds and should not be used on INFINITI Gold backgrounds.
Hover state inverts the solid pill into an outlined pill with a 3px stroke and is INFINITI Blue for all default states. Disabled state is Dark Gray.
SECONDARY CTA
Secondary CTAs are 16px font set in INFINITI Brand Light and utilize an outlined pill shape. The arrow signals that a user will be taken to a destination within the same experience. The default version of the Secondary CTA is only in INFINITI Blue. Secondary CTAs can be paired with Primary CTAs or live on their own. There can be multiple Secondary CTAs in a page design or digital experience.
Hover state maintains the outlined pill, but increases the stroke to 3px and is INFINITI Blue. Disabled state is Dark Gray.
TERTIARY CTA
Tertiary CTAs are 13px font set in INFINITI Brand Light. The arrow signals that a user will be taken to a destination within the same experience. The default version of the Tertiary CTA is only in INFINITI Blue. Tertiary CTAs can be paired with Primary CTAs and Secondary CTAs or live on their own. There can be multiple Tertiary CTAs in a page design or digital experience.
Hover state adds an underline and is INFINITI Blue. Disabled state is Dark Gray.
CTAs
PRIMARY CTA
Primary CTAs are 16px font set in INFINITI Brand Light and utilize a solid pill shape. The arrow signals that a user will be taken to a destination within the same experience. The default version of the Primary CTA has 6 color variations and INFINITI Gold is the main color. White can be used as an alternate color when an additional Primary CTA is needed next to anINFINITI Gold Primary CTA. Primary CTAs should be used for the single most important call-to-action in a page design or digital experience.
In user flows, shopping tools, forms and other progressive experiences, Primary CTAs can be in colors Secondary Blue, Warning, Error and Success. For limited use. The Success green color was developed for digital experiences and should be used for digital experiences ONLY.
Hover state inverts the solid pill into an outlined pill with a 3px stroke and is INFINITI Gold for all default states. Disabled state is Dark Gray.
SECONDARY CTA
Secondary CTAs are 16px font set in INFINITI Brand Light and utilize an outlined pill shape. The arrow signals that a user will be taken to a destination within the same experience. The default version of the Secondary CTA is only in White. Secondary CTAs can be paired with Primary CTAs or live on their own. There can be multiple Secondary CTAs in a page design or digital experience.
Hover state maintains the outlined pill, but increases the stroke to 3px and is White. Disabled state is Gray.
TERTIARY CTA
Tertiary CTAs are 13px font set in INFINITI Brand Light. The arrow signals that a user will be taken to a destination within the same experience. The default version of the Tertiary CTA is only in White. Tertiary CTAs can be paired with Primary CTAs and Secondary CTAs or live on their own. There can be multiple Tertiary CTAs in a page design or digital experience.
Hover state adds an underline and is White. Disabled state is Gray.
Additional CTAs
CENTERED
Centered CTAs follow the same conventions and rules for Primary and Secondary CTAs, but do not utilize an arrow. The text is centered within the container. Centered CTAs should be used for moments of action that do not take users to a destination within the experience (e.g. “Done,” “Add,” etc.).
Centered Small CTAs follow the same conventions and rules for Centered CTAs, but are smaller in size. Centered Small CTAs should be used in moments where Centered CTAs are too large (e.g. shopping tools, “Add,” “Show Interior,” etc.).
Hover and disabled states for Centered CTAs are the same as Primary, Secondary and Tertiary CTAs.
OFFSITE
Offsite CTAs follow the same conventions and rules for Primary, Secondary and Tertiary CTAs, but use a different arrow. The outward arrow signals that a user will be taken to a destination outside of the experience.
Hover and disabled states for Offsite CTAs are the same as Primary, Secondary and Tertiary CTAs.
ICON
Icon CTAs follow the same conventions and rules for Primary, Secondary and Tertiary CTAs, but include an icon to the left of the text. The icon should relate to the text and the Icon CTA should be used to call further attention to an important action.
Hover and disabled states for Offsite CTAs are the same as Primary, Secondary and Tertiary CTAs. For limited use.
See the Icons section to view the icon library.
BACK
Back CTAs follow the same conventions and rules for Primary CTAs, but the arrow is reversed and left of the text. A Secondary version of the Back CTA is not needed. Tertiary Back CTAs are 13px font set in INFINITI Brand Light. The reversed arrow signals that a user will be taken to a previous destination within the experience. The default version of the Primary Icon CTA is only in Warning.
Hover and disabled states for Back CTAs are the same as Primary and Tertiary CTAs.
DROP DOWN
Large Drop Downs are 16px font set in INFINITI Brand Bold and Small Drop Downs are 13px font set in INFINITI Brand Light. The down arrow signals that a user will open a menu of selections.
Hover and disabled states for Drop Downs follow the same conventions and rules for Tertiary CTAs.
Forms
For optimal legibility, form experiences should be on White or INFINITI Gold 20% backgrounds. If an INFINITI Blue background is desired, labels and error messages should be changed to White.
INPUT FIELD
Input Fields are accompanied by a label and wrapped inside a fieldset. Input Field labels are 15px font in INFINITI Brand Light and are Black. Adding an asterisk communicates that the field is required. The radius of the fieldset across all states is 5px.
Default state has a 1px stroke in Dark Gray and a White fill.
Selected state has a 3px stroke in Secondary Blue and a White fill.
Error state has a 3px stroke in Warning and a fill of Error Form Field Fill. The error message uses Body Small style in INFINITI Brand Regular and is Black.
Entered state has a 1px stroke in Black and a White fill. The text entry uses Body Small style in INFINITI Brand Light and is Black.
Disabled state has a 1px stroke in Dark Gray with a 50% White fill. The label is Dark Gray.
RADIO BUTTONS AND CHECKBOXES
Radio Buttons should be used for single selections in form experiences. Checkboxes should be used for multiple selections in form experiences. The radius of Checkboxes across all states is 2px.
Default state has a 1px stroke in Dark Gray and a White fill.
Selected state has a 3px stroke in Secondary Blue and a White fill.
Error state has a 3px stroke in Warning and a fill of Error Form Field Fill.
Entered state has a 1px stroke in Black and a White fill.
Disabled state has a 1px stroke in Dark Gray with a 50% White fill.
DROP DOWN
Drop downs should be used for making choices from a list of options in form, filtering and other selection experiences.
Default state has a 1px stroke in Dark Gray and a White fill. The text uses Body Small style in INFINITI Brand Light and is Dark Gray. A Black down arrow is used to communicate to users that they can open the drop down.
Open and selection state has a 1px stroke in Black and a White fill. The text uses Body Small style in INFINITI Brand Light and is Black. Highlighted selections have an INFINITI Gold 20% fill.
Entered state has a 1px stroke in Black and a White fill. The text entry uses Body Small style in INFINITI Brand Light and is Black. A Black down arrow is used to communicate to users that they can open the drop down.
Messages
ALERT BAR
Alert Bars are for persistent short-form messages that need to be conveyed to users. Text is 12px font in INFINITI Brand Regular and is Black. An optional Tertiary CTA is included. The default version is in overlay Blue and should be used for messages that are not urgent. Overlay Warning, overlay Error and overlay Success should be used for warning messages, error messages and success messages accordingly.
TOOLTIP
Tooltips are for messages that add context or definitions to words or verbiage. Tooltips house information without adding weight to a component or section within a digital application. Text is 12px font in INFINITI Brand Regular and is Black. The X icon allows users to close the tooltip. The default version is in overlay Blue but an alternate version in White can be used for increased legibility.
MODAL
Modals are for informing users of urgent information in moments of progression or selection, such as changing a vehicle build or leaving the website. Modals sit on a 40% black tint over a page.
Text is 13px font in INFINITI Brand Regular and is Black. The X icon allows users to close the modal. An icon can be used within the modal design and should relate to the message. Having an icon in a modal is not required for all modal messages. For default and warning modals, icons should be Black. For error or success modals, icons can be Error or Success colors accordingly.
The Success green color was developed for digital experiences and should be used for digital experiences ONLY.
Default modals are in overlay Blue and warning modals are in overlay Warning. Error, success and alternate modals are in White. Using overlay Error or overlay Success as the background for modals, while accessible, is too overwhelming and not preferred.
Primary and Secondary CTAs are included as most modals will give users two actions to take: a way to confirm and a way to cancel.
Accordions
Accordions are used for collapsing heavy sections of content, such as FAQs or vehicle specifications. The style is minimal with text, a downward arrow icon to represent opening the accordion and a divider line. The primary text is 23px font in INFINITI Brand Light and is Black and the arrow icon is in INFINITI Blue. The divider line is 1px in Gray.
The open state reveals supporting copy. The arrow has gone from downward to upward to represent closing the accordion. Supporting text is 15px in INFINITI Brand Light and is Black. The divider line will always be under the primary and supporting text.
Have breathing room when stacking accordions and keep divider lines present for all accordion items.
Accordions
Accordions are used for collapsing heavy sections content, such as FAQs or vehicle specifications. The style is minimal with text, a downward arrow icon to represent opening the accordion and a divider line. The primary text is 23px font in INFINITI Brand Light and is White and the arrow icon is also White. The divider line is 1px in Gray.
The open state reveals supporting copy. The arrow has gone from downward to upward to represent closing the accordion. Supporting text is 15px in INFINITI Brand Light and is White. The divider line will always be under the primary and supporting text.
Have breathing room when stacking accordions and keep divider lines present for all accordion items.
Lists
Lists are used to organize information in a scannable way for callouts within sections. Lists can use dash icons or illustrative icons. List item text is 19px font in INFINITI Brand Light and is Black on light backgrounds and White on dark backgrounds.
DASH
Dash icons can be used when information is difficult to represent with an illustrative icon. DO NOT USE an em dash or use actual text to recreate the dash. Using a dash icon ensures that lists created with dash icons or illustrative icons have the same spacing.
ICONS
Illustrative icons can be used when information is easy to represent with an icon. Using illustrative icons can make information more scannable and digestible.
Accessibility
There are basic considerations in making our digital applications and designs accessible to people with disabilities. The following best practices will help us meet ADA (Americans with Disabilities Act) compliance.
For further direction around accessibility, please visit the W3C WAI website.
— Provide sufficient contrast between foreground and background
— Don’t use color alone to convey information
— Ensure that interactive elements are easy to identify
— Provide clear and consistent navigation options
— Ensure that form elements include clearly associated labels
— Provide easily identifiable feedback
— Use headings and spacing to group related content
— Create designs for different viewport sizes
— Include image and media alternatives in your design
— Provide controls for content that starts automatically
Photography Style
The photography style of the INFINITI brand showcases a mixture of figures and vehicles. Figures and vehicles don’t exist in a void. INFINITI exists in a physical world and our photography brings in a sensorial interpretation of real-life places. They show where the endless horizon can take us.
Our vehicles are not mere status symbols. They enable us to explore the world and catalyze our inner strength. They are always part of a story and in relation to the people that drive them and their environment.
Photography should feel authentic and premium.
For full rules and considerations around photography style, please refer to the Core Brand Guideline.
Image Ratios
In responsive design, using image ratios in components, page designs and other digital applications is best practice. Using standard image ratios of 4:5, 1:1, 4:3, 16:9 and 2:1 will ensure scalability and a cleaner design system. Using standard ratios will ensure that imagery appears consistent across multiple viewports.
RETAINING RATIOS
When selecting an image ratio for components, page designs and other digital applications, be sure to retain the ratio across viewports. This ensures that an image will appear consistently across viewports and undesired crops won’t happen. DO NOT CHANGE the ratio from one viewport to another as the image won’t appear consistent and important aspects of the image could get cropped out.
RATIO EXCEPTION
The exception for retaining ratios is with full-bleed imagery, as large viewport components and designs will utilize horizontal width and small viewport components and designs will utilize vertical height.
When selecting imagery for full-bleed components and designs, ensure that the image works in multiple ratios.
Automatic Scaling
DESIGN FOR AUTOMATIC SCALLING
Automatic scaling on Windows adjusts text, apps, and other items to enhance readability on high-resolution displays. Be aware that automatic scaling can sometimes misplace elements or cause overlaps, leading to a distorted interface if not tested and checked thoroughly.
To account for this, the global typographic scale and breakpoints have been recently updated. Moving forward, this will require all current and future website content to be checked thoroughly to ensure all content is between displayed correctly.
DESIGN RESPONSIVELY ACROSS BREAKPOINTS
Ensure component designs are tested thoroughly between tablet devices (768px) and smaller desktops (1280px) to maintain consistency in assets and type scale.
Maintain the same ratio for assets across different viewports to prevent undesired cropping and maintain visual consistency.
DO NOT change the ratio from one viewport to another.
AVOIDING LAYOUT ISSUES
Ensure that assets and type are displayed correctly at different breakpoints, especially between portrait tablets and smaller desktops (768px, 1280px, 1336px).
DO check for overlapping elements, blurred, or cropped assets.
DNA Portal
Images should be pulled from DNA Portal, utilizing the latest model year. Ensure that the images are unrestricted and available for use for your media needs. If there is a time limit on how long we can use the image, please note that with the project manager.
If lifestyle imagery is needed and not available on DNA, Getty is our preferred stock photo option. Always try to choose stock images that feel natural and cohesive with the INFINITI shot assets they will be used with. Lighting and environment should feel aspirational and within the brand vision.
For access to the DNA Portal, contact Biz Woodie at biz.woodie@infiniti.com
LANDING PAGE
When logging into the DNA Portal, users will first be taken to the landing page. From here, users will navigate to the INFINITI - Unrestricted folder to access assets that are approved for teams to use. DO NOT USE assets from the Restricted folder.
FINDING ASSETS
Users can find assets by folder and go deeper into the structure. Users may also find assets by using filters or search.
SELECTING ASSETS
When selecting an asset, users will click on the asset card. This will take users to the asset page where they can view the asset at a larger size and view product and rights usage information.
DOWNLOADING ASSETS
If a user wishes to download an asset, they will click the download icon (cloud with arrow). This launches a modal where the user can select all formats or an individual format they wish to download.
When downloading vehicle photography, "Download custom - JPEG High Res" is the preferred format. "Download master" will provide the source PSD file and download proxies will provide a low-res PNG file.
When downloading vehicle jellybeans, download master is the preferred format. To obtain a transparent asset, users can open the the source PSD file, turn off the white background and save the asset in PNG or TIFF formats. Downloading all other formats will provide flat assets without transparency.
Vehicle Photography
Vehicle photography should appear when we want to lean aspirational. We present our vehicles as users would encounter them in real life: part of the environment and realistically depicted. Vehicle photography makes the most use of environmental lighting and can leverage the weather and texture of the environment.
When possible, incorporate people interacting with the car in natural but dynamic compositions. No unnatural effects should be added in post-production.
FULL-BLEED ASSET COMPOSITION
For digital applications such as the homepage and hero/PFAs, assets should have ample background on all sides. This ensures that an asset can be used in wide or tall applications and text and CTAs won’t obstruct the vehicle. Certain tablet and mobile breakpoints require ample ground space below the vehicle.
The ideal asset composition is the vehicle positioned in the center, with ample background imagery on all sides.
EXTERIOR
Exterior photography should highlight the beauty and engineering of the vehicles. Environments should feel authentic and shouldn’t distract from the vehicle. Interesting perspectives make the vehicles more dynamic and showcase design features.
INTERIOR
Interior photography should feature the quality and details of the vehicles. Environments through windows should feel authentic and shouldn’t distract from the vehicle. Imagery should have focus and highlight specific features of the interior.
Show authentic environments
Showcase design features
Highlight specific features
Provide visual context for features
FIGURES
We spotlight people so we can visually evoke deeper emotions. It makes our brand human and is a great way to visualize the concept of "power from within.” However, please be aware of figure placements in exterior vehicle photography.
In certain applications, figures can get cut off. If figures need to be cropped, the crop should be clean with no detached body parts.
Seeing figures within vehicles can further showcase design and technology features. Imagery should have focus and highlight specific attributes of the interior.
Crop figures so that most of the body is visible
Figures shouldn’t obstruct the vehicle
Figures can use technology features
Figures can showcase flexibility of the vehicle
VEHICLE PHOTOGRAPHY: WHEN TO USE
Vehicle photography should be aspirational and should be used in most components and design applications. Initial touchpoints with customers should utilize vehicle photography over vehicle jellybeans (e.g. for homepage, VES, INFINITI NOW, etc.).
VEHICLE PHOTOGRAPHY DON'TS
Don’t use the Horizon Graphic on images.
Don’t overly crop images that aren’t origianlly cropped and don’t crop the logo in exterior and interior shots.
Don’t use imagery without a clear intention of what it’s depicting.
Don’t show extreme close-ups. Details should be recognizable.
Don’t use over-stylized or overly retouched images.
Don’t use vehicle photography for transactional moments.
Vehicle Jellybean
Vehicle jellybeans should appear in transactional moments and provide focus to the car itself. These assets show the vehicle at its most pristine and ground it in subtle environments.
PREMIUM RENDERINGS
Vehicle jellybean renderings should feel premium and high quality. Premium renderings align to the luxury of the INFINITI brand and enhance the overall aesthetic.
Driver's side front 3/4 is the preferred angle when a vehicle jellybean is used in thumbnail environments. Seven additional angles will appear in configuration and 360 experiences.
Driver's side front 3/4 is the preferred angle.
Other angles will appear in configuration and 360 experiences.
SOFT SPACE ENVIRONMENT FOR LARGE-SCALE EXPERIENCES: WHEN TO USE
Soft Space environments should only be used in large-scale experiences. Usage moments include configuration, purchase and 360 experiences.
For limited use. DO NOT use in thumbnail environments.
ENVIRONMENT FOR LARGE-SCALE EXPERIENCES: HOW TO USE
When used in configuration, purchase and 360° experiences, vehicle jellybeans live in what is called Soft Space. Soft Space is a spatial environment that invokes the idea of a simple gradient, yet grounds the vehicle in an actual setting. The Soft Space world is atmospheric and provides a sense of depth.
A collection of six Soft Space environments have been created for global use. All Soft Space environments follow these rules:
1. Environments are geometric, featuring room-like space with depth
2. Environments have soft lighting that doesn’t interfere with the vehicle jellybean
3. Environments appear INFINITI Gold 40%
4. Vehicle and paint color need to stand out
For simplicity and to ensure consistent usage, each Soft Space environment has been paired with a specific INFINITI vehicle model. Environment 1 is to be used with Q50, Environment 2 is to be used with Q60, Environment 3 is to be used with QX50, Environment 4 is to be used with QX55, Environment 5 is to be used with QX60 and Environment 6 is to be used with QX80.
DO NOT use the incorrect Soft Space environment for any INFINITI vehicle model.
For more information, please contact Global Brand Strategy Team.
ALT SOFT SPACE ENVIRONMENT FOR 360S PASSENGER ANGLES
Alternate assets of Soft Space environments have been created for 360 placements where passenger-side angles of the vehicle are displayed. The passenger-side jellybeans have been captured at a higher angle and the Soft Space environment should shift to accommodate this detail. This adjustment will work to add a sense of heightened realism to the experience.
For limited use. DO NOT use in place of the primary angle. Only use in 360 environments.
FALLBACK FOR LARGE-SCALE EXPERIENCES
In configuration, purchase and 360 experiences where Soft Space environment usage or creation isn’t possible, two fallback options are acceptable. Vehicle jellybeans can live on Solid Light Gray (#E7E7E7) or Solid White (#FFFFFF) backgrounds.
If or when a real, photographic environment is needed or required in large-scale experiences, global or regional teams should work with local clients and the Global Brand Team in creating assets.
Solid Light Gray (#E7E7E7) background
Solid White (#FFFFFF) background
VEHICLE PHOTOGRAPHY DON'TS
Don’t use the Horizon Graphic as a vehicle jellybean background.
Don’t use low-res vehicle jellybean assets.
Don’t use the incorrect soft space environment for an INFINITI vehicle model.
Don’t scale a soft space environment past its intended size.
Don’t alter the color of a soft space environment.
Don’t darken a space environment.
THUMBNAIL ENVIRONMENT FOR SMALL-SCALE EXPERIENCES: WHEN TO USE
Thumbnail backgrounds should be used for smaller, transactional moments and have limited use in design applications. Specific components should utilize thumbnail backgrounds over Soft Space (e.g. CTAs direction to Build or Purchase Online).
For limited use. DO NOT use in Soft Space environments or other large-scale aspirational moments like heroes and PFAs.
THUMBNAIL ENVIRONMENT FOR SMALL-SCALE EXPERIENCES: HOW TO CREATE
When used in small-scale thumbnail components, vehicle jellybeans live on a gold gradient that serves as a simpler alternative to Soft Space used in large-scale, aspirational moments.
The gold gradient uses INFINITI Gold 40% and INFINITI Gold. When creating the gold gradient, the location of INFINITI Gold 40% is 50% and the location of INFINITI Gold is 100%. The transition from INFINITI Gold 40% to INFINITI Gold is 50%.
THUMBNAIL ENVIRONMENT DON'TS
Don’t use the Horizon Graphic as a vehicle jellybean background.
Don’t use low-res vehicle jellybean assets.
Don’t crop vehicle jellybean assets. The entire car should be visible.
Don’t use an angle that isn’t the Driver's side front 3/4 angle in thumbnail environments.
Don’t adjust the gold gradient or use another gradient color.
Don’t use the thumbnail environment or vehicle jellybeans in large-scale, aspirational moments.
360s
360 assets are used for shopping experiences where users can view all sides of the exterior and interior of a vehicle they are interested in purchasing. Exterior and interior assets bring a vehicle to life in a digital setting.
EXTERIOR
Exterior 360s utilize vehicle jellybeans and should consist of at least eight angles. If possible, utilize the most angles to create a fully three-dimensional experience. Exterior 360s start at the Driver's side front 3/4 angle. Vehicles in the range come in either one-tone or two-tone exterior options. Two-tone exterior options utilize two half circles and one-tone exterior options utilize full circles.
A 360 icon is placed over the vehicle jellybean to communicate to users that they can see multiple angles of the car. The 360 icon should be placed in the center of an exterior 360 image area.
Vehicle jellybeans should be placed on a Soft Space environment that highlights and enhances the exterior color. See the Vehicle Jellybean section for more context.
INTERIOR
Interior 360s utilize panoramic assets to create a three-dimensional experience in digital applications. Interior 360s start at the driver’s side corner angle. All vehicles come with leather interior and offer a variety of colors, as well as trims in leather or wood.
Backgrounds for Interior 360s should depict real-life environments and feel as real as possible. When unable to utilize real environments, Interior 360s assets can use the gold gradient.
A 360 icon is placed over the vehicle jellybean to communicate to users that they can see multiple angles of the car. The 360 icon should be placed in the center of an interior 360 image area.
Text on Imagery
Text on imagery can appear in digital applications where space is limited (e.g. email campaigns, web banners, etc.). Text on imagery should be live text, rather than text baked into an image asset. This ensures that text will be legible and pass accessibility standards.
Text on imagery is 15px in INFINITI Brand Light and is White. Text is left-aligned and anchored to the bottom left corner of an image. Copy should be brief and provide as much detail in as few words as possible.
GRADIENT
Text on imagery needs to utilize a small gradient background to ensure that text is legible. When creating the gradient, the location of 0% opacity Black is 0% and the location of 100% opacity Black is 100%. The transition is 50%.
The height of the gradient should be 1/5 the height of the selected image. This ensures the gradient is proportionate to the asset and is not set at a universal fixed height.
TEXT ON IMAGERY DON'TS
Don’t use a color other than Black for the gradient.
Don’t change the text color.
Don’t change the size or weight of the disclaimer.
Video
When utilizing video assets, there are certain requirements around closed captions and disclaimers that need to be applied in digital applications. Rules around safety zone, colors and padding must be followed to pass accessibility standards.
CLOSED CAPTIONS
Closed captions are used to visually display the voice over in video assets. This allows users who either have their device’s sound off or are deaf or hard of hearing to experience a video. In all breakpoints, closed captions use 19px font in INFINITI Brand Light and are set in sentence case. In video assets specifically formatted for mobile breakpoints, closed captions use 15px font in INFINITI Brand Light and are set in sentence case.
DISCLAIMERS
Disclaimers sit below the closed captions and are used to display legal information pertaining to a vehicle. In all breakpoints, disclaimers use 12px font in INFINITI Brand Light, are set in sentence case and text is White.
BACKGROUND AND PADDING
To ensure that closed captions are legible and have enough room to breathe when sitting on top of a video asset, a background color of Black is applied with 10px padding on all sides. The radius of the padded background is 2px and text is White.
SAFETY ZONE
Closed captions and disclaimers must live within the safety zone of a video asset. This ensures that the closed captions and disclaimers don’t obstruct the majority of the video.
The safety zone accommodates a maximum of three lines of closed captions text, a maximum of two lines of disclaimer text and all text is bottom-aligned. This allows more of the video to be shown in text-light instances.
DO NOT PLACE text outside of the safety zone.
The creative executions contained within this section are for illustrative purposes only, and may or may not be reflective of final implementation.
In Use: Homepage
In Use: VES Overview
In Use: INFINITI NOW
In Use: Owner Benefits
In Use: MyINFINITI
In Use: Banner Ads
For any questions regarding this guideline, please contact the Global INFINITI Brand Strategy team, global.brand@infiniti.com.
