@gtcx/tokens

Ledger design tokens for enterprise and Global-South-first product surfaces.

This package provides:

• primitive values
• semantic UI tokens
• operational trust and connectivity tokens
• density and motion presets
• platform token packs
• CSS variable generation utilities

Install

pnpm add @gtcx/tokens

Core Usage

import {
  semanticColors,
  semanticTrust,
  semanticConnectivity,
  semanticDensity,
  semanticMotion,
} from '@gtcx/tokens';

semanticColors.primary;
semanticTrust.verification.verified;
semanticConnectivity.syncing;
semanticDensity.field.touchTargetMin;
semanticMotion.reduced.durationNormal;

Platform Packs

import { fiftyFourPlatformTokens, fieldPlatformTokens } from '@gtcx/tokens';

Direct subpath imports are also supported:

import { fiftyFourPlatformTokens } from '@gtcx/tokens/platforms/fifty-four';
import { fieldPlatformTokens } from '@gtcx/tokens/platforms/field';

Theme Factory

import { brands, createTheme, createThemeCSS } from '@gtcx/tokens';

const theme = createTheme(brands.gtcx);
const css = createThemeCSS(brands.agx);

CSS Utility

import { generateCSSVariables } from '@gtcx/tokens/css';
import { fieldPlatformTokens } from '@gtcx/tokens/platforms/field';

const css = generateCSSVariables(fieldPlatformTokens);

Export Surface

Primitives

• colorPrimitives
• spacingPrimitives
• fontSizePrimitives
• fontWeightPrimitives
• lineHeightPrimitives
• borderRadiusPrimitives
• shadowPrimitives
• motionPrimitives

Semantic Families

• semanticColors
• semanticSpacing
• semanticTypography
• semanticRadii
• semanticShadows
• semanticLayout
• semanticTrust
• semanticConnectivity
• semanticDensity
• semanticMotion

Themes And Platforms

• darkSemanticColors
• brands
• createTheme
• createThemeCSS
• fiftyFourPlatformTokens
• fieldPlatformTokens

Token Model

Ledger tokens follow this chain:

primitives -> semantic -> platform overrides -> theme/css output

Consumers should prefer semantic tokens over primitives unless they are working on the token system itself.

Requirements

• Node.js >= 20