@rapharacing/design-tokens

Rapha Design Tokens

Breakpoints, Colors and Typography for all platforms

JavaScript · JSON · SCSS

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development – Salesforce UX

Installation

Using npm:

npm i @rapharacing/design-tokens --save

Using Yarn:

yarn add @rapharacing/design-tokens

How to use

JavaScript

If the project supports ECMAScript Modules, you can use the import syntax

import * as tokens from "@rapharacing/design-tokens";

console.log(tokens.colorPink); // hsl(343, 88%, 71%)

otherwise

const tokens = require('@rapharacing/design-tokens');

console.log(tokens.colorPink); // hsl(343, 88%, 71%)

In JSON, design token names are formatted in kebab-case.

const tokens = require('@rapharacing/design-tokens/dist/index.json');

console.log(tokens['color-pink']); // hsl(343, 88%, 71%)

Sass

Sass variables are formatted in kebab-case.

// Using variables
@import '~@rapharacing/design-tokens/dist/index';

a {
  color: $color-pink;
}

License

Design tokens are freely distributable under the terms of the MIT license.