← Back to work

Case study · Design system

A scalable foundation for Insights CoPilot

From fragmented UI to a unified system, the design system defined structure, consistency, and trust, enabling scale across ABI's AI ecosystem.

Product
Insights CoPilot, ABI
Year
2025
Scope
Foundations, components, theming
Team
Ritwik, Arjan, Fill
Collage of Insights CoPilot brand tiles in black and yellow, including the CoPilot mark, a dot grid, and the headline numbers 100 percent and 12 ha/H.
01

More than a component library

Insights CoPilot is an AI assistant for ABI. As it grew, its interface needed a shared backbone. The design system is that backbone: a foundation that unifies design and development while enabling growth at scale.

02

Why did we start building it?

As CoPilot grew in adoption, the product began to face the weight of scale. Small inconsistencies in design and interaction patterns started to multiply, creating friction for both users and teams.

UI

Inconsistent UI

Buttons, chatbars, and labels appeared differently across versions.

UX

Fragmented UX

Users struggled with trust due to mismatched visuals and flows.

Risk

Scalability risks

Every new feature risked adding more inconsistency without a shared system.

Delivery

Slowed delivery

Lack of standard components led to rework and longer handoffs.

03

Built on atomic design principles

The goal was not only to unify the look and feel but to create a system that designers and developers could both trust and scale with. By breaking the interface into clear building blocks, we established a foundation that was reusable, accessible, and consistent across every interaction in CoPilot.

Three cards. Atoms: colors, text, buttons, shown as two icon buttons. Molecules: input plus label and chatbar, shown as a select and a tag. Organisms: header or chat window, shown as the CoPilot sidebar.
The CoPilot mark in yellow, black, and white app icon variants beside a construction grid of the mark.
The CoPilot mark, constructed on a grid and applied across accent, dark, and light app icons.
04

The Design DNA

Smart foundations built to balance simplicity with depth. Effortless to use, robust enough to grow with the system. Colors, sizes, and fonts live in variables, so a single change flows through every component that uses it.

Variables panels listing component size properties for buttons, icon buttons and fields, beside a color table with dark and light mode values for the secondary yellow scale from 100 to 900.

A core setup that stays intuitive for designers yet adaptable for complex scenarios.

120+variables
30%faster iterations
Left: the lowercase letter a in Avantt, the system typeface, in weights Light, Regular, Semi-Bold and Bold. Right: a hand holding a phone showing the CoPilot mark on yellow.
05

Smart components

All components were built with customizable properties, making them easy to adapt, manage, and scale without creating clutter. Simple to tweak, powerful to use, and consistent across every screen.

Three yellow buttons in Large, Medium and Small sizes beside a Size variables control set to Large.
Size variables. Change the size of any component with one property.
A Search component's properties panel with Variant, State, leading icon and trailing icon toggles, next to the rounded search field in two states.
State management. Intuitive setup, easy to switch, simple to manage.
06

One system, two themes, zero extra effort

We extended the system to support light mode by tying it directly to our variable setup. Colors, text, and surfaces switch seamlessly without rebuilding components. This not only made theme switching effortless but also improved accessibility by giving users more choice and comfort in different environments.

A Color variable mode picker set to Light Mode over a dark graphic, with the CoPilot sidebar shown in light mode, expanded and collapsed.
07

Type scaled for clarity and consistency

We defined a type system that balances clarity with hierarchy. Scales, weights, and styles were set to make content easy to read, consistent across screens, and adaptable for both light and dark modes. This ensured communication in CoPilot feels professional, accessible, and effortless to follow.

Type scale in Avantt across four weights, Bold, Semi Bold, Regular and Light, from Display 40 down to Info 12.
Display 402.45em Display 362.25em Display 322em Heading 281.75em Title 241.5em Sub 201.25em Paragraph 181.12em Paragraph 161em Info 140.875em Info 120.75em
08

Numbers that tell the story

The design system became more than a library of components. It served as the backbone for how CoPilot scaled.

70+reusable componentsShipped across chat, dashboards, and insights
>90%adoption rateAcross pilot teams in the past 6 months
30%faster ideation cyclesFrom concept to prototype
150+screens standardizedUsing the design system library
09

What's next: CoPilot on mobile

With adoption strong on desktop, bringing CoPilot to mobile is the next step. The system is already equipped with responsive variables and scalable components, making the transition smoother. Mobile design is currently in progress, focused on adapting patterns for smaller screens while keeping the same consistency and clarity.

A phone resting on a concrete block showing the CoPilot mobile concept in yellow and black.
10

Meet the team

Behind the visuals and brand assets of Insights CoPilot is a small but focused team that shaped the system from idea to impact.

RitwikArjanFill
Next Project

See what else has been built

Back to all work →