Project Background

Product Design is a relatively new practice at DLR Group. What started as looping a web designer into a few billable projects evolved into a tech savvy CIO saying, “why would be buy it when we can build it?” The first few years of the design and development were a bit like the Wild Wild West – ideas were had and products were hatched, and most of the time there was little to no consistency or communication between teams producing these applications.

The Client

A typical DLR Group office consists of architects, engineers, interior designers, marketers, financial admin, legal council, and a plethora of other office folk. One key thing that is important to all these people no matter their discipline – TIME, another is the PRIDE they have in the overall DLR Group brand. When the software they are using to get their job done is compromising both of those things, the winds of change start to slide in.

The Problem

The first part of the challenge was to prove to leadership why we need a design system in the first place. Once we had our key stakeholders on board, we not only designed the components, but created the strategy, wrote guidelines for usage and accessibility, as well as collaborated on the creation of the system in code.

The Approach

Internal Software Audit

While it was extremely clear to us that we needed a design system, it was time to prove it to company leadership. Our first step was to step back and take a look at all the software DLR Group had built and examine the inconsistencies between them.

Persona Identification

Knowing that the design system will need to be for everyone at the firm (over 1,700 people) we tried to distill our audience into four distinct persona types.

Reframing the Problem

RACI Matrix

The first step in getting started was engaging with the right people at the right points in the process. My team employed a RACI matrix to document who we should engage and when.

North Stars + Deliverables

We conducted a collaborative workshop with product management and engineering to define the system’s north stars, key deliverables, and shared success criteria.

Brand Alignment

We began by defining guiding principles for the design system, drawing from DLR Group’s established brand voice and tone to create a clear, strategic foundation for product design.

Iterate & Synthesize

We partnered closely with teams across brand, engineering, and marketing to refine a set of principles that not only guided the system’s foundation but also reflected DLR Group’s design culture and brand identity.

Final Design Principles

After finalizing the principles, we created a visual framework outlining all ten with concise descriptions to help socialize and embed them within the product design team.

Turning Words Into Visuals

With the principles in place, our team developed mood boards referencing existing products to define a cohesive visual direction and prepare for component creation.

Evolution from Exercise

To translate these ideas into practice, I iterated on one of our core enterprise applications—reworking a basic Bootstrap layout to apply the new design principles and refine a clear visual direction.

Styles + Foundations

Now that we had a basic roadmap for our system, the first step in creating elements began with defining styles such as colors, typography, sizing, spacing, shadows, corner radii, and icons.

Colors

Typography

Sizing, Spacing, Shadows, & Radius

Icons

Individual Components

The next step was plugging in all of those styles to create base components like buttons, avatars, selectable elements, form components, search bars, and more that would be used across all of our products.

Avatars

Buttons

Checkboxes & Radio Buttons

Date Picker

Inputs

Search

Segmented Controller

Tags

Molecular Components

Once the base components were established we could use them to start to build out more complex components such as cards, dialogues, modals, navigation bars, panels, and more.

Cards

Dialogues

Modals

Navigation Bars

Panels

Toasts

Data Visualization

Because a handful of our in-house products are data related or visualize some sort of metrics, data visualization components were next on the list. We started small with area charts, bar charts, line charts, and donut charts, but eventually fleshed out tree maps, heat maps, and scatterplots.

Area Charts

Bar Charts

Donut Charts

Line Charts

Variables

After several discussions with engineering around developing a tokenized brand package, we aligned on using Figma Variables as the foundation for our design tokens. Our approach began with creating a base palette of Tier 1 variables for color, typography, opacity, spacing, and sizing. From there, we defined semantic Tier 2 variables—derived from Tier 1—that were systematically integrated into our styles, components, and product pages across both the design system and individual applications.

Tier 1

Color, opacity, spacing, sizing, and typography.

Tier 2

Color across backgrounds, text, and interface elements – including dark mode; typographic hierarchy (H1–H6); gap and padding variables, levels for shadows, corner radii values, component height and width sizes, and more.

Board of Directors Election

The Board of Directors voting app became one of the first opportunities to apply the new design system in a live environment. Its focused scope and straightforward user experience made it an ideal proving ground—allowing us to validate components, refine tokens, and demonstrate how consistency could streamline even the simplest internal tools.

Stock Exchange 

The employee stock platform provided another strong opportunity to extend the design system’s reach. With its annual use and clear, high-stakes purpose, the platform underscored the importance of accessible, trustworthy design—proving the system could scale to support critical firm-wide interactions.

Reflection

Creating the DLR Group Design System revealed the power of consistency and shared language. With six+ enterprise products all inconsistent in interface and behavior, teams were wasting time reinventing patterns and producing fragmented experiences. Building a system involved not just designing reusable components, but establishing principles, accessibility standards, and workflows that could scale. Working with developers, designers, and leadership ensured the system became more than a library—it became a shared toolkit that improved efficiency, quality, and creativity across the enterprise.

Key Takeaway

The design system reinforced that consistency is a force multiplier. Shared standards and reusable patterns accelerate delivery, reduce errors, and free teams to focus on solving higher-level problems, unlocking both efficiency and innovation.