Figma Tokens → PrimeNG in Angular 20+: Storybook + Chromatic Guardrails That Stop Theming Drift

The pain you feel today

I’ve seen this across a global entertainment employee tracker, airline kiosks, and telecom analytics. Teams change the Figma library; engineers patch SCSS in-app; and two weeks later, brand review fails. The antidote is a single source of truth (tokens), compiled into code, verified by Storybook and Chromatic every PR.

• QA colors don’t match Figma

• Heading sizes drift between pages

• PrimeNG components look close-but-off after upgrades

• Charts ignore the design system and ship custom palettes

Why it matters now (Angular 20+)

As companies plan 2025 Angular roadmaps, you need a design system you can measure. If you need to hire an Angular developer or bring in an Angular consultant, ask for a token pipeline and Chromatic baselines—otherwise you’ll be back in drift-land next quarter.

• Signals make UX preferences instant and testable

• PrimeNG 17+ leans into CSS variables

• Nx standardizes the generators and pipelines

• Q1 budgets reward measurable, repeatable systems

Flow overview

Keep tokens in a libs/design-tokens package inside Nx so Angular apps, libraries, and Storybook pull from the same build artifact.

• Figma (Tokens Studio) → tokens.json

• Style Dictionary → tokens.css / tokens.scss

• PrimeNG theme overrides read CSS vars

• Angular components, D3/Highcharts read the same vars

• Storybook renders states; Chromatic snapshots in CI

Style Dictionary config

Use Style Dictionary to generate CSS variables and SCSS maps you can feed to PrimeNG.

// tools/style-dictionary/config.ts
import StyleDictionary from 'style-dictionary';

export default {
  source: ['libs/design-tokens/src/tokens/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'libs/design-tokens/dist/',
      files: [
        { destination: 'tokens.css', format: 'css/variables' }
      ]
    },
    scss: {
      transformGroup: 'scss',
      buildPath: 'libs/design-tokens/dist/',
      files: [
        { destination: '_tokens.scss', format: 'scss/variables' }
      ]
    }
  }
} as StyleDictionary.Config;

# package.json scripts
"build:tokens": "ts-node tools/style-dictionary/build.ts"

AngularUX palette (example)

/* libs/design-tokens/dist/tokens.css */
:root {
  --auz-brand-50: #f4f7ff;
  --auz-brand-500: #3c73ff; /* AngularUX brand */
  --auz-brand-700: #244bba;
  --auz-neutral-50: #f7f8fa;
  --auz-neutral-900: #0f1222;
  --auz-success-500: #16a34a;
  --auz-danger-500: #ef4444;

  --auz-font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --auz-font-size-base: 14px;
  --auz-line-height: 1.5;

  --auz-density: 0; /* 0=comfortable, -1=compact, +1=spacious */
}

PrimeNG variable bridge

/* apps/dashboard/src/styles/primeng-bridge.scss */
@use 'primeng/resources/themes/lara-light-blue/theme';

:root {
  /* Map brand tokens to PrimeNG */
  --primary-color: var(--auz-brand-500);
  --text-color: var(--auz-neutral-900);
  --text-color-secondary: color-mix(in srgb, var(--auz-neutral-900), white 40%);
  --success-color: var(--auz-success-500);
  --danger-color: var(--auz-danger-500);

  /* Typography */
  --font-family: var(--auz-font-family);
  --body-font-size: var(--auz-font-size-base);
  --line-height: var(--auz-line-height);

  /* Density-driven paddings */
  --p-button-padding-y: calc(0.625rem + (var(--auz-density) * -0.125rem));
  --p-input-padding-y: calc(0.5rem + (var(--auz-density) * -0.125rem));
}

PrimeNG reads CSS variables at runtime, so you can animate density and theme without recompiling.

SignalStore for user/tenant

// libs/ui-state/src/theme.store.ts
import { signalStore, withState, withMethods } from '@ngrx/signals';
import { signal, effect } from '@angular/core';

type ThemePrefs = {
  scheme: 'light' | 'dark';
  density: -1 | 0 | 1;
  contrast: 'aa' | 'aaa';
};

const initial: ThemePrefs = { scheme: 'light', density: 0, contrast: 'aa' };

export const ThemeStore = signalStore(
  withState({ prefs: signal<ThemePrefs>(initial) }),
  withMethods((store) => ({
    setScheme: (scheme: ThemePrefs['scheme']) => store.prefs.update(p => ({...p, scheme})),
    setDensity: (density: ThemePrefs['density']) => store.prefs.update(p => ({...p, density})),
    setContrast: (contrast: ThemePrefs['contrast']) => store.prefs.update(p => ({...p, contrast})),
  }))
);

// Apply to DOM
export function bindTheme(store = ThemeStore) {
  effect(() => {
    const { scheme, density, contrast } = store.prefs();
    document.documentElement.dataset.scheme = scheme;
    document.documentElement.style.setProperty('--auz-density', String(density));
    document.documentElement.classList.toggle('contrast-aaa', contrast === 'aaa');
  });
}

Preferences become testable Signals and persistable per user/tenant. No jitter.

Type scale and AA contrast

/* apps/dashboard/src/styles/typography.scss */
:root {
  --auz-font-size-1: clamp(12px, 0.9vw, 13px);
  --auz-font-size-2: clamp(14px, 1vw, 15px); /* base */
  --auz-font-size-3: clamp(16px, 1.2vw, 18px);
  --auz-heading-weight: 600;
}

h1, .h1 { font-size: var(--auz-font-size-3); font-weight: var(--auz-heading-weight); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* High-contrast mode tweaks */
.contrast-aaa {
  --primary-color: var(--auz-brand-700);
}

Use Angular DevTools and Lighthouse to verify INP/LCP don’t regress when you bump sizes.

• WCAG 2.1 AA contrast >= 4.5:1 for body

• Respect prefers-reduced-motion

Density controls for PrimeNG + lists/grids

/* One place to tune spacing app-wide */
:root { --row-height-base: 40px; }
.table-row { height: calc(var(--row-height-base) + (var(--auz-density) * -6px)); }
.p-datatable .p-datatable-tbody > tr > td { padding-block: calc(0.75rem + (var(--auz-density) * -0.125rem)); }

This keeps data-dense RBAC dashboards readable on smaller screens without forking components.

Storybook globals for tokens

// .storybook/preview.ts
import type { Preview } from '@storybook/angular';
import { ThemeStore, bindTheme } from '../libs/ui-state/src/theme.store';

bindTheme();

export const globalTypes = {
  scheme: { name: 'Scheme', defaultValue: 'light', toolbar: { items: ['light','dark'] } },
  density: { name: 'Density', defaultValue: 0, toolbar: { items: [-1,0,1] } },
  contrast: { name: 'Contrast', defaultValue: 'aa', toolbar: { items: ['aa','aaa'] } },
};

const preview: Preview = {
  decorators: [
    (Story, context) => {
      const { scheme, density, contrast } = context.globals as any;
      ThemeStore.setScheme(scheme);
      ThemeStore.setDensity(density);
      ThemeStore.setContrast(contrast);
      return Story();
    }
  ],
  parameters: {
    a11y: { element: '#root' },
    chromatic: { pauseAnimationAtEnd: true, diffThreshold: 0.02 }
  }
};
export default preview;

Add @storybook/addon-a11y to run Axe checks. Use controls to exercise density and contrast states.

Chromatic in CI

# .github/workflows/chromatic.yml
name: Chromatic
on: [pull_request]
jobs:
  visual-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - run: pnpm install --frozen-lockfile
      - run: pnpm build:tokens
      - run: pnpm nx run-many -t build -p design-tokens
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          exitZeroOnChanges: false
          onlyChanged: true

Chromatic becomes your visual gate. In my telecom analytics work, this caught a 1px density regression in p-table before it hit production.

• Tight thresholds (<= 2%)

• Required check on PRs

• Snapshot all states

Highcharts theme via CSS variables

// libs/charts/src/highcharts-theme.ts
import Highcharts from 'highcharts';

export function applyHighchartsTheme() {
  const css = getComputedStyle(document.documentElement);
  Highcharts.setOptions({
    chart: { backgroundColor: 'transparent', style: { fontFamily: css.getPropertyValue('--auz-font-family') } },
    colors: [
      css.getPropertyValue('--auz-brand-500').trim(),
      css.getPropertyValue('--auz-success-500').trim(),
      css.getPropertyValue('--auz-danger-500').trim()
    ],
    title: { style: { color: css.getPropertyValue('--auz-neutral-900') } }
  });
}

For D3 and Canvas/Three.js schedulers (used in a broadcast network VPS tool), pull the same variables and apply to scales and text. One palette, everywhere.

Data virtualization and density

Whether it’s PrimeNG virtual scroller or CDK Virtual Scroll, bind to --row-height-base and density to maintain smooth scroll without clipping. This is how we kept real-time dashboards buttery at 60fps while staying on-brand.

• Use windowed lists for 10k+ rows

• Respect row height tokens

Signals you need help

Bring in a senior Angular consultant when the cost of review cycles exceeds the cost of building the pipeline. I’ve stabilized legacy AngularJS→Angular migrations, rewired zone.js-era styles, and landed Chromatic guardrails in 2–4 weeks.

• Multiple theme files per app, diverging tokens

• Inconsistent AA compliance across pages

• PrimeNG upgrades constantly break styles

• Charts don’t match components

Step-by-step

I treat this like any enterprise feature: code owners, PR checks, and measurable acceptance criteria. If you need an Angular expert for hire, I can review your repo and leave you with a pipeline your team can run without me.

• Audit Figma tokens, name collisions, contrast

• Create Nx libs: design-tokens, theme-bridge, ui-state

• Automate Style Dictionary build and watch

• Map tokens to PrimeNG and chart libs

• Stand up Storybook with a11y + interactions

• Add Chromatic, set strict thresholds and reviewers

• Instrument budgets (bundle size, Lighthouse)

What to instrument next

• One source of truth: Figma tokens compiled to CSS/SCSS.
• PrimeNG + charts read the same variables.
• Signals + SignalStore power non-jitter preferences.
• Storybook is the living spec; Chromatic is the gate.
• Accessibility and performance are budgets, not vibes.

If you’re planning a Q1 refresh or need to stabilize a chaotic codebase, let’s talk. I’m a remote Angular developer with Fortune 100 experience shipping multi-tenant dashboards, kiosks, and analytics.

• Add design token change-logs in PRs

• Track color contrast coverage in Storybook

• Bundle budgets for tokens.css

• User analytics for preference adoption (GA4)