Composite token proof of concept (s2 typography)

[GarthDB]

As a continuation of the previous composite token RFC (drop shadows), we have created a snapshot release of @adobe/spectrum-tokens based on the latest release with the addition of composite typography tokens.

Example

Here is an example of a couple of composite typography tokens.

  "component-xs-regular": {
    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/typography.json",
    "value": {
      "fontFamily": "{sans-serif-font-family}",
      "fontSize": "{font-size-50}",
      "fontWeight": "{regular-font-weight}",
      "letterSpacing": "{letter-spacing}",
      "lineHeight": "{line-height-font-size-50}"
    },
    "uuid": "f3d57205-fcc1-4ddd-ab74-b0a3a1ffa330"
  },
  "component-s-regular": {
    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/typography.json",
    "value": {
      "fontFamily": "{sans-serif-font-family}",
      "fontSize": "{font-size-75}",
      "fontWeight": "{regular-font-weight}",
      "letterSpacing": "{letter-spacing}",
      "lineHeight": "{line-height-font-size-75}"
    },
    "uuid": "9f350ec5-f29e-4f6f-ac1f-99cc575e93e0"
  }

JSON Schema

I have added a new JSON Schema for the typography composite tokens. The naming and formatting are based on what is authored from Tokens Studio.

Currently, the only examples we have of typography composite tokens use token references (e.g., {font-size-50}) and no hardcoded values (e.g., 12px).

Considerations

W3C Design Token group is moving away from recommending composite-types. Details can be found on their website here.

This is changing how Tokens Studio is considering the future of composite tokens. Details can be found on their website here.

This is a relatively new development, but the future support of composite tokens specifically for typography and drop shadows seems stable for the foreseeable future. We should take this into consideration with any other composite tokens.

Token Diff from main and cable/poc-typography branches

Added (35)

• component-xs-regular
• component-s-regular
• component-m-regular
• component-l-regular
• component-xl-regular
• component-xs-medium
• component-s-medium
• component-m-medium
• component-l-medium
• component-xl-medium
• component-xs-bold
• component-s-bold
• component-m-bold
• component-l-bold
• component-xl-bold
• component-cjk-xs-regular
• component-cjk-s-regular
• component-cjk-m-regular
• component-cjk-l-regular
• component-cjk-xl-regular
• component-cjk-xs-medium
• component-cjk-s-medium
• component-cjk-m-medium
• component-cjk-l-medium
• component-cjk-xl-medium
• component-cjk-xs-bold
• component-cjk-s-bold
• component-cjk-m-bold
• component-cjk-l-bold
• component-cjk-xl-bold
• component-padding-vertical-50
• component-padding-vertical-75
• component-padding-vertical-100
• component-padding-vertical-200
• component-padding-vertical-300

Updated Properties (1)

• sans-serif-font-family
value: Adobe Clean -> Adobe Clean VF

[GarthDB]

We're going to close this RFC on June 13th unless there's a good reason to keep it open longer.

[Deanna-w1]

Can you update the naming from Adobe Clean VF to Adobe Clean Spectrum VF? Thank you!

[GarthDB]

✅ Closing - Composite Typography Tokens Implemented

Discussion opened: May 22, 2025
Completed: November 2025

The composite typography token proof of concept has been implemented and released.

Completed

• ✅ Typography JSON schema added (schemas/token-types/typography.json)
• ✅ 15 component typography tokens released:
  • component-xs-regular, component-xs-medium, component-xs-bold
  • component-s-regular, component-s-medium, component-s-bold
  • component-m-regular, component-m-medium, component-m-bold
  • component-l-regular, component-l-medium, component-l-bold
  • component-xl-regular, component-xl-medium, component-xl-bold
• ✅ 5 component-padding-vertical tokens released
• ✅ Font name updated to "Adobe Clean Spectrum VF" (per @Deanna-w1's request)
• ✅ Released in @adobe/spectrum-tokens@14.0.0

Deferred

The 15 CJK typography tokens (component-cjk-*) from the original proposal have been intentionally deferred and may be addressed in a future release if needed.

---

Thanks everyone for the feedback! 🎉