Single Source of Truth
Our design system provides a single source of truth and a shared language that all team members can use when working on our product. This allows us to collaborate more effectively.
Build Systematically
Our design system provides a full toolkit of foundational tokens, components and patterns, making it easy for teams to quickly create new solutions that are consistent, modular and extensible.
Focus on UX
Our design system helps teams to spend less time building out complex interfaces and spend more time on researching and crafting great user experiences.
Adoption
When adopted by our teams, our design system will lead to a better understanding of your users and, ultimately, a better user experience.
Design System Structure
Atomic Design Methodology
Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.
Basis Methodology
Our methodology follows a similar structure
Foundations
Foundations are the basic elements that shape the look and feel of all our user interfaces. They set the visual style and guidelines for our design system.
Components
Components are the interactive pieces created from foundations. They are the building blocks that users interact with, incorporating foundational styles to ensure everything looks and works consistently.
Patterns
Patterns are groups of components arranged into repeatable layouts. They combine complex features to solve common user needs, providing standard solutions for regular design tasks.
Here is an example of how these different pieces are used to create our UI.
Using Basis Design System
On each page of our documentation, you may see these different sections. You can use the documentation to help you understand the purpose and functionality of each component. You can also use the documentation to help you make decisions to what component to use in your UI.
Definitions
Anatomy
Behaviors
Best Practices
Related Components
Accessibility
Additional Reading
Design
Review the For Designers pages starting with Get Started in Figma
Review the rest of the design system documentation and familiarize yourself with our UI
Develope
Review the Design System 101 documentation on confluence
Review the rest of the design system documentation as well as the storybook website for any additional engineering documentation.
FAQs
Additional Reading
Atomic Design Principles & Methodology 101 https://xd.adobe.com/ideas/process/ui-design/atomic-design-principles-methodology-101/#:~:text=What%20is%20Atomic%20Design%3F,with%20explicit%20order%20and%20hierarchy.