This environment is not optimized for viewing on small or mobile devices. Please view on a larger browser for the best experience.

If you have any questions, please contact us.

About
Overview
Our Formula
Aon experience
how it works
AccessibilityWhat is Accessibility?Digital Design SystemAccessibility and AonAssistive TechnologyAccessibility & color
Feature Request
Give Feedback
UpdatesVersion 2.4Version 2.3Version 2.2Version 2.1Version 2.0Version 1.3Version 1.2Version 1.1Version 1.0
Foundations
Color
icon libraryActionscontrolsnavigationfeedbackcommunicationsview settingsfilesmiscellaneous
Layout12 column gridBreakpoints
spacinglocal spacingglobal spacing
TypographyHeadlinesparagraphsLink Styling
Components
Core Components
alertsBanner AlertsContextual Alerts
buttonsspecificationsimplementation
filter chipsspecificationsimplementation
on/off controlsspecificationsimplementation
form elements
introductionBest PracticesImplementation
checkboxes
radio buttons
selects
text area
text inputsspecificationsimplementation
Modules
navigation
in-page navigation
HeaderHeader BarNavigation Menus
footerBasic footerRobust Footer
progress bars
TabsHorizontal TabsButton Tabsvertical Tabs
Rail Navigation
overlays
modalsSpecificationsStyles
PopoversStandard PopoverAction Menus
tooltipsInfo TextLabel HoverData VisualizationTooltip Implementation
content containers
cardsSmall CardsLarge cards
expansion panelsspecificationsStyle variationsfunctionality
other
TablesSpecificationsImplementation
Templates
dashboard
forms
processes
standard
Data Visualization
foundations
best practices
colorCategoricalValueperformancebackgroundspecifications
data snapshotsspecificationsPage Layouts
global elementsGrid ElementsLegend ChipsTooltips
typography
chart types
Use Cases
Area chartsingle Area ChartStacked Area Chart100% stacked ChartSpecifications
bar chartsingle Bar ChartsGrouped Bar ChartsStacked Bar Charts100% stacked ChartsSpecifications
circular chartPieDonutSemi-circleSpecifications
line chartSingle Line ChartMultiple Line ChartSpecifications
scatter plotTypesImplementation Specifications

Header

The header is located at the top of every environment. It contains the logo and top-level navigation structure.

Specifications

Header Bar

EXAMPLE
Menu      
Anatomy
1) Product Title
font-face: Helvetica Display Text
font-weight: 700
font-size: 24px
line-height: 24px
color: Gray 01
2) Background
background: White
box-shadow: 0 2px 4px 0 rgba (0,0,0,0.25)
3) Link Hover Border
border-top: 4px
border-color: Signature Red
4) Page Link Hover Background
background-color: Gray 07
5) Dropdown Menu Link
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 24px
bottom-margin: 0px
color: See States below

5) Dropdown Menu Link Mobile
font-size: 15px
line-height: 26px
6) Dropdown Menu Icon
font: Font Awesome 6 Pro Light
size: 20px
line-height: 24px
code: angle-down (f107)
color: Navy
7) Direct Page Link
Same as Dropdown Menu Link
8) Settings Icon
font: Font Awesome 6 Pro Solid
size: 20px
line-height: 44px
code: cog (f013)
color: Navy
9) Account Icon
font: Font Awesome 6 Pro Light
‍size: 20px
line-height: 44px
code: user (f007)
color: Navy
10) App Icon
font: Font Awesome 6 Pro Solid
size: 20px
line-height: 44px
code: th (f00a)
color: Navy
Size & Spacing
States

Current Page

Hover State

Text
color: Signature Red
Text
color: #B80012
background-color: Gray 07
Link Hover Border
border-top: 4px
border-color: Signature Red
Link Hover Border
border-top: 4px
border-color: #B80012
Navigation Types

Direct Page Link

Dropdown Menu

Icon Link

Animation (text)
transition: 0.1 ease
color fades
Animation (menu)
‍transition: 0.2s ease
slide in from top
fade
Animation (link)
transition: 0.1s ease
background slides from left
Navigation Types

The response pattern is a general guideline that works in most situations. Your specific product may have unique needs.

Title
font-family: Helvetica Now Text
font-weight: 700
font-size: 12px
line-height: 16px
text-align: center
color: Navy
Icon
font-family: Font Awesome 6 Pro Light
font-weight: 300
font-size: 20px
line-height: 24px
color: Navy

Navigation Menus

Anatomy
1) Header Item Background
background-color: Gray 07
2) Active Header Item
color: Navy
3) Menu Background
background-color: Gray 07
4) Menu Content
Types

Standard Dropdown

App Menu

1) App Menu Title
font-face: Helvetica Now Display
font-weight: 700
font-size: 20px
line-height: 24px
color: Navy
2) App Tile
See specifications below

App Tile

1) Title
font-face: Helvetica Now Text
font-weight: 700
font-size: 16px
line-height: 20px
bottom-margin: 16px
color: Gray 01
2) Tile Border
border-radius: 4px
background-color: none
border: 1px solid
border-color: Gray 06
3) Background Shade
background-color: Gray 06
opacity: 70%
Response

The response pattern is a general guideline that works in most situations. Your specific product may have unique needs.

Menu Title
font-face: Helvetica Now Text
font-weight: 700
font-size: 18px
line-height: 24px
bottom-margin: 16px
color: Gray 06

Browser behavior

Aon Consumer Experience & Design Group
‍
200 E. Randolph St.
5th Floor
Chicago, IL 60601

global.design@aon.com‍

AboutFoundationsComponentsModulesData Visualization

For best results, please view on Desktop in Chrome or Firefox.