Saga Design System
Saga is Grafana Labs’ open source design system and it establishes the shared, visual language for all products within the Grafana Labs umbrella of products and drives user experience and interaction consistency throughout the UI.
Overview
A design system is a connected, package-managed, version-controlled, software product that contains the smallest set of components and guidelines an organization needs to make digital products consistently, efficiently, and happily. Think of these as “a system of systems”.
How Saga works
The Saga team is committed to helping Grafanistas and the community be successful in adoption and their use of Saga assets. To ensure this is the case, the Saga team manages and supports the Figma assets and React components.
Saga guiding principles
As Saga grows and solves more complex problems, these guiding principles help ensure that the tools and resources offered provide the most value to our users as possible.
- Saga is universal: Every part or solution within Saga is not specific to a single product feature in Grafana. They are able to be used by other products across Grafana Labs; — e.g. has shared value
- Saga is accessible: Able to be used by all types of users, regardless of ability. Accessibility is baked into the solutions to ensure that
- Saga is flexible: Thoughtfully built and designed to solve for various configurations and situations
- Saga is coherent: Follows existing visual styling and patterns already established by Grafana UI
- Saga is defined: Well documented with clear limitations so it’s easily understood how and when it should be used and why it’s a better solution than other similar components or patterns
- Saga is distinct: The contribution fills a unique gap in the current component/pattern offerings that cannot be reasonably solved by an existing component/pattern
How we support usage and adoption
Having an open line of communication between Saga, designers, and developers is important for success and the best way to improve everyone's awareness, usage, and adoption. We stay engaged in numerous ways:
- Our GitHub project available for all to see what we’re working on now and later. This is a good place to track the work of any contribution.
- We are active on our internal Slack channel: #grafana-design-system. Here you can post your questions, get answers, share your thoughts, and even get updates on design system releases.
We are active participants of the UX feedback sessions — a stage to give and receive peer feedback to improve work. The #ux Slack channel posts reminders and shares agendas for these sessions. If you want to get added to these recurring meetings, ask to be included in that channel.
