0.2.4 • Public • Published


☁️ Nimbus Design Tokens

📚 Documentation

Check out our documentation site for detailed guidelines and resources.

🚀 Installation

Install @tiendanube/design-tokens-nimbus using any package manager.

$ npm install @tiendanube/design-tokens-nimbus

// or

$ yarn add @tiendanube/design-tokens-nimbus

💻 Usage

You can import our generated tokens in a variety of formats, such as css, scss, js, swift and xml.


@import var("@tiendanube/design-tokens-nimbus/dist/css/variables.css");


@import "@tiendanube/design-tokens-nimbus/dist/scss/_variables";

🛠 Building tokens

You can add, remove or modify existing tokens by editing the json files inside the src/properties directory. Each category of tokens has it's own folder.

  ├─ 📁 src
  │  ├─ 📁 properties
  │  │  ├─ 📁 color
  │  │  │  ├─ 📄 color.json
Category Description
Breakpoint We use breakpoints to determine which screen sizes are relevant to make changes in the layout. With these tokens we can remain up to date with the most frequent device sizes.
Color Our color system has specific functions and are used to visually guide the user, provide hierarchy, communicate states and add depth to our interfaces.
Font  We use text styles to highlight information, provide titles for pages or blocks of content, featuring specific topics or text elements.
Motion We use motion values to generate micro-interactions and animate components when they have state changes or need to attract the user's attention.
Spacing We use spacers to separate elements both grouped or not, to create spacing between blocks of content, fields in a form or padding in buttons.

Once you finish making changes to our source tokens, you must generate a build to compile them into all different formats, by running our build command:

  $ yarn build

🔗 Useful links

🤝 Contributing

We encourage all ideas, suggestions and feedback. If you want to collaborate with us, start by reading our contribution guidelines.

Package Sidebar


npm i @tiendanube/design-tokens-nimbus

Weekly Downloads






Unpacked Size

78.2 kB

Total Files


Last publish


  • tiendanube
  • nimbus-design-system