# @infineon/design-system-tokens

> Infineon design system token definitions

Latest version **7.0.0** (published 2026-04-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @infineon/design-system-tokens
pnpm add @infineon/design-system-tokens
yarn add @infineon/design-system-tokens
bun add @infineon/design-system-tokens
```

## Health

**Score 45/100 (D)** — status: active.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 7.0.0 |
| Published | 2026-04-15 |
| First published | 2022-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 709.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Infineon Technologies AG |
| Maintainers | hboifx, mathewre, turbanp, tishoyanchev, pfafffabian-ifx |

## Links

- npm: https://www.npmjs.com/package/@infineon/design-system-tokens
- Repository: https://github.com/Infineon/Infineon-Design-System-Tokens
- Homepage: https://github.com/Infineon/Infineon-Design-System-Tokens#readme
- Issues: https://github.com/Infineon/Infineon-Design-System-Tokens/issues
- npm.io page: https://npm.io/package/@infineon/design-system-tokens

## Dependencies (2)

- [sass](https://npm.io/package/sass.md) ^1.98.0
- [@tokens-studio/sd-transforms](https://npm.io/package/@tokens-studio/sd-transforms.md) ^2.0.3

## Recent versions

- 7.0.0 (latest) — 2026-04-15
- 6.0.1--canary.53.b5b272c4954c227fb9e76838cc8006522eea7df5.0 (canary) — 2026-04-15
- 6.0.0 — 2026-02-24
- 5.0.1--canary.52.2da7fdbc170fc95805f73a8cf497da51e0e4cffc.0 — 2026-02-18
- 5.0.0 — 2025-04-03
- 4.0.1--canary.50.238fdcf73299d736aad86367df74aaa75530376f.0 — 2025-04-03
- 4.0.1--canary.48.6828ff6f102e4e48ad1d55bb9418a8525882d35c.0 — 2024-12-18
- 4.0.1--canary.48.c6b9a1ba87586b7e9725fc13af02a3f4c2f8cb0e.0 — 2024-12-18
- 4.0.0 — 2024-12-04
- 3.3.5--canary.46.1e65e54cb95c3d2681df1943d333357f67540e1c.0 — 2024-12-04
- 3.3.4 — 2024-11-27
- 3.3.4--canary.44.ad3fc0b4ef2b9b24390ffbb06ea46d10cbb26252.0 — 2024-11-27
- 3.3.4--canary.42.488316dcc5a68157eeaaed8dd961732a82900b9e.0 — 2024-10-25
- 3.3.4--canary.42.47931c10fda5e2d8075605860c2ed9138347a330.0 — 2024-10-25
- 3.3.4--canary.42.6cebb58ab871f94d5efc33eca7ca4192e1ac68fa.0 — 2024-10-25
- … 34 more at https://npm.io/package/@infineon/design-system-tokens/versions

## README

# Infineon Design System Tokens
<!-- ABOUT THE PROJECT -->
## About The Project

As part of the Infineon brand guidelines, the Infineon Digital Design System supports designers, developers and project managers to build user interfaces faster and better – with the ultimate goal to create a coherent and optimal user journey across all internal and external Infineon digital touchpoints.

This repository contains our design Tokens - so called Atoms.

These tokens are transformed into scss and are available at NPM @infineon/design-system-tokens

## Requirements

- [Node](https://nodejs.org/en/) >= v14 – if you have [nvm](https://github.com/creationix/nvm#node-version-manager---) installed, you can just run `nvm use` to select the right node version.
- [Yarn](https://classic.yarnpkg.com/en/) >= `1.22.10` or [npm](https://www.npmjs.com/) >= `6.14.13`

## Usage

Add this repository to your dependencies in `package.json`, in your terminal:
```bash
npm install --save @infineon/design-system-tokens
```

```bash
yarn add @infineon/design-system-tokens
```

Now you can import the assets you need to consume. This currently includes:
```bash
├── fonts
│   └── source-sans-3
│       ├── SourceSans3-It.ttf.woff
│       ├── SourceSans3-It.ttf.woff2
│       ├── SourceSans3-Regular.ttf.woff
│       ├── SourceSans3-Regular.ttf.woff2
│       ├── SourceSans3-Semibold.ttf.woff
│       └── SourceSans3-Semibold.ttf.woff2
├── _fonts.scss
└── _tokens.scss
```

Include / import `fonts.scss` to get the correct font definitions. You'll additionally have to copy the fonts assets (`fonts/`) themselves to your publicly available root folder (often times it's called `static/` or `public/`).

An import could, depending on your local setup, for example look like this:

*SCSS*:
```scss
@import "./node_modules/@infineon/design-system-tokens/dist/fonts.scss";
```

To use the current Design Tokens in SASS import them in your project (in your entry point for SASS, commonly something like `src/index.scss`):

*SCSS*:
```scss
@import "./node_modules/@infineon/design-system-tokens/dist/tokens.scss";
```

## Local Development

### Installation

This project itself is developed with `yarn`.  
Install all needed dependencies with:

```bash
yarn install
```

### Bundle

Generate a bundle that can be published on `npm`, adds result in `dist/` folder: 

```bash
yarn bundle
```

---
_Source: https://npm.io/package/@infineon/design-system-tokens · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._