Figma Component Library
Figma file containing ready-to-use, published components for designers.
Design System Documentation
Documentation where we showcase all parts of the design system with their recommended usage, our principles and design decisions hosted on Supernova (you are here!).
Storybook Component Showcase Landing page
Entry point for the component showcase to view implemented components, their variants and source code
-
Design System Component Showcase
The Design System includes a set of components available through the published design system package. It provides reusable, non-specific primitives, such as form elements, buttons, and other foundational UI pieces, that can be used across the server front end as well as any other front-end implementation. This layer is ideal when you need base components that aren’t tied to company-specific concepts and want a consistent toolkit for building interfaces in any environment. -
Octopus Component Showcase
Components which are available to the Octopus server frontend, including those from the Octopus Design System. Choose this if you are working on the Octopus Frontend.
Component Library Package
Implementation of components in code (React + TypeScript). Accessible from Octopus’ codebase on GitHub, but also published as an npm package.
Design System Tokens Package
Implementation of Design Tokens in code, also published as an npm package. Designers can update it by creating a Pull Request with Tokens Studio.
Design System Icons Package
Implementation of System Icons, automatically generated from Figma to code, also published as an npm package. Designers can update it by following the Contributing an icon guidelines.
