Skip to main content
LocalTapiola Turva

Developers #

Duet Design System is a collection of reusable components and tools that are divided into five packages. They can be used together or separately depending on your team’s needs.

Provided front-end packages include:

Duet Package

Design Tokens

Duet Package

Components

Duet Package

CSS Framework

Duet Package

Icons

Duet Package

Fonts

Each package can be installed using Node Package Manager. To do so, run the following command(s) in your terminal:

// DESIGN TOKENS, CSS FRAMEWORK, ICONS, FONTS:
// (For usage with any framework)
npm install @duetds/tokens
npm install @duetds/css
npm install @duetds/icons
npm install @duetds/fonts
// WEB COMPONENTS for Angular, Ember, Vue.js, and Vanilla JS:
// (The recommended way if you’re not using React)
npm install @duetds/components
// REACT COMPONENTS (experimental):
npm install @duetds/react
// ANGULAR COMPONENTS (experimental):
// (For stable releases, use @duetds/components instead)
npm install @duetds/angular

For further installation and integration guidelines, please see each package’s documentation linked above.


Guidelines #

Duet also provides additional development guidelines that you should read through before starting anything new:

About

What is Duet?

Guidelines

Contributing

Guidelines

Installing VS Code extension

Guidelines

Installing Zeplin extension

Guidelines

Using Components

Guidelines

Page Templates

Guidelines

Development Standards

Guidelines

Naming of Things

Guidelines

SCSS Spacing Utilities

Guidelines

Duet’s Principles

Guidelines

Frequently Asked Questions


Contributing #

We gratefully accept contributions to Duet’s documentation and its packages. Please see contributing guidelines for further instructions.


Getting support #

If you experience any issues while getting started with any of Duet’s packages, please head over to the Support page for more guidelines and help.