What’s New

Updates on components, libraries, and guidelines

This is where you’ll find the most recent and noteworthy updates we’ve made to our design system. 


v1.5 User Interface Element

Expanded Gradients Palette Simple Horizontal Stepper
Date Picker (Date Range) Drag & Drop File Upload
Cookie Banner  

v1.5 Marketing Library

Hero Progressive Form Gated Content Form
Hero Form  

v1.5 Sales & Servicing

Data Tables    


• We've updated the Native App Components to reflect our latest v1.5 library.

  Accordion Profile Picture
  Cards Tables
  Carousel Tabs
  Headers Type Stack

• We've updated the User Interface Elements to reflect our latest v1.5 library.

  Button Tooltips
  Link System Notifications
  Text Fields Outlined Cookie Notifications
  Text Fields Underlined Loader
  Dropdowns Outlined Overlay
  Dropdown Underlined Tabs
  Radio Buttons Toggle
  Segmented Control Counter
  Checkboxes Slider


  • Enhancements to existing components: We’ve added new enhancements to some of our components from the Marketing Responsive Web components library.
    Embedded Lead Form: Added variations to component. Background color options are grey, gradient, blue, and custom pattern. And option between one or two column layout.
    Visual Product Card: Added sizing options for author to choose from
    Text Insight Breaker: Added custom background option
    Global Navigation: New ability to add a fifth menu item and ability to create menu item as a link
    Pull Quote Embed: Added ability to add subscript and superscript
    Hero Detailed Banner: Added ability to add subscript and superscript
    Hero Article Banner: New component
    Play Button: Updated play button on all video components with additional color options depending on background color.
  • New video tutorials for authors: We have added video tutorials for authors to use within the WhatFix self help drawer. These video tutorials will help with authoring more complex components.
  • We released updates to our user interface elements library, marketing responsive web components library, and native app components library. Updates include a more modern and consistent UI design work. If you are starting a newly built digital experience, use this library.
    v1.5 - UI Elements Library
    This version contains updates to some of our foundational elements, including buttons and links. The library has been implemented into the latest Responsive Web and Native App component libraries so you won’t see things like out-dated button styling in the components.
    Access v1.5 User Interface Elements
    v1.5 - Marketing Responsive Web Components library
    Use this library if you are creating new digital experiences on AEM (like updates to your corporate website). While the changes in our foundational elements are reflected in this design library, they will not be pushed in code until Q4. Code changes will reflect automatically in your authored experiences.
    Access v1.5 Responsive Web Components
    v1.5 - Native App Components Library
    Access v1.5 Native App Components


  • New additions to the design system: We’ve added 16 new components to the responsive web components library. You can learn about them here. The components are:
      Auto Rotating Hero Multi Topic Hero
      Content Feed Product Bundle
      Email Subscription Related Tags
      Feature Hero Selected Articles
      Headline Breaker Simple List
      Hero Event Single Topic Hero
      Hub Promo Sub-Topic Hero
      Lead Gen Breaker Tabbed Content
  • Introducing ‘Designing Your Corporate Websites’
    • Based on feedback from our community of practitioners we’re launching a new section for digital design use cases common at MetLife. Our first use case is all about how to design and revamp your corporate website. You have access to guidance, templates, step-by-steps, and real examples from MetLife. Explore Now
  • Key Updates with New Codebase:
    1. Modern Codebase: Make use of New AEM features, including Experience Fragments, which allow you to create a piece of repeatable content (such as a featured banner that lives on multiple pages) and maintain that in one place.
    2. Modern Design: By using the new codebase, it ensures you are using the most up to date design system elements that MetLife has to offer.
    3. Flexibility: Our new Codebase uses editable templates, meaning the header, footer, and hero can be adjusted as needed to facilitate your experience needs.
    4. Future Tech Strategy: The new codebase taps into new functionality that adobe provides in their new version of the platform, including automated unit testing for our developers and the touch UI experience for our AEM authors.
    5. SEO: We have made some key SEO enhancements on our new codebase which includes:
      302 redirect fix: Dynamic content will now link directly without a 302 redirect. This fixes a prior issue with page authority of destination pages, such as within the Article Grid component.
      Mobile Image Selection for Mobile and Tablet: Authors now have the capability of selecting a smaller, mobile-friendly hero image to use in Mobile and Tablet viewports. Using mobile images will help speed load times, improve page ranking, and enhance user experience.
      H tag enhancements: Hero image titles can now be selected as either H1 (default) or H2, giving flexibility when setting up the page. In the event that “H2” is selected, page properties allow you to toggle a page level “H1 tag” value. This can be used in the event that there is no Hero or Hero title, or you use a multi-tab Hero.

Refreshed is live
The MetLife Global Design System has been updated with a new look and a new home. 

• New homepage with a video introduction to the MetLife Global Design System
• A Getting Started page for onboarding
• Refreshed Standards and Core Guidance to inform design work globally
• Consolidated resources for Responsive Web and Native App design migrated from and
• New resources and guidance for Marketing & Advertising
• A new case study on the post-purchase experience
How-to articles for putting XD into practice
• Updated Adobe XD library files

New content added to
After working closely in the spring of 2021 with MetLife teams around the world, design inspiration for localized digital design has been added to a new Showcase section along with new design standards and guidance across the site. 

New menu structure. Restructured the site and global nav and updated terminology to make it easier to understand and use the MetLife Global Design System.
Updated landing pages. Updated language on the homepage and landing pages for each section to provide better guidance on the purpose of each section of the site.
Updated Resources terminology. Simplified naming for UI Kits and prototypes.
New Showcase section. Explore digital brand expression from MetLife teams around the world to give you the creative reference and inspiration to do more great work. This includes articles that demonstrate brand expression for the US, Chile, Mexico, Japan and Korea. Mexico, Japan and Korea all have localized brands. Look to Chile as an example of how the Masterbrand comes to life for a non-US market that does not have a localized brand.
Updated XD in Practice section. Renamed “How to do it” to “XD in Practice”. Updated landing page with a new video explaining Experience Design.

Updated responsive web component documentation
Since the 2019 launch of in the U.S., new AEM responsive web components have been updated for use globally.