Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.
The current default theme is is an implementation of the Spectrum design specifications, Adobe’s design system. Spectrum provides elements and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.
Coral Spectrum leverages the Spectrum CSS framework to style components including the Spectrum SVG icons.
Our vision is to create consistent Adobe experiences by providing a complete, easy to use library of HTML components compatible with major frameworks.
To reach the goal, Coral Spectrum derives from Custom Elements v1 with native support thanks to broad collaboration between browser vendors. The use of custom elements gives us the ability to hide many implementation details from the consumer, allowing much more freedom to change the underlying markup that supports those elements. This makes the exposed API smaller and more explicit, resulting in a lower risk of updates to Coral Spectrum needing to introduce breaking changes.
All components can be seen in action here. These are only examples and
don't cover all scenarios. The API documentation can be found in the references.
A playground is available here to experiment and preview code with the latest Coral Spectrum version.
Code can be shared by copy pasting the URL. The playground is sandboxed to prevent security risks.
Vision and goals
Get you started. How to consume and build the project
Helping you upgrade from CoralUI3
Theme, public CSS and Typekit
Technical decisions behind the architecture
Open development principles