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

package/guidelines/side-navigation-browsing-context.json

@@ -8,45 +8,48 @@
     { "type": "purpose", "content": "Browsing context: Side nav" },
     {
       "type": "guideline",
-      "content": "Mobile overlay guidance.\n\nUse the overlay variant of the app frame: side navigation (browsing) component for smaller breakpoints. The overlay is triggered via the hamburger menu in the header (rather than a touchpoint at the bottom). Although 768 px is the recommended breakpoint to begin displaying the overlay designs, each product team should determine which breakpoint best suits their needs. View the keyboard focus order of mobile overlays."
+      "content": "Mobile overlay guidance.\n\nUse the overlay variant of the app frame: side navigation (browsing) component for smaller breakpoints. The overlay is triggered via the hamburger menu in the header (rather than a touchpoint at the bottom). Although 768 px is the recommended breakpoint to begin displaying the overlay designs, each product team should determine which breakpoint best suits their needs. View the keyboard focus order of mobile overlays. Image: Example of how the hamburger menu opens the tray and interacting with the close button will close the tray. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_16c567d1d01f396f2c6c011f24526b656bace9f69.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "End section divider.\n\nThe divider at the bottom of the side navigation is an intentional visual element that separates overflow side navigation items and end section items from the state control icon. The end section is optional and used to contain navigation items in a separate category that is secondary to the main navigation items. Categories, when defined, should readily communicate a clear purpose and be meaningful to users. Items placed here sit on a separate area. When resized to a smaller height, the items should append onto the start section and scroll together."
+      "content": "End section divider.\n\nThe divider at the bottom of the side navigation is an intentional visual element that separates overflow side navigation items and end section items from the state control icon. The end section is optional and used to contain navigation items in a separate category that is secondary to the main navigation items. Categories, when defined, should readily communicate a clear purpose and be meaningful to users. Items placed here sit on a separate area. When resized to a smaller height, the items should append onto the start section and scroll together. Image: Examples of side navigation using dividers separating the state control from other item. The first has no dividers. The second displays overflow with a divider, where there are too many items and the scrollbar appears. The third has an optional end section with a divider. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_18ce0e0d2271cf562d8ddde561c4afa7f4a3e72c7.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Minimum width.\n\nThe minimum width is customizable, depending on the number of levels: 1 level: 160 px 2 level: 200 px 3 levels: 240 px"
+      "content": "Minimum width.\n\nThe minimum width is customizable, depending on the number of levels: 1 level: 160 px 2 level: 200 px 3 levels: 240 px Image: 3 examples of side navigation with different minimum widths based on the nested levels. 1 level has 160 pixels, 2 levels has 200 pixels and 3 level has 240 pixels. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_13383f172d34c1e87b2ba2e342a6baa5a1064fe65.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Support side navigation resizing for user-generated content.\n\nIf the side navigation contains user-generated content (like shortcuts to folders and files), enabling resizing can be a good way to improve usability by respecting user content, without needing to predict the length of labels that users might input."
+      "content": "Support side navigation resizing for user-generated content.\n\nIf the side navigation contains user-generated content (like shortcuts to folders and files), enabling resizing can be a good way to improve usability by respecting user content, without needing to predict the length of labels that users might input. Image: Example of correct usage of side navigation resizing for user-generated content. In the app frame side navigation, a section titled Favorites includes three folders, two folders in an expanded state, Marketing images and Renders. The items include the full names of the items in the folders, and are not truncated. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_15be684055e900a2c6ee6fa356d3c375babff92a3.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "If drag to resize is enabled, support alternate methods for resizing.\n\nSpectrum is committed to complying with WCAG standards, and dragging interactions require alternate methods. The side navigation width can be dragged to resize the side navigation state control ( hamburger icon in the header or panel icon at the bottom of the app frame side navigation panel). This control serves as an equivalent function for dragging interactions and enables the drag area to have a smaller touch target, only when necessary (for example, when a scroll bar is present). Resize behavior should also support keyboard interactions and preserve the user’s preferred width."
+      "content": "If drag to resize is enabled, support alternate methods for resizing.\n\nSpectrum is committed to complying with WCAG standards, and dragging interactions require alternate methods. The side navigation width can be dragged to resize the side navigation state control ( hamburger icon in the header or panel icon at the bottom of the app frame side navigation panel). This control serves as an equivalent function for dragging interactions and enables the drag area to have a smaller touch target, only when necessary (for example, when a scroll bar is present). Resize behavior should also support keyboard interactions and preserve the user’s preferred width. Image: Example of correct usage of side navigation. When drag to resize is enabled, an affordance appears on the edge of the side navigation. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_176dab674bd0fcf87df1713de702298636af68e99.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Be concise.\n\nAlong with being descriptive, the labels of navigation items should be succinct. Keep navigation strings to 1 or 2 and no more than 3 concise words (in U.S. English, which is the source locale). Reduce any unnecessary words in order to ensure simplicity. Navigation items should never be so long that they require truncation, except in instances where navigation is user-generated (e.g., folder and file names)."
+      "content": "Be concise.\n\nAlong with being descriptive, the labels of navigation items should be succinct. Keep navigation strings to 1 or 2 and no more than 3 concise words (in U.S. English, which is the source locale). Reduce any unnecessary words in order to ensure simplicity. Navigation items should never be so long that they require truncation, except in instances where navigation is user-generated (e.g., folder and file names). Image: Example of incorrect usage of writing side navigation item names. A sample side navigation has item names that are 3 words or more, such as All of your plugins, Learn something brand new, and Check your schedule. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_13693cda8085152fd72c442c144ce35cbfd2a6eb4.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Be cautious with line breaks.\n\nIf possible, the default width should auto-adjust to the longest string in the navigation in order to accommodate all translations. As a last resort for long strings, specific line breaks can be built into the implementation. These line breaks depend on the content, and requires manual handling by Globalization engineers."
+      "content": "Be cautious with line breaks.\n\nIf possible, the default width should auto-adjust to the longest string in the navigation in order to accommodate all translations. As a last resort for long strings, specific line breaks can be built into the implementation. These line breaks depend on the content, and requires manual handling by Globalization engineers. Image: Example of correct usage of auto-adjusting the side navigation width to the longest navigation item name, so the word or phrase is all on a single line. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1bc3a06d6f0c348a8d0038878b140a0b7752a3508.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage of using line breaks in the side navigation, where a word or phrase wraps to more than one line. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1836da01bc7e95b32a6c6978ac515d4efbb27e369.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Put navigation in either the side navigation or the header, not both.\n\nWhen navigation items are shown in both the side navigation and header at the same time, the hierarchy and relationships between them become unclear. If the side navigation is used, don’t put any navigation items in the header."
+      "content": "Put navigation in either the side navigation or the header, not both.\n\nWhen navigation items are shown in both the side navigation and header at the same time, the hierarchy and relationships between them become unclear. If the side navigation is used, don’t put any navigation items in the header. Image: Example of incorrect usage. Navigation is shown in both the side navigation and the header. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_12848faf1fcf84701f76fe694687f6a062558085e.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Support user customization and preserve user preferences.\n\nSupporting multiple states (default, and partial or fully minimized style) provides users with the option to choose their preferred layout based on their own preferences. In user studies, individual preference is the biggest factor when it comes to whether or not people want to view labels by default. If supporting multiple states, consider showing the side navigation in the expanded state by default, and preserve user preferences across pages and sessions. If minimizing the side navigation is not supported, show the side navigation in the expanded state. Showing labels by default increases recognition and familiarity. Learn more about using the hamburger and panel side navigation state controls."
+      "content": "Support user customization and preserve user preferences.\n\nSupporting multiple states (default, and partial or fully minimized style) provides users with the option to choose their preferred layout based on their own preferences. In user studies, individual preference is the biggest factor when it comes to whether or not people want to view labels by default. If supporting multiple states, consider showing the side navigation in the expanded state by default, and preserve user preferences across pages and sessions. If minimizing the side navigation is not supported, show the side navigation in the expanded state. Showing labels by default increases recognition and familiarity. Learn more about using the hamburger and panel side navigation state controls. Image: Example of correct usage of supporting user customization and preserving user preferences. Do: support partially minimized (icon-only) and expanded side navigation. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1a30c5e39027f0b033923ed20442c2b3eac050c75.png?width=750&format=png&optimize=medium)Image: Example of correct usage of supporting user customization and preserving user preferences. Do: Support fully minimized and expanded side navigation. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1aac42ed54f1cd2a44f85a42dcdf4c34d2078bd66.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Always use icons in first level of the app frame side navigation.\n\nThere are some app frame-specific constraints for the side navigation. Icons are required at the parent level. Nested items can have no icon, but the parent level must have an icon."
+      "content": "Always use icons in first level of the app frame side navigation.\n\nThere are some app frame-specific constraints for the side navigation. Icons are required at the parent level. Nested items can have no icon, but the parent level must have an icon. Image: Example of correct usage of icons where all levels have icons. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1fbfbce2a07eae1517fe98f347652b3b90a08aa2e.png?width=750&format=png&optimize=medium)Image: Example of correct usage of icons in the first level and no icons in the second level of the app frame side navigation. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_19c20431d6acf0d34b7b4dfcc5ffbf315e24580e6.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage of no icons in the first level of the app frame side navigation. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1706d549610144e763f4b5ca5886e2c55ac4ba71b.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Side navigation examples.\n\nImage: Diagram of two examples of the side navigation for the app frame, browsing context. First example, side navigation with content in the end section. Second example, side navigation with additional content when expanded. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_182dbe4ece16320dcb41ef46a514ec1346f6bc5ae.png?width=750&format=png&optimize=medium)"
     },
-    { "type": "guideline", "content": "Side navigation examples" },
     {
       "type": "guideline",
       "content": "Keyboard interactions (App frame side navigation panel).\n\nKey Interactions TabFocuses onto or off of the drag area, if enabled.Arrow keysResizes the drag area incrementally."
@@ -61,10 +64,10 @@
     },
     {
       "type": "guideline",
-      "content": "Diagram describing notes about the side navigation for the app frame, in the editing context. While toolbars share the same location as the app frame side navigation in a browsing context, toolbars in an editing context serve a different purpose: to readily select commonly used tools, rather than to navigate between pages. The behavior and interaction of toolbars doesn’t need to mirror the side navigation and should instead best serve user needs in an editing context. For example, the option to show and hide tool labels can be an additional customization option and doesn’t need to be controlled by the hamburger menu, which is used to display the application menu in Creative Cloud."
+      "content": "Diagram describing notes about the side navigation for the app frame, in the editing context. While toolbars share the same location as the app frame side navigation in a browsing context, toolbars in an editing context serve a different purpose: to readily select commonly used tools, rather than to navigate between pages. The behavior and interaction of toolbars doesn’t need to mirror the side navigation and should instead best serve user needs in an editing context. For example, the option to show and hide tool labels can be an additional customization option and doesn’t need to be controlled by the hamburger menu, which is used to display the application menu in Creative Cloud. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_18d3bf036140f0c60608e3a7fbc095f542beeef29.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/side-navigation-browsing-context",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/side-navigation-browsing-context",
   "lastUpdated": "2026-09-04",
   "status": "published",
   "tags": ["app frame side navigation", "side nav"]

package/guidelines/spacing-overview.json

@@ -8,11 +8,11 @@
     { "type": "purpose", "content": "Spacing overview" },
     {
       "type": "guideline",
-      "content": "Rational.\n\nEvery spacing decision carries meaning. Proximity communicates what belongs together, what is separate, and how an interface is organized."
+      "content": "Rational.\n\nEvery spacing decision carries meaning. Proximity communicates what belongs together, what is separate, and how an interface is organized. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1ea5b08da8cc8d8033723c6725f53f9745fd34db2.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Proportional.\n\nNot all elements grow at the same rate. Spectrum uses distinct spacing scales, each tuned to the elements they serve. This keeps values consistent and harmonious across all sizes and contexts."
+      "content": "Proportional.\n\nNot all elements grow at the same rate. Spectrum uses distinct spacing scales, each tuned to the elements they serve. This keeps values consistent and harmonious across all sizes and contexts. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1280217c360758de76f28044ecf6f9d81b92beed4.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -24,22 +24,22 @@
     },
     {
       "type": "guideline",
-      "content": "Relationships.\n\nCloser elements are more associated. Distant elements are more independent."
+      "content": "Relationships.\n\nCloser elements are more associated. Distant elements are more independent. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_160a34223f929bf2e94eee1cb1d58d7ec90ec86a8.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Boundaries.\n\nConsistent proximity within a group signals that all members are equally related."
+      "content": "Boundaries.\n\nConsistent proximity within a group signals that all members are equally related. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1201af3d7c478557df34557c19dab71dc46fd9ad8.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Structure.\n\nThe overall distribution of space shows how content is organized within a layout.. These three things are connected. Change one, and the others shift too. Spacing decisions are not visual alone, but rather they are structural and meaningful. Spacing also shapes how an interface feels. Negative space (the open areas between and around elements) creates a sense of calm and helps people focus on what matters. It's one of the most effective ways to create visual balance and direct user attention within a layout. Less negative space creates clutter and increases cognitive load. More negative space creates a calm, focused experience."
+      "content": "Structure.\n\nThe overall distribution of space shows how content is organized within a layout.. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_17a7999c3c47bf695711fccc10e0799cbd6b1957a.png?width=750&format=png&optimize=medium) These three things are connected. Change one, and the others shift too. Spacing decisions are not visual alone, but rather they are structural and meaningful. Spacing also shapes how an interface feels. Negative space (the open areas between and around elements) creates a sense of calm and helps people focus on what matters. It's one of the most effective ways to create visual balance and direct user attention within a layout. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_11265bfff799dcff670349049460f288b6195ee05.png?width=750&format=png&optimize=medium)Less negative space creates clutter and increases cognitive load. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1770c6aefbbcb0ef043022106ea246562c4382558.png?width=750&format=png&optimize=medium)More negative space creates a calm, focused experience."
     },
     {
       "type": "guideline",
-      "content": "Jump to.\n\nLayout spacing Layout spacing Component spacing Component spacing"
+      "content": "Jump to.\n\nImage: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1dc4d2d0898277ca7435184e4ff8df1ba32dcee83.png?width=750&format=png&optimize=medium) Layout spacing Layout spacing Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1caf0d0b7511c185decfdfc268f04fbab079fc024.png?width=750&format=png&optimize=medium) Component spacing Component spacing"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/spacing/spacing-overview",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/spacing-overview",
   "lastUpdated": "2026-08-19",
   "status": "published"
 }

package/guidelines/states.json

@@ -8,22 +8,22 @@
     { "type": "purpose", "content": "States" },
     {
       "type": "guideline",
-      "content": "In Spectrum 2, some components use a change in size instead of color to communicate a down state. This gives the illusion of objects being pressed-in, and makes interactions more dynamic and responsive."
+      "content": "In Spectrum 2, some components use a change in size instead of color to communicate a down state. This gives the illusion of objects being pressed-in, and makes interactions more dynamic and responsive. Image: Disabled UI components shown in muted gray, including a circular avatar photo, a labeled button, a toggle switch with label, and a checkbox with label. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1044bea29bf18bd21503482c8c8fafb0102e36a22.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Disabled states generally stay the same from Spectrum 1, but there have been some minor updates to specific components. For example, a text field retains the outline style when disabled, to more closely match its default state."
+      "content": "Disabled states generally stay the same from Spectrum 1, but there have been some minor updates to specific components. For example, a text field retains the outline style when disabled, to more closely match its default state. Image: Two checkboxes with 'Label' text: the top one unchecked, the bottom one checked with a black background and white checkmark. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1517894bfa23af029ad8122c0add356281be4bc2e.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Selected states use a primary style by default, generally through a gray-800 fill. Some have an accent color option that can be used to draw emphasis. This is primarily helpful in contexts with a specific and narrowly-scoped goal (for example, in a dialog), or when there’s a single, clear call to action within a page (for example, a “Create” button). When there’s many groups of controls that require the same amount of attention (such as in a panel) the not emphasized option works best. For more details about this concept, view Attention hierarchy."
+      "content": "Selected states use a primary style by default, generally through a gray-800 fill. Some have an accent color option that can be used to draw emphasis. This is primarily helpful in contexts with a specific and narrowly-scoped goal (for example, in a dialog), or when there’s a single, clear call to action within a page (for example, a “Create” button). When there’s many groups of controls that require the same amount of attention (such as in a panel) the not emphasized option works best. For more details about this concept, view Attention hierarchy. Image: A list view row being dragged, indicated by a grabbing-hand cursor above it, containing a checked checkbox, a circular avatar placeholder, truncated title text 'List view value with a longer la...', description text, two circular icons, and a chevron. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_133f5d48851a7df5c96e90ea3d60494813467c2bb.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
       "content": "A dragged state has a unique drop shadow to draw attention to the dragged object. Learn more about drop shadows."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/behavior/states",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/behavior/states",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/support.json

@@ -0,0 +1,113 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/support.json",
+  "name": "support",
+  "title": "FAQs",
+  "category": "support",
+  "documentBlocks": [
+    { "type": "purpose", "content": "FAQs" },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 is a significant version update — for both design and engineering — of the Spectrum design system. For more information, view the Introduction page."
+    },
+    {
+      "type": "guideline",
+      "content": "The first phase of Spectrum 2 has been focused on the web. If you are working on a product built for a web implementation, you can start using Spectrum 2 today. Remember to work closely with your engineering partners to ensure a smooth implementation. As we progress, we're committed to extending Spectrum 2 to include desktop and mobile platforms with ongoing workshops and to ensure a comprehensive update to our design system."
+    },
+    {
+      "type": "guideline",
+      "content": "Though Spectrum has always made cross-platform design a priority, most emerging products at Adobe have been web-first in recent years. That said, Adobe Design has been collectively working on the future of desktop and mobile. One of the central goals of Spectrum 2 is to make sure that it feels \"at home.\" Both professional desktop and mobile tools have a unique set of requirements, and each will get the attention they require. On mobile, that work now has a home on the Spectrum team: Spectrum iOS and Spectrum Android exist as dedicated implementations of Spectrum 2. Neither is complete, but both are actively building, and we continue to expand their scope as the mobile design language matures. On desktop, we've been partnering with desktop teams and preparing their implementations for Spectrum 2 by using Spectrum's design data. We continue to expand the scope of our partnership as we build out Spectrum 2 and the toolchain to support it."
+    },
+    {
+      "type": "guideline",
+      "content": "Review the Spectrum 2 documentation.\n\nMake sure to regularly review design documentation to keep up-to-date with releases. Familiarize yourself with the changes to components, patterns, styles, and usage guidelines. And most importantly, read the release notes (posted in #spectrum-bulletin ) which explain what’s changed and why."
+    },
+    {
+      "type": "guideline",
+      "content": "Perform an UI audit.\n\nConduct an audit of your existing UI components and patterns, specifically identifying the elements that need updating in order to align to Spectrum 2. Evaluate the design of the overall layouts, interaction patterns, and the level of consistency with the new guidelines."
+    },
+    {
+      "type": "guideline",
+      "content": "Create a transition or migration plan.\n\nPartner with your implementation team to develop a plan that outlines the order and priority of updating the components and foundations (such as color and styling). Prioritize the most frequently used components, then create a transition plan that breaks the implementation down into manageable phases. For example, you could start with core components that are used in multiple areas of your product (like buttons). Given that iterative migration plans are most successful, you should expect S1 and S2 design languages to live side-by-side in the same UIs for some period of time. As long as a full migration plan is committed, temporarily mixing design languages is acceptable."
+    },
+    {
+      "type": "guideline",
+      "content": "Apply Spectrum 2 and replace outdated components.\n\nReview the Spectrum 2 Figma libraries and update your components, typography, and icons, among the other changes. As you update your designs, please work with your implementation team on a migration plan. Especially pay attention to components that have changed between Spectrum 1 and Spectrum 2.. Note any custom components in the UI and work with your engineering team to replace any hard-coded values with a semantic alias."
+    },
+    {
+      "type": "guideline",
+      "content": "Collaborate with engineers.\n\nDepending on your product’s implementation, there may be differences between what’s in Figma and code. Work closely with your engineering partners to ensure a smooth implementation of the updated UI. Communicate any changes or updates clearly, provide them with necessary resources, components, or patterns, and address any questions or concerns they may have."
+    },
+    {
+      "type": "guideline",
+      "content": "Collaborate with content strategists.\n\nWork closely with your content strategy partners to ensure that messaging, voice, and tone are being holistically incorporated into interface updates. Work together to create experiences that support your users and communicate clearly about any design updates."
+    },
+    {
+      "type": "guideline",
+      "content": "Breaking changes ahead.\n\nThe update to Spectrum 2 may cause breaking changes. Changes will include updates to colors, renamed tokens in the gray system, updates to corner rounding, and increased padding."
+    },
+    {
+      "type": "guideline",
+      "content": "Modify custom component implementations.\n\nIdentify components in your code base that are customized or not using a standard framework implementation, as those will need manual updating to align with Spectrum 2. If you have custom components, be sure to replace hard-coded values with the appropriate semantic alias. Work with your designers to align custom or product-specific components with the Spectrum 2 design language."
+    },
+    {
+      "type": "guideline",
+      "content": "Review the Spectrum 2 documentation.\n\nMake sure to regularly review documentation to keep up-to-date and monitor releases of your Spectrum implementation. Familiarize yourself with the changes to components, patterns, styles, and usage guidelines. If you author custom components that utilize design data (tokens), it may be helpful to read the release notes (posted in #spectrum-bulletin ) which explain what’s changed and why. Especially pay attention to changes in naming conventions, variables, and overall structure. If you build product UI, monitor the release notes for the implementation your product uses and make sure to update to the latest version at regular intervals. Release announcements for implementations are posted in their respective Slack channels. A full list of channels is available on the Contact page."
+    },
+    {
+      "type": "guideline",
+      "content": "Review your existing code base to ensure you’re using the latest version of a Spectrum implementation. Identify any dependencies that might be affected by the changes, and evaluate if your code is heavily customizing Spectrum components. If so, you may experience breaking changes that need to be reviewed. For more details about your implementation, view our Developer overview page. Carve out time to plan for the update and create a migration plan. We recommend breaking down the update process into planned, manageable tasks in order to avoid a need to react to massive changes all at once. Prioritize areas of the code base that directly impact the UI, as well as the code that customizes, overrides, or otherwise changes Spectrum defaults."
+    },
+    {
+      "type": "guideline",
+      "content": "Collaborate with your designers.\n\nWork with your design partners to develop a plan for testing visual changes, to ensure they align with updated designs that use Spectrum 2."
+    },
+    {
+      "type": "guideline",
+      "content": "Breaking changes ahead.\n\nThe update to Spectrum 2 may cause breaking changes. Please plan ahead with your team to prepare."
+    },
+    {
+      "type": "guideline",
+      "content": "Define a project timeline and an implementation roadmap.\n\nWork with both your design and engineering teams to define a project timeline and break down the migration process. Coordinate and align the efforts of both teams to ensure smooth coordination and avoid disruptions in the development workflow. Set realistic deadlines and milestones to track progress and manage expectations. Reach out to the Spectrum team for help working on a plan."
+    },
+    {
+      "type": "guideline",
+      "content": "Review the Spectrum 2 documentation.\n\nMake sure to regularly review documentation to keep up-to-date with releases. Read the release notes (posted in #spectrum-bulletin ) which explain what’s changed and why."
+    },
+    {
+      "type": "guideline",
+      "content": "Test and validate.\n\nCollaborate with your development or QE team to create a testing plan to validate Spectrum 2. Ensure that Spectrum 2 functions as intended and delivers the desired experience. Address any issues or bugs and coordinate with your design and development teams to implement necessary fixes."
+    },
+    {
+      "type": "guideline",
+      "content": "Facilitate cross-functional collaboration.\n\nEncourage collaboration and open communication between your team’s designers and engineers. Create an environment where your team can discuss challenges, exchange ideas, and share knowledge. Arrange regular meetings or workshops to facilitate cross-functional collaboration, allowing teammates to align on their understanding of Spectrum 2 and have the space to clarify any questions or concerns."
+    },
+    {
+      "type": "guideline",
+      "content": "Attend Spectrum shareouts and trainings.\n\nParticipate in the shareouts and training sessions being organized by the Spectrum team to familiarize yourself with Spectrum 2. These will help you understand the updated design principles, guidelines, and components. And, you’ll learn how to use new design assets, style guides, and tools that apply to your area of focus."
+    },
+    {
+      "type": "guideline",
+      "content": "Review existing assets that use Spectrum.\n\nReview your current marketing materials, banners, or social media graphics to identify design elements that need updating (for example, if your product uses screenshots of UI in your marketing materials or home screens). Take note of any iconography, colors, or imagery that may conflict with Spectrum 2. Apply the Spectrum 2 components across all relevant channels to maintain consistency."
+    },
+    {
+      "type": "guideline",
+      "content": "Review the Spectrum 2 documentation.\n\nRead through this website to understand the changes coming to components, patterns, styles, and usage guidelines. Follow the release notes (posted in #spectrum-bulletin ) for updates."
+    },
+    {
+      "type": "guideline",
+      "content": "Provide feedback.\n\nWhen collaborating with your design team and product leaders throughout the transition process, share insights from your perspective to help refine Spectrum 2 or report any inconsistencies you may come across. Learn about how to reach out."
+    },
+    {
+      "type": "guideline",
+      "content": "The Spectrum team manages Spectrum 2 components and styles as Figma libraries. These are available on the Resources page."
+    },
+    {
+      "type": "guideline",
+      "content": "For general inquiries, post in #spectrum-general or email the Spectrum team. For specific inquiries, view the Contact page for more information on how to get in touch."
+    }
+  ],
+  "sourceUrl": "https://preview.spectrum.adobe.com/support",
+  "lastUpdated": "2026-08-19",
+  "status": "published"
+}

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": [