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

package/guidelines/typography-fundamentals.json

@@ -0,0 +1,142 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/typography-fundamentals.json",
+  "name": "typography-fundamentals",
+  "title": "Typography fundamentals",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "The variable font (VF) is the default typeface for Spectrum 2 web, iOS, and future desktop explorations.\n\n\"There are two major updates, compared with Adobe Clean:\"\n\n\"In general:\"\n\nUpdated (\\*) means that these sizes didn't follow the Major Second type scale in Spectrum 1 and have now been updated to reflect the accurate values\n\nSpectrum 2 uses type styles to help maintain a consistent semantic meaning and create accessible, legible, and on-brand experiences across platforms.\n\nComponent is the type style that is applied to text within UI components.\n\nCode is a typography component used for text that represents code. The default font for showing code is Source Code Pro.\n\nIn this file browsing example, Heading, Title, Component, and Detail style text are used to create hierarchy throughout the page.\n\nIn this commenting example, Title, Body, Component, and Detail style text are used to create hierarchy within the comments panel."
+    },
+    {
+      "type": "guideline",
+      "content": "The variable font (VF) is the default typeface for Spectrum 2 web, iOS, and future desktop explorations."
+    },
+    {
+      "type": "guideline",
+      "content": "There are two major updates, compared with Adobe Clean:"
+    },
+    {
+      "type": "guideline",
+      "content": "If you need to deviate from the default typeface (Adobe Clean Spectrum VF), you can use Adobe Clean Spectrum Serif VF, Adobe Clean Han, and Source Code Pro:"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum ensures that different sizes of text can work together harmoniously, on both desktop and mobile. For Spectrum 2, 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."
+    },
+    {
+      "type": "guideline",
+      "content": "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."
+    },
+    {
+      "type": "guideline",
+      "content": "Updated (\\*) means that these sizes didn't follow the Major Second type scale in Spectrum 1 and have now been updated to reflect the accurate values"
+    },
+    {
+      "type": "guideline",
+      "content": "New (\\*\\*) shows Spectrum 2's new additions: font-size-25 is new to accommodate scaling to the smallest detail and body sizes. Font-size-1400 and -1500 are now available to provide consistent scaling to larger sizes. These are often needed in website design and for marketing scenarios."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 offers guidance for a wider range of font weights to help establish visual hierarchy in layouts, including the specific usages of Black, ExtraBold, and Medium weights."
+    },
+    {
+      "type": "guideline",
+      "content": "When used in Adobe Express products, the weight is set to Black in order to align to the Adobe Express brand guidelines. Black weight text should only be used in heading type styles, and never below 18 px font-size, to ensure the text remains legible."
+    },
+    {
+      "type": "guideline",
+      "content": "Select elements in the UI use a Bold font weight. Bold text is often used to accentuate the primary focus on a page or in a container, and in many uses, it’s paired with regular body text to create hierarchy. Titles, file names, user names, and button labels all use bold weight."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 2, some components, like action buttons, badges, and tags, use Medium weight labels in order to maintain balance with Spectrum 2’s icons, which use a 1.5 px stroke."
+    },
+    {
+      "type": "guideline",
+      "content": "Regular is the default font weight for Spectrum components and body text. It should also be used for any content that’s entered by users, is editable, or longer in form (for example, text fields and text areas)."
+    },
+    {
+      "type": "guideline",
+      "content": "Line height values are updated in Spectrum 2 to better accommodate the baseline shift of the new default font — Adobe Clean Spectrum VF — and to position the text as vertically centered in UI components."
+    },
+    {
+      "type": "guideline",
+      "content": "To ensure that the space between lines of text appears balanced, the default line-height is adjusted from \\~130% at smaller font-sizes to \\~115% at larger font-sizes, and then rounded to whole even numbers to ensure that text within a component will not sit on a half-pixel."
+    },
+    {
+      "type": "guideline",
+      "content": "Body and Code type styles use a more spacious line height multiplier of 1.5x the font-size (line-height-200) to ensure that longform text has more space and is legible. CJK languages use a 1.7x multiplier."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 uses type styles to help maintain a consistent semantic meaning and create accessible, legible, and on-brand experiences across platforms."
+    },
+    {
+      "type": "guideline",
+      "content": "Keep in mind that a single product won’t need all of theses sizes, and especially at the same time. As a starting point, use a t-shirt size from each of the type styles (in Figma, these are known as text styles). For example: pair Heading Medium with Title Medium, Body Medium, and Medium t-shirt sized components."
+    },
+    {
+      "type": "guideline",
+      "content": "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",
+      "content": "Heading text represents the biggest and boldest text on a page, and it draws the most attention. Only the broadest idea, such as the main page title, should use this style."
+    },
+    {
+      "type": "guideline",
+      "content": "Body is the type style that’s primarily used for longer-form text that may extend to multiple lines. “Body text” is a frequently used term to describe the text that creates the main content on a page, which is where this style gets its name from."
+    },
+    {
+      "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."
+    },
+    {
+      "type": "guideline",
+      "content": "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’s also often shown in gray-600 or gray-700 to make it more subdued in terms of visual hierarchy."
+    },
+    {
+      "type": "guideline",
+      "content": "The differences between Detail text, Component text, and Body 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."
+    },
+    {
+      "type": "guideline",
+      "content": "Component is the type style that is applied to text within UI components."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 1, the “component” line height meant “a line-height applied to text within UI elements.” Spectrum 2 expands on this by having text styles in the Spectrum Figma libraries, 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."
+    },
+    {
+      "type": "guideline",
+      "content": "The Component type style comes in multiple font weights to support its flexibility across components in the design system. For example, the Spectrum 2 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."
+    },
+    {
+      "type": "guideline",
+      "content": "Code is a typography component used for text that represents code. The default font for showing code is Source Code Pro."
+    },
+    {
+      "type": "guideline",
+      "content": "The following are some general examples to show how the Spectrum 2 typography system all comes together, and how type styles can be used together to create visual hierarchy."
+    },
+    {
+      "type": "guideline",
+      "content": "In this file browsing example, Heading, Title, Component, and Detail style text are used to create hierarchy throughout the page."
+    },
+    {
+      "type": "guideline",
+      "content": "In this commenting example, Title, Body, Component, and Detail style text are used to create hierarchy within the comments panel."
+    },
+    {
+      "type": "guideline",
+      "content": "In instances where Spectrum’s typefaces might fail to load properly, there are defined fallback fonts that have been selected based on operating system consistency and similar anatomical relationships."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/typography-fundamentals/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [{ "ref": "background-layers" }, { "ref": "fonts" }]
+}

package/guidelines/typography-overview.json

@@ -12,7 +12,11 @@
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Spectrum is the default font family for Spectrum. It’s based on Adobe Clean, Adobe’s corporate typeface. The Adobe Clean font family includes over 10 typefaces for specific use cases, such as longer reading experiences, displaying code, and supporting a wide range of languages and writing systems. Adobe Clean Spectrum VF is the default typeface for Spectrum on web, iOS, Android, and other supported platforms. It’s a variable font, which means a single font file can support a range of weights and widths."
+      "content": "Adobe Clean Spectrum is the default font family for Spectrum. It’s based on Adobe Clean, Adobe’s corporate typeface. The Adobe Clean font family includes over 10 typefaces for specific use cases, such as longer reading experiences, displaying code, and supporting a wide range of languages and writing systems. Adobe Clean Spectrum VF is the default typeface for Spectrum on web, iOS, Android, and other supported platforms. It’s a variable font, which means a single font file can support a range of weights and widths. Image: \"Adobe Clean Spectrum VF\" headline shown with style tabs (Default, Italic, Condensed, Origin) and a list of available weights from Light to Black. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1c6efb5d6281ac24cdedf4ce5edd22ad459eb7192.png?width=750&format=png&optimize=medium)Image: \"Crafted for Clarity\" headline above a diagram comparing an upright \"A\" and an italic \"a\" with a 12-degree slant angle indicated. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1012f71e83acb02b7d7c110acece752bc814876bc.png?width=750&format=png&optimize=medium)Image: Typeface specs showing \"24 styles\" with 804 glyphs each, and available formats listed as OTF/TTF. (source: https://preview.spectrum.adobe.com/foundations/typography/media_10d0336241a6832acab947c3064d8b0d17a4bb143.png?width=750&format=png&optimize=medium)Image: List of supported scripts: Latin, Cyrillic, CJK, Greek, Thai, Arabic, Hebrew, and Devanagari. (source: https://preview.spectrum.adobe.com/foundations/typography/media_173290f80e14bbcd13a7a945b5bd8e258fe041266.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: Adobe Clean typeface displaying a diacritics set, showing the Polish pangram \"Zażółć gęślą jaźń\" with accented characters. (source: https://preview.spectrum.adobe.com/foundations/typography/media_12e7eb93d7d420154635041f22802af852db129bd.png?width=750&format=png&optimize=medium)Image: Adobe Clean typeface displaying standard ligatures, showing the \"ff\" and \"ft\" letter combinations. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1ab4426a25f6472a0751d5c446d2c1261c576a14c.png?width=750&format=png&optimize=medium)Image: Adobe Clean typeface displaying tabular figures, showing the numerals 0 through 5 in bold weight. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1dda11559e4a0d3cb6dcdef680372b595b81171d1.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -20,10 +24,10 @@
     },
     {
       "type": "guideline",
-      "content": "Jump to.\n\nTypography system Typography system Applying the type system Applying the type system Fonts Fonts"
+      "content": "Jump to.\n\nImage: Icon illustrating \"Typography system,\" showing two \"T\" letterforms in a blue-to-green gradient above a font-size adjustment icon. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1735d74eaa72d8a5b4d22dfa24c63543afc0266e5.png?width=750&format=png&optimize=medium) Typography system Typography system Image: Icon illustrating \"Applying the type system,\" showing two overlapping \"T\" letterforms in a blue-to-teal gradient. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1bfdcea0ca1f5a86d02adde5500e376465c822b02.png?width=750&format=png&optimize=medium) Applying the type system Applying the type system Image: Icon illustrating \"Fonts,\" showing a stylized italic lowercase \"f\" in a pink gradient. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1d2071b303ba5882b375bbdf5257b1d939c891101.png?width=750&format=png&optimize=medium) Fonts Fonts"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/overview",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/typography/overview",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/typography-system.json

@@ -8,32 +8,64 @@
     { "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)."
+      "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)"
+    },
+    {
+      "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)"
     },
     {
       "type": "guideline",
       "content": "ExtraBold.\n\nSpectrum recommends ExtraBold as the heaviest font weight for most use cases. This provides more contrast against the Title type style (which uses Bold), and it's also more in line with contemporary design considerations. In limited cases, products may use the Black font weight to support product-specific branding. For example, Adobe Express uses Black for headings to align with Adobe Express brand guidelines. Black should be reserved for heading type styles and used at 18 px or larger to maintain legibility."
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Bold.\n\nSelect elements in the UI use a Bold font weight. Bold text is often used to accentuate the primary focus on a page or in a container, and in many uses, it's paired with regular body text to create hierarchy. It's also used to directly refer to the names of UI elements in running text. Titles, file names, user names, and button labels all use bold weight."
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Medium is used for specific components that need visual balance with Spectrum's icons, which use a 1.5 px stroke. Action buttons, badges, and tags are examples of components that use Medium weight labels."
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Regular is the default font weight for Spectrum components and body text. It should also be used for any content that's entered by users, is editable, or longer in form (for example, text fields and text areas)."
     },
+    {
+      "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)"
+    },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Underline is used only for text links (either hover state or default state, depending on the style of the link) and should never be used as a mechanism for adding emphasis."
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Strong can be used for placing importance on part of a sentence, rendering the text as a heavier font weight. This is for semantic formatting, when it's intended to add a tone that conveys importance."
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Emphasis can be used for placing emphasis on part of a sentence, rendering the text as italic (or heavier weight, in CJK languages)."
@@ -68,15 +100,15 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum Web.\n\nStyleFont 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://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"
     },
     {
       "type": "guideline",
-      "content": "Spectrum iOS.\n\nStyleFont 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://preview.spectrum.adobe.com/foundations/typography/media_15a03f87ea190cedc9b8264e2071454df77cc44a6.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingHeading XL900AutoExtraBold900Heading L700AutoExtraBold700Heading M500AutoExtraBold500"
     },
     {
       "type": "guideline",
-      "content": "Spectrum Android.\n\nStyleFont 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://preview.spectrum.adobe.com/foundations/typography/media_184a97041a07d8ce67b5b77624c370281df268248.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingHeading XL900900BoldNoneHeading L700700BoldNoneHeading M500500BoldNone"
     },
     {
       "type": "guideline",
@@ -84,15 +116,15 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum Web.\n\nStyleFont 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://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"
     },
     {
       "type": "guideline",
-      "content": "Spectrum iOS.\n\nStyleFont 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://preview.spectrum.adobe.com/foundations/typography/media_1b6e505c9be86bedb527396bf4fc8d03c0e01de17.png?width=750&format=png&optimize=medium)StyleFont sizeLine heightDefault weightLetter spacingTitle XL400AutoBold400Title L300AutoBold300Title M200AutoBold200"
     },
     {
       "type": "guideline",
-      "content": "Spectrum Android.\n\nStyleFont 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://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"
     },
     {
       "type": "guideline",
@@ -100,35 +132,35 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum Web.\n\nStyleFont 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://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"
     },
     {
       "type": "guideline",
-      "content": "Spectrum iOS.\n\nStyleFont 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://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"
     },
     {
       "type": "guideline",
-      "content": "Spectrum Android.\n\nStyleFont 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://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"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "type": "guideline",
@@ -139,11 +171,19 @@
       "content": "Spectrum supports a wide range of non-Latin writing systems. On the web, Spectrum uses dedicated fonts for these scripts, such as Adobe Clean Han for Chinese (Simplified and Traditional), Japanese, and Korean (CJK). On iOS and Android, Spectrum uses the platform's system fonts for non-Latin scripts to reduce app size. Android system fonts may vary by device. Because different typefaces are used across platforms, text metrics may vary. When designing custom layouts, verify that text alignment and spacing remain consistent across localized experiences."
     },
     { "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)"
+    },
     {
       "type": "guideline",
       "content": "Dynamic type.\n\nSpectrum typography on iOS supports Dynamic Type, Apple's system for scaling text based on a user's preferred reading size. When a user adjusts their text size in accessibility settings, Spectrum typography scales automatically to match. Learn more in Apple's Developer Documentation: Get started with Dynamic Type and WWDC24: Scaling fonts automatically."
     },
     { "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."
@@ -153,7 +193,7 @@
       "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://main--spectrum-hub--adobe.aem.live/foundations/typography/typography-system",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/typography/typography-system",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/using-icons.json

@@ -12,23 +12,23 @@
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "type": "guideline",
@@ -36,27 +36,27 @@
     },
     {
       "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. An example of the naming convention for Spectrum 2 (S2) icons."
+      "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."
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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). The intersections of badge/modifier placement."
+      "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)"
     },
     {
       "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. An example of icon and text alignment in a button.An example of a quiet action button with a 16 px icon."
+      "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."
     },
     {
       "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) 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://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."
     },
     {
       "type": "do-dont",
@@ -70,7 +70,7 @@
     },
     {
       "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."
+      "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)"
     },
     {
       "type": "guideline",
@@ -78,10 +78,10 @@
     },
     {
       "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"
+      "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)"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/icons-and-illustrations/using-icons",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/using-icons",
   "lastUpdated": "2026-08-14",
   "status": "published",
   "tags": [

package/guidelines/visual-language-containers.json

@@ -7,30 +7,30 @@
   "documentBlocks": [
     {
       "type": "purpose",
-      "content": "In Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific contexts. Containers are used across Spectrum 2 interfaces in multiple ways, but the commonality they share is that they group related concepts together into distinct areas. Some usages of containers have more detailed guidelines. For example, a card uses a container and inherits its properties, but it can only represent a distinct object (such as an individual asset or product). A block of marketing material containing multiple concepts (like subscription information plus actions to take) is grouped together in a container, but is not considered a card. Whether broad or specific, a user should be able to readily tell the purpose of a container. Separation of containers is marked through a clear visual change, such as contrast in a background color or through spacing. All containers share a common set of rules for styles, padding, and emphasis. Examples of containers: two cards with different sizes and layout options, and a select box. Examples of containers: two cards with different sizes and layout options, and a select box.\n\n### Example\n\nCards and select boxes share container styles. In this example, both use the emphasized style. Cards also have additional options that select boxes do not, like t-shirt size and layout."
+      "content": "In Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific contexts. Containers are used across Spectrum 2 interfaces in multiple ways, but the commonality they share is that they group related concepts together into distinct areas. Some usages of containers have more detailed guidelines. For example, a card uses a container and inherits its properties, but it can only represent a distinct object (such as an individual asset or product). A block of marketing material containing multiple concepts (like subscription information plus actions to take) is grouped together in a container, but is not considered a card. Whether broad or specific, a user should be able to readily tell the purpose of a container. Separation of containers is marked through a clear visual change, such as contrast in a background color or through spacing. All containers share a common set of rules for styles, padding, and emphasis. Image: Key examples illustrating two different types of containers, cards, and a select box, all shown in the emphasized container style. First category label, examples of card layouts. Examples of cards showing that cards have two layouts. The first example shows a card with a preview and the second example shows a card without a preview. Both cards include the Adobe Illustrator logo, a floating badge with shared icon, label 3 people. Both cards have a Title, Good things are coming, and description, Optional metadata should be kept to two or three lines. Second category label, Example of a select box. Example select box includes a placeholder illustration labeled FPO with a heart. Placeholder label, Select box label. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1d1a0f41f5372551fdcaa750d71a4cd7885debf4a.png?width=750&format=png&optimize=medium)Examples of containers: two cards with different sizes and layout options, and a select box. Examples of containers: two cards with different sizes and layout options, and a select box.\n\n### Example\n\nCards and select boxes share container styles. In this example, both use the emphasized style. Cards also have additional options that select boxes do not, like t-shirt size and layout."
     },
     {
       "type": "guideline",
-      "content": "All containers share a set of defined styles. Background color By default, containers are visually distinguished through a change in background color. Learn more about this in background layers. Emphasized In some situations, drop shadows are used to provide emphasis to a container or group of containers, like in a set of related cards. Emphasized containers should be used sparingly. View more about container emphasis. Border Borders can also be used around objects as an alternate style to a background color, and should be used without a fill. Vertical, full-width dividers can also be used to create separation for larger sections of content, like in a panel. View more about border width. Spacing This is the container style with the least emphasis. Instead of using a visible border, spacing is used to create separation between concepts. View more about spacing."
+      "content": "All containers share a set of defined styles. Image: Container style examples, each shown in a square with labels, from start to end, Background color, Emphasized, Border, Spacing. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_13f2b208dc542ae5cbd712e30eef380f8ffe4ab37.png?width=750&format=png&optimize=medium) Background color By default, containers are visually distinguished through a change in background color. Learn more about this in background layers. Emphasized In some situations, drop shadows are used to provide emphasis to a container or group of containers, like in a set of related cards. Emphasized containers should be used sparingly. View more about container emphasis. Border Borders can also be used around objects as an alternate style to a background color, and should be used without a fill. Vertical, full-width dividers can also be used to create separation for larger sections of content, like in a panel. View more about border width. Spacing This is the container style with the least emphasis. Instead of using a visible border, spacing is used to create separation between concepts. View more about spacing."
     },
     {
       "type": "guideline",
-      "content": "Example.\n\nThis medium card uses spacing-300 for internal padding."
+      "content": "Example.\n\nThis medium card uses spacing-300 for internal padding. Image: Key example of a card with a preview and body. Adobe Illustrator logo and badge with shared icon, label 3, are floating on top of the preview, with spacing highlighted along the gutters. Card body shows title, Good things are coming. Card metadata, Optional metadata should be kept to two or three lines. Spacing is highlighted in the gutters around the body. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_16ff1fdafd199673ae98bf216588c3d62601ba0a1.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Example.\n\nIn this group of containers — each representing a product — different container styles can be used to draw attention to a specific item. In this case, the emphasized container is paired with a badge, and contrasts against the more subdued containers with filled (gray) backgrounds."
+      "content": "Example.\n\nImage: Key examples of three containers in a UI context of choosing a Creative Cloud plan. Two containers in a background color style representing Acrobat and Photography, and one in an emphasized style, representing All apps. Acrobat container, label Acrobat, title $9.99 per month, body The complete PDF solution for working anywhere (includes desktop, web, and mobile access), Button, label Buy now. Photography container, label Photography, title $9.99 per month, body Get Photoshop, Lightroom Classic, Lightroom, and 20 GB of cloud storage, 1 Terabyte available. Button, label Buy now. All apps container badge label, Best value, label All apps, title $52.99 per month, body Get all 20 plus creative desktop and mobile apps including Photoshop, Illustrator, and more. Button, Buy now. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_143b04008b10d47caba8b1f3ee3d50a35d1016f2a.png?width=750&format=png&optimize=medium) In this group of containers — each representing a product — different container styles can be used to draw attention to a specific item. In this case, the emphasized container is paired with a badge, and contrasts against the more subdued containers with filled (gray) backgrounds."
     },
     {
       "type": "guideline",
-      "content": "States of interactive, emphasized containers.\n\nIf the whole container is interactive, hover is shown through a slightly more prominent drop shadow. When dragged, a much more prominent shadow is shown in order to bring focus to the dragged item and show elevation above the rest of the UI. Note that specific components might have different options and states."
+      "content": "States of interactive, emphasized containers.\n\nImage: Emphasized container state examples shown in three squares. First square, Emphasized, Default. Second square, Emphasized, Hover. Third square, Emphasized, Dragged. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1de1050798e26a2aa2f3400fbb3c257df990f36b0.png?width=750&format=png&optimize=medium) If the whole container is interactive, hover is shown through a slightly more prominent drop shadow. When dragged, a much more prominent shadow is shown in order to bring focus to the dragged item and show elevation above the rest of the UI. Note that specific components might have different options and states."
     },
     {
       "type": "guideline",
-      "content": "A consistent app frame helps create a sense of brand unity and helps users feel comfortable and familiar with our products. Predictable navigation is also especially helpful for users who work across multiple applications, and it makes it easier to learn how to use new products. The Spectrum 2 app frame framework provides a consistent visual style and navigation. It offers foundational structures and guidelines that product teams can adapt to their own contexts. View more details about the S2 app frame. The main content area is defined by a unique container style that's used only in the app frame. It has a subtle drop shadow to provide separation from the navigation. View more about using container styles to divide content within content areas. Example of an app frame with a side navigation. Example of an app frame with a side navigation."
+      "content": "A consistent app frame helps create a sense of brand unity and helps users feel comfortable and familiar with our products. Predictable navigation is also especially helpful for users who work across multiple applications, and it makes it easier to learn how to use new products. The Spectrum 2 app frame framework provides a consistent visual style and navigation. It offers foundational structures and guidelines that product teams can adapt to their own contexts. View more details about the S2 app frame. The main content area is defined by a unique container style that's used only in the app frame. It has a subtle drop shadow to provide separation from the navigation. View more about using container styles to divide content within content areas. Image: Example of the general Spectrum 2 app frame, with a generic product name and default navigational elements in the header and side navigation. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_128a2f2eb31f2ebd157be90ddb3757ace27f4f4c5.png?width=750&format=png&optimize=medium)Example of an app frame with a side navigation. Example of an app frame with a side navigation."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/visual-language/containers",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/visual-language/containers",
   "lastUpdated": "2026-08-19",
   "status": "published"
 }

package/guidelines/whats-new.json

@@ -0,0 +1,32 @@
+{
+  "$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",
+  "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": "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"
+    },
+    {
+      "type": "guideline",
+      "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",
+  "status": "published"
+}