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.

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.

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”

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.

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.