diff --git a/docs/img/design-tokens/34-tokens-composite-typography-alias.webp b/docs/img/design-tokens/34-tokens-composite-typography-alias.webp new file mode 100644 index 0000000000..27e83e9f7d Binary files /dev/null and b/docs/img/design-tokens/34-tokens-composite-typography-alias.webp differ diff --git a/docs/img/design-tokens/35-tokens-composite-typography-lineheight.webp b/docs/img/design-tokens/35-tokens-composite-typography-lineheight.webp new file mode 100644 index 0000000000..0f18608d7a Binary files /dev/null and b/docs/img/design-tokens/35-tokens-composite-typography-lineheight.webp differ diff --git a/docs/img/design-tokens/36-tokens-composite-typography.webp b/docs/img/design-tokens/36-tokens-composite-typography.webp new file mode 100644 index 0000000000..fe13f798a6 Binary files /dev/null and b/docs/img/design-tokens/36-tokens-composite-typography.webp differ diff --git a/docs/user-guide/design-tokens/index.njk b/docs/user-guide/design-tokens/index.njk index 9e23a935bb..5021982f8d 100644 --- a/docs/user-guide/design-tokens/index.njk +++ b/docs/user-guide/design-tokens/index.njk @@ -423,6 +423,40 @@ ExtraBold Italic
This token can be applied directly to a text element or be used as a reference in a Typography Composite Token.
+Typography tokens are composite entities that group several text properties into a single token definition. They allow you to define and reuse complete text styles in a consistent way.
+Each property within a typography token can either reference an existing individual typography token (for example, font-size or font-family) or use a hardcoded value. The behavior and syntax of individual typography tokens are described in the previous section of this guide.
+
+You can also reference another existing Typography Composite Token instead of defining each property manually. When doing so, Penpot resolves all individual properties from the referenced token.
+
+The Typography Token includes a line-height property, which is not available as an individual token. This is because line-height depends on the font size to be calculated properly. Make sure the font-size property is defined before setting line-height.
+
+Accepted values for the line-height input:
+A Typography composite token can be applied to a full text layer to set all typography properties at once. This lets you manage complete text styles using a single token instead of combining multiple individual ones.
+When applying a Typography composite token to a layer, any previously applied Typography composite token or style will be detached. The same happens in reverse. Only one of them can be active at a time.
+ + + +Token Sets allow you to split your tokens up into multiple files in order to create organized groups or collections of tokens. It enables efficient management and customization within design files. For example you can group all your color sets, sizing sets or platform-specific sets. The purpose of tokens sets is to organize them in a way that matches your needs.