Introduction
This collection of elements and components is much more than a style guide or a component library — it's a set of best practices that will help product owners, engineers and designers create new solutions for our users.
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.
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
Who should be involved in developing and maintaining a design system?
Developing and maintaining a design system is a collaborative effort that should involve members from across your organization, including designers, developers, product managers, and other stakeholders. Learn more
What's the difference between a design system and a style guide?
A design system goes beyond just the visual design of a produce. It includes things like UX principles, components documentation, design patterns. The audience for a design system includes Designers, developers, product managers, and other stakeholders. The audience for a style guide is primarily designers.
What's the difference between the "Design System Team" and "Product Design Team"?
There is a distinct and important difference between when we say "the design team" and "the design system."
"Design Team" - All Product Designers across all teams. Responsible for all design on the Basis software side. #design_team
"Design System" - A cross-disciplinary team (engineering, design, UX research, etc) now known as Jade. Responsible only for the Basis Design System, Design System site, and Storybook site. #team-jade
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.