Skip to main content

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

Guidelines #

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

Guidelines

Abstract

Guidelines

Accessibility

Guidelines

CSS Framework

Guidelines

Design Principles

Guidelines

Dev Standards

Guidelines

Iconography

Guidelines

Illustrations

Guidelines

Naming

Guidelines

Sketch

Guidelines

Spacing

Guidelines

Typography

Guidelines

Components

Guidelines

VS Code

Guidelines

Zeplin


Tutorials #

Follow these practical tutorials to get started developing experiences for LocalTapiola and Turva.

Tutorials

Building Layouts

Tutorials

Server Side Rendering


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.