Tools We Use

The language and key tools of the Octopus Design System.

 

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
Playground to view implemented components, their variants and source code.


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.