Skip to main content

Developers #

Duet Design System is a collection of reusable components and tools that are divided into six 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

Duet Package

CLI

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

# COMMAND LINE INTERFACE:
npm install -g @duetds/cli
# 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 HTML, Ember, Vue.js, and Vanilla JS:
# (can be used with Angular and React as well when you need e.g. SSR support)
npm install @duetds/components
# REACT COMPONENTS:
npm install @duetds/react
# ANGULAR COMPONENTS:
npm install @duetds/angular
For further installation and integration guidelines, please see each package’s documentation linked above.

Supported frameworks #

We offer full support for the following frameworks and libraries:


Example projects #

In addition to the templates that our Command Line Interface provides, we’ve also created a few example projects to GitHub:


Guidelines #

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

Guidelines

Accessibility

Guidelines

Content Delivery Network

Guidelines

CSS Framework

Guidelines

Design Principles

Guidelines

Dev Standards

Guidelines

Iconography

Guidelines

Illustrations

Guidelines

Naming

Guidelines

Sketch

Guidelines

Spacing

Guidelines

Typography

Guidelines

Components Usage


Tutorials #

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

Tutorials

Abstract

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

VS Code

Tutorials

Zeplin


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.

Edit