Updates

Released May 5, 2023

Updates

Corrections

• Our About page now includes a new section discussing the Consumer Experience & Design (CXD) team's model of success.
• The Header and Paragraph typestyles now include Mobile Header and Paragraph specifications. Our Design System no longer contains a bottom margin within Header typestyle specifications. Bottom margins now only remain for Paragraph styles to support paragraph breaks.
• The Navigation and Forms type styles no longer have a bottom margin, including Mobile specifications.
• Our Button's specifications now include Mobile and button animation specifications.
• The Core Components section now includes animations within the example areas.
• Basic Spacing specifications are now corrected and include Mobile Spacing.
• Broken links within the Text Input specifications are now corrected.

Updates

• Our Primary colors are Navy and Teal Dark. From Teal Dark, we have updated hover and active states.
• Our Secondary colors have been updated to Teal light and Signature red; we no longer have peacock color.
• Our gray values are now combined in a single, Neutral category rather thantext and background values.
• The warning background value has been modified to reflect a greater sense of urgency.
• The filters now have four states: Default, Default hover, Active, and Active hover. Teal Dark was replaced by Teal Dark Active and Teal Dark Hover following the hover and active states.
• The Ghost button is now called the Text button and won’t have side padding or a minimum width. Top and bottom margins remain consistent.
• All button styles on desktop and mobile are now available with an icon.
• Updated hover and active color application for Checkbox, On/Off Control, Inputs, and Radio Buttons to reflect the changes to the primary and secondary palettes.
• New Rail Navigation page within the navigation section of Modules.

Released June 22, 2022

Updates

Corrections

• Basic footer specifications have been corrected to reflect the accurate spacing.
• Button tab specifications have been corrected to provide unique hex codes rather than listing Peacock for all states.
• Dark Button Text color has been corrected to list Navy for default or Gray 06 for inverse.
• Modals have been updated to reflect the new 8px corner radius throughout the system.
• Text inputs previously stated that there was 12px padding above and below field text. It has been corrected to 11px so the total height with a 1px border around the input is 44px.

New

• Font Awesome is now on version 6. Font Awesome 6 has updated icon styling and new icons available.

Released February 25, 2022

Updates

Brand/Styling Updates

• Peacock is no longer in use for headlines.
• H1 has been updated to bold weight.
• H2 has been updated to regular weight.
• Prominent and subtle buttons are now Navy instead of Peacock.
• Card corner styling has been updated from 12px to 8px.
• Peacock usage in color palette has been updated to be used only for demonstrating an active state, as indicated throughout our specifications.
• Dark Footers now have a logo in Aon Signature Red, not reversed out.

New Content

• New page organization: With an expanding system, we will have more complex UI to document. We’ve created the Modules section to house this content. Pages that have been moved to this section include: Header, Footer, In-page Navigation, Tabs, Progress Bar, Tooltips, Popovers, Tables, Cards, and Expansion Panels.
• Modals have been added to Modules.
• Overlays has been removed—Tooltip and Popover content now reside on their own pages within Modules.
• Icons has been moved to Foundations.
• Data Visualization charts have new hover state documentation, including Circular charts which previously did not have a hover state.
• New Request a Feature form available.

Bug Fixes

• Alerts: The top border color was listed incorrectly in the specifications, though shown correctly in the images. The correct colors are now listed.
• Small filter chips previously listed the incorrect Hover and Active colors

Released October 25, 2021

Updates

New

• Data Visualization chapter updated with new identity
  • New color palette
  • New type styles with Helvetica Now Display and Helvetica Now Text
  • Removed interaction values
• Bar charts has a new hover interaction
• Interaction states for tabs added
• Data Visualization chapter updates are coming soon

Corrections

• H5 mislabeled as 'Helvetica Now Text', corrected to 'Helvetica Now Display'
• Buttons: Prominent button example was displaying the incorrect hover state
• Vertical Tabs: spec sizing and spacing correction
• Button Tabs: selected state correction
• Cards: Drop shadows removed
• Header: Icon color spec corrected from Dark Teal to Navy
• Footer: logo color for inverse footer correct to Signature Red

Released September 30, 2021

Updates

Overview

The Aon Design system has been updated to reflect the brand and identity updates introduced in September 2021. All assets on this site have been updated, so we recommend taking a careful look at each component to see how things have changed.

Key Changes

• New color palette applied to all components
• Helvetica Now will replace Roboto and Roboto Slab
• Line height on regular, large and extra large paragraph styles have been updated
• Tables have adjusted type sizing and spacing
• Data Visualization chapter updates are coming soon

Released December 18, 2020

v1.3 PDF

Updates

Overview

v1.3 features our Data Visualization Chapter, including best practice content, how to find the right visualization for your data and visual style guidelines. This chapter will help you tell stories with your data, and style them consistently and effectively.

Along with this release, we've added Tables to the components section, and updated some documentation from v1.2.

New Content

• Chart Types
• Visual Styles for Data Visualization
• Best Practices for Data Visualization
• Tables

Header

Updated documentation to include browser behavior.

Progress Bar

Updated documentation to include browser and mobile menu behavior.

Released October 05, 2020

Updates

Overview

v1.2 introduces new components and inverse styling. Color palette has been updated and renamed for easier use, and a more cohesive look and feel. Interactive states have been updated to enhance accessibility.

Changes are outlined below, but please refer to component pages for complete specification updates.

New Content

• Cards
• Footer
• Header
• Progress Bar

Inverse Styling

• Foundations: Color, Typography
• Components: Buttons, Expansion Panels, Filter Chips, Form Inputs, On/Off, Horizontal tabs, Vertical tabs, Button tabs

Color

Teal updates:
Marine swatch is replacing the Teal swatch. Replace all instances of Teal with Marine, as well as associated hover and active states (itemized in below sections).

• New hex code: #007FAA to #007BB6
• New swatch name: change from Teal to Marine
• Change Teal Hover to Marine Hover #009DE9
• Change Teal Active to Marine Active #006A9C

Feedback color updates:

• Error #BF4C4A to #F24F4D
  • Error Dark added: #CA110F
  • Error Background added: #FCDCDC
• Warning #F0A800 to #FFA600
  • Warning Dark added: #B37400
  • Warning Background added: #FFEDCC
• Success #7AB800 to #15B797
  • Success Dark added: #0D725E
  • Success Background added: #CEF3EC

Gray color updates:

• Remove: Gray D
• Rename:
  • Gray A to "Charcoal"
  • Gray B to "Slate"
  • Gray C to "Metal
  • Gray E to "Shadow"
  • Gray F to "Smoke"
  • Gray G to "Pearl"
• Add:
  • "Fog" - HEX: #F2F2F2

Typography

Link style updates

• All linked type styles will change from Teal to Marine, along with the corresponding hover and active states:
  • H3, H4, H5, H6
  • Standalone link, Link with indicator
  • Ghost Button Text
  • Icon Button Text
  • Category Title Linked
  • Breadcrumb Link
• Link color update: Marine, Marine Hover, Marine Active
• Link Hover and Active update: Underline will now be removed in Hover and Active states
• Small & Extra Small Linked text should not change color on hover

Error style updates:

• All Form Error styles will update to the new Error Dark color
  • Input Label – Error
  • Checkbox Radio Title – Error
  • Checkbox/Radio Label – Error

Other type updates

• Category Title change from Gray D to Metal
• Horizontal Tab inactive state change from Gray D to Metal
• Added inverse styles for all type styles

Alerts

• New Banner style
• Contextual Alerts icon and background color changes

Buttons

• Default Button change from Teal to Marine, Marine Hover and Marine Active
• Button Hover and Active update: Button text will now be underlined in Hover and Active states
• Default Icon Button update: Remove 4px border radius from background; Background Hover state change to 100% opacity

Expansion Panels

• Default states change from Teal to Marine
• Hover states change from Teal Hover to Marine Hover
• Active states change from Teal Active to Marine Hover
• Added Open state
• Open state contract icons (chevron-down and minus) change to Blue

Filters

• Default states change from Teal to Marine
• Hover states change from Teal Hover to Marine Hover
• Active states change from Teal Active to Marine Hover

Checkboxes

• Checkbox Selected change from Teal to Marine
• Checkbox Hover change from Teal Hover to Marine Hover
• Information icons change from Gray D to Metal
• Error States use Error Dark

Radio Buttons

• Radio Selected change from Teal to Marine
• Radio Hover change from Teal Hover to Marine Hover
• Information icons change from Gray D to Metal
• Error States use Error Dark

Text Inputs

• Information icons change from Gray D to Metal
• Action icons change to Marine link color
• Search icon changed placement from right to left side
• Error States use Error Dark

Text Area

• Information icons change from Gray D to Metal
• Error States use Error Dark

Select

• Information icons change from Gray D to Metal
• Error States use Error Dark

On / Off

• Off state change from Gray E to Metal

Supplemental Navigation

• Remove Teal and Gray Button Tab styles. Replace with Blue style.

Updates

Overview

v1.1 primarily features updated type styles that facilitate cleaner translation to ems, and address a wider range of use cases. Additionally, we've added styles for smaller screen sizes. The site also includes overhauled specification documentation for easier understanding and interactive UI elements to demonstrate behavior.

Please refer to element pages for complete specification updates.

Typography

New:

• Extra Small Paragraph, size 12px
• Extra Large Paragraph, size 21px
• Mobile variations added for all headline styles

Adjusted:

• Body paragraph size was previously 18px and is now 16px, line height from 28px to 24px, weight from 300 to 400
• Large paragraph size was previously 21px and is now 18px, line height from 32px to 28px
• Small paragraph size was previously 16px and is now 14px
• Adjusted line heights for the following styles: H2, H5, H6
• Input Description: bottom margin from 20px to 4px
• Input Error Description: from 20px to 4px

Removed:

• Placeholder

Buttons

New:

• Specifications for using multiple buttons next to each other

Removed:

• Gray A is no longer an option for icon colors

Supplemental Navigation

New:

• Category Style
• Added Horizontal Tab Inactive specifications

Adjusted:

• New Breadcrumb specifications

Alerts

Adjusted:

• Type name change from “General” to “Banner”
• Type name change from "In-page" to "Contextual"
• State name change from "General" to "Notification"

Removed:

• Blue style for Banner (previously General)
• Gray style for Contextual (previously In-page)

Expansion Panels

Adjusted:

• Spacing on all panel types

Form Inputs

Adjusted:

• Replace placeholder text with Input Content for Date Picker and Search field Text Inputs
• Replace custom open states with browser default for Selects

Removed:

• Text Input Placeholder style
  
• Text Area Placeholder style

Initial Release July 22, 2020

v1.0 PDF