Skip to main content

October, 2019 #

You’re reading the second Duet Design System monthly update. This update focuses on accessibility and performance updates that we’ve been working on.

During the past month we’ve focused on getting more components ready for production usage together with some big accessibility and performance improvements. At the time of writing, we now have 25 production ready components together with 5 example templates you can use.

Making all these new features accessible has become an important part of our workflow. While the new accessibility law requires us to do so, the more important part is that it allows us to improve the experience for everyone who uses our products. To achieve this, we’ve created an accessibility checklist that helps us remember to tick all the necessary boxes.

We’ve been also working on optimizing Duet’s packages for better performance. All packages now weigh around 90 KB combined which is pretty good, considering that this includes static assets as well. Current network footprints for different parts look like this:

New this month #

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

Visual Studio Code extension #

Visual Studio Code is an editor optimized for building modern web apps. To ease up the usage, we’ve created an extension that does autocompletion for Duet’s components and component properties.

Accessibility checklist #

Accessibility checklist is a tool created and used by Duet’s core team when developing new features. It helps us improve the experience for everyone who uses our products and can be useful for other teams as well.

<!-- To change text colors -->
<p class="duet-color-primary">Text</p>
<p class="duet-color-secondary">Text</p>

<!-- To change background colors -->
<div class="duet-bg-primary"></div>
<div class="duet-bg-secondary"></div>

<!-- To change fills of SVGs -->
<svg class="duet-fill-primary"></svg>
<svg class="duet-fill-secondary"></svg>

CSS Framework #

Duet’s CSS Framework includes a wide range of shorthand utility classes to modify an element’s appearance in your own application. It’s also an useful companion to include on a page when using our components.

On the roadmap next #

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 November!
Viljami Salminen


View All Updates