+
-Dimension tokens allow you to define an amount of distance that can be used to set the size, space, radius or position of specific elements within a design.
To apply a dimension token, select the element and choose the token from the list:
@@ -205,10 +205,6 @@ title: 10· Design TokensThe Y property specifies the position of the element on the Y axis of the canvas.
-Font size tokens allow you to define and standardize font-size values across your design system. These tokens can be applied to the font-size property in text layers, ensuring consistent typography throughout your designs.
-Font size token values are always computed as px (pixels).
-Opacity tokens allow you to define the opacity of a layer, ranging from fully opaque to fully transparent.
Opacity tokens can be applied to any design element that supports transparency. You can use any decimal value between 0 and 1 to set varying levels of opacity or you can use any value between 0 and 100 with `%` sign at the end of the value. For example, you can use 45% which would resolve to .45.
@@ -265,10 +261,168 @@ title: 10· Design Tokens -The stroke width token, also known as the border width token, defines the thickness of a stroke around a design element. It can be applied to boards, groups, rectangles and text elements.
+Number tokens define the numeric value of properties that don’t require a unit of measurement.
+The difference between a number token and a dimension token is that the first one has to be unitless.
+The Number Token does not have a default property to apply to, so it can only be applied by right-clicking and selecting the specific property.
+Number token is especially useful as a reference in other tokens, for math equations (operands), to create scales, for example font-size scales, or grid scales.
+It can also be applied to Line Height –since this property works as a multiplier of the font size– or rotation property.
+
+Typography tokens can only be applied to a text layer, but not to individual elements inside a text layer. +Applying a Typography Token will detach any Typography Style previously applied, and vice versa.
+
+
+As in other tokens, Font Family accepts references to other font family tokens.
+Additionally, you can specify a prioritized list of Font Family names or generic names separated by commas (,), as in CSS. Penpot will use only the first font in the list, but this helps define your font fallbacks so developers can implement them accordingly.
+
+
+ font-family: Lucida Console, Courier, monospace
+
+
+
+When writing the string values of a Font Family Token, pay close attention to:
+Note: You can quote font family names — especially those that contain spaces or special characters — + to follow CSS best practices or to align with the conventions used by your development team: +
+
+
+ font-family: "DM Sans", sans-serif;
+
+
+
+If the Font Family does not exist in Penpot, when you apply the token you will see a “Missing font” message in the design panel input:
+
+Font size tokens define the vertical size of glyphs/characters as an individual property. In typography, the letter spacing and line height properties are related to the font size.
+Font sizes are typically defined using a proportional scale. You can use math operations with references in order to create dynamic typography scales that follow a particular multiplier, like Golden Ratio.
+Tip: Use Number Tokens (unitless token) to create stunning typographic scales though design tokens:
+
+Font size is a dimension-type token and should be defined in px (unitless values are computed as px) for now. To follow the DTGC format, in upcoming releases, units will be mandatory and rem units will be allowed.
+You can use any dimension token as a reference in a font size token. Math operations are also allowed.
+Tip: You can use a rounding function to round your resolved values and reduce decimals in math operations, since decimals are not ideal when using px:
+roundTo({values}, decimals)
+Font Weight defines the thickness of each character/glyph in the Font Family. Font Weight design decisions are typically used to communicate visual hierarchy or emphasize text elements.
+Penpot combines Font Weight and Style as a single property written as a string value and it requires a match to the Font Family it is paired with, since not all font families have the same weight / styles.
+The Token can be defined with a numeric value (100, 400, 900, etc) or a string name (Bold, Black, Thin, etc), and the font style (Italic), if needed.
+Note: Font Family and Font Weight Tokens work as a pair in Penpot. This means you must consider the current Font Family in order to decide the Font Weight you want to use in your designs.
+This token can be applied to text layers but the result depends on the Font Family in use.
+Font Weight Token can be defined in numeric values or string values. Both values are accepted. When applied, a conversion will occur, transforming any string value to its corresponding numeric value:
+| Numeric Value | +String Value | +
|---|---|
| 100 | +Thin, Hairline | +
| 200 | +Extra Light, ExtraLight, extra-light, Ultra Light, UltraLight, ultra-light, extraleicht | +
| 300 | +Light, leicht | +
| 400 | +Regular, Normal, Book, buch | +
| 500 | +Medium, kraeftig, kräftig | +
| 600 | +Semibold, SemiBold, Semi Bold, semi-bold, DemiBold, Demi Bold, demi-bold, halbfett | +
| 700 | +Bold, dreiviertelfett | +
| 800 | +ExtraBold, Extra Bold, extra-bold, ultra-bold, UltraBold, Ultra Bold, fett | +
| 900 | +Black, Heavy, extrafett | +
| 950 | +Extra Black, extra-black, Ultra Black, ultra-black | +
Note: values are case insensitive so for example Regular and regular will both work.
Any of these values can also include the Font Style Italic, if needed. Some examples of accepted values:
+ +regular
+Normal Italic
+700
+400 italic
+Bold italic
+ExtraBold Italic
+Letter Spacing, also known as kerning, defines the horizontal distance between individual characters.
+The default value is 0. In Penpot letter spacing is defined in px. In the token, you can use values in px or any reference to a Dimension / Spacing / Sizing / Letter Spacing Token.
+This token can be applied directly to a text element or be used as a reference in a Typography Composite Token.
+ +Text Case defines that the system should transform the capitalization of letters in a text element regardless of how they are typed.
+This property corresponds to text-transform in CSS.
Accepted values are none, uppercase, lowercase and capitalize. It also accepts references to another Text Case token.
This token can be applied directly to a text element or be used as a reference in a Typography Composite Token.
+ +Text Decoration defines an optional line as part of font styling properties, typically used to communicate the visual emphasis of a text.
+Accepted values are none, underline and strike-through. It also accepts references to another Text Decoration token.
This token can be applied directly to a text element or be used as a reference in a Typography Composite Token.
+ +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.
When a token set is selected, the tokens within the selected set are displayed on the panel below.
-Right-click a token set to perform these quick actions: