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

package/guidelines/object-styles.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/object-styles.json",
+  "name": "object-styles",
+  "title": "Object styles",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Example of how object styles are combined to communicate different interactions.\n\nIn general, Spectrum 2’s system for rounding is more pronounced and flexible than in Spectrum 1.\n\nIn general, this system of rounding creates a visually balanced gap when nesting smaller objects within larger objects.\n\n\"There are two border widths used within in-product UI contexts:\"\n\n\"The third option is not used within in-product UI contexts:\"\n\nA medium divider separates two action button groups. Note that when dividers are used with visible gaps on both ends, the end caps are fully rounded.\n\nWhile the detailed values are still in progress, the foundational concepts for drop shadows still apply.\n\n\"In Spectrum 2, shadows are composed of three layers: a key shadow, an ambient shadow, and a transition shadow that’s between them.\"\n\nContainers that appear on top of content, such as menus and tooltips, have drop shadows to show elevation."
+    },
+    {
+      "type": "guideline",
+      "content": "Object styles are specific visual shapes or effects that are used to communicate intent or to give cues about an interaction."
+    },
+    {
+      "type": "guideline",
+      "content": "For example, different types of inputs all share styles. Search fields, text fields, and combo boxes use object styles to communicate a primary purpose: text input. A search field is often more of a global scope, and has full rounding to add emphasis and differentiation from other types of fields. Action buttons, pickers, and in-field buttons share a fill color to indicate selection. Checkboxes, radio buttons, and switches share object styles to indicate binary selection."
+    },
+    {
+      "type": "guideline",
+      "content": "Example of how object styles are combined to communicate different interactions."
+    },
+    {
+      "type": "guideline",
+      "content": "In general, Spectrum 2’s system for rounding is more pronounced and flexible than in Spectrum 1."
+    },
+    {
+      "type": "guideline",
+      "content": "Larger rounding values give components more expression and personality, and having more rounding options makes it possible to create visual balance across a wide range of contexts."
+    },
+    {
+      "type": "guideline",
+      "content": "In general, this system of rounding creates a visually balanced gap when nesting smaller objects within larger objects."
+    },
+    {
+      "type": "guideline",
+      "content": "Avatars are displayed in circles to draw attention to user content. All other representations, such as groups and products, are displayed in rounded squares."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 2, rounding for different sized components varies based on a Major Second logarithmic scale. This allows for components to retain a consistent and identifiable shape at all sizes. Desktop and mobile scales share the same base rounding. Note that the values displayed are base values for desktop scale components, and specific corner radius values may vary between components."
+    },
+    {
+      "type": "guideline",
+      "content": "Borders are only used when spacing isn’t enough to show separation. For example, a divider might sometimes be needed to separate two distinct action button groups. Or, an object might have a border to demarcate distinct areas, such as separating a panel or card from the rest of the content on a page."
+    },
+    {
+      "type": "guideline",
+      "content": "There are two border widths used within in-product UI contexts:"
+    },
+    {
+      "type": "guideline",
+      "content": "The third option is not used within in-product UI contexts:"
+    },
+    {
+      "type": "guideline",
+      "content": "A medium divider separates two action button groups. Note that when dividers are used with visible gaps on both ends, the end caps are fully rounded."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 2, large borders are only used in longform content, such as in documentation pages. Large borders aren’t used within in-product UI contexts."
+    },
+    {
+      "type": "guideline",
+      "content": "A full-width medium divider can be a helpful option for separating two distinct parts of a page, such as dividing a navigation panel from the rest of the content. When deciding whether a divider is needed, consider whether groups of information are still clear without one. Generally, more complex content with a varying alignment of objects will benefit the most from using a divider."
+    },
+    {
+      "type": "guideline",
+      "content": "Similarly to the previous example, a full-width medium divider separates a commenting panel from the rest of the page. The divider is helpful in this context since the commenting panel can have varying content, from an empty state to many layers of nested comments. By creating a clear boundary, this helps set expectations for what content is presented in the panel."
+    },
+    {
+      "type": "guideline",
+      "content": "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content."
+    },
+    {
+      "type": "guideline",
+      "content": "While the detailed values are still in progress, the foundational concepts for drop shadows still apply."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 2, shadows are composed of three layers: a key shadow, an ambient shadow, and a transition shadow that’s between them."
+    },
+    {
+      "type": "guideline",
+      "content": "Containers that appear on top of content, such as menus and tooltips, have drop shadows to show elevation."
+    },
+    {
+      "type": "guideline",
+      "content": "By default, objects have no drop shadows. When a container is dragged, a drop shadow is used to show elevation in both default and emphasized containers."
+    },
+    {
+      "type": "guideline",
+      "content": "An overlay represents elevation in a different way: it focuses attention on the content above the overlay only. When using an overlay (for example, behind a dialog), no additional drop shadow is applied to the background."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/object-styles/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [{ "ref": "fonts" }, { "ref": "spacing" }]
+}

package/guidelines/principles.json

@@ -8,23 +8,22 @@
     { "type": "purpose", "content": "Principles" },
     {
       "type": "guideline",
-      "content": "Rational.\n\nSpectrum is based on real-world situations. Every component, pattern, and principle is informed by thoughtful testing. Every decision is backed by thorough interdisciplinary research.\n\nSpectrum is not a rigid set of rules for how to build products, but rather a set of adaptable resources for making experiences feel contextual, cohesive, and performant."
+      "content": "Spectrum is based on real-world situations. Every component, pattern, and principle is informed by thoughtful consideration of environments, applications, and range of needs that Adobe products serve. Spectrum is not a rigid set of rules for how to build products, but rather a set of adaptable resources for making experiences feel contextual, cohesive, and performant."
     },
     {
       "type": "guideline",
-      "content": "Human.\n\nSpectrum places people's needs first. It's deeply committed to a high standard of inclusivity, accessibility, honesty, and respect.\n\nSpectrum is adaptable to meet as many user expectations, platform requirements, and product visions as possible. It's always what it needs to be, accommodating a flexible range of expression. It balances the human needs of utility and joy."
+      "content": "Spectrum places people's needs first. It's deeply committed to a high standard of inclusivity, accessibility, honesty, and respect. Spectrum is adaptable to meet as many user expectations, platform requirements, and product visions as possible. It's always what it needs to be, accommodating a flexible range of expression. It balances the human needs of utility and joy. Image: Aperture/lens icon representing the Focused principle (source: https://preview.spectrum.adobe.com/getting-started/media_1d733c7a6b8739373a7b68306edb74b7c2ffe34b4.png?width=750&format=png&optimize=medium)Image: Two overlapping speech bubbles representing the Collaborative principle (source: https://preview.spectrum.adobe.com/getting-started/media_1289706018f1e7799026af8a56beeec33c163c2ee.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Focused.\n\nSpectrum delivers what's needed, when it's needed. Every decoration is purposeful and meaningful. Every communication touchpoint is relevant.\n\nSpectrum experiences are built to a high standard of quality. Everything incorporates attention to details, and that creates experiences that look and feel well-crafted. Things are delightful to use because they balance functionality and expression."
+      "content": "Spectrum delivers what's needed, when it's needed. Every decoration is purposeful and meaningful. Every communication touchpoint is relevant. Spectrum experiences are built to a high standard of quality. Everything incorporates attention to details, and that creates experiences that look and feel well-crafted. Things are delightful to use because they balance functionality and expression."
     },
     {
       "type": "guideline",
-      "content": "Collaborative.\n\nSpectrum belongs to everyone. It's a reflection of an ever-growing community that makes decisions thoughtfully, holistically, and collectively.\n\nSpectrum examines from multiple angles, then refines, then repeats. Constantly."
+      "content": "Spectrum belongs to everyone. It's a reflection of an ever-growing community that makes decisions thoughtfully, holistically, and collectively. Spectrum examines from multiple angles, then refines, then repeats. Constantly."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/getting-started/principles",
-  "lastUpdated": "2026-09-17",
-  "status": "published",
-  "tags": ["fundamentals"]
+  "sourceUrl": "https://preview.spectrum.adobe.com/getting-started/principles",
+  "lastUpdated": "2026-09-10",
+  "status": "published"
 }

package/guidelines/rounding.json

@@ -24,21 +24,33 @@
     },
     {
       "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>"
+      "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)"
     },
     {
       "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."
+      "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://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1238596e6de27dfab676345a245d99aca9c0a01c0.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)"
     },
     {
       "type": "guideline",
       "content": "Example.\n\nThis example shows how nested corner radii can vary depending on spacing. The thumbnails use a larger gap, so the corner radii are adjusted for optical balance rather than following the formula exactly. The action bar uses a smaller gap, allowing the formula to produce a visually balanced result."
     },
     { "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)"
+    },
     {
       "type": "guideline",
       "content": "Corner smoothing.\n\nUse Apple’s continuous corner style for rounded shapes, such as rounded rectangles and capsules. Continuous corners create a smooth transition between curved and straight edges and align with the corner treatment used throughout iOS system interfaces. Learn more in Apple’s Developer Documentation: RoundedCornerStyle"
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Concentric corners.\n\nUse Apple’s concentric rectangle APIs when working with nested shapes. Concentric corners automatically adapt to their container’s shape and spacing, helping maintain consistent curvature and visual alignment across layered interface elements. Learn more in Apple’s Developer Documentation: ConcentricRectangle."
@@ -48,7 +60,7 @@
       "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 --"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/rounding",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/rounding",
   "lastUpdated": "2026-08-14",
   "status": "published",
   "tags": [

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/spacing.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/spacing.json",
+  "name": "spacing",
+  "title": "Spacing",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Spectrum 2 continues with Spectrum's current guidelines for spacing and responsive grids. More detailed guidelines for responsive design are currently in progress.\n\nThe primary update for Spectrum 2 is that **instead of dividers, spacing is used as the primary way to group and divide content**. Different spacing values establish rhythm and create hierarchy within a page. The [spacing values](https://spectrum.corp.adobe.com/page/spacing/#Spacing-values) themselves remain unchanged from Spectrum 1.\n\nSmaller spacing values should generally be used for objects that are closely related. An example of this would be to use a smaller spacing value in between the components that make up a component group, like in a button group or a group of cards.\n\nLarger spacing values should be used for groups of things that are less closely related. An example of this would be to use a larger spacing value to separate two distinct sections of content. Doing this helps to better organize a page.\n\nIn some contexts, a divider can still be appropriate to define larger areas of a page. View more about [border width](https://s2.spectrum.corp.adobe.com/page/object-styles/#border-width).\n\n### Example\n\nIn this example, the side navigation items use a smaller spacing value (spacing-75) in order to show a closer relationship. The side navigation items are grouped with a combination of a section title and a larger spacing value (spacing-400) to divide two distinct sections.\n\nSimilarly, cards that are part of the same group have a smaller spacing value (spacing-300) between them. Each group of cards has a title and a larger spacing value (spacing-500) to show two that the two groups are distinct.\n\nBy using spacing intentionally, the purpose of page content becomes more readily apparent and information can become easier to parse."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum defines density as the spacing between components or UI elements, regardless of their size and scale. Density can be used alongside component size to create a range of layouts, from spacious to dense."
+    },
+    {
+      "type": "guideline",
+      "content": "For example, when creating complex UI layouts, high density is often combined with smaller components and tighter spacing in between elements."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/spacing/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"]
+}

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"
+}