Design Tokens for Physical Products

Design tokens are values that represent the different elements of a design system, such as spacing, color, typography, and animation. They are used in digital design systems to maintain consistency and allow for customization. But can this approach be applied to physical products as well?

Simply put, design tokens can be thought of as key:value pairs that define design decisions. For example, in a digital design system, the radius of a button can be represented as button-cornerRadius: 5px. Similarly, a desk table top can have a table-cornerRadius of 50mm.

The benefit of using design tokens is that they allow for easy customization of products. By changing the values of design tokens such as {coreMaterial}, {primaryColor}, {secondaryColor}, {smallCorner}, {bigCorners}, {edgeBands}, and more, the design of a product can be updated quickly and efficiently.

Example #

Here’s an example of how to break down the design of a button and a desk table top into design tokens.

Button Example #

All the design elements that define a button can be divided into design tokens. By changing the value of these tokens, a visually different button can be created.

Interactive simplified example of a button on codepen: https://codepen.io/asbj01rn/pen/qBMdgzG

Desk Table Top #

The design of a desk table top can be broken down into design tokens such as length, depth, thickness, core material, top material, edge, corner radius, and more. By allowing users to tweak these tokens, a customized table top can be created.

Using design tokens together with parametric 3D modeling and production-on-demand can help facilitate customization of products. By updating the design token file, the 3D models can be updated quickly and efficiently to reflect the unique design decisions of each customer. So instead of saving all custom deisgns you just save your parametric model and one configuration file per customer.

If the parameters was shared amonst multiple designs you would be able to style all of your parametric designs in your customers design and provide a custom webshop for each.

Example made for stykka: https://www.shapediver.com/app/m/6-ghx