Voltrax site

This repository contains the design-token source maintained with DHM Tokens.

Repository contents

• tokens/manifest.json — DTCG token source for developers and AI-assisted tooling.
• DESIGN.md — design-system guidance, collections, modes, and naming conventions.
• .dhm/workspace.project.json — lossless plugin snapshot for designers who need to restore the workspace in Figma.
• dist/ — resolved JSON, CSS variables, typography utility classes, TypeScript exports, and the Figma-to-code manifest.

Package

The generated package name is voltrax-variables-tokens. The name is controlled by the project settings and is independent from the workspace display name.

npm install voltrax-variables-tokens

CSS variables

import 'voltrax-variables-tokens/tokens.css';

Use generated variables in CSS, for example color: var(--color-brand-600);.

Typography styles

import 'voltrax-variables-tokens/typography.css';

Typography composites are emitted as utility classes such as .dhm-type-heading-h1 and .dhm-type-body-default. Apply one to an element, for example <h1 class="dhm-type-heading-h1">Title</h1>. The exact class list depends on the Text Styles in the workspace.

JavaScript and JSON

import tokens from 'voltrax-variables-tokens';
import resolvedTokens from 'voltrax-variables-tokens/tokens.json' with { type: 'json' };

Use the JavaScript or JSON export when a framework needs token values programmatically. The manifest is available at voltrax-variables-tokens/manifest.json for tooling.

Workflow

1. Designers author and review tokens in DHM Tokens.
2. The plugin pushes the DTCG source and lossless snapshot to GitHub.
3. GitHub Actions validates the source and rebuilds the generated dist/ files.
4. Developers consume the package or generated CSS/JSON output.
5. Pull remote changes into the plugin before pushing new changes.

Generated by DHM Tokens.