Overview
The Abyss Design System is a growing library of interactive components that can be efficiently assembled to build any number of high-quality products and applications. Our components are designed to balance flexibility with structure to ensure end-user consistency across all our brands.
Designer toolkit
Figma is an end-to-end design platform that lets you create designs for different interfaces or any other design need. Figma helps teams understand problems, explore options, and build solutions together.
Visit the Design Checklist to access all the resources needed to start using the Abyss Design System.
Guidance
We follow the atomic design methodology for structuring the Abyss design system. We divide our components into different categories:
Atoms
They are the basic building blocks of the design system, like atoms in nature they’re abstract and often not terribly useful on their own. However, they are good as a reference in the context of a pattern library as you can see all the global styles laid out briefly.
Molecules
In the molecule stage, we take our independent atomic design elements, each with their own characteristics, style, format, and begin to bring them together into new groupings.
Organisms
Molecules give us building blocks to work with, we combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct components. Abyss Design System gives users the ability to promote consistency and scalability, users have the ability to group atoms, molecules and organisms into templates and pages that can be efficiently put together.
Accessibility
Abyss strives to combine WAG accessibility guidelines with inclusive and usable design in all stages of the design process. More information on the Accessibility standards we guide our designs by can be found on the Accessibility page of the Abyss site.
Contact us
Whether it's a design aliment, a content gap, or a component that is not working as expected, we count on your feedback to help us keep the Abyss design system functional. Please submit your support request via the Contact Us page.