Overview
The Abyss Design Systems offers both a design and development framework for teams developing products. As a product manager, you are crucial to unlocking all the benefits of Abyss for your products.
Speaking a Common Language - Integrating Abyss into your development and design processes creates a common language of components, or building blocks, that can be used to speak clearly about how front-end development can solve business problems.
Accessibility - All components within Abyss are designed and developed with Web Content Accessibility Guidelines (WCAG) compliance to save your team time during design, development, and testing.
End User Consistency - Standardizing experiences for our end users will promote familiarity, brand consistency, and efficiency in completing jobs to be done.
How does Abyss work?
Abyss plugs into the design and development processes by creating reusable components in a React-based framework for developers and in a Figma library for designers. To use Abyss to its full potential, your application should be built on React and your designers should be able to utilize Figma. Product Managers can leverage the Abyss documentation on this portal to converse with designers about the components that will be used to build the experience. These components can then be included in the user story refinement with the development team to ensure alignment to the business requirements.
Abyss is constantly working on new components to expand our library of tools. Getting to know the tools available to your team can help with solving business problems and communication between teams. Use the section headers of the left navigation to explore the types of components and their associated variations.
Versioning
Abyss adheres to the principles of semantic versioning. This means that we publish 1-2 new minor versions every month, releasing new components, defect fixes, and functionality. In this scheme, version numbers and the way they change convey meaning about the underlying changes in a release and what has been modified from one version to the next. See our Versioning Guide for more information. You are not expected to consistently be on the newest version, but an upgrade is required to receive code updates. Minor releases after Version 1.0 and later are backwards compatible, making it a small incremental effort to keep your application updated based on your needs. To view updates from past releases, see our Releases page. If you would like to be on the email distribution for release updates, please submit a Support Request via Contact Us .
Branding
Your product should maintain up-to-date brand guidelines. To ensure your product receives the latest updates, talk to your development partners about using our ThemeProvider to set your application's theme through Abyss.
Use the Theme dropdown in the header of this site to see components in our major brands (UHC, Optum, UHG).
For additional brand guidance, please refer to your organization's Brand Center for specific brand standards and guidelines.
Accessibility
Accessibility - Abyss components are designed to meet Enterprise Accessibility Engineering Standards. These web and mobile requirements align with the Web Content Accessibility Guidelines (WCAG) 2.1 and 2.2 level AA. They also include several internal standards that go a step beyond WCAG to serve our members, customers and colleagues better. For how-to's and other self-service resources, including checklists and testing guides, visit the Accessibility Knowledge Center. Visit Total Accessibility to learn about the program which helps teams integrate accessibility and accountability into their processes. Learn more about Accessibility in Abyss.
Support
The Abyss component library is continually evolving and adapting to meet our customer’s needs. If the Abyss team can help update an existing component or create a new component, we would love to work with you to ensure the Abyss Design System continues to meet your team’s needs.
To log a request, please utilize the Contact Us form to submit details related to your product, type of request, supporting details, attachments, and priority. Upon submission, you will receive an Aha! idea reference number to track your request and communicate with us.
Requests can come from anyone working with Abyss, including developers, designers, product managers or project managers. We recommend keeping partners informed of the request to prevent duplicates.
Your design partner should be invited to the weekly Abyss Design Working Session hosted by our design leads. This session is also open to Product partners. If you and/or your designer would like to attend, please submit a Support Request via Contact Us with the appropriate contact information.