Skip to main contentOctopus Think

Nautilus Design System

An open-source design system and React component library to help designers and developers build better digital products together. Designed for inclusivity, usability, and flexibility.

Project overview


As a small studio, we need a way to automate as many tasks as possible. We needed a flexible system that can adapt to a variety of different brand expressions whilst still covering consistent rules about usability and accessibility.


We built our own design system and React component library, based on core principles of inclusion, usability, and flexibility.


Nautilus is still very much in-progress, but already it’s helped us get products and apps up and running much more efficiently than if we had to build them from scratch. Including Nautilus in our projects also means every project benefits from future improvements.

Our contributions

documentation, leadership, design-systems, visual-design, React, project management, accessibility, design-principles

Move to next panel

The challenge

As a small team, we needed a way to codify and document our practices, as well as avoid rebuilding the same components over and over again. We needed a design system and component library that was inclusive, usable, and flexible enough to allow for a wide range of brand expressions, but this didn’t exist in the open-source landscape. Many design systems failed to meet the usability and accessibility standards we hold ourselves accountable to.

Move to next panel
MetadataYet another design system?

Why bother?

Building our own design system allows us to establish a solid, predictable baseline for my work without needing to reinvent the wheel every time, allowing us more room for experimentation and innovation.

Move to next panel
MetadataThat's a lot of pink

Visual audit

Our first step was to assess what we already had by looking at recent work. This audit revealed a consistent style—clarity, contrast, and boldness. This formed the basis for foundational guidelines, a type system, design tokens, as well as the components themselves.

Move to next panel
MetadataWhat we stand for


Design principles are key to a design system. When used correctly and well established, they infuse and inform every other decision. It was important to establish these principles early into the process, since everything else derives from them. Via a series of post-it note exercises, we established a shared vision and a clear set of guiding principles to inform all work to come.

Move to next panel
MetadataOther than pink, that is


Nautilus provides a palette of seven hues, each with 10 tints and shades, balanced against a greyscale gradient to ensure predictable numerical contrast for accessibility purposes. It also provides a neutral palette of greys to match. Components check for adequate colour contrast to ensure accessibility.

Move to next panel
MetadataEstablishing typographic scales


Nautilus includes a flexible type system, including rules for calculating type scales and for programmatically determining an optimal line-height that would still fall on our baseline grid.

Semantic combinations for different “voices” and contexts forms the baseline of the type system. Type variables are themeable, as are the actual combinations of tokens into semantic styles, making for a highly flexible system with core rules.

Move to next panel
MetadataGrids, gutters, and rhythm


Nautilus uses the popular 8px grid due to its flexibility and ease of use with icons and other elements. It also includes spacing variables and rules for how padding and margin is applied to elements. This leads to more harmonious visual layouts.

Move to next panel
MetadataNow for the easy part

React components

We build each component collaboratively, starting with research and documentation, and then building out the components in React and reviewing back and forth until everything is accessible, usable, and conforms to our standards.

Move to next panel
MetadataMaintaining momentum

Project management

We invest time in ensuring that everything is well-documented and a clear process has been established. We set milestones, prioritise tasks, and automate as much of the process, from testing to releases, as possible. Since the project is open-source, almost all of our work is publicly accessible to anyone who might be able to learn from us.

Move to next panel
MetadataWhat's next?

Future plans

It’s still early days for Nautilus, but we have a strong vision for the future. Our plans include including React Native functionality, a Sketch or Figma library, brand tokens and themeability, automated theme generation, and an in-browser component playground.

Because it’s all open-source, the best way to keep tabs on our progression is to follow the project on GitHubExternal link.

Move to next panel
MetadataWhat did we accomplish?


Codifying our practices, defining guidelines, and thinking through things on an atomic level, and considering the semantics of all my decisions allows us to improve and validate our own skills. We’ve also laid the groundwork for better communication by creating a shared vocabulary and mental models. We’re both better equipped to make decisions without the other’s input.

Already, we can bootstrap a project quickly—and right out of the gate, what we have is already usable, accessible, and balanced.

Octopus Think

Octopus Think is a design & development agency specialising in user-centred design and React development. We build smart, inclusive, usable digital products that make people’s lives better.

Ready for your technology to work for you?

Contact us!

Sign up for quarterly updates

Copyright © 2020 Octopus Think Ltd.
UK Registered Company No. 11747595External link
VAT ID: GB324954685
Report an issueExternal link with this site