Bruker

Bruker Design System

Aligning AEM and Figma around a leaner design system and a clearer search experience.

Industry: Scientific Technology
Discipline: Design systems and UX
Contribution: UX refinement · Design-system consolidation · AEM and Figma alignment · Typography and iconography

Bruker blue design-system cover connecting tokens, components and guidance

The situation

Bruker's website, AEM style guides and Figma documents had drifted apart. Hundreds of styles, inconsistent fonts and accumulated fixes created visible inconsistencies and too many assets to manage. The challenge was to bring the design system and the user experience back into alignment.

System consolidation

The cleanup became a better experience.

The work connected two needs: a coherent interface for users and a manageable system for the people building it. Typography, icons and components became shared foundations across AEM and Figma, so each design decision could carry through to the website.

AEM and Figma alignment
Controlled typography
Reusable components
Icons and pictograms
Search and filtering

Typography

A smaller system.
A stronger hierarchy.

More than a hundred accumulated type styles became a controlled set of roles. Shared variables connect that hierarchy across screen sizes.

100+type styles consolidated
into a controlled set

Bruker typography specification defining display, heading, body, label and caption roles — Typography with defined roles, weights and hierarchyView detail

Figma typography variables with coordinated font sizes for large, medium and small screens — Shared variables keep typography coordinated across screen sizesView detail

Visual language

Simple symbols.
More ways to explain.

A consistent icon family handles everyday actions. Pictograms extend the same language into scientific subjects and more complex stories.

Bruker icon library with consistent line icons, color states and configurable Figma instances — One icon language with reusable statesView detail

Bruker pictogram family including magnets, microscopes and battery technology in coordinated visual treatments — Pictograms build richer stories from simple symbolsView detail

Search experience

Find. Refine. Explore.

Move from discovery to a focused selection. Browse conferences and trade shows, keep upcoming and on-demand events within reach, then refine the results through a dedicated filter panel.

View the original screens

The move

We refined the UX while cleaning up and synchronizing AEM components with their Figma designs. More than a hundred type styles were consolidated into a small, controlled set of roles, supported by shared typography variables. We rebuilt the component language, unified the iconography and developed pictograms that could explain more complex subjects using simple visual building blocks. A redesigned search journey brought those foundations into a more direct way to discover and filter content.

Fewer styles. Clearer choices. One shared system.

Next projectŠkoda Connected Experience