Redbelly design principles and system

Employer: Redbelly Network
Role: Senior Product Designer

Design operations including Redbelly Networks' product design principles and design system ensuring consistant and consice approaches for tackling design challenges and providing effective solutions efficiently.


Redbelly experiences must instil trust in the network to host and manage assets in regulated markets. The experience design principles offer a means to deliver on product values while ensuring those experiences maintain familiarity through consistent patterns across different elements, pages, devices and applications. Without defining principles, the design system risks being a general assortment of interface components.

Redbelly design principle, Integrated, icon


Redbelly product experiences demonstrate the connection between read-world entities and their on-chain counterpart or representation. They provide a sense of coherence, cohesion and consistency with different elements working together seamlessly.

Redbelly design principle, Facilitatory, icon


Redbelly product experiences help users access, manage and control their assets. They provide support, guidance and encouragement thereby making it as easy as possible for a user to achieve their goals.

Redbelly design principle, Overt, icon


Redbelly product experiences provide clarity about asset sovereignty and responsibility while demystifying web3 paradigms. They offer a sense of clarity and transparency to avoid misunderstandings or surprises.

Redbelly design principle, Durable, icon


Redbelly product experiences assure users that their that assets and transactions are safe and secure. They evoke a sense of stability and longevity to reassure users their high value assets are stored in an environment built to last.

Redbelly design principle, Respectful, icon


Redbelly product experiences are open to ALL types of users without discrimination. They give users a sense of validation and understanding by acknowledging their circumstances and preferences.

Redbelly Blocks design system

Consistent, efficient and effective design fragments which make up the experiences to ensure Redbelly Networks' product design principles are manifested in user experiences.

Purpose of the design system

Products don't have a final or fixed state, they have versions, they evolve. Design systems ensure experience consistency and quality for users while:

  • manifesting the brand, product and experience principles
  • supporting the development of products, utilities and toolkits

The Redbelly Blocks Design System documents rules and guidelines, giving examples of acceptable and unacceptable uses of a variety of different atomic elements. The system provides a variety of elements and flexibility to create new components and flows efficiently, but also ensure Redbelly digital experiences and product design concepts innately adhere to the guiding principles of Redbelly product design.

The design system extended to UX Writing rules, including guidelines which cover everything from addressing users, to displaying time and alternative text rules and form micro-copy are also documented.


Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.

Diagram demonstrating how the atomic design system framework works.

Building from the visual identity

The design system needed to be built upon a very lean visual style guide, mostly used to create corporate documents and marketing comms.

Pages from the Redbelly brand style guide

Documenting the design system

Design systems ensure scalability of design work but must be made to scale. Documenting the rules and guidelines was important to allow designers and developers to reference and adhere to the requirements of the interface elements as well as understand the rationale behind them. The implementation via Sketch Libraries and Symbols ensured the efficiency of its use across teams and update management of its elements.


Redbelly experiences are respectful and overt. The expanded colour palette ensures accessible contrast can be applied between text and backgrounds, call to actions and other important feedback, alerts and notifiers. The palette also provides alternative colour variables which can apply when user preferences are set to light or dark modes.

Redbelly Blocks colour palette Redbelly Blocks colour palette


Redbelly experiences are overt and respectful. By using the font Readex Pro—which applies the Shaver-Troup Individually Optimal Text Formation Factors—we ensure copy is accessible to a broad range of readers. Designed by Thomas Jockin and Nadine Chahine, Readex Pro expands the Lexend type family (originally designed by Bonnie Shaver-Troup in 2001) which demonstrated immediate improvements in reading fluency among dyslexic readers when reading compared with other typefaces. Readex Pro brings the same accessibility from the Latin character set to Arabic script, which was added by Nadine Chanine in July of 2021.

Redbelly Blocks typography examples Redbelly Blocks type styles values


Redbelly experiences are overt and durable. The Ionicons “Sharp” library is a rich resource of iconography which evokes these themes with thick sharp lines and solid fills.

Redbelly Blocks icon examples Redbelly Blocks icon examples


Redbelly experiences are overt and facilitatory. They follow conventional navigation and selection paradigms with descriptions and iconography to boost comprehension.

Redbelly Blocks navigation module Redbelly Blocks navigation module pattern

Inputs and notifiers

Redbelly experiences are overt and facilitatory. They follow familiar input mechanisms with validation to offer users guidance, feedback and understanding.

Redbelly Blocks form fields and alerts Redbelly Blocks form fields and alerts


Redbelly experiences are durable and integrated. Loading animations and other indicators provide feedback to reassure users the system is working and things are happening to fulfil their needs.

Redbelly Blocks feedback animations Redbelly Blocks feedback animations

UX Writing

Redbelly experiences are overt and facilitatory. Effective copywriting provides the best means for communicating in a way that provides clarity of instruction and transparency of information to users, thus limiting misunderstanding and mistakes.

Redbelly Blocks UX writing documentation Redbelly Blocks UX writing documentation

Aligning UX copy to design principles

User experience writing supports user journeys. Our goal isn't for user to read our software, it is to assist them complete their goals. Copywriting is therefore not a seperate considering from the overall design, and as with any interface element, should work in accordance with the product design principles.


Redbelly Network bridges real-world assets with on-chain counterparts. To ensure on and off chain connection is maintained, terminology should remained consistant with the taxonomy users are familiar with in the real-world of finance. Any Web3 concepts that don't have a real-world equivalent phrase, should be defined for the user.


Copy should assist users complete their taks with a focus on communicating the essentials. Therefore, Redbelly experiences make things evident; starting with a need and offering an applicaple path toward the outcome. When writing copy, as much as possible, we aim to be direct, succinct, accurate and informative as we provide relevant options, prompts and calls to action. Thereby, we ensure users are guided toward the completion of intended tasks.


Redbelly experiences provide confirmation for actions taken, explain unexpected happenings, and prompt users to identify or resolves errors and warnings. For example, if a user encounters a 404 error, we might say, "Sorry, it seems that the page no longer exists. Visit our homepage." Rather than, "Error: 404".


At Redbelly, we want to enable users by offering various journeys which suit their needs while we avoid misunderstanding or surprise. There, we provide distinct definitions for any options we offer, as well as relay their conditions.


Redbelly interfaces are used by a diverse user base, therefore, we keep language as simple as possible, and retain consistent terminology. When addressing users, we do so without making assumptions in relation to their profile, needs, or circumstances.