About Abyss | Abyss

What is Abyss?

Abyss is a digital design system that provides a shared foundation of components, tokens, and documentation to help teams create consistent, accessible, and efficient digital experiences. Abyss currently supports UHC, UHG, and Optum brands, with additional white-label support coming soon.

How Abyss works

This diagram showcases the five-step workflow the Abyss team works through to create and develop reusable UI components. A Design System contains reusable UI components that helps teams build complex, durable and accessible user interfaces across projects. Since both designers and developers contribute to Abyss, the design system serves as a single source of truth across the organization's common components.

We support adoption

We host working sessions and meetups.

The Abyss team hosts regular working sessions for designers and developers to interact with the design system, ask questions and collaborate on changing elements.

Our components and elements are regularly maintained.

The Abyss team creates, supports and maintains our elements, and offers triage support for our user base. Teams can use these well-defined elements and keep up with changes in our Release notes.

We provide support for our users.

The Abyss team engages with our users primarily through the support channels and request form found on the Contact Us page. A member of the Abyss team responds to all issues.

Guiding Principles

Abyss puts the user first.

A dedicated design team keeps our end users front of mind through usability testing and peer reviews.

Abyss is flexible.

Abyss enables teams to leverage reusable and customizable backend components, keeping their products lean and easy to maintain.

Abyss is inclusive.

Users of all abilities can use Abyss components once they are reviewed from a design and development standard, following WCAG guidelines and A11y best practices.

Abyss builds consistency.

As more teams adopt the use of Abyss, the use of repeatable patterns and functionality create a friendly and familiar experience for our end users.

We Maintain Assets

Overview

At its core, Abyss contains elements, components and patterns for how to design and build with them. Beyond this core is a distributed ecosystem of sites that adopt and utilize the Abyss Design System within our organization and among our partners.

Component Library

Abyss supports React-based code implementation. The library is continually evolving and adapting to our clients needs, so learn more about how you can contact us for questions and requests. If you're a developer, learn about installing and implementing Abyss in our Developer Toolkit.

Design Resources

Abyss maintains design component libraries, usage guidelines, and accessibility guidance that align with code and streamline the work of getting from concept to finish products. See design resources.

Brand

Abyss supports multiple brands and white-label products. Please refer to your organization's Brand Center for specific brand standards and guidelines.

UHC Brand Center

Optum Brand Center

UHG Brand Center