03Design systems & web components
Duet DS
Reusable web components and common foundations for LocalTapiola and Turva. One design system supporting two distinct brands.
- Client
- LocalTapiola / Turva
- Year
- 2025
- Role
- —
- Credits
- System imagery: LocalTapiola / Turva
Two brands.
A shared foundation.
Duet gives LocalTapiola and Turva a shared vocabulary for building digital products, with distinct themes for each brand.
Foundations
Design tokens connect colour, typography and spacing across the system.
Components
Reusable web components carry visual design into working interfaces, across frameworks.
Patterns
Templates and documentation connect individual controls to complete product workflows.
Accessibility,
proved in the wild.
Duet set out to be one of the most accessible design systems on the web, and was tested through multiple screen-reader scenarios. Where the browsers fell short, the work didn’t stop at the system: accessibility bugs were filed and pushed with Apple and Google until things actually worked, with fixes that landed in Chrome and Safari themselves.
Designed to be used.
Duet documents keyboard and screen-reader support alongside component behaviour. Its two themes can be selected across a product or for individual components.
Project context & sources
Our contribution: design-system and web-component work. System imagery: LocalTapiola / Turva. The template screenshots show published examples from Duet’s documentation.
Price Summary template ↗
Form Components template ↗
Duet: structure, themes and accessibility ↗