Get started

This guide helps you use Duo in a product codebase: install published packages, load tokens and styles in the right order, and register web components. If you contribute to the design system itself, see Local development at the end.

Install in your application

Registry authentication

@duo/* packages publish to the HRMTS feed on Azure Artifacts. Before installing, configure npm to use that registry for the @duo scope and authenticate (Azure DevOps PAT with Packaging → Read, or npm login against the feed).

Add to your project or user .npmrc:

@duo:registry=https://pkgs.dev.azure.com/talentechdev/_packaging/HRMTS/npm/registry/
always-auth=true

Core packages

Install the packages most applications need:

pnpm add @duo/fonts @duo/tokens @duo/styles @duo/ui @duo/icons

npm install @duo/fonts @duo/tokens @duo/styles @duo/ui @duo/icons

Optional packages

pnpm add @duo/assets

@duo/assets — illustrations, product logos, and flag SVGs when you need marketing or brand imagery beyond UI icons.

Check the feed or npm view @duo/tokens version for the latest published versions. Packages follow semantic versioning; see What’s new for release notes.

If you cannot use npm (static HTML, prototypes, or legacy stacks), load the same packages from versioned CDN URLs under /cdn/duo/{package}/{semver}/.

Importing packages

Load CSS in this order in your application entry (for example main.ts, app.ts, or a global layout):

1. Fonts — @duo/fonts (registers Inter and Geist Mono @font-face rules).
2. Tokens — @duo/tokens/css (and a theme subpath if your product uses themed overrides).
3. Styles — @duo/styles (or base.css, forms.css, utilities.css separately).
4. UI — @duo/ui registers custom elements.

import "@duo/fonts";
import "@duo/tokens/css";
import "@duo/styles";
import "@duo/ui";

@duo/icons is a dependency of @duo/ui; you normally do not import it unless you use the icon map directly. Import @duo/assets only when you need illustrations, logos, or flags.

Use token values in your own CSS as var(--duo-color-text) and similar names from the generated stylesheet.

Using components

After the imports above, use Duo components in HTML or your framework’s template syntax:

<duo-button variant="primary">Save</duo-button>
<duo-icon name="check" label="Success"></duo-icon>

Each component page documents properties, slots, events, and accessibility expectations. Pages link to Storybook for interactive variants and states.

Forms that use <duo-button type="submit"> should keep the button inside the <form> or set the form attribute to match the form’s id — see the @duo/ui package notes on form association.

Local development

To work on the design system monorepo (documentation, Storybook, packages, and templates), clone the repository and install from the root:

Prerequisites

• Node.js 22 or newer (see .nvmrc in the repo)
• pnpm (installation guide)

Clone and install

pnpm install

Run from the repository root

All apps and packages are orchestrated with Turbo. Run these from the monorepo root (after pnpm install):

turbo dev

This starts dev servers across the workspace and @duo/dev-proxy at http://127.0.0.1:8080 so local URLs mirror production-style routing:

To run a single app or package:

turbo dev --filter=@duo/site
turbo dev --filter=@duo/storybook
turbo dev --filter=@duo/ui

Replace the filter with any workspace package name (@duo/tokens, @duo/playground, and so on). Turbo builds upstream dependencies before dev where dependsOn: ["^build"] is configured.

Validate and build

turbo validate
turbo build

Filter builds the same way:

turbo build --filter=@duo/ui

Next steps

• About — ecosystem overview, packages, and apps in the monorepo.
• Accessibility — WCAG 2.2 AA for any frontend stack.
• Components — usage, props, and accessibility per component (with Storybook links).