@adobe/spectrum-design-data 3.3.0-beta.2 → 3.4.0

package/guidelines/typography-system.json

@@ -8,11 +8,15 @@
     { "type": "purpose", "content": "Typography system" },
     {
       "type": "guideline",
-      "content": "Typography in Spectrum is aligned to an information hierarchy model, and it also echoes the foundational concept of attention hierarchy. Hierarchy in these type styles can be conveyed through font size, font weight, and font color. Larger-sized, heavier-weight, and darker-colored text draws more attention, and it communicates the most broad ideas (the need-to-know information). Smaller-sized, lighter-weight, and lighter-colored text draws less attention, and it communicates the most specific ideas (the nice-to-know information). Image: Type hierarchy scale showing heading sizes from XXXXL down to XS, decreasing in size and weight emphasis. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1b346eb0b888c66ef857046d82540202892167a51.png?width=750&format=png&optimize=medium)"
+      "content": "Typography in Spectrum is aligned to an information hierarchy model, and it also echoes the foundational concept of attention hierarchy. Hierarchy in these type styles can be conveyed through font size, font weight, and font color. Larger-sized, heavier-weight, and darker-colored text draws more attention, and it communicates the most broad ideas (the need-to-know information). Smaller-sized, lighter-weight, and lighter-colored text draws less attention, and it communicates the most specific ideas (the nice-to-know information). Image: Type hierarchy scale showing heading sizes from XXXXL down to XS, decreasing in size and weight emphasis. (source: https://spectrum.adobe.com/foundations/typography/media_1b346eb0b888c66ef857046d82540202892167a51.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Image: \"Heading of a page\" text sample shown in Extra Bold weight. (source: https://preview.spectrum.adobe.com/foundations/typography/media_11a4271b7e3cc0fdeb141a63d4f0c07f95d4fb969.png?width=750&format=png&optimize=medium)"
+      "content": "Spectrum offers guidance for a wide range of font weights to help establish visual hierarchy in layouts. Image: Font weight chart listing Black as limited use only; Extra Bold, Bold, Medium, and Regular as used in Spectrum 2; and Semi Light and Light as not used in Spectrum. (source: https://spectrum.adobe.com/foundations/typography/media_1f11e18d4d59c18e9fbbfe09e2d0d697a70810e26.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: \"Heading of a page\" text sample shown in Extra Bold weight. (source: https://spectrum.adobe.com/foundations/typography/media_11a4271b7e3cc0fdeb141a63d4f0c07f95d4fb969.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -20,7 +24,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: \"Export video\" button label shown in Bold weight. (source: https://preview.spectrum.adobe.com/foundations/typography/media_15d6a153d8903ccb8a7ba476abbea30eb8c84313d.png?width=750&format=png&optimize=medium)"
+      "content": "Image: \"Export video\" button label shown in Bold weight. (source: https://spectrum.adobe.com/foundations/typography/media_15d6a153d8903ccb8a7ba476abbea30eb8c84313d.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -28,7 +32,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: \"Edit image\" button label shown in Medium weight. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1d6d9ac8d1724727a00bd84cd411614cee695643f.png?width=750&format=png&optimize=medium)"
+      "content": "Image: \"Edit image\" button label shown in Medium weight. (source: https://spectrum.adobe.com/foundations/typography/media_1d6d9ac8d1724727a00bd84cd411614cee695643f.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -36,7 +40,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: \"Email address abc@adobe.com\" text sample shown in Regular weight. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1813f8775465ebff269a3da26b42db734d922aa04.png?width=750&format=png&optimize=medium)"
+      "content": "Image: \"Email address abc@adobe.com\" text sample shown in Regular weight. (source: https://spectrum.adobe.com/foundations/typography/media_1813f8775465ebff269a3da26b42db734d922aa04.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -44,11 +48,15 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Example text reading \"First, select the Brush tool.\" with \"Brush\" shown in bold for emphasis. (source: https://preview.spectrum.adobe.com/foundations/typography/media_12cff763718340b6cd67cd104f390ff440a7d7405.png?width=750&format=png&optimize=medium)"
+      "content": "Text formatting can be used to visually add clarity and adjust voice or meaning."
     },
     {
       "type": "guideline",
-      "content": "Image: Example text reading \"See Privacy Policy for more details\" with \"Privacy Policy\" shown as an underlined link. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1505b5ea2af6441ac894fa60eb5f6eee4847991e2.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Example text reading \"First, select the Brush tool.\" with \"Brush\" shown in bold for emphasis. (source: https://spectrum.adobe.com/foundations/typography/media_12cff763718340b6cd67cd104f390ff440a7d7405.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: Example text reading \"See Privacy Policy for more details\" with \"Privacy Policy\" shown as an underlined link. (source: https://spectrum.adobe.com/foundations/typography/media_1505b5ea2af6441ac894fa60eb5f6eee4847991e2.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -56,7 +64,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Example text reading \"This email contains confidential information\" with \"confidential information\" shown in bold for strong emphasis. (source: https://preview.spectrum.adobe.com/foundations/typography/media_12cd1dfa6a6125f8f0e24100a57a7a1126924bc94.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Example text reading \"This email contains confidential information\" with \"confidential information\" shown in bold for strong emphasis. (source: https://spectrum.adobe.com/foundations/typography/media_12cd1dfa6a6125f8f0e24100a57a7a1126924bc94.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -64,7 +72,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Example text reading \"I love drawing with Photoshop brushes!\" with \"love\" shown in italics for emphasis. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1b9b774b1f9d1c0322ae737a4a71034f92778dfdd.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Example text reading \"I love drawing with Photoshop brushes!\" with \"love\" shown in italics for emphasis. (source: https://spectrum.adobe.com/foundations/typography/media_1b9b774b1f9d1c0322ae737a4a71034f92778dfdd.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -72,15 +80,15 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum ensures that different sizes of text can work together harmoniously, on both desktop and mobile. All font sizes follow the Major Second type scale, which has a ratio of 1.125. This means that each size is multiplied or divided by 1.125 from the previous size, starting with the base size (font-size-100), and rounded to the nearest whole number. Custom text (any non-existing typography styles) or modifications to existing type styles should use a font size from this list. When selecting font sizes to ensure readability, keep in mind that Adobe Clean does not match 1:1 with system font size definitions. It's generally a size smaller than system fonts such as SF Pro, Segoe UI, Roboto, and others. Font sizeValue font-size-25 10 px font-size-50 11 px font-size-75 12 px font-size-100 14 px font-size-200 16 px font-size-300 18 px font-size-400 20 px font-size-500 22 px font-size-600 25 px font-size-700 28 px font-size-800 32 px font-size-900 36 px font-size-1000 40 px font-size-1100 45 px font-size-1200 51 px font-size-1300 58 px font-size-1400 65 px font-size-1500 73 px"
+      "content": "Spectrum ensures that different sizes of text can work together harmoniously, on both desktop and mobile. All font sizes follow the Major Second type scale, which has a ratio of 1.125. This means that each size is multiplied or divided by 1.125 from the previous size, starting with the base size (font-size-100), and rounded to the nearest whole number. Custom text (any non-existing typography styles) or modifications to existing type styles should use a font size from this list. When selecting font sizes to ensure readability, keep in mind that Adobe Clean does not match 1:1 with system font size definitions. It's generally a size smaller than system fonts such as SF Pro, Segoe UI, Roboto, and others. Font size Value font-size-25 10 px font-size-50 11 px font-size-75 12 px font-size-100 14 px font-size-200 16 px font-size-300 18 px font-size-400 20 px font-size-500 22 px font-size-600 25 px font-size-700 28 px font-size-800 32 px font-size-900 36 px font-size-1000 40 px font-size-1100 45 px font-size-1200 51 px font-size-1300 58 px font-size-1400 65 px font-size-1500 73 px"
     },
     {
       "type": "guideline",
-      "content": "Spectrum Web defines default line height values for each font size in the type scale. Heading, Title, Detail, and Component type styles use these values to maintain balanced spacing across a range of text sizes. The default line height gradually decreases from approximately 130% at smaller font sizes to 115% at larger sizes, then rounds to whole even pixel values. This helps maintain consistent visual spacing while avoiding half-pixel rendering within components. Body and Code type styles use a more spacious line height of 1.5× the font size to improve readability for longer passages of text. For Chinese, Japanese, and Korean (CJK) languages, Spectrum uses a 1.7× multiplier to accommodate the visual characteristics of those writing systems. Learn more about the line height calculations, interpolation, and rounding methodology in the Adobe Clean Spectrum Wiki."
+      "content": "Line height controls the vertical space between lines of text and plays an important role in readability and visual hierarchy. When line height is too tight, text becomes more difficult to scan. When it is too loose, related content can feel disconnected. Line height is implemented differently across platforms because each platform calculates and renders it differently. As a result, equivalent typography styles may use different line height values. Image: Diagram of the text \"Spectrum delivers what's needed, when it's needed.\" with a pink highlighted line and callout labeling the line height measurement. (source: https://spectrum.adobe.com/foundations/typography/media_191500241ed99ecbd2f7baa1d86ecaef92fb00d62.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Spectrum Web defines default line height values for each font size in the type scale. Heading, Title, Detail, and Component type styles use these values to maintain balanced spacing across a range of text sizes. The default line height gradually decreases from approximately 130% at smaller font sizes to 115% at larger sizes, then rounds to whole even pixel values. This helps maintain consistent visual spacing while avoiding half-pixel rendering within components. Body and Code type styles use a more spacious line height of 1.5× the font size to improve readability for longer passages of text. For Chinese, Japanese, and Korean (CJK) languages, Spectrum uses a 1.7× multiplier to accommodate the visual characteristics of those writing systems. Line heightUsed forTokenValueCJK valueDefaultHeading, Title, Detail, Component line-height-font-size-# ~115–130% (varies by size, even values only)150%SpaciousBody, Code line-height-200 150%170%"
+      "content": "Spectrum Web defines default line height values for each font size in the type scale. Heading, Title, Detail, and Component type styles use these values to maintain balanced spacing across a range of text sizes. The default line height gradually decreases from approximately 130% at smaller font sizes to 115% at larger sizes, then rounds to whole even pixel values. This helps maintain consistent visual spacing while avoiding half-pixel rendering within components. Body and Code type styles use a more spacious line height of 1.5× the font size to improve readability for longer passages of text. For Chinese, Japanese, and Korean (CJK) languages, Spectrum uses a 1.7× multiplier to accommodate the visual characteristics of those writing systems. Line height Used for Token Value CJK value Default Heading, Title, Detail, Component line-height-font-size-# ~115–130% (varies by size, even values only) 150% Spacious Body, Code line-height-200 150% 170%"
     },
     {
       "type": "guideline",
@@ -92,7 +100,7 @@
     },
     {
       "type": "guideline",
-      "content": "Also known as text styles in Figma, Spectrum uses type styles to help maintain a consistent semantic meaning and create accessible, legible, and on-brand experiences across platforms. The type styles include Heading, Title, Body, Detail, Component, Code, and Monospace numbers. These styles come in a range of t-shirt sizes (such as Small, Medium, and Large) and encompass typography elements like font family, font size, line height, weight, and color. This ensures that all Adobe interfaces can maintain a predictable sense of information hierarchy. Keep in mind that a single product won't need all of these sizes, and especially at the same time. Spectrum's type styles are intentionally comprehensive to allow platform and product teams to selectively choose type styles that accommodate their unique needs. As a starting point, use a t-shirt size from each of the type styles. For example: pair Heading Medium with Title Medium, Body Medium, and Medium t-shirt sized components. If you'd like to override these styles, there's some flexibility for you to define your own typography and hierarchy as long as any customization follows Spectrum guidance for font size and color usage. Use what best fits your context and best supports your users. Explore platform-specific type styles in each platform's Figma library: Spectrum Web typography Spectrum iOS typography Spectrum Android typography"
+      "content": "Also known as text styles in Figma, Spectrum uses type styles to help maintain a consistent semantic meaning and create accessible, legible, and on-brand experiences across platforms. The type styles include Heading, Title, Body, Detail, Component, Code, and Monospace numbers. These styles come in a range of t-shirt sizes (such as Small, Medium, and Large) and encompass typography elements like font family, font size, line height, weight, and color. This ensures that all Adobe interfaces can maintain a predictable sense of information hierarchy. Keep in mind that a single product won't need all of these sizes, and especially at the same time. Spectrum's type styles are intentionally comprehensive to allow platform and product teams to selectively choose type styles that accommodate their unique needs. As a starting point, use a t-shirt size from each of the type styles. For example: pair Heading Medium with Title Medium, Body Medium, and Medium t-shirt sized components. If you'd like to override these styles, there's some flexibility for you to define your own typography and hierarchy as long as any customization follows Spectrum guidance for font size and color usage. Use what best fits your context and best supports your users."
     },
     {
       "type": "guideline",
@@ -100,15 +108,15 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum Web.\n\nImage: Web heading text style scale showing Heading XXXXL down to Heading XS in decreasing sizes. (source: https://preview.spectrum.adobe.com/foundations/typography/media_12067c10839bec0388b50ac26cabcd5f866e2550f.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingHeading XXXXL15001500ExtraBoldNoneHeading XXXL13001300ExtraBoldNoneHeading XXL11001100ExtraBoldNoneHeading XL900900ExtraBoldNoneHeading L700700ExtraBoldNoneHeading M500500ExtraBoldNoneHeading S400400ExtraBoldNoneHeading XS300300ExtraBoldNone"
+      "content": "Spectrum Web.\n\nImage: Web heading text style scale showing Heading XXXXL down to Heading XS in decreasing sizes. (source: https://spectrum.adobe.com/foundations/typography/media_12067c10839bec0388b50ac26cabcd5f866e2550f.png?width=750&format=png&optimize=medium) Style Font size Line height Default weight Letter spacing Heading XXXXL 1500 1500 ExtraBold None Heading XXXL 1300 1300 ExtraBold None Heading XXL 1100 1100 ExtraBold None Heading XL 900 900 ExtraBold None Heading L 700 700 ExtraBold None Heading M 500 500 ExtraBold None Heading S 400 400 ExtraBold None Heading XS 300 300 ExtraBold None"
     },
     {
       "type": "guideline",
-      "content": "Spectrum iOS.\n\nImage: iOS heading text style scale showing Heading XL, Heading L, and Heading M in bold weight. (source: https://preview.spectrum.adobe.com/foundations/typography/media_15a03f87ea190cedc9b8264e2071454df77cc44a6.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingHeading XL900AutoExtraBold900Heading L700AutoExtraBold700Heading M500AutoExtraBold500"
+      "content": "Spectrum iOS.\n\nImage: iOS heading text style scale showing Heading XL, Heading L, and Heading M in bold weight. (source: https://spectrum.adobe.com/foundations/typography/media_15a03f87ea190cedc9b8264e2071454df77cc44a6.png?width=750&format=png&optimize=medium) Style Font size Line height Default weight Letter spacing Heading XL 900 Auto ExtraBold 900 Heading L 700 Auto ExtraBold 700 Heading M 500 Auto ExtraBold 500"
     },
     {
       "type": "guideline",
-      "content": "Spectrum Android.\n\nImage: Android heading text style scale showing Heading XL, Heading L, and Heading M. (source: https://preview.spectrum.adobe.com/foundations/typography/media_184a97041a07d8ce67b5b77624c370281df268248.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingHeading XL900900BoldNoneHeading L700700BoldNoneHeading M500500BoldNone"
+      "content": "Spectrum Android.\n\nImage: Android heading text style scale showing Heading XL, Heading L, and Heading M. (source: https://spectrum.adobe.com/foundations/typography/media_184a97041a07d8ce67b5b77624c370281df268248.png?width=750&format=png&optimize=medium) Style Font size Line height Default weight Letter spacing Heading XL 900 900 Bold None Heading L 700 700 Bold None Heading M 500 500 Bold None"
     },
     {
       "type": "guideline",
@@ -116,15 +124,15 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum Web.\n\nImage: Web title text style scale showing Title XXXL down to Title XS in decreasing sizes. (source: https://preview.spectrum.adobe.com/foundations/typography/media_17d39d3df837c18abea0e3d34678f7d2e94637108.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingTitle XXXL600600BoldNoneTitle XXL500500BoldNoneTitle XL400400BoldNoneTitle L300300BoldNoneTitle M200200BoldNoneTitle S100100BoldNoneTitle XS7575BoldNone"
+      "content": "Spectrum Web.\n\nImage: Web title text style scale showing Title XXXL down to Title XS in decreasing sizes. (source: https://spectrum.adobe.com/foundations/typography/media_17d39d3df837c18abea0e3d34678f7d2e94637108.png?width=750&format=png&optimize=medium) Style Font size Line height Default weight Letter spacing Title XXXL 600 600 Bold None Title XXL 500 500 Bold None Title XL 400 400 Bold None Title L 300 300 Bold None Title M 200 200 Bold None Title S 100 100 Bold None Title XS 75 75 Bold None"
     },
     {
       "type": "guideline",
-      "content": "Spectrum iOS.\n\nImage: iOS title text style scale showing Title XL, Title L, and Title M in bold weight. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1b6e505c9be86bedb527396bf4fc8d03c0e01de17.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingTitle XL400AutoBold400Title L300AutoBold300Title M200AutoBold200"
+      "content": "Spectrum iOS.\n\nImage: iOS title text style scale showing Title XL, Title L, and Title M in bold weight. (source: https://spectrum.adobe.com/foundations/typography/media_1b6e505c9be86bedb527396bf4fc8d03c0e01de17.png?width=750&format=png&optimize=medium) Style Font size Line height Default weight Letter spacing Title XL 400 Auto Bold 400 Title L 300 Auto Bold 300 Title M 200 Auto Bold 200"
     },
     {
       "type": "guideline",
-      "content": "Spectrum Android.\n\nImage: Android title text style scale showing Title XL, Title L, and Title M in regular weight. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1a163f0812c65f011712c31984d072c81b8141752.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingTitle XL400AutoSemiBoldNoneTitle L300AutoSemiBold0.0075 emTitle M200AutoSemiBold0.015 em"
+      "content": "Spectrum Android.\n\nImage: Android title text style scale showing Title XL, Title L, and Title M in regular weight. (source: https://spectrum.adobe.com/foundations/typography/media_1a163f0812c65f011712c31984d072c81b8141752.png?width=750&format=png&optimize=medium) Style Font size Line height Default weight Letter spacing Title XL 400 Auto SemiBold None Title L 300 Auto SemiBold 0.0075 em Title M 200 Auto SemiBold 0.015 em"
     },
     {
       "type": "guideline",
@@ -132,39 +140,39 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum Web.\n\nImage: Web body text style scale showing Body XXXL down to Body XXS in decreasing sizes. (source: https://preview.spectrum.adobe.com/foundations/typography/media_133057cb102a794cc993b3da0a5b487d88541b031.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingBody XXXL600150%RegularNoneBody XXL500150%RegularNoneBody XL400150%RegularNoneBody L300150%RegularNoneBody M200150%RegularNoneBody S100150%RegularNoneBody XS75150%RegularNoneBody XXS50150%RegularNone"
+      "content": "Spectrum Web.\n\nImage: Web body text style scale showing Body XXXL down to Body XXS in decreasing sizes. (source: https://spectrum.adobe.com/foundations/typography/media_133057cb102a794cc993b3da0a5b487d88541b031.png?width=750&format=png&optimize=medium) Style Font size Line height Default weight Letter spacing Body XXXL 600 150% Regular None Body XXL 500 150% Regular None Body XL 400 150% Regular None Body L 300 150% Regular None Body M 200 150% Regular None Body S 100 150% Regular None Body XS 75 150% Regular None Body XXS 50 150% Regular None"
     },
     {
       "type": "guideline",
-      "content": "Spectrum iOS.\n\nImage: iOS body text style scale showing Body L, M, S, XS, and XXS in regular weight. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1b8c885ef2ec58ae0ca096e4650210e86bc634116.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingBody L300AutoRegular300Body M200AutoRegular200Body S100AutoRegular100Body XS75AutoRegular75Body XXS50AutoRegular50"
+      "content": "Spectrum iOS.\n\nImage: iOS body text style scale showing Body L, M, S, XS, and XXS in regular weight. (source: https://spectrum.adobe.com/foundations/typography/media_1b8c885ef2ec58ae0ca096e4650210e86bc634116.png?width=750&format=png&optimize=medium) Style Font size Line height Default weight Letter spacing Body L 300 Auto Regular 300 Body M 200 Auto Regular 200 Body S 100 Auto Regular 100 Body XS 75 Auto Regular 75 Body XXS 50 Auto Regular 50"
     },
     {
       "type": "guideline",
-      "content": "Spectrum Android.\n\nImage: Android body text style scale showing Body L through Body XXS, each with a Regular and Emphasized (bold) variant. (source: https://preview.spectrum.adobe.com/foundations/typography/media_13a342114f88d58532ad36978f238bcc6343b8a6d.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingBody L300300Regular0.0075 emBody L Emphasized300300SemiBold0.0075 emBody M200200Regular0.015 emBody M Emphasized200200Semibold0.015 emBody S100100Regular0.0225 emBody S Emphasized100100Semibold0.0225 emBody XS7575Regular0.03 emBody XS Emphasized7575Semibold0.03 emBody XXS5050Regular0.03 emBody XXS Emphasized5050Semibold0.03 em"
+      "content": "Spectrum Android.\n\nImage: Android body text style scale showing Body L through Body XXS, each with a Regular and Emphasized (bold) variant. (source: https://spectrum.adobe.com/foundations/typography/media_13a342114f88d58532ad36978f238bcc6343b8a6d.png?width=750&format=png&optimize=medium) Style Font size Line height Default weight Letter spacing Body L 300 300 Regular 0.0075 em Body L Emphasized 300 300 SemiBold 0.0075 em Body M 200 200 Regular 0.015 em Body M Emphasized 200 200 Semibold 0.015 em Body S 100 100 Regular 0.0225 em Body S Emphasized 100 100 Semibold 0.0225 em Body XS 75 75 Regular 0.03 em Body XS Emphasized 75 75 Semibold 0.03 em Body XXS 50 50 Regular 0.03 em Body XXS Emphasized 50 50 Semibold 0.03 em"
     },
     {
       "type": "guideline",
-      "content": "Detail text\" is a broad term for any kind of text that communicates ideas that are even more specific than body text. Text using the Detail style acts as supporting context to any other information presented. Detail text often uses Medium weight when paired with iconography, to maintain visual balance with the 1.5 px stroke width of Spectrum 2 icons. It also often uses detail-color (gray-600) to appear more subdued in terms of visual hierarchy. Image: \"Photo editing\" course card with the duration and category text \"3 hr 10 min • Learning Path\" labeled as Detail M. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1fe6376efdf44208f03b692a85620190002c7ab67.png?width=750&format=png&optimize=medium)"
+      "content": "Detail text\" is a broad term for any kind of text that communicates ideas that are even more specific than body text. Text using the Detail style acts as supporting context to any other information presented. Detail text often uses Medium weight when paired with iconography, to maintain visual balance with the 1.5 px stroke width of Spectrum 2 icons. It also often uses detail-color (gray-600) to appear more subdued in terms of visual hierarchy. Image: \"Photo editing\" course card with the duration and category text \"3 hr 10 min • Learning Path\" labeled as Detail M. (source: https://spectrum.adobe.com/foundations/typography/media_1fe6376efdf44208f03b692a85620190002c7ab67.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Component is the type style that is applied to text within UI components. The Component type style comes in multiple font weights to support its flexibility across components in the design system. For example, the Spectrum button uses the Component type style with bold weight. Action button uses the Component type style with medium weight, and text field uses the Component type style with regular weight. Component styles are supported on Web only. Spectrum offers component text styles in the Spectrum Web Figma library, to let you quickly apply text formatting to any text element in a design. This will help you stay connected to the system without needing to detach or override other text styles like Body or Title. For iOS and Android, use type styles that share corresponding weight and sizes from Title, Body, and Monospace number styles. Image: Component text style examples: a gray pill labeled \"Component XL Bold,\" a gray pill labeled \"Component L Medium,\" a text field value labeled \"Component M Regular,\" and a blue toast message showing \"Component M Regular\" for the message and \"Component M Bold\" for its label button. (source: https://preview.spectrum.adobe.com/foundations/typography/media_114c9ac62642286319d93c86aba5097a85752c1a0.png?width=750&format=png&optimize=medium)"
+      "content": "Component is the type style that is applied to text within UI components. The Component type style comes in multiple font weights to support its flexibility across components in the design system. For example, the Spectrum button uses the Component type style with bold weight. Action button uses the Component type style with medium weight, and text field uses the Component type style with regular weight. Component styles are supported on Web only. Spectrum offers component text styles in the Spectrum Web Figma library, to let you quickly apply text formatting to any text element in a design. This will help you stay connected to the system without needing to detach or override other text styles like Body or Title. For iOS and Android, use type styles that share corresponding weight and sizes from Title, Body, and Monospace number styles. Image: Component text style examples: a gray pill labeled \"Component XL Bold,\" a gray pill labeled \"Component L Medium,\" a text field value labeled \"Component M Regular,\" and a blue toast message showing \"Component M Regular\" for the message and \"Component M Bold\" for its label button. (source: https://spectrum.adobe.com/foundations/typography/media_114c9ac62642286319d93c86aba5097a85752c1a0.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Code is a typography component used for text that represents code. The default font for showing code is Source Code Pro. Code styles are currently supported on Web only. Image: Example sentence \"Use the isPending prop to display a pending state.\" with \"isPending\" shown in a code style labeled Code M. (source: https://preview.spectrum.adobe.com/foundations/typography/media_176c5ceadc0bec067be968fda5d7bf9c583abe136.png?width=750&format=png&optimize=medium)"
+      "content": "Code is a typography component used for text that represents code. The default font for showing code is Source Code Pro. Code styles are currently supported on Web only. Image: Example sentence \"Use the isPending prop to display a pending state.\" with \"isPending\" shown in a code style labeled Code M. (source: https://spectrum.adobe.com/foundations/typography/media_176c5ceadc0bec067be968fda5d7bf9c583abe136.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Monospace numbers are used for numeric content that benefits from consistent alignment, such as timestamps, counters, and adjustable values. Because each digit occupies the same horizontal space, they reduce visual shifting and make changing values easier to compare and scan. Monospace numbers are currently supported as type styles on iOS and Android only. Learn more about using tabular numbers. Image: Mobile app screenshot of a \"Projects\" screen with video duration timestamps (e.g., \"4:19,\" \"3:21,\" \"1:12\") labeled as Monospace number XXS. (source: https://preview.spectrum.adobe.com/foundations/typography/media_17e295f27bb0495cbb32b8d20f6c18f97cf4e77ed.png?width=750&format=png&optimize=medium)"
+      "content": "Monospace numbers are used for numeric content that benefits from consistent alignment, such as timestamps, counters, and adjustable values. Because each digit occupies the same horizontal space, they reduce visual shifting and make changing values easier to compare and scan. Monospace numbers are currently supported as type styles on iOS and Android only. Learn more about using tabular numbers. Image: Mobile app screenshot of a \"Projects\" screen with video duration timestamps (e.g., \"4:19,\" \"3:21,\" \"1:12\") labeled as Monospace number XXS. (source: https://spectrum.adobe.com/foundations/typography/media_17e295f27bb0495cbb32b8d20f6c18f97cf4e77ed.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Comparing body, component, and detail.\n\nThe differences between Body text, Component text, and Detail text are nuanced and often come down to applied semantic meaning. The characteristic differences in Detail text are the default weight, size, letter spacing, all-caps treatment for marketing contexts, and color usage. Detail text defaults to Medium weight, a smaller font size, and lighter shades of gray. It also uses the updated per-font-size line height, while Body text uses the spacious line height multiplier of 1.5x font-size. Note: There are known similarities between the Component and Detail styles, specifically when using these for text such as metadata and labels. There are nuanced semantic differences, but when in doubt, use the Component type style because it is more adaptable. Image: Side-by-side comparison of Body M, Component L Regular, and Detail L text styles, each annotated with weight, color token, and line-height token. (source: https://preview.spectrum.adobe.com/foundations/typography/media_168e64f23c16115138aedb46d8cc124a00b41f066.png?width=750&format=png&optimize=medium)"
+      "content": "Comparing body, component, and detail.\n\nThe differences between Body text, Component text, and Detail text are nuanced and often come down to applied semantic meaning. The characteristic differences in Detail text are the default weight, size, letter spacing, all-caps treatment for marketing contexts, and color usage. Detail text defaults to Medium weight, a smaller font size, and lighter shades of gray. It also uses the updated per-font-size line height, while Body text uses the spacious line height multiplier of 1.5x font-size. Note: There are known similarities between the Component and Detail styles, specifically when using these for text such as metadata and labels. There are nuanced semantic differences, but when in doubt, use the Component type style because it is more adaptable. Image: Side-by-side comparison of Body M, Component L Regular, and Detail L text styles, each annotated with weight, color token, and line-height token. (source: https://spectrum.adobe.com/foundations/typography/media_168e64f23c16115138aedb46d8cc124a00b41f066.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Spectrum defines fallback fonts for situations where Adobe Clean Spectrum isn't available. These fonts are selected to provide a consistent experience across operating systems while maintaining similar typographic characteristics. TypefaceWeb (listed by priority)iOSAndroidAdobe Clean Spectrum VFAdobe Clean, Source Sans Pro, San Francisco, Roboto, Segoe UI, Trebuchet MS, Lucida GrandeSystem defaultsSystem defaults (may vary by device)"
+      "content": "Spectrum defines fallback fonts for situations where Adobe Clean Spectrum isn't available. These fonts are selected to provide a consistent experience across operating systems while maintaining similar typographic characteristics. Typeface Web (listed by priority) iOS Android Adobe Clean Spectrum VF Adobe Clean, Source Sans Pro, San Francisco, Roboto, Segoe UI, Trebuchet MS, Lucida Grande System defaults System defaults (may vary by device)"
     },
     {
       "type": "guideline",
@@ -173,7 +181,7 @@
     { "type": "guideline", "content": "Spectrum iOS" },
     {
       "type": "guideline",
-      "content": "Image: Comparison of the word \"title\" scaling up in size and pink color, illustrating iOS Dynamic Type. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1b4fc3f9aed75707e698905a7a27d9188c29e8d4d.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Comparison of the word \"title\" scaling up in size and pink color, illustrating iOS Dynamic Type. (source: https://spectrum.adobe.com/foundations/typography/media_1b4fc3f9aed75707e698905a7a27d9188c29e8d4d.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -182,18 +190,14 @@
     { "type": "guideline", "content": "Spectrum Android" },
     {
       "type": "guideline",
-      "content": "Image: Comparison of the word \"36 sp\" and \"72\" scaling up in size on a pink gradient background, illustrating Android font scaling. (source: https://preview.spectrum.adobe.com/foundations/typography/media_10dff602704ed933744be8de9b3cd1035fb63a04c.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Font scaling.\n\nSpectrum typography on Android uses scale-independent pixels (sp), which automatically respond to a user's font size preferences. This allows text to scale with Android accessibility settings without additional configuration. Learn more in Android Accessibility: Text scaling and Android 14: Font scaling. Download the Spectrum Android Catalog app to explore available type sizes and see how they respond to accessibility settings. Refer to the installation guide for setup instructions."
+      "content": "Image: Comparison of the word \"36 sp\" and \"72\" scaling up in size on a pink gradient background, illustrating Android font scaling. (source: https://spectrum.adobe.com/foundations/typography/media_10dff602704ed933744be8de9b3cd1035fb63a04c.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
       "content": "Font scaling.\n\nSpectrum typography on Android uses scale-independent pixels (sp), which automatically respond to a user's font size preferences. This allows text to scale with Android accessibility settings without additional configuration. Learn more in Android Accessibility: Text scaling and Android 14: Font scaling."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/typography/typography-system",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/typography/typography-system",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/using-icons.json

@@ -8,81 +8,77 @@
     { "type": "purpose", "content": "Using icons" },
     {
       "type": "guideline",
-      "content": "Only use approved icons.\n\nThe library currently only includes a subset of icons, and are for mock-up purposes only. If you need to create a mock-up with an icon that isn't available yet, just use a placeholder icon. Don't use unapproved icons in your work (for example, downloaded from Noun Project, or icons you've created yourself). If you have a question about icons, or would like to reach out to the Icons team directly, email icons@adobe.com or post in #icons on Slack."
+      "content": "Workflow icons are graphical metaphors or symbols that users interact with to navigate and manipulate objects. They maintain a consistent size and style within each platform to ensure visual harmony and usability. While consistency is key, it is now fairly common to combine different icon scales to support hierarchy and context. Image: Various examples of workflow icons, such as file folder, favorite, and layer. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_19d660d204b7c5e1a7c63b2222d9d074c750f5bd7.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Workflow icons are graphical metaphors or symbols that users interact with to navigate and manipulate objects. They maintain a consistent size and style within each platform to ensure visual harmony and usability. While consistency is key, it is now fairly common to combine different icon scales to support hierarchy and context. Image: Various examples of workflow icons, such as file folder, favorite, and layer. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1d10bae814bb05da7b7b46367d624302ed39a31c2.png?width=750&format=png&optimize=medium)"
+      "content": "UI icons are atomic pieces — like arrows, crosses, or chevrons — that are part of a component. They aren't metaphorical per se, but they're an indication of how users interact with a component (for example, what happens when you click on a disclosure chevron or drag handle in a panel). Unlike workflow icons, UI icons come in assorted sizes. Image: Various examples of UI icons, including asterisks, hold affordances, and checkmarks. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_129452f026ebb116f3c0ab44ea5a9d0f39a46bf23.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "UI icons are atomic pieces — like arrows, crosses, or chevrons — that are part of a component. They aren't metaphorical per se, but they're an indication of how users interact with a component (for example, what happens when you click on a disclosure chevron or drag handle in a panel). Unlike workflow icons, UI icons come in assorted sizes. Image: Various examples of UI icons, including asterisks, hold affordances, and checkmarks. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1b6478b096dd00f683f63c4dd0767a4b9b0f7e935.png?width=750&format=png&optimize=medium)"
+      "content": "Badges (status and premium).\n\nStatus badges are indicators that communicate a variety of statuses or states, such as presence, validity, completeness, and more. Premium badges indicate that a feature is only available to paying customers. Image: Six cloud icons representing status badges: syncing, analytics, error, paused, warning, and connectivity, arranged in two rows. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1e67f94991d24dd8085a3be86ea3d8133fc229a25.png?width=750&format=png&optimize=medium) Image: Icons and buttons showcasing premium features, including a crown, image badge, and gradient (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1201b1e81a17bd9420e0cff5d1d07db3605560c27.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Badges (status and premium).\n\nStatus badges are indicators that communicate a variety of statuses or states, such as presence, validity, completeness, and more. Premium badges indicate that a feature is only available to paying customers. Image: Six cloud icons representing status badges: syncing, analytics, error, paused, warning, and connectivity, arranged in two rows. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1a20308f3eaefeef8577fd927826d4cf6a2321863.png?width=750&format=png&optimize=medium)Image: Icons and buttons showcasing premium features, including a crown, image badge, and gradient (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_12493a804fe436690ad8ca706ad634857ab86168b.png?width=750&format=png&optimize=medium)"
+      "content": "Cursors and HUD.\n\nThe cursor style has also been updated to match the look and feel of the Spectrum 2 icons. Image: A grid of 8 cursor icons on a gray background, including arrow, move, rotate, selection, eyedropper, pen tool, and hand pointer. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_16dbded183485739df532a9e5c6d8691ad98e088e.png?width=750&format=png&optimize=medium) Image: Examples of HUD icons in an on-canvas experience, using an outlined style, such as a expand arrow set and a share action. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_18f38b43b49774ba7e2ee84bdf4f8d31f486346e8.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Cursors and HUD.\n\nThe cursor style has also been updated to match the look and feel of the Spectrum 2 icons. Image: A grid of 8 cursor icons on a gray background, including arrow, move, rotate, selection, eyedropper, pen tool, and hand pointer. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_14099da83300498315179665ee440523696123b68.png?width=750&format=png&optimize=medium)Image: Examples of HUD icons in an on-canvas experience, using an outlined style, such as a expand arrow set and a share action. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1fd0a2a267d8bd6d9dc6f20245d5303842cac457b.png?width=750&format=png&optimize=medium)"
+      "content": "Workflow icon sizes.\n\nSpectrum 2 workflow icons come in two sizes per platform, but with one stroke weight: 1.5 px. The primary size for Desktop/Web is a canvas of 20 px with the icon being ~18 px. There's a secondary size for UI areas — like a layers panel, lists, or cards — which require smaller versions and come in a 16 px canvas with the icon being ~14 px. The equivalent for Mobile is the primary size of the canvas at 24 px with the icon being ~22 px. The secondary size canvas is 20 px with the icon being ~18px. Image: Desktop/Web UI sizing guide showing icon sizes (14px, 18px) and canvas sizes (16px, 20px) in 4px increments with labels. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1236e359414097f6bc99a83a12d01e1f93d08b158.png?width=750&format=png&optimize=medium) Image: Mobile UI size guide showing icon sizes (18px, 22px) and canvas sizes (20px, 24px) with increments of 4px, labeled secondary and primary. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1515921a808568b3251961e02dd58984d15f85037.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Workflow icon sizes.\n\nSpectrum 2 workflow icons come in two sizes per platform, but with one stroke weight: 1.5 px. The primary size for Desktop/Web is a canvas of 20 px with the icon being ~18 px. There's a secondary size for UI areas — like a layers panel, lists, or cards — which require smaller versions and come in a 16 px canvas with the icon being ~14 px. The equivalent for Mobile is the primary size of the canvas at 24 px with the icon being ~22 px. The secondary size canvas is 20 px with the icon being ~18px. Image: Desktop/Web UI sizing guide showing icon sizes (14px, 18px) and canvas sizes (16px, 20px) in 4px increments with labels. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_15cc60a02f640367d13c152a58cef1ff79a0cff95.png?width=750&format=png&optimize=medium)Image: Mobile UI size guide showing icon sizes (18px, 22px) and canvas sizes (20px, 24px) with increments of 4px, labeled secondary and primary. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_14ed11f913ff30997742935d9d2a54dffdc4a4f84.png?width=750&format=png&optimize=medium)"
+      "content": "T-shirt sizes.\n\nIn Spectrum components, workflow icons scale up or down slightly when they're used. For example: a 20 px icon in a medium-sized component will be slightly larger in a large-sized component, and smaller in a small-sized component. UI icons come in their respective size range, since Spectrum components treat these differently."
     },
     {
       "type": "guideline",
-      "content": "T-shirt sizes.\n\nIn Spectrum components, workflow icons scale up or down slightly when they're used. For example: a 20 px icon in a medium-sized component will be slightly larger in a large-sized component, and smaller in a small-sized component. UI icons come in their respective size range, since Spectrum components treat these differently."
+      "content": "S2\" is the prefix for Spectrum 2 icons. Here's a breakdown of each part of the icon naming convention: Prefix identifies it as part of a larger group of assets. Type is the type of the asset: Icon, Ani-Icon, Ani-Illu, Illu, Cur, or Mock-Icon. Icon name is in Pascal case: there are no empty spaces or individual characters allowed. When names use multiple words, it utilizes a hierarchy to determine the word sequence. Icon canvas size is stated in pixel at @1x. Icon State indicator: normal state is \"_N\", selected state is \"_S\", and Dark UI theme adds a \"D\". Filetype suffix indicates the asset format, like SVG or PDF. Image: Key example of a naming convention for a Spectrum 2 icon, with parts differentiated by underscores in between. Prefix, S2. Type, Icon. Icon name in pascal case, TextAlignLeft. Size or hotspot, 20. State, N and UI theme, D. Period. File type suffix, SVG. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_173ea0c683d262b14b6650ec2b1e7c10bff15b4e9.png?width=750&format=png&optimize=medium) An example of the naming convention for Spectrum 2 (S2) icons."
     },
     {
       "type": "guideline",
-      "content": "S2\" is the prefix for Spectrum 2 icons. Here's a breakdown of each part of the icon naming convention: Prefix identifies it as part of a larger group of assets. Type is the type of the asset: Icon, Ani-Icon, Ani-Illu, Illu, Cur, or Mock-Icon. Icon name is in Pascal case: there are no empty spaces or individual characters allowed. When names use multiple words, it utilizes a hierarchy to determine the word sequence. Icon canvas size is stated in pixel at @1x. Icon State indicator: normal state is \"_N\", selected state is \"_S\", and Dark UI theme adds a \"D\". Filetype suffix indicates the asset format, like SVG or PDF. Image: Key example of a naming convention for a Spectrum 2 icon, with parts differentiated by underscores in between. Prefix, S2. Type, Icon. Icon name in pascal case, TextAlignLeft. Size or hotspot, 20. State, N and UI theme, D. Period. File type suffix, SVG. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_17128a0efb9b1a8ebf9b7108b35d24fbf441a7864.png?width=750&format=png&optimize=medium)An example of the naming convention for Spectrum 2 (S2) icons."
+      "content": "Stroke border (weight).\n\nKeeping one stroke weight consistent within a size range helps to balance out and contrast the visual weight. For Web and Desktop platforms, icons are designed at a 20 px canvas as default with a 1.5 px stroke, resulting in a 1.64 px stroke when sized up to 24 px for mobile. This helps keep a unified look, and it builds icons efficiently since it's not necessary to redraw them for each platform. Image: Examples showing icon border width and in context of components. A Web or Desktop Edit icon has a size of 20 pixels and stroke width of 1.5 pixels, shown in selected and quiet variants of a button with icon, label Edit. A Mobile icon has a size of 24 pixels and a stroke width of 1.64 pixels, scaled, shown in selected and quiet variants of a button with icon, label Edit. The mobile buttons appear larger in size compared to the Web or Desktop buttons. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1217f999349e7af13d6bbbdd4a76179d6ba3cd1b7.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Stroke border (weight).\n\nKeeping one stroke weight consistent within a size range helps to balance out and contrast the visual weight. For Web and Desktop platforms, icons are designed at a 20 px canvas as default with a 1.5 px stroke, resulting in a 1.64 px stroke when sized up to 24 px for mobile. This helps keep a unified look, and it builds icons efficiently since it's not necessary to redraw them for each platform. Image: Examples showing icon border width and in context of components. A Web or Desktop Edit icon has a size of 20 pixels and stroke width of 1.5 pixels, shown in selected and quiet variants of a button with icon, label Edit. A Mobile icon has a size of 24 pixels and a stroke width of 1.64 pixels, scaled, shown in selected and quiet variants of a button with icon, label Edit. The mobile buttons appear larger in size compared to the Web or Desktop buttons. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_14e9eaa9cdcd6e1c866e064a2bb5b7a32e2dd8687.png?width=750&format=png&optimize=medium)"
+      "content": "Corner radius and shape rounding.\n\nAll icons with angles get a 1.5 px rounding treatment to achieve a rounder appearance. Inner corners are slightly rounded, and all stroke ends have rounded end caps. By default, the corner radius can be decreased in case a metaphor requires pointy edges. Image: Diagram showing an example of corner radius and shape rounding. A 20 pixel icon canvas shows an Add icon. The corner radius of the icon is 1.5 pixels, includes rounded end caps, and has a stroke weight of 1.5 pixels. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1d62ddcbe62292e82279c38806a2c28578aa7bee5.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Corner radius and shape rounding.\n\nAll icons with angles get a 1.5 px rounding treatment to achieve a rounder appearance. Inner corners are slightly rounded, and all stroke ends have rounded end caps. By default, the corner radius can be decreased in case a metaphor requires pointy edges. Image: Diagram showing an example of corner radius and shape rounding. A 20 pixel icon canvas shows an Add icon. The corner radius of the icon is 1.5 pixels, includes rounded end caps, and has a stroke weight of 1.5 pixels. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_165556abe4570a4bdc841a3fb4dbc423215dcd3a5.png?width=750&format=png&optimize=medium)"
+      "content": "Icon and badges placement.\n\nIcon designs include a safe area to ensure there's flexibility for finding the best positioning and balance in a layout. The main shape should be centered, and modifier placement is primarily at the bottom right corner of the canvas. Notification dots appear at the top right corner (these are mostly added programmatically). Image: Diagram showing how a badge and a modifier are placed together to create an Add People icon. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_164bc82f5960b835d1d59dacb5972fff363daf64b.png?width=750&format=png&optimize=medium) The intersections of badge/modifier placement. Image: Diagram showing icon safe area. On Desktop, an icon has a 32 pixel canvas. 20 pixels are the icon, with a 4 pixel rounding area. Within the 20 pixels, there's an additional 1 pixel of space as a safe area. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_12be2561e5bfac5b291bc83f288f974a14693786a.png?width=750&format=png&optimize=medium) Image: Diagram showing icon safe area. On Mobile, an icon has a 40 pixel canvas. 24 pixels are the icon, with a 5 pixel rounding area. Within the 24 pixels, there's an additional 1 pixel of space as a safe area. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1429c0c52bd33f83e03fb5948c936b12b806c7555.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Icon and badges placement.\n\nIcon designs include a safe area to ensure there's flexibility for finding the best positioning and balance in a layout. The main shape should be centered, and modifier placement is primarily at the bottom right corner of the canvas. Notification dots appear at the top right corner (these are mostly added programmatically). Image: Diagram showing how a badge and a modifier are placed together to create an Add People icon. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1d8b4fe0df6c9521ff637bd168e5eeae521ab32b9.png?width=750&format=png&optimize=medium)The intersections of badge/modifier placement. Image: Diagram showing icon safe area. On Desktop, an icon has a 32 pixel canvas. 20 pixels are the icon, with a 4 pixel rounding area. Within the 20 pixels, there's an additional 1 pixel of space as a safe area. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1f0ca21a964236194ffecb0681771b8464d42fe45.png?width=750&format=png&optimize=medium)Image: Diagram showing icon safe area. On Mobile, an icon has a 40 pixel canvas. 24 pixels are the icon, with a 5 pixel rounding area. Within the 24 pixels, there's an additional 1 pixel of space as a safe area. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1f4f1e381dc39f98e43f0c58ba6f4119628f0ad9b.png?width=750&format=png&optimize=medium)"
+      "content": "The vertical spacing between icons and text is adjusted to create balance. For example: in a medium-sized component, shifting the text box 1 px up and the icon box 1 px down inside a button better balances out the appearance and refines the relationship with text in Adobe Clean Medium. Image: Chart showing an example of how text and icons align. An icon is paired with a label, Overview. Total height, 32 pixels. Cap height, 11 pixels. Baseline, 12 pixels. Text box, 15 pixels. Icon frame, 20 pixels. Padding, between 6 and 9 pixels. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_183e169becf04f766797f939e070e2feca26723d5.png?width=750&format=png&optimize=medium) An example of icon and text alignment in a button. Image: Chart showing the alignment of quiet action buttons to avatar, and a label in Adobe Clean typeface, regular, size 14. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_17303213bde9663c82bc06d81978fa55e70e1af66.png?width=750&format=png&optimize=medium) An example of a quiet action button with a 16 px icon."
     },
     {
       "type": "guideline",
-      "content": "The vertical spacing between icons and text is adjusted to create balance. For example: in a medium-sized component, shifting the text box 1 px up and the icon box 1 px down inside a button better balances out the appearance and refines the relationship with text in Adobe Clean Medium. Image: Chart showing an example of how text and icons align. An icon is paired with a label, Overview. Total height, 32 pixels. Cap height, 11 pixels. Baseline, 12 pixels. Text box, 15 pixels. Icon frame, 20 pixels. Padding, between 6 and 9 pixels. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1a1a05325502e3450a70939a2b073c2f2bf969695.png?width=750&format=png&optimize=medium)An example of icon and text alignment in a button. Image: Chart showing the alignment of quiet action buttons to avatar, and a label in Adobe Clean typeface, regular, size 14. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1703513907a96277954c3e03e0aac8f872b8bf967.png?width=750&format=png&optimize=medium)An example of a quiet action button with a 16 px icon."
+      "content": "The new SVG native format for icons allows for automatic tinting to match different states (hover, selected, etc.) and can programmatically switch depending on UI brightness or color theme. It's not about tinting the whole SVG in one color, but tinting single elements inside the SVG. To do this, the new SVGs use named CSS variables to set color values for every element. There will be Spectrum tokens for this, so automatic tinting will work out-of-the-box in any product using Spectrum CSS. For other apps, it will be easier to add the needed color information to their own CSS. Transparencies will be used to achieve tints of the primary icon color, making it easy to use at least the gray tone when it's not possible to work with CSS variables."
     },
     {
       "type": "guideline",
-      "content": "Advantages to the new SVG structure.\n\nOne SVG asset serves all states in all UI color themes Stable and easy creation and export workflows in Illustrator Streamlined SVG code for smaller file size Minimal effort to update any Spectrum color changes Allows for app-specific custom colors (a variable illustration accent color could be matched to the app color) Will become easier to add special colors for an app (for example, the brand red color used in Acrobat) Image: SVG code snippet with a clock icon and red exclamation mark, highlighting fill attributes for primary and red colors. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_11b0ae0f147f1a58206f16e4c4b4e662424b3d549.png?width=750&format=png&optimize=medium)Example of SVG code. The highlighted sections show that two dynamic colors will be changed programmatically, and that there's a white exclamation mark which should always be displayed in white."
+      "content": "Advantages to the new SVG structure.\n\nOne SVG asset serves all states in all UI color themes Stable and easy creation and export workflows in Illustrator Streamlined SVG code for smaller file size Minimal effort to update any Spectrum color changes Allows for app-specific custom colors (a variable illustration accent color could be matched to the app color) Will become easier to add special colors for an app (for example, the brand red color used in Acrobat) Image: SVG code snippet with a clock icon and red exclamation mark, highlighting fill attributes for primary and red colors. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_15d13649c66a68f6bb49754c24ffe1e1222152cb3.png?width=750&format=png&optimize=medium) Example of SVG code. The highlighted sections show that two dynamic colors will be changed programmatically, and that there's a white exclamation mark which should always be displayed in white."
     },
     {
       "type": "do-dont",
       "content": "Don't resize icons",
-      "dont": "All icons are crafted with a specific stroke weight, size, and canvas to match a larger icon set. Resizing or scaling them can change the appearance, creating inconsistency within a product. Ask for more sizes by submitting a request to the Icons team."
+      "dont": "All icons are crafted with a specific stroke weight, size, and canvas to match a larger icon set. Resizing or scaling them can change the appearance, creating inconsistency within a product."
     },
     {
       "type": "do-dont",
       "content": "Don't create your own icons",
-      "dont": "The Icons team works carefully to ensure that icon metaphors and style are consistent across Adobe products. When different product teams each decide to choose their own metaphors or build their own icons, this becomes a complex issue in Adobe's large product portfolio — and it shows our customers that we don't speak with a single brand voice. If you need a new icon for Spectrum 2, request it."
-    },
-    {
-      "type": "guideline",
-      "content": "Semantic colors have specific meanings in the design system. Choose icons with metaphors that visually align with their corresponding semantic color. Ensure that any semantic color usage in icons is consistent with Spectrum's usage. If you're using icons to convey \"Success,\" \"Alert,\" \"Information,\" or \"Caution\" meanings (such as in an in-line alert ), use the appropriate colors. Image: Four status icons: green check, red warning triangle, blue info circle, orange caution diamond, each in colored square backgrounds. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1df99d2addc81b14078615e2c1ad60ecffc841fba.png?width=750&format=png&optimize=medium)Image: Four status icons: red checkmark, yellow warning triangle, green X, and gray exclamation mark, each in colored square backgrounds. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1836e417f2317442706e2227601a3001effe7d2b5.png?width=750&format=png&optimize=medium)"
+      "dont": "The Icons team works carefully to ensure that icon metaphors and style are consistent across Adobe products. When different product teams each decide to choose their own metaphors or build their own icons, this becomes a complex issue in Adobe's large product portfolio — and it shows our customers that we don't speak with a single brand voice. Image: Key example of usage guideline about creating icons. Correct usage, only using Adobe icons as is. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1727a4ce0a8a2814cc22330a43b66ecf6042ff3e3.png?width=750&format=png&optimize=medium) Image: Key example of usage guideline about creating icons. Incorrect usage, modifying the width, size, shape, stroke thickness, or color of Adobe icons. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1687a85ce3b76d12470db07e5c4a61447533fea4e.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Meeting contrast requirements.\n\nUsing the available Spectrum 2 colors with Spectrum 2 icons will ensure that your design is both visually appealing and meets the WCAG minimum contrast ratio of 3:1 for non-text contrast. If you diverge from Spectrum colors, you'll need to make sure that your design has enough contrast between the icon and the background. Use subtle fills in light and dark themes to maintain legibility without overpowering the UI. Make sure that the icons remain legible and distinguishable across varied backgrounds and themes. The Stark plugin for Figma can help you check your contrast ratio. Consider three color combinations: A dark icon on a color background A light icon on a color background Tinted icons on a color background"
+      "content": "Semantic colors have specific meanings in the design system. Choose icons with metaphors that visually align with their corresponding semantic color. Ensure that any semantic color usage in icons is consistent with Spectrum's usage. If you're using icons to convey \"Success,\" \"Alert,\" \"Information,\" or \"Caution\" meanings (such as in an in-line alert), use the appropriate colors. Image: Four status icons: green check, red warning triangle, blue info circle, orange caution diamond, each in colored square backgrounds. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1328a6f014c5f2f47807fcbf49242a379f61db1bc.png?width=750&format=png&optimize=medium) Image: Four status icons: red checkmark, yellow warning triangle, green X, and gray exclamation mark, each in colored square backgrounds. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1723d42953cb48ace9cec41dbdd127dde02bc5785.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Meeting contrast requirements.\n\nUsing the available Spectrum 2 colors with Spectrum 2 icons will ensure that your design is both visually appealing and meets the WCAG minimum contrast ratio of 3:1 for non-text contrast. If you diverge from Spectrum colors, you'll need to make sure that your design has enough contrast between the icon and the background. Use subtle fills in light and dark themes to maintain legibility without overpowering the UI. Make sure that the icons remain legible and distinguishable across varied backgrounds and themes. Consider three color combinations: A dark icon on a color background A light icon on a color background Tinted icons on a color background Image: Use a background subtle fill style with a dark icon, to meet color contrast for accessibility. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_185027330aebcab8aed239a510aab0080dc3f8db6.png?width=750&format=png&optimize=medium)Image: Don't combine colors. This is not visually appealing, nor does it meet the required contrast ratio for accessibility. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1277a455948eb2526a0501b2072ca48d63e2a7c74.png?width=750&format=png&optimize=medium)Image: Use a light icon with a background bold fill style to meet color contrast for accessibility. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1a737ea237c8b24fff7dd214063053f1bc7a6d29a.png?width=750&format=png&optimize=medium)Image: Don't combine colors in this way, because it is too bright and essentially unreadable. This also doesn't meet the required contrast ratio for accessibility. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1aefdf8c18a9f3f5dc39c2c63958ee6e68eb93139.png?width=750&format=png&optimize=medium)Image: Use a background style with a tinted icon. This is both visually appealing and it meets the contrast requirements for accessibility. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1b9e4aba1a1e3481c94de4926252109d233197935.png?width=750&format=png&optimize=medium)Image: Don't combine colors in this way, because there is not enough contrast to meet accessibility requirements. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1878777b149c8958adbd5a46afd68a13d474f9011.png?width=750&format=png&optimize=medium)"
+      "content": "Meeting contrast requirements.\n\nUsing the available Spectrum 2 colors with Spectrum 2 icons will ensure that your design is both visually appealing and meets the WCAG minimum contrast ratio of 3:1 for non-text contrast. If you diverge from Spectrum colors, you'll need to make sure that your design has enough contrast between the icon and the background. Use subtle fills in light and dark themes to maintain legibility without overpowering the UI. Make sure that the icons remain legible and distinguishable across varied backgrounds and themes. Consider three color combinations: A dark icon on a color background A light icon on a color background Tinted icons on a color background Image: Use a background subtle fill style with a dark icon, to meet color contrast for accessibility. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1c79a959b093ff739bb179584fb3dad5217226bd9.png?width=750&format=png&optimize=medium) Image: Don't combine colors. This is not visually appealing, nor does it meet the required contrast ratio for accessibility. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1fc7782fde94efdecdcef71e0d46a8ad01375e977.png?width=750&format=png&optimize=medium) Image: Use a light icon with a background bold fill style to meet color contrast for accessibility. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_195b157821d245bd3b87a7d701e42f42f777cf98b.png?width=750&format=png&optimize=medium) Image: Don't combine colors in this way, because it is too bright and essentially unreadable. This also doesn't meet the required contrast ratio for accessibility. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1be96270b1733d4a1033a20aa8f9b48ec8002ac8a.png?width=750&format=png&optimize=medium) Image: Use a background style with a tinted icon. This is both visually appealing and it meets the contrast requirements for accessibility. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_157a391265fd218f0922010f60dc2cd2d1859c325.png?width=750&format=png&optimize=medium) Image: Don't combine colors in this way, because there is not enough contrast to meet accessibility requirements. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1fdd914d5ddbbdf69a203c05f7226c8e2f09d6004.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/using-icons",
-  "lastUpdated": "2026-08-14",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/icons-and-illustrations/using-icons",
+  "lastUpdated": "2026-09-24",
   "status": "published",
   "tags": [
     "icons",

package/guidelines/voice-and-tone.json

@@ -6,6 +6,10 @@
   "category": "designing",
   "documentBlocks": [
     { "type": "purpose", "content": "Voice and tone" },
+    {
+      "type": "guideline",
+      "content": "Our design principles apply to the words used throughout our products to ensure that language seamlessly integrates with visual design. We apply these principles to the product voice with language-specific guidelines."
+    },
     {
       "type": "guideline",
       "content": "Rational.\n\nClear and understandable Ensure decisions about grammar and mechanics are research-informed and tested. Avoid language that’s overly opinionated, funny, or trendy."
@@ -20,18 +24,18 @@
     },
     {
       "type": "guideline",
-      "content": "Brand guidelines.\n\nThe Adobe Style Guide's \"Voice\" section defines the principles of our brand voice. This guide also contains a glossary with branded terms and information about applying branding guidelines in a variety of different customer-facing situations."
+      "content": "If voice is our products' personality, then tone is all the different ways we express that personality. Tone can vary depending on the people we talk to, as well as the situations in which we talk to those people. For example, though you have one personality, you might still speak to a family member differently than you would a neighbor. You might also speak to your family member in different ways if they were sad, happy, or frustrated. The same thing applies to how we talk to users. Tone is a powerful tool that can both shape a positive user experience for people, as well as clear the air in a negative one."
     },
     {
       "type": "guideline",
-      "content": "Tone Spectrum.\n\nThe right tone depends on a user’s contextual needs and corresponding emotions for that experience, as well as how involved and emotional we need to be in the process. Think of the tone for any given experience as being on a spectrum: Tone can fall on a spectrum going from motivational to helpful, helpful to instructive, instructive to reassuring, reassuring to supportive."
+      "content": "Tone Spectrum.\n\nThe right tone depends on a user’s contextual needs and corresponding emotions for that experience, as well as how involved and emotional we need to be in the process. Think of the tone for any given experience as being on a spectrum: Image: Unlabeled image (source: https://spectrum.adobe.com/content/media_12f84ec54da70f6105c953de2d8d0e1ab408de467.png?width=750&format=png&optimize=medium) Tone can fall on a spectrum going from motivational to helpful, helpful to instructive, instructive to reassuring, reassuring to supportive."
     },
     {
       "type": "guideline",
-      "content": "Tone guide.\n\nThe tone spectrum acts as a sliding scale for considering which of our attitudes and expressions are appropriate for different experiences. ToneAttitudeFrequency Motivational Positive and encouraging We're looking out for you and cheering you on. You've got this!Rarely Helpful Polite and respectful We know you're busy, so we'll make this brief.Occasionally Instructive Neutral and direct Here is the information you need.Often Reassuring Professional and reliable We know you're worried about this issue, and we're here to help.Occasionally Supportive Concerned and empathetic Something bad has happened and we understand how you feel. We want to inform, guide, and support you through this.RarelyThe points on this spectrum aren't necessarily binary. For example, the right tone for an experience could be either motivational or helpful, or it could exist somewhere between those points."
+      "content": "Tone guide.\n\nThe tone spectrum acts as a sliding scale for considering which of our attitudes and expressions are appropriate for different experiences. Tone Attitude Frequency Motivational Positive and encouraging We're looking out for you and cheering you on. You've got this! Rarely Helpful Polite and respectful We know you're busy, so we'll make this brief. Occasionally Instructive Neutral and direct Here is the information you need. Often Reassuring Professional and reliable We know you're worried about this issue, and we're here to help. Occasionally Supportive Concerned and empathetic Something bad has happened and we understand how you feel. We want to inform, guide, and support you through this. Rarely The points on this spectrum aren't necessarily binary. For example, the right tone for an experience could be either motivational or helpful, or it could exist somewhere between those points."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/voice-and-tone",
+  "sourceUrl": "https://spectrum.adobe.com/content/voice-and-tone",
   "lastUpdated": "2026-09-14",
   "status": "published",
   "tags": [

package/guidelines/whats-new.json

@@ -2,21 +2,10 @@
   "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
   "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/whats-new.json",
   "name": "whats-new",
-  "title": "Great design systems evolve alongside the people who use them",
+  "title": "A new home for Spectrum",
   "category": "fundamentals",
   "documentBlocks": [
-    {
-      "type": "purpose",
-      "content": "Great design systems evolve alongside the people who use them"
-    },
-    {
-      "type": "guideline",
-      "content": "Available now.\n\nWeb platform status table of component availability Component design guidelines Live component playgrounds RSP and SWC implementation API information Foundations fully migrated with updated content Content fully migrated with updated content FAQs, Contact us, Resources, Developer overview, AI resource guide"
-    },
-    {
-      "type": "guideline",
-      "content": "Coming soon.\n\nMobile (iOS + Android) component documentation Conversational AI chat experience Unified pattern guidance and principles Release 1.0"
-    },
+    { "type": "purpose", "content": "A new home for Spectrum" },
     {
       "type": "guideline",
       "content": "Available now.\n\nFoundations and content guidance Updated guidance for the principles and building blocks of Spectrum Component design and implementation guidance Design guidance with component availability and React Spectrum and Spectrum Web Components resources for building with Spectrum Live component playgrounds Explore and interact with components in real implementations Support Contact us to provide feedback, report bugs, or send general inquiries"
@@ -26,7 +15,7 @@
       "content": "What's next.\n\nSpectrum Hub will continue to expand as the central experience for Spectrum. Future releases will bring mobile documentation, unified experience guidance, patterns and principles, new ways to explore Spectrum, and resources that support emerging ways of designing and building. Over time, the Hub will connect Spectrum’s offerings across platforms and make it easier to discover not only what exists today, but what’s possible with Spectrum."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/getting-started/whats-new",
-  "lastUpdated": "2026-09-09",
+  "sourceUrl": "https://spectrum.adobe.com/getting-started/whats-new",
+  "lastUpdated": "2026-09-29",
   "status": "published"
 }