Tokens | JLL Design System

Design Tokens

JLL Design tokens are the variables of our designs, they are the named entities that store visual design attributes of the JLL Design System. This should be used in place of all the hard-coded values to maintain the scalability and consistent visual system in all the JLL Applications.

The design tokens are created in JSON Format and converted into CSS, SCSS and JavaScript Objects with Style Dictionary.

JLL Design System components are built using JLL Design Tokens. Other projects can also use JLL Design Tokens to adopt JLL Design System.

Installation

The Design tokens are available as an npm package, through JLL Azure Artifacts under JLL.Capability.DesignSystem feed.

Once you have configured your local .npmrc file, you should be able to install the package.

npm install @jll/jll.capability.designsystem.foundations

Usage

CSS

Design Tokens are available as CSS variables.


@import url('@jll/jll.capability.designsystem.foundations/tokens/variables.css');

a {
  color: var(--jll-ds-color-text-accent-default);
}

SCSS

Design Tokens are also available as SCSS variables which can be directly used in SCSS files.


import '~@jll/jll.capability.designsystem.foundations/tokens/variables.scss';

a {
    color: $jll-ds-color-text-accent-default;
}

JavaScript

Design Tokens are available as Javascript Objects, which can be used in JSX (CSS in JS).


import { radii as jllRadii, color as jllColor } from "@jll/jll.capability.designsystem.foundations/tokens/js/variable";

...

<div className="card" style={{ borderRadius: jllRadii.light, backgroundColor: jllColor.surface.baseDefault }}>
  <div className="row">
    <div className="col">
      Jll Application
    </div>
  </div>
</div>

Design Token Package

The design token package contains tokens (style variables) in CSS, SCSS and JS format.

The color, typography, border-radius, spacing, breakpoints, and elevation (box-shadow) tokens are available in CSS, SCSS and JS formats which are grouped into separate files and folders.

Color

Colors are grouped into surface, text, stroke, icon, tonal, and interaction color categories. There are base, accent, warning, danger, success and info variants in each category.

CSS


@import url('@jll/jll.capability.designsystem.foundations/tokens/css/color.css');
a {
  color: var(--jll-ds-color-text-accent-default);
}

SCSS


@import '~@jll/jll.capability.designsystem.foundations/tokens/scss/color.scss';

a {
  color: $jll-ds-color-text-accent-default;
}

JS


import { color as jllColor } from "@jll/jll.capability.designsystem.foundations/tokens/js/variable";

...

<div className="card" style={{ backgroundColor: jllColor.surface.baseDefault }}>
  <h3>
    Jll Application
  </h3>
</div>

Fonts

The JLL Design System uses "Source Sans Pro". To embed a font, copy the code into your root css file.


@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');

or copy the code into the <head> of your html


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">