Design Kit
Disclaimer Merck KGaA, Darmstadt, Germany and our licensors, vendors, agents, and/or our content providers retain ownership of all intellectual property rights of any kind related to the Liquid Design System and it’s visual / functional assets and the M Font including the website and services under www.emd.design (“Website”). All rights reserved to the copyright holders. Subject to the limitations set forth herein Merck grants to its partners, suppliers, agencies and other third parties working together with Merck delivering, supporting or facilitating digital products of Merck (“Partners” or “You”) the following license free-of-charge as long as such Partners have a current, non-expired and valid contractual relationship with Merck: You are granted a worldwide, non-exclusive, royalty-free, revocable and non-sublicensable license to use the Website, the Liquid Design System and it’s visual / functional assets and the M Font as stated on the Website and its functionalities and to reproduce, prepare derivative works, publicly display, publicly perform solely for performing your obligations under the contract with Merck. Notwithstanding the foregoing, for each of all sub-dependencies (which are listed as such in the package.json respectively the package-lock.json or yarn.lock files or in any other dependency lock file included in the library), the license of the author of the dependency applies. If you have used the Liquid Design System we are very interested in your outcomes and much appreciate if you would share them with us through our e-mail address: liquid@emdgroup.com
1. Download the Design Kit
By using the link above you can download the Liquid Design System Kit which contains the following items:
- Color Palette
- Liquid Colors.sketchpalette
- Color Palette Sketch Plugin
- Fonts
- Lato.zip
- MFonts2016.zip
- Illustrations
- Character.ai
- Illustration Scene.ai
- Liquid Design System
- Liquid Design System_Sketch.sketch
- Liquid Design System_Figma.fig
2. Install the Fonts
As we exclusively use the fonts Lato & M Font for digital experiences at Merck KGaA, Darmstadt, Germany, it is necessary to have these fonts installed when working with the design kit. The M Typeface is available in Latin, Greek, Arabic, Cyrillic alphabets.
The fonts are available with the Liquid Design System Kit.
How to Install the Font
Mac OS Double click on the downloaded .zip file.
Within the Lato folder, select all .ttf files and double click on them.
Click on install.
Windows Right click on the downloaded .zip file and select Extract to Lato.
Within the Lato folder, select all .ttf files and right click on them.
Click on install.
*You might require administration rights in order to install fonts on your computer.
3. Add Liquid Design System Library to your Sketch
You can use the Sketch File and open it regulary to preview all different components and get a feeling for the scope of Liquid, but primarily the sketch file is made to be used as sketch library. To use the file as intended make sure you have done the following steps:
- Open Sketch
- Navigate to Sketch Preferences
- Select Libraries
- Click on Add Library…
- Select the Liquid Design System Sketch file
Now you can use the system in every Sketch file you are working on. Please always make sure you’re not changing anything within the root Sketch file. If you find a bug, want to add something or have a change request just shoot us an email to liquid@emdgroup.com.
Check out the next section on how to use the library.
4. How to use Liquid Design Library & Color Pallettes
With Liquid Design Library you can basically just drag & drop user interface elements into your design. All Sketch symbols are highly editable — which means that changing the colors etc. is theoretically possible but not recommended.
The entire library is built on the atomic design approach thus inside the structure of elements relies on the same approach.
To bring the Liquid color palette into a different file, use Andrew Fiorillo’s Sketch Palettes plugin to import Liquid Colors.sketchpalette into your Sketch document.
Design with Sketch or Figma
Sketch is the industry standard for designing digital interfaces. We believe in its speed and the efficiency of workflows that integrate Sketch. During our past work we have gained only positive experiences by following this approach.
Figma allows for great collaborative work through its browser-based nature and being accessible to multiple users at the same time. Though it might not entirely be up to speed with its competitors, new functionalities are permanently integrated and it’s already possible to make great designs with it.
Why we’re using Figma
If you have no access to a Mac computer and Sketch, you can use Figma instead. Figma is a free to start browser-based design tool, working on multiple platforms. We migrated the entire Sketch library to Figma so you are able to import the file from the Design Kit into Figma or access the preview link and have a look through it (use the three lined icon to see the different pages)!
