Rookery Design System
A single source of truth for product design at
Rookery Design System Hero
back home icon
What is a design system?
As described by the Neilson Norman Group...
“A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.”
Opening quotationClosing quotation
Why does need a design system?
Upward trend icon is a young company in a phase of rapid growth and product expansion.
Naturally, as a company begins to grow, the fundamental need for a robust product becomes ever more important. This is especially true if your business consists of a system of products that operate in multiple environments and on multiple platforms, as is the case for
How does benefit from a design system?
Image representing consistency
Ensure consistent product experience
Utilize a single source of truth to ensure the product experience always says "Raven" no matter where or how you use it.
Image representing closer designers and developers
Connect designers and developers
Tighten the workflow between designers and developers to improve project communication and handoff.
image representing establish standards
Establish standards to uphold product quality
Create standards that will guide and improve the product with every new expansion, whether it be new features or entirely new offerings.
image representing establishing a brand
Create corporate and product identity
Establish a unique and memorable identity that can be attached to all Raven products and customer experiences.
So what was the approach?
When determining how to build Raven’s design system, it was important to consider what their business is and what environments their products would live in. As a company focused on contextualized time, Raven's products are used primarily in 2 distinct types of environments.
image of corporate environment
The corporate environment (Tier 1)
Raven Flight™️ handles data visualizations and communicates contextualized time. This will be used primarily by plant managers and executives in office environments.
image of production line environment
The warehouse environment (Tier 2)
Raven Sense™️ collects data and assist manufacturing/shipping operators. This will be use primarily in warehouses that could be grimey, poorly lit, and where users may be wearing equipment when interactive with screens.
Understanding this, a 2 tiered design system structure felt appropriate. Tier 1 would host components and guidelines designed for the office environment, and this would be the “standard” collection of assets. Tier 2 would contain modified components and guidelines from tier 1. Modifications would aim to optimize product usability in the warehouse environment. This meant UIs with bigger interactive elements, higher contrast, and simplified interactions.
Flow chart of the Rookery design system structure
Atomic Design and Design Tokens
Implementing a semantic approach to atomic design principles
To keep everything consistent from the ground up, Rookery has implemented an atomic design approach. Every component is built from the bottom up, starting first with basic styles and combining them to build components that align with Raven’s look and feel.

To enhance design and developer communication, each “atom” is named based on a semantic naming convention to create a library of design tokens. With this in place, each specified style communicates a hint of purpose and utility to the reader.

For example, “accent-feedback-warning-50” is much more understandable and descriptive in its purpose than “#CCBB5C”
Example of design tokens applied to a dropdown selection component
What is the breadth of Rookery?
The Rookery Design System currently breaks down into 6 categories.
Branding Guidelines
Logo Styling & Best Practices
Branding Colour Palette
Branding Typography
Colour Library
Light Theme
Dark Theme
Product Typography
Icon Library *currently relying on Google Material icon library
Guidance Documentation
Handoff Procedures
Component Library
Check Box
Menu Item
Text Input
Tool Tip
Pattern Library
Date Picker
Process Tiles
Navigation Bars
Time Picker
Dashboard Guide
Data Visualization
Elevation Guide
Utility Library
Figma Thumbnails
Design Tokens
User Flow Nodes
Doc. Templates
Colour Collections
Sticky Notes
Device Frames
I.H. Nodes
Rookery’s colour can be broken down into branding, neutral, and semantic palettes; each section serves a unique set of needs and requirements. Within each palette, colours are organized up by grade. Using a grading system allows different palettes to share the same sets of rules (for example default, hover, and active states are always one increment up the palette).

Collectively, the grouped palettes make up the theme. The Rookery colour library contains both a light and dark theme, each following the structure and sets of rules.
Light theme of the colour library
Semantic colour variations
Where necessary, components can be styled in accordance with the semantic palettes to provide feedback to the user. Examples of such component styling can be seen below.
Example of components in semantic colour palette
Dark theme of the colour library
Semantic colour variations
Where necessary, components can be styled in accordance with the semantic palettes to provide feedback to the user. Examples of such component styling can be seen below.
Example of components in dark theme semantic colour palette
Environmentally optimized typography
Raven’s typography system also utilizes the two-tier structure for environmental optimization. Both sets were built using the same scaling, naming, and sizing rules but the warehouse optimized collection includes a “Display” set of styles since much bigger typography is needed on the Sense™️ application.

All styles use a 1.4 - 1.6 size to line-height ratio. Both systems use an attribute naming convention rather than a role for flexibility. All body and heading sets increase size in equal increments.
How Documentation Works
For each component/pattern in the design system, a full page is dedicated to the documentation. For non-component/pattern assets such as branding guidelines, colour themes, or elevation guides, each of these is addressed in its own single document.
Documenation can inlude:
  • Purpose
  • Proper usage
  • Demo component (when applicable)
  • Component anatomy (when applicable)
  • Best practice examples
  • Full collection of component variants (when applicable)
For each aspect of the design system, I aimed to include fundamental information that may guide the designer but leave room for creativity.
Example of a component documentation sheet
Tracking Updates
Each Rookery page in our Figma files has a Changelog. Its purpose is to track any and all updates that are made to the system document.
Why is this important?
In the future, as we move more components, patterns, and styles into the codebase, having this changelog will help to ensure designers and developers are always in sync and working with the same set of tools.
Example of a component changelog
What's the current status of Rookery?
At this time, Rookery is most beneficial to’s product designers, as many of the Figma components have not been transferred into reusable code just yet. The reality is, time is limited and we will always need more to get everything done.

That being said, as the need arises, reusable components/patterns/styles are being created and added to the code base (in accordance with Rookery) as we deploy them into the product.

In the future, our goal will be to maintain both of these markers at around >95%.
Figma assets created
Reusable assets in codebase
Interactive playground
Feel free to give the interactive Figma components a try in this interface playground file! All components that have some sort of interactive element have been included.

Note: Figma prototypes can occasionally stop working when the product updates. Please bear with me as I keep this file up to date.
Viewing device is too narrow to view this piece of content
Uh oh!
Must be too narrow
In order to preserve the viewing experience on wider content, certain items can only be viewed when on a desktop.