@infotrust/design-tokens

Framework-neutral design tokens for every InfoTrust product. Source files follow the W3C Design Tokens (DTCG) format; a zero-dependency build turns them into CSS variables, a Tailwind v4 theme, a PrimeVue 4 preset, and resolved JSON.

Built for InfoTrust products. This package is public so InfoTrust's own apps and build systems can install it without credentials. It has no support for outside use. It changes when InfoTrust's products need it to, and a release (minor ones included, while it is 0.x) can rename or remove any token without notice. Use it at your own risk under the MIT License.

Install

pnpm add @infotrust/design-tokens

No registry setup and no token: it installs from the public npm registry. Vue apps install @infotrust/ui, which brings this package with it.

Use

Any web project

@import '@infotrust/design-tokens/fonts.css';   /* Poppins + JetBrains Mono, from Google Fonts */
@import '@infotrust/design-tokens/tokens.css';  /* --it-* variables, light/dark */
@import '@infotrust/design-tokens/base.css';    /* body defaults, focus ring, .it-text-* roles */

Vue apps import @infotrust/ui/styles.css instead. It includes all of the above plus the component CSS, in cascade layers.

Vue + PrimeVue 4 without @infotrust/ui

import { definePreset } from '@primeuix/themes';
import Aura from '@primeuix/themes/aura';
import { infotrustPreset } from '@infotrust/design-tokens/primevue';
import '@infotrust/design-tokens/fonts.css';
import '@infotrust/design-tokens/tokens.css';
import '@infotrust/design-tokens/base.css';
import '@infotrust/design-tokens/primevue.css';

app.use(PrimeVue, {
  theme: {
    preset: definePreset(Aura, infotrustPreset),
    // One selector per entry: PrimeVue nests `:root` inside a comma list in one string, and dark mode never turns on.
    options: { darkModeSelector: ['[data-theme="dark"]', '.suite-theme-dark'], cssLayer: false },
  },
});

Tailwind v4: @import '@infotrust/design-tokens/tailwind.css'; after tailwindcss/theme.css → bg-bg-surface, text-fg-muted, border-border-default, text-table, rounded-md, …

Theme: set data-theme="dark" on <html> or any container. There is one density for every product.

Exports: tokens.css, base.css, fonts.css, tailwind.css, primevue.css, tokens.json, ./primevue (the preset), the default export (tokens.js, resolved values), and ./source/* (the DTCG JSON).

Layout

| Path | What | |---|---| | tokens/base/ | Primitives and mode-independent tokens: color scales, typography, space, size, shape, motion, z-index, breakpoints | | tokens/theme/light.json, dark.json | Semantic colors per mode (identical keys) | | src/ | Hand-written consumers: base.css, fonts.css, PrimeVue preset + sizing CSS | | dist/ | Built outputs |

The rules for using the tokens (semantic only, type roles, 4px grid) are in the infotrust-ui Claude Code plugin's design-system skill.

License

MIT, Copyright (c) 2026 InfoTrust, LLC. The fonts are not in the package: fonts.css loads Poppins and JetBrains Mono (SIL Open Font License 1.1) from Google Fonts.

Security problems: email [email protected]. Do not open a public issue.