About
Introduction to Duo, the Talentech design ecosystem, and the Duo Design System.
Duo is Talentech’s shared design ecosystem: one place for how our products look, feel, and behave together. The Duo Design System documentation is the entry point for understanding what Duo is, why it exists, and where to go next.
What Duo is
Duo is more than a component library. It brings together:
- Design tokens — canonical color, typography, spacing, and related decisions, versioned and published for products to consume.
- UI building blocks — accessible web components and styles that implement those decisions in code.
- Patterns and principles — guidance on forms, components, and UX so teams don’t reinvent the same solutions.
- Tooling and templates — Storybook, email/HTML starters, and supporting apps that keep design and engineering aligned.
The goal is consistency, reusability, and accessibility across Talentech products, with room to adopt Duo incrementally rather than in one big migration.
Published packages
These npm packages are the core of Duo in product code. They are built from the design-system monorepo and published to Azure Artifacts under semantic versioning.
| Package | Role |
|---|---|
@duo/tokens | Source of truth for design tokens and generated CSS/custom properties. |
@duo/styles | Global base styles and prefixed utilities; use after tokens. |
@duo/ui | Lit-based web components (buttons, banners, inputs, and more). |
@duo/icons | Monochrome UI icons for <duo-icon>. |
@duo/assets | Illustrations, product logos, and flag assets. |
Products typically depend on tokens + styles + ui (and icons/assets as needed). Component documentation uses the same packages products ship, so examples match production behavior.
Apps in the monorepo
Alongside the packages, the repository hosts applications that support Duo day to day:
| App | Purpose |
|---|---|
| Documentation | Guides, component reference, and release notes for the Duo Design System. |
| Storybook | Interactive catalog of components and states for design review and development. |
| Playground | Sandboxed experiments against live packages. |
| Cookie banner | First-party consent modal (@duo/cookiebanner) for kuntarekry and kirkkorekry. |
| Template HTML / email | Starting points for pages and messages that must follow Duo styling. |
From the repository root, turbo dev runs the dev stack (including the local proxy) so documentation, Storybook, and related apps share a consistent local URL layout. See Get started for prerequisites and commands.
Principles we work by
Duo is built to be consistent across products, accessible by default, token-driven, and practical to adopt step by step. We favor clarity over cleverness: if a pattern is hard to explain, it will be hard to scale across Talentech.
Changes ship through pull requests with design and code review. Larger API or visual changes are coordinated with the Product Design team. For questions or collaboration, reach out in Slack #product-design.
Where to go next
- Get started — install Duo in your app or run the monorepo locally.
- Components — explore implemented Duo components.
- What’s new — read release-oriented updates.