Digital Experience Guidelines

The Digital Experience Guidelines provide the design specifications, standards and assets we use to effectively express the ADI brand through our digital products. By adhering to these guidelines, we’re able to provide a positive and cohesive customer experience across distinct ADI touchpoints.

Digital Brand Colors

Our brand colors are selected with three goals in mind:

To represent our brand: To achieve this, we focus on primary, secondary and tertiary colors that feel timeless and modern with plenty of white space. The primary blue color is the core to our color identity; to keep a consistent and recognizable brand the primary color should be used as the foundation for anything produced for digital experiences.
To be comprehensive and consistent: The color palette supports consistent, scalable appearance across theming, data visualization, accent colors and complex user interfaces without significant modification.
To be accessible and generally usable: This palette is designed to have consistent contrast ratios that make it easy for users to consume information and adhere to Web Content Accessibility Guidelines wherever possible.

Primary

AAA L 5.76

Primary 500
#0067B9

Blue is our primary brand color - selected for its clean and utilitarian but still sophisticated feel. Consistently using our range of primary blues helps to situate users and remind them that they're interacting with an ADI brand experience.

AAA LS 13.03

Primary 700
#00325C

AAA L 6.97

Primary 400
#6AA7DC

AAA LS 13.93

Primary 200
#D4E5F7

Secondary

AAA L 6.42

Secondary 500
#8637BA

Secondary colors improve the clarity of our overall experience by thoughtfully directing user attention.
These colors may be used to indicate important information and to support and compliment the primary blue.

AAA LS 13.53

Secondary 200
#E7DCEF

AAA LS 18.26

Purple 50
#F3EDF7

Tertiary

AA L 5.99

Blue 600
#336699

AA L 6.71

Blue 500
#1B9CD0

AAA LS 15.24

Blue 300
#C0E0F7

AAA LS 18.03

Blue 200
#E0F0FC

AAA LS 7.12

Green 700
#006633

AA L 6.81

Green 500
#00A86B

AAA LS 10.54

Green 400
#8BC4A6

AAA LS 16.56

Green 200
#D6E9DE

AAA LS 10.87

Yellow 600
#E5B417

AAA LS 14.41

Yellow 500
#fed141

AAA LS 15.71

Yellow 400
#F7DD93

AAA LS 18.71

Yellow 200
#FCF1D8

Our tertiary colors are an extension of our brand that add depth and diversity to our palette for complex visuals like charts and graphs.
However, tertiary colors should be used sparingly, so our brand identity is not overwhelmed. A good rule of thumb is that tertiary colors should make up no more than 10% of the experience design.

Grayscale

AA L 5.21

Grayscale 500
#686C7D

AAA LS 11.15

Grayscale 300
#CACCD3

AAA LS 16.69

Grayscale 50
#F6F7F9

Our neutral grayscale palette can be used to create contrast and draw user attention to important elements. Specifically, neutrals can be used to build user interfaces, structure layouts and to convey hierarchy.
Our grayscale is a powerful tool for creating contrast and enabling meaningful moments of color that help convey information with purpose.

Typography

AAA LS 17.89

Charcoal
#101820

Type should be our darkest grayscale color. Charcoal is not a true black.

System

System colors are restricted to instances that require functional color coding to help users quickly discern information with universally recognized colors for a simple, efficient experience.

Information

AAA L 5.76

Information 500
#0067B9

AAA LS 13.93

Information 200
#D4E5F7

Success

AA L 3.64

Success 400
#179963

AAA LS 18.1

Success 100
#E1F2EB

Warning

AA L 3.68

Warning 400
#E15B19

AAA LS 18.1

Warning 100
#FFEAE0

Error

AA L 3.68

Error 500
#C81A28

AA L 3.68

Error 100
#F9E7E8

Additional Color Guidance

Digital Colors will vary slightly from brand/marketing colors for non-digital use. Colors are adapted to accomodate accessibility guidelines for better legibility on web and mobile devices.

Gray and white is used to differentiate sections, table rows and shading is applied to background sections with heavy text

Grayscale

60%

Most frequently used on buttons, actionable links and icons

Primary 700 + 500

20%

Purple highlights selected areas, draws attention to icons, lighter tones applied to the background of sections with heavy text

Purple 500 + 50

15%

System colors show status and highlights text

System

Color Usage

Contrast

We take a thoughtful and caring approach to design, which means we work to make our designs as usable as possible for as many people as possible. And that means our work should be inclusive and meet a high-level of accessibility wherever possible. When it comes to colors, we ensure that we create the appropriate level of contrast for readability.

Provide sufficient contrast between foreground and background. Make sure the contrast between the text and background is AA compliance i.e greater than or equal to 4.5:1 for small text and 3.1 for large text.
Color contrast ratio requirements apply to text and graphics that are essential for understanding the content or functionality. You don't need to meet color contrast requirements for logos or incidental graphic elements.
Text that is part of a disabled control's state or disabled buttons does not need to meet the minimum contrast ratio.
Slightly temper the contrast between your text and background color. For example: don't use pure black text on a pure white background. Stark contrast between colors can result in blurred or moving text for people with Irlen syndrome.

Don't

Light Backgrounds

For lighter backgrounds including light gray and purple, be sure to use the darkest colors for text.
Do not use lighter accent colors for text.
Do not use large blocks of darker color as backgrounds for copy-heavy sections

Don't

Don't

Buttons and Icons

Tertiary colors should be used on icons and indicator text only.
System colors should only be used to indicate status.

Don't

Don't