Abyss Design System version 2

We're excited to announce the release of Abyss Design System version 2. This major update represents a significant leap forward in how we design and deliver digital experiences across our platforms.

What's new in Abyss Design System version 2?

• V2 component library - A refreshed and expanded library of components built for scalability, performance, and modern design standards.
• Stronger UI consistency - Expect a more unified look and feel across both mobile and web platforms, enhancing UX and UI.
• Greater component flexibility - Our components are now more adaptable, allowing teams to build faster and customize more easily without compromising design integrity.
• Enhanced white labeling & theming - With fully tokenized brand kits, teams can now implement custom themes and white-labeled experiences with greater precision and ease.
• Improved accessibility - We're raising the bar on accessibility to ensure our digital products are more inclusive and usable for all members and consumers.
• Figma Code Connect - Seamless integration between design and development—bringing Figma designs closer to production-ready code.
• Introducing Emotion - We're adopting Emotion, a powerful CSS-in-JS library, to enable dynamic styling and better performance across our applications.

This release is designed to empower product teams, designers, and developers with the tools they need to build accessible, consistent, and brand-aligned experiences faster than ever.

V2 prep for designers

Here's what's new for designers:

• New library of redesigned web and mobile components, now fully tokenized, more flexible, and better aligned with development
• Reorganized Figma file structure for better design system usability
• Branded component libraries for Optum & UHC, styled with each brands colors, typography, sizing, and more.
  • Abyss V2 does not have a separate theme or tokens for the UHG brand. UHG products should continue to use the Abyss UHC branded libraries for now.

Note: The V2 release features updates to the mobile app library as well, ensuring that all of our components meet the new Abyss design standards. With this release, mobile app designers will not need to change how they use Abyss libraries, but please note that some files will be renamed.

Open the migration guide for designers in Figma

V2 prep for developers

Here's what's new for developers:

• Tokenization for both web and mobile components
• Figma Code Connect enablement for web and mobile components
• Renaming, modification or removal of properties for both web and mobile
• Deprecation of select web and mobile components
• Replacing Stitches with Emotion as our web styling engine
• Documentation versioning and ability to view previous Abyss versions

Note: The UHG theme will be removed in V2. Please review the UHG theme page for more details.

See migration guide for web developers

See prep guide for mobile app developers

Stay connected

• Design releases – To follow along on Abyss updates as releases roll out, join our Abyss Design Releases Teams channel.
• General design support – To learn more information, and ask questions directly to the design team, join our Design Support Teams channel.
• Product distro list – To receive updates on major product enhancements directly to your inbox, contact Abyss product manager Steve Annecharico (steve.annecharico@uhc.com) or product manager Grace Fung (grace.fung@uhc.com) to get on the product communications distribution list.
• Requests and bugs – For new requests, including features, bugs, and other support, submit an intake on our Contact Us page. Track the progress of your ticket on your profile page.