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:
Design TokensDuet Package
CSS FrameworkDuet Package
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
Duet also provides additional development guidelines that you should read through before starting anything new:
What is Duet?Guidelines
Installing VS Code extensionGuidelines
Installing Zeplin extensionGuidelines
Naming of ThingsGuidelines
SCSS Spacing UtilitiesGuidelines
Frequently Asked Questions
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.