Start Designing
The DHL Design Library provides teams with the comprehensive DHL Design Kit and Introduction Guides to quickly create prototypes, ensure accessible experiences, and generate documentation.
Design Kit
Our Design Kit consists of four Figma library files that help you initiate various design processes:
Design tokens are a crucial element of any design system, as they help establish a baseline and provide context for different elements within a user interface. The Brand Tokens library includes a core set of primitive/base design tokens aligned to the Brand Hub, covering colors, gradients and spacing. It also includes a basic set of typography tokens that are used on the DUIL. Use these tokens as basis for semantic tokens in your project libraries to ensure consistency, accessibility, and flexibility across all of our products and platforms.
The Design System Helpers is a collection of supporting components that assist in annotating and documenting your designs. These helpers are intended to enhance collaboration and improve the handover experience across teams and capabilities.
DHL Icons is a uniform icon set designed for interface design and other applications to enhance consistency and efficiency.
The library comprises a full set of brand-approved icons, which are also available on the Brand Hub.
The DHL User Interface Library comprises four sets of UI components: Logo, Action, Form, and Navigation, aimed at ensuring consistent user interface experiences across all products and applications. Additionally, you can find guidelines on using Typography and Spacing in the library documentation.
- Start by enabling the library in your project file.
- Next, navigate to the Asset panel and locate the desired component.
- Drag the component from the asset panel onto the frame to insert it. If the component includes variants, you'll find fields below the component name in the right sidebar to configure its properties and values.
- For additional information and guidelines on using the components, refer to the associated documentation for each component or library.
Introduction Guides
Use the Introduction Guides to easily set up your project and library files, ensuring a consistent structure for all DHL projects. Choose between two introduction guides based on your project needs:
- Project Introduction Guide.
- Library Introduction Guide.
- Start by duplicating the introduction guide and moving it into your project folder.
- Next, review the file and follow the guidelines and suggestions for workflows and handover.
- Feel free to customize the file according to your project requirements.