OVERVIEW
In 2020, the Octopus Design System was created to align multiple Octopus websites and deliver a more consistent experience across the group. The goal was to establish a shared visual and structural foundation that could scale across current and future products.
Working as part of a small design team, we set out to create a flexible system that balanced strong brand expression with practical usability for designers and developers.
DISCOVERY
Early exploration highlighted inconsistencies across Octopus websites, both visually and structurally. With multiple teams working independently, there was a clear need for shared rules and reusable components.
We aligned on Atomic Design as the framework, allowing us to define a fixed set of foundational elements that could scale into more complex components while remaining adaptable to different content and layouts.
SOLUTION
We built the system from atoms through to full pages, defining typography, colour, and grid foundations before scaling into navigation, forms, calls to action, and tags. Cards became a core focus and were designed as a single flexible component made from shared atoms.
Larger patterns such as hero blocks and page breaks helped structure long form content. Once established, the system was applied to octopusgroup.com and octopusventures.com to validate real world use.
RESULTS
The design system created a shared language across Octopus websites and improved visual consistency, efficiency, and collaboration. While still evolving, it provided a strong foundation for future growth and highlighted how even small teams can benefit from structured systems thinking.
The project reinforced the importance of ongoing iteration, governance, and acceptance that a design system is never truly finished.
