White Labeling with Abyss

Abyss is comprised of a group of designers, accessibility experts, engineers, and QE who work together to build design kits, component libraries, and documentation sites that are packed with prebuilt, reusable or global assets that align with our enterprise branding and accessibility standards to ensure quality, drive consistency, and help teams reduce redundancies in design and code, forging seamless collaboration across product portfolios.

Abyss helps teams create exceptional digital solutions and user journeys, enhancing user experience while driving familiarity for our end users across different platforms. Teams can feel confident using Abyss, leveraging our components and assets, knowing they don’t have to do design or accessibility checks to ensure compliance.

In addition to reusability, we also offer flexibility for customization, ensuring products remain streamlined and effortlessly maintainable through the combination of leveraging what’s available in Abyss and allowing teams to focus more of their time on specific user cases or product needs. This includes white labeling, which allows for design and engineering teams to take any of the reusable components, or building blocks, and apply their own styling and themes, rather than leveraging enterprise brand themes for UHC or Optum.

The Goal

The Abyss brand aims to empower white label consuming teams to apply their own themes to the design system, ensuring flexibility for both development and design teams to fully own and manage their tokens. This approach reduces dependency on the core design team for updates while preserving a unified system structure, allowing teams to maintain consistency and efficiency in their digital solutions.

Glossary

White Labeling - The process of adapting a framework to support a specific brand or multiple brands not supported by Abyss, while allowing for customization.

Tokens Studio for Figma - Token Studio is the backbone of the abyss tokening strategy. It's a centralized place to create, manage, and export tokens to both Figma variables and as a dev-consumable JSON file. Read more on Tokens Studio here.

Tokens - Tokens are key-value pairs consisting of the Token Name and value. These represent fundamental design decisions as abstract, reusable data. They allow for easy adaptation and customization of the Abyss Design System while maintaining consistency for any brand or style. Abyss currently supports tokens for: color, spacing, sizing, border radius, border width, and opacity.

• [Token Key]: [Token Value]

Theme - A set of tokens that define a brand.

Base Theme - A theme whose tokens are managed, published and versioned by Abyss, such as Optum and UHC.

White-Labeled Theme - A customized theme whose tokens are managed, published, and versioned by an Abyss consumer for the brands they maintain.

Tokens

To effectively leverage white labeling with Abyss, it's important to understand how tokens function within the design system. Teams looking to white label can use the Abyss token formula and variable map, applying their own values to achieve the desired theming and styling. This standardized token formula ensures consistent application of styles across experiences. Its reusability not only streamlines the process but also provides significant time savings and efficiencies for teams building and maintaining digital experiences.

What are Tokens?

Tokens are even smaller building blocks (or sub-atoms) of the design system, used in place of hardcoded values and built in alignment with various standards that allow teams to maintain scalability and consistency. Each token category has its own structure based on defined rules and guidelines, representing design decisions that set the standard for the design system. When creating new or enhanced designs, use tokens to create a cohesive UI that follows established standards and patterns.

For a deeper dive into using tokens, visit our Tokens documentation.