Meet Liquid –
The design system

Use Liquid to create and develop digital products to make science faster, treatments more personalized, and everyday work more enjoyable.

Scroll down
Liquid Design System used in mobile app
Liquid Design System used in mobile app

What this is all about

Introducing a design system to a 350 years old company.

Our pursuit is progress for people everywhere. That’s why we take a closer look at things, ask questions and think ahead. We’ve been around for more than 350 years, but we never stopped working on the future for all of us. With the growing impact of digital products on everbody’s lives, the need for a unified and high quality experience language was not only evident – it was compelling.

Learn more about the Purpose of Liquid

System principles

Leave space
for the brand.

As you know, the brand of our company is arousing a lot of attention. Whenever there is not much content available, give that space to the brand.

Learn more about our Branding

+ 1.500 UI Assets

42
Elements

Similar to atoms, our elements are the smallest possible bit of a user interface. They can be used alone or in groups.

18
Components

Components are semantic groups of multiple elements and mostly provide context as well as interactivity.

14
Modules

The combination of multiple components is called a module. The is the most complex form of a user interface feature.

9
Templates

Templates or pages combine all smaller elements and can be used for different purposes of content communication.

Liquid Design System

What’s in the pack

Colour defines hierarchies.

Color is an essential for every brand, but especially for ours. It is important to follow the guides for good color combinations that enhance the user experience. In order to successfully guide the user through an interface, colors can be helpful to distinguish between the different content levels.

Learn more about Colours
A designer and a developer working side by side
Swipe left to see the Design section or right to see the Develop section.

Design

Design

Figma

  • Browser-based
  • Collaborative
  • Windows-friendly

Sketch

  • High-performance
  • State-of-the-art
  • macOS only
Get the Design Kit

Develop

Develop

React JS

  • Web applications
  • JavaScript
  • Open Source

React Native

  • Native mobile apps
  • JavaScript
  • Open Source
Get the Dev Kit
Liquid Design System on tabletLiquid Design System on desktopLiquid Design System on mobile device

Get in touch

Are you using liquid already or are you about to do so?

We are very curious what you are creating with the Liquid Design System! Whenever you launched a digital product or the designs are finished, we would be more than happy to take a look at them. Sharing is caring!️

Shoot us a message

USER EXPERIENCE STRATEGY & DESIGNat Merck Digital

MEET THE TEAM BEHIND Liquid

After developing several digital products & services for Merck we’ve conducted a comprehensive collections of UI components that we want to spread across the company.

Check Our Open Positions

Get started now

Explore the full kit here

Start Creating
Illustration of a dancing man
Illustration of a dancing woman