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

Tables

Data tables allow users to scan, compare, filter, sort, and manipulate information to derive insights and commit actions.

Specifications

Anatomy
1) Sortable Header (Active)
style: Small Paragraph Bold
color: Teal Dark Active
2) Sortable Header (Inactive)
style: Small Paragraph Bold
color: Gray 02
3) Header (No Sort)
style: Small Paragraph
color: Navy
4) Header Divider
border: 1px solid
border-color: Gray 05
5) Status Indicator (Optional)
See below for states
6) Linked Data
style: Small Paragraph (Linked)
7) Default Data
style: Small Paragraph
text-align: left
8) Numerical Data
style: Small Paragraph
text-align: right
9) Currency Data
style: Small Paragraph
‍text-align: right
10) Row Divider
border: 1px solid
border-color: Gray 05
11) Container
background-color: White
corner-radius: 12px
12) Pagination
See specs below
Symantec Anatomy

Proper symantec markup ensures that tables are accessible for screen readers and navigating with tabs.

SIZE & Spacing
ROW TYPES

Standard Row (with Indicator Dot)

Overflow

Default

Hover

Titlecolor: Teal Dark Hover
Tooltip
See Overlays page for specifications
Text
‍style: Small Paragraph Default

Footer Row

Backgroundbackground-color: Gray 07
Text
‍style: Small Paragraph Bold
Indicator Color States
Red
color: Error
Yellow
color: Warning
Green
color: Success

Implementation

In addition to being semantically built, tables must include the <caption> element. Complex tables or those with unusual structures may also benefit from a summary.

A <caption> is a table's title or heading. This element helps the user anticipate the content of the table. Unlike an HTML header, it is semantically linked to the table. This semantic association ensures that screen readers and browsers can understand the table.

Summaries provide further context around a table. They are not required, but they may help users understand how to navigate a complex or unusual table structure. Since summaries are not semantic HTML elements, there are different techniques that a developer can employ to associate them with their respective tables.

Please see the documentation to understand how this is done using HTML and Aria: W3C's Caption & Summary documentation

Table Pagination

Anatomy
1) Page Text (Active)
style: Paragraph
color: Gray 02
2) Arrow (Disabled)
font-face: Font Awesome 6 Pro Light
font-size: 20px
line-height: 44px
icon code: chevron-left (f053) or chevron-right (f054)
color: Gray 02
3) Page Number (Active)
font-face: Helvetica Now Text
font-weight: 300
font-size: 16px
line-height: 44px
bottom-margin: 0px
color: Teal Dark Active
background-color: Gray 07
4) Page Number (Hover)
color: Teal Dark Hover
text-decoration: underline
5) Page Link
font-face: Helvetica Now Text
font-weight: 300
font-size: 16px
line-height: 44px
bottom-margin: 0px
color: Teal Dark
6) Arrow (Linked)
color: Teal Dark
7) Page Text (Linked)
style: Paragraph (Linked)
SIZE & Spacing

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.