Understanding W3C Design Token Types

Discover the W3C standard types for design tokens and learn how to implement them effectively in Figma, CSS, and Penpot.

Hi there 👋

If you're building or maintaining a design system, you've probably encountered terms like “color”, “typography”, or “dimension” when working with design tokens.

But did you know these are now official value types in the W3C Design Tokens standard?

In this issue, we’ll break down all the value types defined by the spec and show how to apply them in Figma (via Tokens Studio) and your CSS codebase.

Supported `$type` values

The Design Tokens Format Module Level 1 by the W3C Design Tokens Community Group defines a set of value types, not naming rules or categories, but actual data types like color, dimension, number, and typography. These types ensure consistency, validation, and tool compatibility across platforms.

Here’s a rundown of the supported type values:

color

Any valid CSS color value. Examples: "#0066ff", "hsl(210 100% 56%)".