What is a design system?
A design system is a set of guidelines, standards, assets, and processes to help organizations rapidly design, build, and deploy products in a consistent manner.
Design systems are often equated with a UI kit or component library; in reality an effective design system spans the entire lifecycle of a product through ideation to iteration and everything in between.
Architecture
While the scale of a design system largely depends on the needs of those consuming it, the fundamental structure and architecture remains largely the same across systems.
- Visual Language: colors, typography, icons, imagery, content strategy
- Components: component design, component development, tokens, development standards
- Patterns: repetitive combinations of components and foundational styles that yield more complex functions and features
- Documentation: education, issue tracking, contribution, content management, processes
At HaschiCorp we structure our components, icons, and design tokens in a monorepo using yarn workspaces and publish a collection of libraries in Figma for designers.
Why use the Helios Design System?
While increasing visual and functional consistency across products is the most visibly notable result of design system adoption, the intrinsic value a design system brings can result in complimentary benefits:
- Increased velocity in the design and development of new products and features
- Dismantling of silos between departments that adopt and use the system
- More time spent on solving complex problems, less time spent on duplicative work rebuilding small atoms and molecules
- Components, foundations, and usage guidelines published by the the Helios Design System meet or exceed WCAG 2.1 AA conformance out of the box in accordance with our accessibility statement.
Our consumers
HashiCorp develops and maintains a number of different products with varying sub-brands and approaches to the user experience. In an effort to bring these different product lines and teams towards a common visual language and single source of truth, the Helios Design System was born.
Helios has been adopted at varying levels by all products within the R&D organization. We work closely with these teams at the integration and implementation level while collecting feedback to better understand consumer needs and inform our roadmap.
For more information on adoption, visit our getting started documentation (for engineers and designers) or visit our public GitHub repository.
Resources
Design system inspiration
As part of our design process we analyze and compare the strategy and implementation of prominent design systems across industries. These examples inspire us and helped paved the way for the design system community.
- Carbon Design System (IBM)
- Polaris Design System (Shopify)
- Material Design (Google)
- Pajamas Design System (GitLab)
- Primer Design System (GitHub)
- Atlassian Design System