# @kwtv/tokens > KWTV design tokens. Colour, type, space, shape and motion. Light and dark. Latest version **0.3.0** (published 2026-09-23) · UNLICENSED license · 0 weekly downloads ## Install ```sh npm install @kwtv/tokens pnpm add @kwtv/tokens yarn add @kwtv/tokens bun add @kwtv/tokens ``` ## Health **Score 55/100 (C)** — status: active. Positive: no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types; no esm support; pre 1.0. ## Facts | | | |---|---| | Version | 0.3.0 | | Published | 2026-09-23 | | First published | 2026-09-16 | | Weekly downloads | 0 | | License | UNLICENSED | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | nickbevers | ## Links - npm: https://www.npmjs.com/package/@kwtv/tokens - Repository: https://github.com/KWTV-willebroek/design-system - Homepage: https://github.com/KWTV-willebroek/design-system#readme - Issues: https://github.com/KWTV-willebroek/design-system/issues - npm.io page: https://npm.io/package/@kwtv/tokens ## Recent versions - 0.3.0 (latest) — 2026-09-23 - 0.2.0 — 2026-09-23 - 0.1.3 — 2026-09-19 - 0.1.2 — 2026-09-19 - 0.1.1 — 2026-09-16 - 0.1.0 — 2026-09-16 ## README # @kwtv/tokens KWTV design tokens: colour, typography, spacing, shape and motion, with light and dark themes. CSS, SCSS and JSON work independently of any framework. ## Install ```bash npm install @kwtv/tokens ``` Import the CSS once in your app's root layout: ```astro --- import "@kwtv/tokens/tokens.css"; --- ``` The default theme follows the operating system. Set `data-theme="light"` or `data-theme="dark"` on the root element to choose a theme explicitly. ## Exports | Import | Contents | | ---------------------------- | ------------------------------------------------------------------ | | `@kwtv/tokens/tokens.css` | CSS custom properties and theme rules. | | `@kwtv/tokens/utilities.css` | Optional utility classes. Load after the tokens. | | `@kwtv/tokens/tokens.json` | Token data for tools and applications. | | `@kwtv/tokens/tokens.scss` | SCSS variables. | | `@kwtv/tokens` | Typed token exports as TypeScript source, supported by Astro/Vite. | The root TypeScript entry requires a toolchain that processes TypeScript dependencies. The CSS, SCSS and JSON entries do not require it. ```ts import { palette } from "@kwtv/tokens"; ``` CSS modules can compose the utility classes: ```css .button { composes: bg-primary text-primary-fg p-4 radius-md from "@kwtv/tokens/utilities.css"; } ``` Prefer semantic roles over raw palette values when a colour should follow the current theme. ## Development Token files are generated in the [design-system repository](https://github.com/KWTV-willebroek/design-system). Edit `internal/scripts/build-tokens.py`, then run: ```bash npm run tokens:build npm run tokens:check ``` The checks validate sanctioned colour pairings and generated CSS. --- _Source: https://npm.io/package/@kwtv/tokens · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._