Get familiar with our principles
Our principles encapsulate our shared standards for collaboration. Explore the following principles to get a better understanding of what we commit to:
- Guiding Principles: how we approach the design system.
- Product Design Principles: what we consider when doing product design.
- Accessibility Principles: how we ensure Octopus is accessible to everyone.
Get familiar with the code
Getting Started
Explore the Frontend Documentation for everything you need to get started, including setup guides for your IDE, information on tooling, and an overview of the Portal structure.
We have dedicated packages in the design system where you can directly contribute to its ongoing development and improvement. You can also explore preview sites to experiment with components and design tokens.
Design System Components
A curated collection of reusable, standardised UI components and design assets that streamline development and ensure application consistency.
Package
This package includes:
- Generic components that are a part of the design system. This package does not include components specific to the Octopus Deploy’s portal domain.
- Reusable React Hooks used within components.
- Routing utilities to help resolve links in the context of component.
- Theme component allows for switching various themes in Octopus’ UI (for example, light and dark mode).
- Set of utility functions and components you can use to construct custom components.
The component showcase offers an interactive playground to explore and preview design system components. Here, you can view each component in isolation, experiment with available props, toggle themes, test interaction states, and explore various component variations.
Showcase
The component showcase offers an interactive playground to explore and preview design system components. Here, you can view each component in isolation, experiment with available props, toggle themes, test interaction states, and explore various component variations.
Design System Tokens
A centralised set of design variables, like colours, typography, and spacing, ensures consistent styling and theming across applications.
Package
This package includes a JSON file containing our Design Tokens:
- Accessible color scales.
- Colour themes (light and dark).
- Set of theme variables that can be used with CSS variables to access colors from the current theme (the Theme component provides these CSS variables).
- Typography (font families, weights, sizes, letter spacing, line height, text decoration, and transform).
- Spacing.
- Borders (radius and width).
We recommend styling your React components using these tokens using the CSS function from @emotion/css.
Showcase
The design token documentation previews the tokens used throughout the component showcase and across the Portal. It includes the CSS variable names, CSS values, and examples of their rendered output.
Design System Icons
A curated collection of icons consistently used across the Octopus interface (often as a dependency for design system components).
Package
This package includes:
- Automation and build scripts for publishing icons from Figma to GitHub
- SVG-based icon paths generated from Figma System Icons into a JSON file
- Generic IconWrapper component and React components for each icon present in the design system
The design system icons package is the recommended way to manage iconography at Octopus. If an icon you need is not currently present, check the instructions on Proposing an Icon.
Showcase
Versioning
Our design system packages are implemented within the Octopus Deploy GitHub repository, so we can quickly iterate on them where they are primarily used. While we may choose to extract it from this code base at some point, it will likely continue to live here for some time.
Because of where the packages are, the versioning scheme aligns with the versioning system for Octopus Deploy. Version numbers may look like 2023.1.1234. These packages do not use semantic versioning (SemVer).
Connect with us
If you have questions about setting up and working with the design system, the Frontend Foundations Team will guide you. Connect with us in the #team-frontend-foundations-requests Slack channel.