Spark 1.0 is no longer been maintained, check our V4 migration guide to know how to update to the new version of Spark. ✨
This is a resource empowering teams to create consistent and effective user interfaces.
What is Spark 1.0?
Spark is a design system unique to Genesys. It contains a collection of reusable user interface components guided by clear standards and principles.
A Dedicated Team
Spark is managed by the Genesys Design System Team and supported by development. Our team is tasked to continually work on this system. This, therefore, translates to faster response times, regular updates, and plans for new components.
Documentation and Usage Guides
Spark not only contains the visuals of how these components should look, but these components now have corresponding documentation showing its anatomy, behavior, options, and how it should be used.
Interactive Demo Available
Previously, the coded components and visual guides were living in completely separate locations. This site now links them together for ease of reference.
Agnostic Components
Through acquisitions and mergers, UIs at Genesys have been built with a variety of tools and frameworks. This will continue to be true as we innovate in new directions and acquire new talent. To support a healthy evolution of our UI ecosystem in the years to come, Spark components are implemented as framework-agnostic custom elements that can be used with the frameworks of today, and those of the future.
Setup for Easy Updates
Spark's implementation in code is published as a standard npm library. Backwards compatibility is handled through SemVer and an internal system for rotating components through a lifecycle of "beta", "stable", and "legacy" stages. Upgrading the spark implementation works the same as upgrading any other library, maintaining a workflow that development teams are already familiar with.
Get started
- We recommend beginning with the Foundations
- From there you can find the Basics, which are the atomic elements like buttons
- Beyond that you will find a library of Components
To guide users to other sections of your documentation, use a Shortcut block: