Skip to main content
LocalTapiola Turva

Frequently Asked #

What is the Duet Design System? #

Duet Design System is a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences for LocalTapiola and Turva.

Who works on the Duet Design System? #

Duet has a core team of designers and developers inside LocalTapiola who are dedicated to building and supporting the system. The core team includes Viljami Salminen, Teppo Haste, Juha Rossi and Mia Kivelä.

Where does the name come from? #

The name “Duet” resembles the fact that there are two separate themes. One for LocalTapiola and one for Turva.

“A duet” is a musical composition for two performers in which the performers have equal importance to the piece, often a composition involving two singers or two pianists.

Can I use Duet in any project? #

Duet Design System is meant for building digital products and experiences for LocalTapiola and Turva. Our terms of use doesn’t allow the use of Duet outside of this original context.

Is Duet open source? #

No, but feel free to browse this website to learn how we approach design and development at LocalTapiola and Turva.

How do I get started with Duet? #

See the Getting Started Guide in the documentation.

What’s on the roadmap? #

See the Roadmap page for up to date plans.

How can I contribute? #

See the Contributing Guide in the documentation.

What browsers are supported? #

Duet Design System supports the following browsers. To see the exact list of browsers, run npx browserslist --config="package.json" in the root directory of Duet Git Repository.

Can you develop Duet’s core packages on Windows? #

Yes, everything works on macOS, Windows and Linux. follow the getting started guide in the repository’s readme to get things up and running.

What do different component and token statuses mean? #

Statuses indicate whether something can be used in production environment or not. Green (“Ready”) status means that something can be used in production environment. Anything else means that it either doesn’t exist yet, is early prototype, or hasn’t been approved for production usage.

Can I use Duet together with other CSS frameworks? #

Yes. All CSS selectors are prefixed with .duet- to prevent collisions.

How do I use basic SVG icons from Duet’s Icon package? #

Please see Importing basic SVG files for instructions.

How do I listen events when using Duet’s Components? #

Please see Event sections in component usage guidelines.

How do I modify the CSS styles of a component? #

You shouldn’t. Most components won’t even allow this as they use closed Shadow DOM that prevents the injection of external styles. If the component looks incorrect in your application it’s most likely an issue in Duet and should be fixed here instead.

What languages are the components written in? #

Components in Duet are written in TypeScript, SCSS and HTML. They ship as standards based Web Components making them compatible with current and future JavaScript based frameworks like Angular, React or Vue.

How do you compile Duet’s Web Components? #

We use a tool called Stencil.js to compile our components.

I’m getting “window is not defined” error in Gatsby? #

Please see the following GitHub issue for Stencil.js. There’s a temporary workaround in the first comment that might help.

Where are the design specs? #

Duet does not contain pixel perfect specs. Instead, we try to embrace the fluid nature of the web and focus on systems of components instead of pixel perfect designs. However, many of our components do ship in a Sketch Toolkit for quick prototyping. This Toolkit is shared via a tool called Abstract.

How can I open Sketch files on Windows? #

We recommend an app called Lunacy. For most Sketch files, it gives you the ability to open, edit and save on Windows.

I need a new component, who do I talk to? #

If you would like to request a new component, we encourage you to add a new issue here. Keep in mind that for specific scenarios or edge cases we may recommend you to use a more industry-standard interaction that’s common with our other products, thus being more familiar to our users.

How do I use media queries defined in tokens? #

.selector {
  @media #{$media-query-large} {
    // Your styles

I found a bug. How do I report it? #

First, make sure the problem is reproducible. Once confirmed, open an issue. We’re currently using Trello to track the backlog and bugs, but planning on moving over to Azure DevOps. For new issues and bug reports, please click here to create an issue.

I need a new icon, how do I add it? #

All new icons should be added to the design system first. Please see Support page for more information on how to contact us. We can usually add an icon in a matter of hours if there’s hurry.

I couldn’t find an answer to my question. #

See the Support Guide for instructions on how to reach us.