Skip to main content

Getting Started with code | TOKENS

info

If utilizing a framework-specific package, there's no need for a separate installation.
The tokens package is inherently bundled as a dependency within the framework-specific offering.

Tokens​

The @dhl-official/tokens package is a framework agnostic package that can be used in any project.

It provides:

Install​

npm install @dhl-official/tokens

CSS​

You can import all of the CSS generated rules by importing the index.css file.

import "@dhl-official/tokens/index.css";

By including this file, basename.css, animation.css and font-face.css are included into your application too.
Additionally, CSS box-sizing rule is set to border-box and the html and body tags get the CSS font-family rule set to the value of the css variable --dui-font-family

@import "base.css";
@import "animations.css";
@import "font-face.css";

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  font-family: var(--dui-font-family);
}

CSS Variables​

If you only want to import the CSS variables, you can either import them all or import them individually.

// import ALL the CSS variables
import "@dhl-official/tokens/base.css";

animation​

To find the CSS variables name and their values for the colors, please refer to the Foundation | Animation Duration section.

// import only the animations @keyframes definitions
import "@dhl-official/tokens/animations.css";
// import only the CSS variables for the animation-duration definitions
import "@dhl-official/tokens/duration.css"

typography​

To find the CSS variables name and their values for the colors, please refer to the Foundation | Typography section

// import only the @font-face rules
import "@dhl-official/tokens/font-face.css";
// import only the CSS variables for the typography definitions
import "@dhl-official/tokens/typography.css"
// import only the CSS variables for the font-family definitions
import "@dhl-official/tokens/font-family.css"
// import only the CSS variables for the font-size definitions
import "@dhl-official/tokens/font-size.css"
// import only the CSS variables for the font-weight definitions
import "@dhl-official/tokens/font-weight.css"
// import only the CSS variables for the letter-spacing definitions
import "@dhl-official/tokens/letter-spacing.css"
// import only the CSS variables for the letter-height definitions
import "@dhl-official/tokens/line-height.css"

colors​

To find the CSS variables name and their values for the colors, please refer to the Foundation | Colors section.

// import only the CSS variables for the color black definitions
import "@dhl-official/tokens/black.css"
// import only the CSS variables for the color gray definitions
import "@dhl-official/tokens/gray.css"
// import only the CSS variables for the color green definitions
import "@dhl-official/tokens/green.css"
// import only the CSS variables for the color red definitions
import "@dhl-official/tokens/red.css"
// import only the CSS variables for the color white definitions
import "@dhl-official/tokens/white.css"
// import only the CSS variables for the color yellow definitions
import "@dhl-official/tokens/yellow.css"

gradients​

To find the CSS variables name and their values for the colors, please refer to the Foundation | Gradient section.

// import only the CSS variables for the gradient definitions
import "@dhl-official/tokens/gradient.css"

radious​

To find the CSS variables name and their values for the colors, please refer to the Foundation | Radius section.

// import only the CSS variables for the radius definitions
import "@dhl-official/tokens/radius.css"

border-width​

To find the CSS variables name and their values for the colors, please refer to the Foundation | border-width section.

// import only the CSS variables for the border-width definitions
import "@dhl-official/tokens/border-width.css"

shadow​

To find the CSS variables name and their values for the colors, please refer to the Foundation | Shadow section.

// import only the CSS variables for the shadow definitions
import "@dhl-official/tokens/shadow.css"

metric system​

To find the CSS variables name and their values for the colors, please refer to the Foundation | Metric System section.

// import only the CSS variables for the space definitions
import "@dhl-official/tokens/space.css"

Fonts​

import "@dhl-official/tokens/fonts/Delivery_W_Bd.woff2"
import "@dhl-official/tokens/fonts/Delivery_W_BdIt.woff2"
import "@dhl-official/tokens/fonts/Delivery_W_CdBlk.woff2"
import "@dhl-official/tokens/fonts/Delivery_W_CdLt.woff2"
import "@dhl-official/tokens/fonts/Delivery_W_It.woff2"
import "@dhl-official/tokens/fonts/Delivery_W_Lt.woff2"
import "@dhl-official/tokens/fonts/Delivery_W_LtIt.woff2"
import "@dhl-official/tokens/fonts/Delivery_W_Rg.woff2"

The Delivery fonts can be downloaded from the DHL Brand Hub.

Currently, the DUIL does not deliver, nor officially support non-latin fonts. If you opt to use non-latin fonts, do so at your own risk - available on BrandHub.