Poutine Tokens

Poutine tokens contains all of the design tokens for building interfaces at Gr4vy. These are platform agnostic and exported to common formats, e.g. SCSS variables, CSS, JSON and ES6.

Get Started

Install Dependencies

yarn add @gr4vy/poutine-tokens

Import (ES6)

import { ColorPositive60 } from '@gr4vy/poutine-tokens/js/tokens'

console.log(`${ColorPositive60} sparks joy 🎉`)

Import (JSON)

import tokens from '@gr4vy/poutine-tokens/json/tokens.json'

console.log(`${tokens.color.positive[80]} sparks joy 🎉`)

Import (SCSS)

@use '@gr4vy/poutine-tokens/scss/_variables.scss' as *;

.error {
  background-color: $color-negative-60;
}