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

package/guidelines/rounding.json

@@ -6,6 +6,10 @@
   "category": "designing",
   "documentBlocks": [
     { "type": "purpose", "content": "Rounding" },
+    {
+      "type": "guideline",
+      "content": "Image: A rounded triangle icon with softened corners on a light gradient background, illustrating the principle of avoiding sharp corners. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1679863e98a51e7b0ee74efe42d30c2a60c9eb9a2.png?width=750&format=png&optimize=medium) Image: Four corner bracket shapes forming a square outline, with the top-right corner highlighted in green, illustrating visually balanced corner treatment. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_15d9fe99db8308191713c76cbdf0cbc1d99a99a8a.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "No sharp corners.\n\nSpectrum generally uses rounded corners throughout the interface. Exceptions to this rule are rare and reserved for specialized cases when precision is especially important and helps communicate meaning or improve the accuracy of a visual representation. For example, the fill of a slider or progress bar may use a sharp edge to indicate a specific value or position more precisely."
@@ -14,6 +18,10 @@
       "type": "guideline",
       "content": "Visually balanced corners.\n\nWhen rounded surfaces are nested inside one another, their corner radii should adjust in proportion to the space between them. This helps maintain visually consistent gaps and creates the appearance of concentric curves. Learn more about creating balanced nested corners below."
     },
+    {
+      "type": "guideline",
+      "content": "Image: A sequence of five corner shapes numbered 1 through 5, progressing from a sharp square corner to a fully rounded circular corner, illustrating the rounding system scale. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_10b83b08dd022d2bb9fef04bdb0e37671af553061.png?width=750&format=png&optimize=medium) Small Small controls such as checkbox, in-field button Medium (default) Most components, extra-small and small cards Large Medium and large cards, panels, action boxes, select boxes, toolbars Extra-large Dialogs Full Button, avatar, floating action button, search Image: Four gray rounded rectangles of increasing size, labeled with corner radius values 7 (7.111px), 8px, 9px, and 10 (10.125px), illustrating how corner radius scales with component size. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_15d74d9cce885aad6e05c3c661570e9f00d0b1a28.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Rounding for component sizes.\n\nCorner radius values scale using a Major Second logarithmic scale, the same scale used throughout Spectrum's type system. This allows corner rounding to scale proportionally with component sizes and labels, helping components maintain a consistent visual shape across the interface. The values shown are base values, and the applied corner radius may vary by component."
@@ -24,15 +32,19 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Diagram of a rounded card with a blue focus ring, labeling outer radius, inner radius, and the gap between the component edge and the focus ring. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1580eaee52110544895d8754b90e30a99e0d27767.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Diagram of a rounded card with a blue focus ring, labeling outer radius, inner radius, and the gap between the component edge and the focus ring. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1580eaee52110544895d8754b90e30a99e0d27767.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Focus rings use an outer stroke separated from the component by a consistent gap. To maintain visually balanced spacing around every corner radius, Spectrum calculates the focus ring radius using the following formula: <outer radius> - <gap> = <inner radius> Image: Diagram of a rounded card containing a small checkbox and heart icon, labeling the large container radius and the small nested component radius. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1238596e6de27dfab676345a245d99aca9c0a01c0.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Focus rings use an outer stroke separated from the component by a consistent gap. To maintain visually balanced spacing around every corner radius, Spectrum calculates the focus ring radius using the following formula: &#x3C;outer radius> - &#x3C;gap> = &#x3C;inner radius> Image: Diagram of a rounded card containing a small checkbox and heart icon, labeling the large container radius and the small nested component radius. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1238596e6de27dfab676345a245d99aca9c0a01c0.png?width=750&format=png&optimize=medium)"
+      "content": "Nested components.\n\nSpectrum components are designed so that smaller objects use smaller corner radii and larger objects use larger corner radii. When components are nested, this creates optically balanced corners and spacing while maintaining consistent relationships throughout the design system. Image: Diagram of a dropdown input field, labeling the medium radius of the field and the small radius of the nested chevron button. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_117277faee1a1249b79388f9456db5a94d180aa4b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Nested components.\n\nSpectrum components are designed so that smaller objects use smaller corner radii and larger objects use larger corner radii. When components are nested, this creates optically balanced corners and spacing while maintaining consistent relationships throughout the design system. Image: Diagram of a dropdown input field, labeling the medium radius of the field and the small radius of the nested chevron button. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_117277faee1a1249b79388f9456db5a94d180aa4b.png?width=750&format=png&optimize=medium)"
+      "content": "When designing custom containers and surfaces, nested corners that always match the formula precisely can often create complexity and fragmentation. Instead, aim for overall visual harmony instead of numerical precision by nesting smaller corners within larger ones and creating gaps using Spectrum’s Spacing system. Image: Photo gallery UI with a \"1 selected\" toolbar, annotated with corner radius tokens: extra-large and medium for image tiles, large for the selection toolbar, and spacing values of 12px and 6px. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1e549dc82517f4c8d70a43fefa55aec784e2dc85a.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -41,7 +53,7 @@
     { "type": "guideline", "content": "Spectrum iOS" },
     {
       "type": "guideline",
-      "content": "Image: Two pink rounded squares labeled \"Off\" and \"On,\" comparing a standard rounded corner to a smoothed squircle-style corner, used as the reduced-motion alternative to the corner smoothing animation. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1daec0c3ae55113ee136895ff6e8c32f68c1a0c74.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Two pink rounded squares labeled \"Off\" and \"On,\" comparing a standard rounded corner to a smoothed squircle-style corner, used as the reduced-motion alternative to the corner smoothing animation. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1daec0c3ae55113ee136895ff6e8c32f68c1a0c74.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -49,7 +61,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Static illustration of a pink rounded square with a black outline highlighting the nested outer and inner corner curves, used as the reduced-motion alternative to the concentric corners animation. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1f932489f41beb1e5357ccf616be1e590f096f48b.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Static illustration of a pink rounded square with a black outline highlighting the nested outer and inner corner curves, used as the reduced-motion alternative to the concentric corners animation. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1f932489f41beb1e5357ccf616be1e590f096f48b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -57,10 +69,10 @@
     },
     {
       "type": "guideline",
-      "content": "Platform availability.\n\nThese tokens are currently available on web. Guidance for additional platforms will be added in a future release. StyleTokenValueSmall corner-radius-small-default 4 pxMedium corner-radius-medium-default 8 pxLarge corner-radius-large-default 10 pxExtra-large corner-radius-extra-large-default 16 pxFull no token, calculated with formula: height ÷ 2 --"
+      "content": "Platform availability.\n\nThese tokens are currently available on web. Guidance for additional platforms will be added in a future release. Style Token Value Small corner-radius-small-default 4 px Medium corner-radius-medium-default 8 px Large corner-radius-large-default 10 px Extra-large corner-radius-extra-large-default 16 px Full no token, calculated with formula: height ÷ 2 --"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/rounding",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/rounding",
   "lastUpdated": "2026-08-14",
   "status": "published",
   "tags": [

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

@@ -8,66 +8,66 @@
     { "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. 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)"
+      "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://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. 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)"
+      "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://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 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)"
+      "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://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. 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)"
+      "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://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. 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)"
+      "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://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). 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)"
+      "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://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. 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)"
+      "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://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://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. 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)"
+      "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://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. 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)"
+      "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://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://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. 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)"
+      "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://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://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://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)"
+      "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://spectrum.adobe.com/foundations/app-frame/media_182dbe4ece16320dcb41ef46a514ec1346f6bc5ae.png?width=750&format=png&optimize=medium)"
     },
     {
       "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."
+      "content": "Keyboard interactions (App frame side navigation panel).\n\nKey Interactions Tab Focuses onto or off of the drag area, if enabled. Arrow keys Resizes the drag area incrementally."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions (App frame side navigation).\n\nKey Interactions TabFocuses onto or off of the side navigation.Arrow keysMoves between side navigation items.Space/enterExecutes selection of the item and changes the view of the page in the content area. The focus remains on the selected side navigation item."
+      "content": "Keyboard interactions (App frame side navigation).\n\nKey Interactions Tab Focuses onto or off of the side navigation. Arrow keys Moves between side navigation items. Space/enter Executes selection of the item and changes the view of the page in the content area. The focus remains on the selected side navigation item."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nState Cursor Description HoverArrowEverything else that is not a link."
+      "content": "Cursor guidelines.\n\nState Cursor Description Hover Arrow Everything else that is not a link."
     },
     {
       "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. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_18d3bf036140f0c60608e3a7fbc095f542beeef29.png?width=750&format=png&optimize=medium)"
+      "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://spectrum.adobe.com/foundations/app-frame/media_18d3bf036140f0c60608e3a7fbc095f542beeef29.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/side-navigation-browsing-context",
+  "sourceUrl": "https://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

@@ -2,17 +2,33 @@
   "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
   "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/spacing-overview.json",
   "name": "spacing-overview",
-  "title": "Spacing overview",
+  "title": "Spacing",
   "category": "designing",
   "documentBlocks": [
-    { "type": "purpose", "content": "Spacing overview" },
+    { "type": "purpose", "content": "Spacing" },
     {
       "type": "guideline",
-      "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)"
+      "content": "Spectrum's spacing system is built on three principles, which are grounded in how the visual system perceives and interprets proximity."
     },
     {
       "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. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1280217c360758de76f28044ecf6f9d81b92beed4.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Stylized 3D icon of a pentagon shape made of glowing green connected nodes and lines, like a graph or network diagram, on a soft white background. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1b5cd74dbefda747e6a81db55b46195e41632efca.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: Stylized 3D icon of four rounded outline squares of varying sizes arranged in a 2x2 grid, in a blue-purple gradient, resembling an app grid or dashboard icon. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1ea5b08da8cc8d8033723c6725f53f9745fd34db2.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: Stylized 3D icon of an eye with a purple-to-pink gradient, featuring a simplified almond-shaped outline and a comma-shaped iris, on a soft white background. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1280217c360758de76f28044ecf6f9d81b92beed4.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Relational.\n\nEvery spacing decision carries meaning. Proximity communicates what belongs together, what is separate, and how an interface is organized."
+    },
+    {
+      "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."
     },
     {
       "type": "guideline",
@@ -22,24 +38,41 @@
       "type": "guideline",
       "content": "Spacing tells people what belongs together, what is separate, and how content is organized. It works because of how the visual system perceives proximity: elements placed close together are seen as related. As the distance between them increases, that relationship weakens. With enough separation, elements read as completely independent."
     },
+    { "type": "guideline", "content": "Relationships" },
+    {
+      "type": "guideline",
+      "content": "Relationships.\n\nCloser elements are more associated. Distant elements are more independent. Image: Diagram showing a list of content cards grouped by relevance: the top two cards are bracketed and labeled \"More related,\" while all three cards together are bracketed and labeled \"Less related\" on the right side. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_160a34223f929bf2e94eee1cb1d58d7ec90ec86a8.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
-      "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)"
+      "content": "Boundaries.\n\nConsistent proximity within a group signals that all members are equally related. Image: Diagram showing two identical pairs of content cards, each pair enclosed in a dashed pink box, illustrating a repeated grouping structure. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1201af3d7c478557df34557c19dab71dc46fd9ad8.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "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)"
+      "content": "Structure.\n\nThe overall distribution of space shows how content is organized within a layout. Image: Grayscale wireframe mockup of an application interface showing a top navigation bar with tabs, a left sidebar with icon buttons, and a right panel with four labeled sliders and a dropdown menu. (source: https://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: Grayscale wireframe mockup of a webpage or app interface with a top navigation bar, a profile icon and menu tabs, a left sidebar list, and a highlighted content panel with text lines and two buttons. (source: https://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: Diagram showing two identical pairs of content cards, each pair enclosed in a dashed pink box, illustrating a repeated grouping structure. (source: https://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": "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."
+      "content": "Every spacing decision falls into one of two tracks. Layout spacing is for anything above the component level, such as the relationships between components, patterns, and regions of a product UI. Component spacing is for anything within a component. Layout spacing and component spacing scale at different rates and serve different purposes. Within a single component, different spacings may be present at the same time, each scaling according to its own role."
     },
     {
       "type": "guideline",
-      "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"
+      "content": "Jump to.\n\nImage: Stylized 3D icon of a rounded square divided into three panels—one wide top panel and two smaller bottom panels—in a purple gradient, representing a dashboard or layout structure. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1caf3f715f3bcde815b184c56914ddf0808a00ffd.png?width=750&format=png&optimize=medium) Layout spacing Layout spacing Image: Stylized 3D icon of two toggle switches stacked vertically in a blue gradient—the top toggle shown in the off position and the bottom toggle shown in the on position. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_164937f2c0285c78dd62f96e1e82519a58de2a3e6.png?width=750&format=png&optimize=medium) Component spacing Component spacing"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/spacing-overview",
-  "lastUpdated": "2026-08-19",
-  "status": "published"
+  "sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/overview",
+  "lastUpdated": "2026-08-13",
+  "status": "published",
+  "tags": [
+    "Spacing",
+    "Proximity",
+    "Negative space",
+    "Layout spacing",
+    "Component spacing",
+    "Relational",
+    "Perceptual",
+    "Boundaries",
+    "Structure",
+    "Cognitive load"
+  ]
 }

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. 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)"
+      "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://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. 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)"
+      "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://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. 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)"
+      "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://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://preview.spectrum.adobe.com/foundations/behavior/states",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/behavior/states",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/support.json

@@ -42,6 +42,10 @@
       "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": "Review our Developer overview page for detailed information about developing with Spectrum 2."
+    },
     {
       "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."
@@ -102,12 +106,20 @@
       "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": "The Spectrum 1 is retired and is no longer supported. The related websites have been in maintenance mode since April 21, 2025. For now, we offer available archived web content for Adobe-internal reference only. Spectrum 1 design documentation archive (VPN required) Spectrum 1 Contributions documentation archive (VPN required)"
+    },
+    {
+      "type": "guideline",
+      "content": "The migration of Spectrum Patterns to the new website is underway. In the meanwhile, the original Spectrum Patterns website remains accessible for reference. If you have questions regarding the content, please contact the corresponding design team that represents your product area or focus."
+    },
     {
       "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",
+  "sourceUrl": "https://spectrum.adobe.com/support",
   "lastUpdated": "2026-08-19",
   "status": "published"
 }

package/guidelines/typography-overview.json

@@ -8,26 +8,22 @@
     { "type": "purpose", "content": "Typography" },
     {
       "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. View all Spectrum fonts on the Fonts page. 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://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://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://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://spectrum.adobe.com/foundations/typography/media_173290f80e14bbcd13a7a945b5bd8e258fe041266.png?width=750&format=png&optimize=medium)"
     },
     {
       "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. 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)"
+      "content": "Image: Adobe Clean typeface displaying a diacritics set, showing the Polish pangram \"Zażółć gęślą jaźń\" with accented characters. (source: https://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://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://spectrum.adobe.com/foundations/typography/media_1dda11559e4a0d3cb6dcdef680372b595b81171d1.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)"
+      "content": "Adobe Clean Spectrum VF provides two main benefits over the non-variable versions: Improves alignment with UI elements. Adobe Clean Spectrum VF uses updated baseline metrics, which are the measurements that determine how text is positioned. These updated metrics help text align more consistently with other interface elements, such as icons, components, and avatars. Supports future adjustments. Spectrum currently recommends using the default weights and widths. However, the variable font makes it easier to fine-tune typography in future updates. For example, a slightly thinner weight may improve readability in dark mode."
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Spectrum VF provides two main benefits over the non-variable versions: Improves alignment with UI elements. Adobe Clean Spectrum VF uses updated baseline metrics, which are the measurements that determine how text is positioned. These updated metrics help text align more consistently with other interface elements, such as icons, components, and avatars. Supports future adjustments. Spectrum currently recommends using the default weights and widths. However, the variable font makes it easier to fine-tune typography in future updates. For example, a slightly thinner weight may improve readability in dark mode. Learn more about Adobe Clean Spectrum VF in the Spectrum 2 typography guide."
-    },
-    {
-      "type": "guideline",
-      "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"
+      "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://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://spectrum.adobe.com/foundations/typography/media_1bfdcea0ca1f5a86d02adde5500e376465c822b02.png?width=750&format=png&optimize=medium) Applying the type system Applying the type system"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/typography/overview",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/typography/overview",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [