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

Text Inputs

Text inputs allow users to enter and edit text. At times they may be accompanied by supplementary elements, such as a date picker.
‍

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Specifications

Default
Inverse
Anatomy
1) Label
font-face: Helvetica Now Text
font-weight: 700
font-size: 16px
line-height: 20px
bottom-margin: 4px
color: Gray 01
‍
Label Mobile
‍font-size: 14px
line-height: 18px
2) Field
background-color: none
border: 1px solid
border-color: Gray 01
border-radius: 4px
3) Text
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 0px
color: Gray 01

Text Mobile
font-size: 14px
line-height: 18px
4) Description (optional)
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 4px
color: Gray 02

Description Mobile
‍font-size: 14px
line-height: 18px
5) Information Icon (optional)
font-face: Font Awesome 6 Pro Light
font-size: 18px
line-height: 18px
color: Gray 02
code: info-circle (f05a)
6) Additional Action Icon (optional)
font-face: Font Awesome 6 Pro Light
font-size: 16px
line-height: 24px
color: Teal Dark
Size & Spacing
States

Default

Label
Description
Placeholder
Optional

Filled

Label
Description
Placeholder

Hover

Label
Description
Text

Active

Label
Description
Text
Textcolor: Gray 01
Textcolor: Gray 01
Field
border: 2px solid
border-color: Teal Dark Hover
Field
border-color: Teal Dark Active
* Maintain browser focus state

Date Picker

Label
Description
calendar
Placeholder

Search

Label
Description
Text
search

Active Search

Label
Description
Text
times

Disabled

Label
Description
Icon
code: calendar (f133)
Icon
code: search (f002)
color: Gray 02
Field
border: 2px solid
border-color: Teal Dark Active
Component
opacity: 50% default state

Error

Label
exclamation-triangle

Error message

Text

Hover Error

Label
exclamation-triangle

Error message

Text
Label
color: Error Dark
Label
same as Default Error
Field
border: 1px solid
border-color: Error Dark
Field
border: 2px solid
Anatomy
1) Label
font-face: Helvetica Now Text
font-weight: 700
font-size: 16px
line-height: 20px
bottom-margin: 4px
color: Gray 06
2) Field
background-color: none
border: 1px solid
border-color: Gray 06
border-radius: 4px
color: see States below
3) Text
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 0px
color: Gray 06
4) Description (optional)
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 4px
color: Gray 04
5) Information Icon (optional)
font-face: Font Awesome 6 Pro Light
font-size: 18px
line-height: 18px
color: Gray 06
code: info-circle (f05a)
6) Additional Action Icon (optional)
font-face: Font Awesome 6 Pro Light
font-size: 16px
line-height: 24px
color: Gray 06
Size & Spacing
States

Default

Label
Description
Placeholder
Optional
Text
color: Gray 06

Filled

Label
Description
Placeholder
Text
color: Gray 06

Hover

Label
Description
Field
border: 2px solid
border-color: Gray 06

Active

Label
Description
Field
border-color: White
* Maintain browser focus state

Date Picker

Label
Description
Text
calendar

Search

Label
Description
Text
search

Active Search

Label
Description
Text
times

Disabled

Label
Description
Icon
code: calendar (f133)
Component
opacity: 50% default state
Icon
code: search (f002)
color: Gray 06
Field
border: 2px solid
border-color: White

Error

Label
exclamation-triangle

Error message

Text

Hover Error

Label
exclamation-triangle

Error message

Text
Label
color: Error Inverse
Label
same as Default Error
Field
border: 1px solid
border-color: Error Inverse
Field
border: 2px solid
Error Message
Styling outlined here

Implementation

Form labels are left justified above the form field. Labels should not be placed to the left of the field because it’s harder for the user to map the label to the correct input, thus increasing mistakes.

Placeholder

Placeholders should not be used in text fields. This is for the following reasons:

  • The text does not pass minimum contrast ratios for AA accessibility
  • Formatting hints disappear once the user clicks in, forcing them to remember what they just saw to fill out the field correctly
  • The text contributes to visual clutter

Date Fields

Date fields should contain a description that demonstrates the necessary format. Use the default browser setting for the picker UI.

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.