November, 2019 #

You’re reading the third Duet Design System monthly update. This month marks a major milestone for us as we’re launching our new design system publicly.

After ten months of hard work, we’re extremely happy to announce that we’ve removed the authentication and made the documentation public. This change will make sharing and collaboration between different teams and third party vendors much easier. This is also a chance for us to be more transparent towards our users and share the work-in-progress.

We’re also excited to see continuous rise in the adoption rate of Duet inside LocalTapiola and Turva. We follow this with a Node.js based tool that we’ve built. The tool automatically measures Duet’s adoption and utilization levels across our product portfolio, and helps us understand where and how the system is being utilized and how it affects the work of different teams.

At the time of writing, thirteen product teams utilize Duet directly in their app. Four out of those thirteen teams already have most of their frontend UI using Duet’s packages instead of custom built solutions. This quick adoption rate has somewhat affected our pace developing new features as we’ve had to provide a lot more support to our users. This is a very positive problem to have though!

Remember, if you have any questions or problems, don’t hesitate to contact us directly. We’ve also created a comprehensive FAQ page that should answer some of your questions as well.

The above screenshot reveals a tiny portion of our statistics tool. This graph shows the total installations of our core packages. This is probably the least important information in the whole tool, but fun statistic to have nevertheless.

New this month #

In this section we’ll highlight every month new features and progress from Duet Design System. This month’s highlights include:

New brand typeface #

We’ve been working on a new interface and brand typeface since early 2019 together with type designer Kostas Bartsokas. The typeface, called LahiTapiola Sans, is now ready and downloadable from typography page.

Design principles #

Design principles form the foundation of Duet. They guide our team when working on different parts of the system and help us do better and more informed decisions.

// Install Duet’s React package
npm install @duetds/react

// Import a React component from the above package
import React, { Component } from "react";
import { DuetButton } from "@duetds/react";

// utilize the imported component
export class Example extends Component {
  render() {
    return (
      <DuetButton variation="primary">
        Primary button
      </DuetButton>
    );
  }
}

React and Angular components #

To make it easier to use Duet’s Web Components on different frameworks, we’ve created React and Angular specific wrappers. This means you now get the ability to use for example ngmodel on inputs and other form fields.

On the roadmap next #

• Getting more components ready for production usage is still our first priority at the moment. For an up-to-date list on progress and what’s under work, view component statuses.
• Our next priority is to support designers and developers who start utilizing these new parts. If you have any questions, please view support page and reach out.
• Finally, we’re also starting to focus more on contribution and adoption from different teams and plan for 2020.

What is Duet? #

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

The goal of Duet is to improve user interface consistency and quality, while making our software design and development processes more efficient.

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

Duet has a core team of designers and developers inside LocalTapiola who are dedicated to building and supporting the system.

Until December!
Viljami Salminen