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

package/guidelines/background-layers.json

@@ -8,7 +8,7 @@
     { "type": "purpose", "content": "Background layers" },
     {
       "type": "guideline",
-      "content": "In Spectrum, background layers are used differently depending on the primary context of the page. For pages where the primary purpose is the canvas and related actions for editing, view Editing contexts. For pages where the primary focus is browsing content, such as a Home or Files experience, view Browsing contexts. If you’re not sure whether a page is in an editing or browsing context, contact the Spectrum design team. In addition to the three existing background layer options — background layer 1, background layer 2, and background base — Spectrum includes an elevated option. Elevated background layers create depth and emphasize content floating on top of a canvas. Background layer Light theme Dark theme Elevatedgray-25 (with drop shadow)gray-75 (with drop shadow)Layer 2gray-25gray-75Layer 1gray-50gray-50Pasteboardgray-100gray-25"
+      "content": "In Spectrum, background layers are used differently depending on the primary context of the page. For pages where the primary purpose is the canvas and related actions for editing, view Editing contexts. For pages where the primary focus is browsing content, such as a Home or Files experience, view Browsing contexts. If you’re not sure whether a page is in an editing or browsing context, contact the Spectrum design team. In addition to the three existing background layer options — background layer 1, background layer 2, and background base — Spectrum includes an elevated option. Elevated background layers create depth and emphasize content floating on top of a canvas. Image: A stack of five overlapping flat panels labeled with callouts from front to back: elevated, layer-2, layer-1, base, and pasteboard, illustrating a background layer hierarchy. (source: https://preview.spectrum.adobe.com/foundations/color/media_125baf8974fe134e65d43f0f3ae7eeac5a7fd609b.png?width=750&format=png&optimize=medium) Background layer Light theme Dark theme Elevatedgray-25 (with drop shadow)gray-75 (with drop shadow)Layer 2gray-25gray-75Layer 1gray-50gray-50Pasteboardgray-100gray-25"
     },
     {
       "type": "guideline",
@@ -16,24 +16,52 @@
     },
     {
       "type": "guideline",
-      "content": "Editing application.\n\nPages in editing contexts draw attention to the canvas, which is the primary focus."
+      "content": "Editing application.\n\nPages in editing contexts draw attention to the canvas, which is the primary focus. Image: A UI mockup showing a light gray toolbar and content area, with a small white vertical panel on the left labeled 'elevated. (source: https://preview.spectrum.adobe.com/foundations/color/media_170fe70f90d11502945ba73f759534964da2df900.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: An isometric exploded view of a UI panel showing stacked layers labeled layer-2, elevated, pasteboard, and layer-2 again, illustrating depth and stacking order. (source: https://preview.spectrum.adobe.com/foundations/color/media_1f8b886169da3f23ccfffdbb27b5c0ea4021846d2.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
       "content": "Elevated (highest attention).\n\nElevated backgrounds create the illusion of depth through the use of a drop shadow, and display content that appears on top of other content. They draw attention and are used sparingly. In an editing application, this background option works well for parts of the app frame that appear on top of the canvas, such as a floating toolbar, panel, or popover."
     },
+    {
+      "type": "guideline",
+      "content": "Image: The same UI mockup with a light gray toolbar and content area, with the surrounding background area labeled 'layer-2.' (source: https://preview.spectrum.adobe.com/foundations/color/media_10fb4e74c2e2cf1b5db032034b80119c621df637f.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Layer 2 is the color of the canvas. This background layer color can also be used in both professional and lightweight editing applications, in the app frame, to put it on the same dimension as the primary content."
     },
+    {
+      "type": "guideline",
+      "content": "Image: The same UI mockup with a light gray toolbar and content area, with the outermost background area labeled 'pasteboard.' (source: https://preview.spectrum.adobe.com/foundations/color/media_110c564baa38fffaae914eb5a11d469cd41ccf2a1.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Pasteboard.\n\nThe pasteboard has a dedicated background layer. This is because no components are placed directly on top of it, with the exception of an artboard (which uses a white background color). Other components should be placed on a layer 1, layer 2, or elevated background."
     },
+    {
+      "type": "guideline",
+      "content": "Image: A UI mockup showing a toolbar, content area, and a floating rounded button, with the button labeled 'elevated.' (source: https://preview.spectrum.adobe.com/foundations/color/media_19136fb540bd10ab5985b00318dd4c6a06d6648db.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: The same UI mockup with a toolbar, content area, and floating button, with the light gray sidebar area labeled 'Layer 2.' (source: https://preview.spectrum.adobe.com/foundations/color/media_1167297ee70d5bc333820478afdcf8410d5cd2e22.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: The same UI mockup with a toolbar, content area, and floating button, with the white toolbar area labeled 'Layer 1. (source: https://preview.spectrum.adobe.com/foundations/color/media_18abc351c445528d2ace3af106f13f2b6626b2715.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Layer 1 can be used as the app frame color in professional editing applications, which require additional depth differentiation."
     },
+    {
+      "type": "guideline",
+      "content": "Image: The same UI mockup with a toolbar, content area, and floating button, with the outermost background area labeled 'Pasteboard.' (source: https://preview.spectrum.adobe.com/foundations/color/media_1fca78125ec28d3d0af8819e33bc53e96dd8dbfd2.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Pasteboard.\n\nThe pasteboard has a dedicated background layer. This is because no components are placed directly on top of it, with the exception of an artboard (which uses a white background color)."
@@ -42,20 +70,28 @@
       "type": "guideline",
       "content": "Elevated (highest attention).\n\nElevated backgrounds create the illusion of depth through the use of a drop shadow, and display content that appears on top of other content. They draw attention and are used sparingly. In browsing contexts, this background layer style is used in components like menus and tooltips."
     },
+    {
+      "type": "guideline",
+      "content": "Image: A UI mockup showing a content area with a floating rounded card in the top-right corner, with the surrounding gray background labeled 'base.' (source: https://preview.spectrum.adobe.com/foundations/color/media_1856cd39f76bc9d38d6f9ddfe57400ceb603e983b.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Layer 2 is used to group related content together and to create separation from the primary content on a page, such as in the background of the app frame."
     },
     {
       "type": "guideline",
-      "content": "Base.\n\nSpectrum 2 uses gray-25 as the base background color to draw attention to the primary content of a page. Using gray-25 allows for higher contrast between the background and content, and it provides a blank canvas for more vibrant colors. For using a drop shadow to draw emphasis to a container that isn’t elevated, view container emphasis. Background layer Light theme Dark theme Elevatedgray-25 (with drop shadow)gray-75 (with drop shadow)Layer 2gray-25gray-75Layer 1gray-50gray-50Pasteboardgray-100gray-25"
+      "content": "Image: The same UI mockup with a content area and floating card, with the white content panel labeled 'layer 2.' (source: https://preview.spectrum.adobe.com/foundations/color/media_14cfd47611567b8649816d2022de82b47339f2d42.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Base.\n\nSpectrum 2 uses gray-25 as the base background color to draw attention to the primary content of a page. Using gray-25 allows for higher contrast between the background and content, and it provides a blank canvas for more vibrant colors. For using a drop shadow to draw emphasis to a container that isn’t elevated, view container emphasis. Image: Two side-by-side diagrams, light theme and dark theme, each showing three overlapping square panels labeled elevated, Layer 2, and Base from front to back, illustrating background layer hierarchy in both color modes. (source: https://preview.spectrum.adobe.com/foundations/color/media_135b74d5364580adabc3490eb36efcbd74084d1e8.png?width=750&format=png&optimize=medium) Background layer Light theme Dark theme Elevatedgray-25 (with drop shadow)gray-75 (with drop shadow)Layer 2gray-25gray-75Layer 1gray-50gray-50Pasteboardgray-100gray-25"
     },
     {
       "type": "guideline",
-      "content": "Professional editing applications have the option to use background layer 1 for the app frame in order to create additional depth differentiation. To create separation for toolbars and panels that meet at the edges, include a border in size medium that matches the pasteboard color. In dark theme, the primary background (using the background base layer) is the darkest color. This allows for more flexibility for the grays that are layered on top of it, and provides contrast for more vibrant user-created content. This example shows containers that are emphasized to draw attention. They don’t use the elevated background because they don’t appear on top of other content. View container emphasis for more context.This example shows an editing application using background layer 2 for both the artboard and the app frame. An elevated background is used for a floating toolbar, which appears above the canvas."
+      "content": "Image: Screenshot of a 3D asset browsing tool titled 'Outdoor_backpack,' with a left panel showing model categories (Containers, Apparel, Furniture, Interior) and a preview pane showing an orange and black backpack, with layer callouts labeling the top toolbar as 'layer-1,' the sidebar as 'layer 2,' the models panel as 'layer-1,' and the surrounding gray area as 'pasteboard.' (source: https://preview.spectrum.adobe.com/foundations/color/media_12b24cc5d6f942a4c6769e90771cd05722c956374.png?width=750&format=png&optimize=medium) Professional editing applications have the option to use background layer 1 for the app frame in order to create additional depth differentiation. To create separation for toolbars and panels that meet at the edges, include a border in size medium that matches the pasteboard color. In dark theme, the primary background (using the background base layer) is the darkest color. This allows for more flexibility for the grays that are layered on top of it, and provides contrast for more vibrant user-created content. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/color/media_1907964fc16b62bc9bc0128942fac3063e8fbed18.png?width=750&format=png&optimize=medium) This example shows containers that are emphasized to draw attention. They don’t use the elevated background because they don’t appear on top of other content. View container emphasis for more context. Image: Screenshot of Photoshop's web interface showing a 'Size & position' panel with Move, Auto-select, Align, Transform, and Crop options, overlaid on a photo of a basketball player dribbling on a teal court. (source: https://preview.spectrum.adobe.com/foundations/color/media_1bdb575c4f4ad7b4e47b95c65287e274faa06bfcb.png?width=750&format=png&optimize=medium)This example shows an editing application using background layer 2 for both the artboard and the app frame. An elevated background is used for a floating toolbar, which appears above the canvas."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/background-layers",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/color/background-layers",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/bi-directionality.json

@@ -12,34 +12,34 @@
     },
     {
       "type": "guideline",
-      "content": "Mirror individual components.\n\nComponents and their constituting parts are affected by user interface mirroring. Mirroring guidelines for each component are available on their respective pages, when applicable."
+      "content": "Mirror individual components.\n\nComponents and their constituting parts are affected by user interface mirroring. Mirroring guidelines for each component are available on their respective pages, when applicable. Image: Key example showing the correct usage of a bi-directional component. (source: https://preview.spectrum.adobe.com/foundations/inclusivity/media_18e5aff774a8531f0cf4fb9dc3f5a154b7f6ef74a.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don't mirror components that represent time.\n\nComponents that are used to represent the concept of time should not be mirrored (e.g., a video player)."
+      "content": "Don't mirror components that represent time.\n\nComponents that are used to represent the concept of time should not be mirrored (e.g., a video player). Image: Key example showing the incorrect usage of a bi-directional component. (source: https://preview.spectrum.adobe.com/foundations/inclusivity/media_19187d9d281d10a389dfd6809de49d18be985e1fe.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Mirror composite images with directional flow.\n\nComposite images that depict a directional flow or convey a linear narrative require a dedicated bi-directional version since the sense of the narrative, reading from right to left, could appear reversed."
+      "content": "Mirror composite images with directional flow.\n\nComposite images that depict a directional flow or convey a linear narrative require a dedicated bi-directional version since the sense of the narrative, reading from right to left, could appear reversed. Image: Key example of correct usage of bi-directional flow in a linear narrative. (source: https://preview.spectrum.adobe.com/foundations/inclusivity/media_1a664a66a07b819bd3aff649b113040ff5097d898.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Mirror icons that represent movement.\n\nIcons that depict horizontal movement (e.g., back icon) should be mirrored to follow the flow of the right-to-left interface."
+      "content": "Mirror icons that represent movement.\n\nIcons that depict horizontal movement (e.g., back icon) should be mirrored to follow the flow of the right-to-left interface. Image: Key examples of mirror icons that represent movement. (source: https://preview.spectrum.adobe.com/foundations/inclusivity/media_195d5a351b079313e2e11c0dae134d74588e500f7.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don't mirror icons that represent time.\n\nIcons that refer to the passage of time (e.g., clock icon) should not be mirrored in right-to-left interfaces."
+      "content": "Don't mirror icons that represent time.\n\nIcons that refer to the passage of time (e.g., clock icon) should not be mirrored in right-to-left interfaces. Image: Key example of incorrectly mirroring icons that represent time. (source: https://preview.spectrum.adobe.com/foundations/inclusivity/media_1b374016f329125585285f97e193eebd2acbc4e4a.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don't mirror checkmarks.\n\nCheckmarks are never mirrored in right-to-left interfaces."
+      "content": "Don't mirror checkmarks.\n\nCheckmarks are never mirrored in right-to-left interfaces. Image: Key example of illustrating not to mirror the checkmark component. (source: https://preview.spectrum.adobe.com/foundations/inclusivity/media_1f3f57010df37d6833fadad8b45af031d78e543a8.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don't mirror slashes.\n\nSlashes are never mirrored in right-to-left interfaces."
+      "content": "Don't mirror slashes.\n\nSlashes are never mirrored in right-to-left interfaces. Image: Key example illustrating not to mirror slash marks. (source: https://preview.spectrum.adobe.com/foundations/inclusivity/media_1eaa9deb489f9741568d5c8549da5fbb7742191c4.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/bi-directionality",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/inclusivity/bi-directionality",
   "lastUpdated": "2026-09-03",
   "status": "published",
   "tags": [

package/guidelines/border-width.json

@@ -14,18 +14,34 @@
       "type": "guideline",
       "content": "Consistent border widths.\n\nBorder width is a functional design choice, not a decorative one. Use a single border width throughout the interface, and only introduce variations to the thickness to communicate meaningful change, such as focus or selection. Avoid varying border widths solely to create visual interest or hierarchy."
     },
+    {
+      "type": "guideline",
+      "content": "Image: UI examples showing medium border widths: a radio button, checkbox, and toggle switch outline, a focused pill-shaped button with a blue border, an unfocused pill button, and a bordered text input field with label and value. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1a088c65b63f7e399bb131a44ff80e74953321fff.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Medium borders (2 px) are the default size for most contexts. Components with border options use the default medium size, as well as focus rings which appear on keyboard focus."
     },
+    {
+      "type": "guideline",
+      "content": "Image: A list UI with two collapsible \"Title\" sections separated by thin hairline borders, and a checklist titled \"Fruits\" with thin-bordered rows for Apples, Oranges, and Pears. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1435bfbbdbca2c110617d050031937775d717f036.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Small borders (1 px) are used in specific components and patterns where there’s greater density (for example, in accordions and tables)."
     },
+    {
+      "type": "guideline",
+      "content": "Image: Adobe GenStudio interface with two magnified callouts comparing a rounded corner border end cap against a squared-off border end cap on a sidebar element. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_149631f31e7ffca6e95f54f0128c7dadc81cc445b.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Context-dependent end caps.\n\nThe rounding of divider end caps changes depending on how the divider is used. When a divider extends to both edges of a container, it uses square ends so it meets each edge cleanly. When a divider has visible gaps at both ends, it uses fully rounded end caps."
     },
+    {
+      "type": "guideline",
+      "content": "Image: Close-up of an app toolbar with a bordered rounded container grouping a percentage dropdown, share icon, upload icon, and blue Download button, next to ungrouped icon buttons. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1fd7f0c9ddbc8acc442c352f72f2f9f1888c96383.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Grouping related actions.\n\nUse a divider to separate groups of related actions in a header. This helps distinguish global actions from actions that apply only to the current view."
@@ -35,7 +51,7 @@
       "content": "Platform availability.\n\nThese tokens are currently available on web. Guidance for additional platforms will be added in a future release. StyleTokenValueSmall border-width-100 1 pxMedium border-width-200 2 pxLarge border-width-400 4 px"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/border-width",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/border-width",
   "lastUpdated": "2026-08-14",
   "status": "published",
   "tags": ["border width", "divider"]

package/guidelines/brand.json

@@ -12,7 +12,7 @@
     },
     {
       "type": "guideline",
-      "content": "Product logos, app icons, and lockups.\n\nA product logo or tile color does not change, even if the background is dark. One-color product logos are for usage as workflow icons."
+      "content": "Product logos, app icons, and lockups.\n\nA product logo or tile color does not change, even if the background is dark. One-color product logos are for usage as workflow icons. Image: \"Adobe Express branding with colorful 'A' app icon and text lockups shown in horizontal and vertical orientations.\" (source: https://preview.spectrum.adobe.com/foundations/media_1b535db2549466c3c1f81290211e8cb97e3b0277c.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -32,19 +32,19 @@
     },
     {
       "type": "guideline",
-      "content": "Creative Cloud uses Adobe red and six product-specific colors, each with corresponding light and dark values."
+      "content": "Creative Cloud uses Adobe red and six product-specific colors, each with corresponding light and dark values. Image: Color palette grid with Adobe app icons (Ai, Dn, Ps, Ae, Xd, Id) above corresponding color swatches and hex codes. (source: https://preview.spectrum.adobe.com/foundations/media_1fc8580f8a8ad1855ad6d91b5e412d1323e574af9.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Document Cloud’s colors align to Spectrum. There’s three primary product colors plus Adobe red, as well as six secondary colors."
+      "content": "Document Cloud’s colors align to Spectrum. There’s three primary product colors plus Adobe red, as well as six secondary colors. Image: Grid of color swatches with hex codes, featuring Adobe Acrobat icons in red, purple, and teal at the top row. (source: https://preview.spectrum.adobe.com/foundations/media_1e553a0a604bb2734012ea65f4a3545209e9749b7.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Experience Cloud’s colors align to Spectrum. The foundational apps use cool colors, while the functional apps use warm colors."
+      "content": "Experience Cloud’s colors align to Spectrum. The foundational apps use cool colors, while the functional apps use warm colors. Image: Diagram categorizing \"Foundational\" and \"Functional\" elements with labeled colored squares: Insights, Content, Data, Setup, Marketing, Ads, Commerce. (source: https://preview.spectrum.adobe.com/foundations/media_18af562eadd246ad3934851d77fca39cfca07bed5.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Adobe Express uses three colors. Indigo is used for a fill accent color and for highlighting main metaphors. Spectrum gray is the main stroke color."
+      "content": "Adobe Express uses three colors. Indigo is used for a fill accent color and for highlighting main metaphors. Spectrum gray is the main stroke color. Image: Three colored squares with hex codes: light purple (#DEDEF9), blue (#5C5CE0), and black (#242424) displayed in a row. (source: https://preview.spectrum.adobe.com/foundations/media_1704be25c74bac41af593635d0107205d2d97aec0.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -55,7 +55,7 @@
       "content": "Request assets from the Brand team.\n\nBrand considerations are highly strategic, and coherence is a priority. Don’t make your own illustrations, colors, gradients, logos, or other assets. The Brand team will work with you to create assets that align to your product’s strategy and timing. Any new Spectrum 2 assets must be requested directly from the Brand team. It’s very important that you do not create your own. To view existing S2 Illustrations, visit the S2 / Illustrations library in Figma. If you need a new illustration, make a request using Workfront."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/brand",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/brand",
   "lastUpdated": "2026-09-10",
   "status": "published",
   "tags": [

package/guidelines/colors.json

@@ -6,6 +6,18 @@
   "category": "designing",
   "documentBlocks": [
     { "type": "purpose", "content": "Colors" },
+    {
+      "type": "guideline",
+      "content": "Image: A green gradient circle icon, half outlined and half filled, representing accessibility. (source: https://preview.spectrum.adobe.com/foundations/color/media_1dbe049a5fb02f75fecb2595d69e3ab96b582b953.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: A blue gradient icon of two diagonal arrows pointing away from each other, representing scalability. (source: https://preview.spectrum.adobe.com/foundations/color/media_1c1aafd6782c73e32c3bb9f17bcc1d159a8338b32.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: A purple-to-pink gradient icon of three interlocking rings, representing intentional or purposeful design. (source: https://preview.spectrum.adobe.com/foundations/color/media_1030263b0b0e21eaa2317fc71f938da71ffa84f03.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Accessible.\n\nSpectrum colors are purposefully chosen and combined with one another to create accessible experiences that work for all users across different products, devices, and settings."
@@ -20,50 +32,50 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum’s color system helps you apply color to your UI in a consistent and visually harmonious way. Spectrum’s color system is based on a foundation of visual perception, inclusive design, and accessibility. Spectrum uses the relationships between colors and their properties to create a scalable foundation for color in the design system. Dark and light variants of each color can then be applied to your UI in different ways. Spectrum colors are generated using the Leonardo color tool, by plugging in hues and hue ranges through key colors and combined with target contrast ratios for each color."
+      "content": "Spectrum’s color system helps you apply color to your UI in a consistent and visually harmonious way. Spectrum’s color system is based on a foundation of visual perception, inclusive design, and accessibility. Spectrum uses the relationships between colors and their properties to create a scalable foundation for color in the design system. Dark and light variants of each color can then be applied to your UI in different ways. Spectrum colors are generated using the Leonardo color tool, by plugging in hues and hue ranges through key colors and combined with target contrast ratios for each color. Image: A large grid of color swatches showing 15 hue rows (red, orange, yellow, brown, chartreuse, green, teal, cyan, blue, indigo, purple, magenta, fuchsia, pink, and crimson) each with 16 columns transitioning from light to dark. (source: https://preview.spectrum.adobe.com/foundations/color/media_1b61b63c16d0c1bd67be971ead2447f6a4fb87a03.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Brand colors may differ from Spectrum colors"
+      "content": "Brand colors may differ from Spectrum colors.\n\nImage: Six vertical color ramps labeled with Adobe app icons (Ai, Sg, Ps, Ae, Xd, Id), each transitioning from a light tint at top to a dark shade at bottom in the app's brand color: orange, green, blue, indigo, magenta, and pink/red. (source: https://preview.spectrum.adobe.com/foundations/color/media_11dbaa344681e410a0abb24a800f8f99770341781.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Key colors (shown in hue).\n\nThe Leonardo tool generates the color palette by using several key colors, including brand colors. Most color scales are not a single hue key color. Leonardo tends to darken and lighten on either end of the gradient by adding black and white to the key colors, so some are included to ensure a high degree of saturation in the palette. In other cases, some key colors shift the actual hue in order to keep colors bright or recognizable, or shift them to help most users avoid confusion with adjacent colors. Once the color scale is determined, lightness stops are input for each color in order to get aliased colors."
+      "content": "Key colors (shown in hue).\n\nImage: Six horizontal gradient bars in Adobe app brand colors (orange/Ai, green/Sg, blue/Ps, indigo/Ae, magenta/Xd, pink/Xd), each labeled with numeric hue values marking key color stops along the gradient. (source: https://preview.spectrum.adobe.com/foundations/color/media_1628ff4ce8ffc018fd2e2943fa27cb27302f9102f.png?width=750&format=png&optimize=medium)The Leonardo tool generates the color palette by using several key colors, including brand colors. Most color scales are not a single hue key color. Leonardo tends to darken and lighten on either end of the gradient by adding black and white to the key colors, so some are included to ensure a high degree of saturation in the palette. In other cases, some key colors shift the actual hue in order to keep colors bright or recognizable, or shift them to help most users avoid confusion with adjacent colors. Once the color scale is determined, lightness stops are input for each color in order to get aliased colors.Image: A blue gradient scale from light to dark with contrast ratio labels ranging from 1.06:1 to 19.5:1 at each stop, paired below with a matching swatch row numbered 100 through 1600 showing the corresponding blue shades. (source: https://preview.spectrum.adobe.com/foundations/color/media_1b3856ffb32cd28a1427b18829e04a3ea760d4f74.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Solid color background with black or white.\n\nFor these scenarios, color must adhere to WCAG contrast minimums with the color of the text. Most colors have white text placed over the color. To maintain the identifiability of yellow, orange, chartreuse, and celery while still meeting these requirements, these colors must be used with black text. They must be fully opaque and should be referenced from the static color palette. Do not use these colors without a text label representation of the color’s meaning in your application (e.g., “drafts,” “reviewed,” “new”). When using multiple colors and text labels cannot readily clarify color meaning — which is a common case in data visualization — use the categorical color palette."
+      "content": "Solid color background with black or white.\n\nFor these scenarios, color must adhere to WCAG contrast minimums with the color of the text. Most colors have white text placed over the color. To maintain the identifiability of yellow, orange, chartreuse, and celery while still meeting these requirements, these colors must be used with black text. They must be fully opaque and should be referenced from the static color palette. Image: Two rows of solid-colored button-like labels grouped by text contrast: a top section 'Use with white text' showing red, brown, olive, green, teal, blue, indigo, purple, magenta, pink, dark gray, and gray backgrounds with white 'Label' text, and a bottom section 'Use with black text' showing orange, yellow, green, and lime backgrounds with black 'Label' text. (source: https://preview.spectrum.adobe.com/foundations/color/media_130355598009d093c7bd1e12e42df413fee995fbe.png?width=750&format=png&optimize=medium)Do not use these colors without a text label representation of the color’s meaning in your application (e.g., “drafts,” “reviewed,” “new”). When using multiple colors and text labels cannot readily clarify color meaning — which is a common case in data visualization — use the categorical color palette."
     },
     {
       "type": "guideline",
-      "content": "Two-tone color pairing.\n\nTo create two-tone color pairs, use the 100 index of your color for the background (e.g., magenta-100). The icon or illustration should use the 900 index in light theme (e.g., magenta-900). In dark themes, the 700-1200 indices can be chosen based on the desired lightness or saturation levels of the color. For example, yellow is better represented with yellow-1200, and red is better represented with red-700. Do not use these colors without a text label representation of the color’s significance in your application. These colors are not color vision deficiency safe, and could be confusing to some users."
+      "content": "Two-tone color pairing.\n\nTo create two-tone color pairs, use the 100 index of your color for the background (e.g., magenta-100). The icon or illustration should use the 900 index in light theme (e.g., magenta-900). In dark themes, the 700-1200 indices can be chosen based on the desired lightness or saturation levels of the color. For example, yellow is better represented with yellow-1200, and red is better represented with red-700. Do not use these colors without a text label representation of the color’s significance in your application. These colors are not color vision deficiency safe, and could be confusing to some users. Image: Three pairs of icon swatches (a crop/sparkle tool, a PDF document stack, and a camera) shown first on light tinted backgrounds in purple, red, and green, then on matching dark backgrounds grouped within a black container. (source: https://preview.spectrum.adobe.com/foundations/color/media_1000f1eb95187ddf34fbfdb0dd0a7b6c6d840aa28.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don’t create your own colors.\n\nEvery part of the interface should use a color defined by Spectrum to ensure consistency across products. Spectrum’s colors are carefully chosen and tested to ensure they meet accessibility standards."
+      "content": "Don’t create your own colors.\n\nEvery part of the interface should use a color defined by Spectrum to ensure consistency across products. Spectrum’s colors are carefully chosen and tested to ensure they meet accessibility standards. Image: Example of a correct usage. A purple pill-shaped 'Label' button next to a checklist labeled 'Interests' with a checked orange 'Travel' checkbox and unchecked 'Music' and 'Shopping' options, plus a helper text reading 'Select at least one interest.' (source: https://preview.spectrum.adobe.com/foundations/color/media_13c6937cd9b5481376c50a5b6f4b418421f5e9253.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Communicating with color.\n\nIn order to be accessible for as many users as possible, do not use color alone as a method of communication. For every usage of color as a feedback method, there should be an accompanying label and/or icon to communicate meaning."
+      "content": "Communicating with color.\n\nIn order to be accessible for as many users as possible, do not use color alone as a method of communication. For every usage of color as a feedback method, there should be an accompanying label and/or icon to communicate meaning. Image: Example of a correct usage. A text field with a red border and warning triangle icon, showing an error message 'Enter a valid email address.' (source: https://preview.spectrum.adobe.com/foundations/color/media_130cdd17e3ef910ccab2221c2169bfd2b24189153.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. The same text field with only a red border and no icon or error message, showing color alone without an accompanying explanation. (source: https://preview.spectrum.adobe.com/foundations/color/media_1c9cefe91435c778a9966713132ffeb845940fbf7.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Create hierarchy with background layer colors.\n\nUse background layers for creating application hierarchy. This will ensure that dimensionality and visual/structural hierarchy is appropriately translated between light and dark themes."
+      "content": "Create hierarchy with background layer colors.\n\nUse background layers for creating application hierarchy. This will ensure that dimensionality and visual/structural hierarchy is appropriately translated between light and dark themes. Image: Example of a correct usage. Two stacked panels, one light and one dark, each showing three layers labeled gray-200, gray-100, and gray-75 with minimal visual distinction between them. (source: https://preview.spectrum.adobe.com/foundations/color/media_178653b2587e927b8a6e5c0b44d137af96530e4da.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. Two stacked panels, one light and one dark, each showing three layers labeled Base, Layer 1, and Layer 2 with clear visual separation indicating hierarchy. (source: https://preview.spectrum.adobe.com/foundations/color/media_1f9b9739c5896b12daf20a89b108ee81f1f3f8d9b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Provide sufficient contrast.\n\nUse the appropriate gray tokens and color tokens for text, icons, and illustrations. These tokens are guaranteed to meet or exceed WCAG contrast minimums when placed on background layer colors for each supported color theme. Choosing lower indexed color tokens, or using other colors for backgrounds, could result in insufficient contrast. When in doubt, check the contrast for text, icons, and UI components for all color themes supported by your product."
+      "content": "Provide sufficient contrast.\n\nUse the appropriate gray tokens and color tokens for text, icons, and illustrations. These tokens are guaranteed to meet or exceed WCAG contrast minimums when placed on background layer colors for each supported color theme. Choosing lower indexed color tokens, or using other colors for backgrounds, could result in insufficient contrast. When in doubt, check the contrast for text, icons, and UI components for all color themes supported by your product. Image: Example of a correct usage. Two cards, one light gray-200 and one black, each showing four lines of colored text (gray-600/700, red-800/900, blue-800/900, green-800/900) marked with a red 'Fail' warning icon, indicating insufficient contrast. (source: https://preview.spectrum.adobe.com/foundations/color/media_15110077c3e594f9d8c9e58063e962e5108d0d62e.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. Two cards, one white and one black, each labeled 'Layer 1' and showing four lines of colored text (gray-700, red-900, blue-900, green-900) marked with a green 'Pass' checkmark icon, indicating sufficient contrast. (source: https://preview.spectrum.adobe.com/foundations/color/media_1cf6f2433a57f6e0819eab3ddaf38308bf05dab80.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Hue and Saturation contrast.\n\nAvoid placing colors directly on top of or adjacent to other colors that have a high degree of hue contrast with near-equal saturation or lightness. These scenarios create a visual illusion of depth or vibration (chromostereopsis) which can result in a poor user experience. If colors have near equal lightness, they will also cause lightness contrast issues since the colors may be indistinguishable to some users. Use static white or static black components instead of colored components on top of color or image backgrounds."
+      "content": "Hue and Saturation contrast.\n\nAvoid placing colors directly on top of or adjacent to other colors that have a high degree of hue contrast with near-equal saturation or lightness. These scenarios create a visual illusion of depth or vibration (chromostereopsis) which can result in a poor user experience. If colors have near equal lightness, they will also cause lightness contrast issues since the colors may be indistinguishable to some users. Use static white or static black components instead of colored components on top of color or image backgrounds. Image: Example of a correct usage. Two colored squares, one red and one light gray, each containing a pill-shaped 'Label' button in a matching or complementary hue with adequate contrast. (source: https://preview.spectrum.adobe.com/foundations/color/media_15ca4c13d88e11dd08b4786512aa49253f1159101.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. A red rectangle containing a blue pill-shaped 'Label' button, showing a jarring hue and saturation clash between the background and button. (source: https://preview.spectrum.adobe.com/foundations/color/media_1e8d1753ca0cb27e0406771145711cc317fd99e3a.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Programmatic color changes.\n\nDo not use color functions to modify Spectrum colors. The specific tints and shades of Spectrum’s themes were designed to be perceptually uniform. Modifying colors in the product or framework could result in undesirable colors."
+      "content": "Programmatic color changes.\n\nDo not use color functions to modify Spectrum colors. The specific tints and shades of Spectrum’s themes were designed to be perceptually uniform. Modifying colors in the product or framework could result in undesirable colors. Image: Example of a correct usage. A code snippet reading 'color: $blue-300;' showing direct use of a color token variable. (source: https://preview.spectrum.adobe.com/foundations/color/media_19ba20ccdb3e3fc3e9c9a566869ab3fff8945b562.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. A code snippet reading 'color: lighten($blue-300, 15%);' showing a color token being programmatically modified rather than used as-is. (source: https://preview.spectrum.adobe.com/foundations/color/media_1175eb8974edd034d8ed87844041434397f19af31.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/colors",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/color/colors",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/component-spacing.json

@@ -8,20 +8,32 @@
     { "type": "purpose", "content": "Component spacing" },
     {
       "type": "guideline",
-      "content": "Internal component spacing governs the space within components. It follows its own geometric scales, each designed to reconcile the type scale and component sizes as needed. This is why some values are less round than you might expect. They are calculated to produce balanced proportional relationships for their specific context at every size."
+      "content": "Internal component spacing governs the space within components. It follows its own geometric scales, each designed to reconcile the type scale and component sizes as needed. This is why some values are less round than you might expect. They are calculated to produce balanced proportional relationships for their specific context at every size. Image: Diagram showing how \"Base gap medium\" spacing between a layer thumbnail and its label combines with an \"Action group\" of eye and lock icons to form a \"List item\" component, which uses \"List gap medium\" spacing between its elements. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1093862bea5fe456337910a0401c4d9f316872067.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
       "content": "Structural templates.\n\nSpectrum's spacing values are accessed through semantic tokens, which encode the purpose and context of each spacing decision directly into the system. Repeated patterns for how to use these tokens are implemented through structural templates. These are blueprints or recipes for how to design or build a component in a modular, flexible, and scalable way. Working with tokens makes this seamless. A hardcoded 8px is just a number. The token base-gap-large gives you both a number and its context, relationships, size variants, and future system updates. Designers who skip tokens get the spacing that exists today, but they lose future enhancements to the system."
     },
+    {
+      "type": "guideline",
+      "content": "Image: Diagram showing three UI structure types stacked vertically: a \"Base\" element with an icon, radio circle, label, and description text; an empty \"Container\" box; and a \"List item\" row combining a folder icon, label, and two radio circles. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_14597f05908fb1ba90ed338d764edb72e40c79d04.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Collections.\n\nFor most collections, density affects only the gap between items. An action group, for example, adjusts the gap between its buttons; a list adjusts the gap between its items."
     },
+    {
+      "type": "guideline",
+      "content": "Image: Two labeled radio button groupings compared side by side: \"Compact\" and \"Regular,\" each showing a vertical pair and a horizontal pair of radio labels with a thin pink divider indicating the different spacing between them. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1aa4656d804e67121b98c5b95cc78fdadf5367904.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Containers.\n\nDensity affects all padding, both vertical and horizontal. Containers such as cards may appear in full grids or unidirectional lists, so both axes need to respond to density changes."
     },
+    {
+      "type": "guideline",
+      "content": "Image: Three versions of the same gradient card component (purple-to-red-to-pink with \"Card title\" and \"Card description\") labeled \"Compact,\" \"Regular,\" and \"Spacious,\" showing progressively larger card sizes and spacing. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1932de08aa0bbe4a7e377ac9ff72e954dc9bd9f08.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Spectrum's internal component spacing is defined by a comprehensive set of semantic tokens. Each of these tokens corresponds to a specific structural context. These tokens are built into every Spectrum component, and available to designers in the S2 / Variables Figma library. A full token reference will be available on this site in the future. If you do need to inspect or access them, please reach out to the Spectrum team."
@@ -31,7 +43,7 @@
       "content": "Spectrum's internal component spacing is defined by a comprehensive set of semantic tokens. Each of these tokens corresponds to a specific structural context. These tokens are built into every Spectrum component, and available to designers in the S2 / Variables Figma library. A full token reference will be available on this site in the future."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/spacing/component-spacing",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/component-spacing",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/contact-us.json

@@ -51,7 +51,7 @@
       "content": "For questions about Spectrum's Figma libraries and resources, post in #spectrum-design. If you’re part of Adobe Design and have general Figma administrative or access questions, post in #ad-tooling-support. For those in other orgs, reach out to your manager for approval and follow Adobe’s process to request standard software."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/contact-us",
+  "sourceUrl": "https://preview.spectrum.adobe.com/support/contact-us",
   "lastUpdated": "2026-09-08",
   "status": "published",
   "tags": [

package/guidelines/containers.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/containers.json",
+  "name": "containers",
+  "title": "Containers",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Examples of containers: two cards with different sizes and layout options, and a select box.\"\n\nAll containers share a set of defined styles.\n\nInternal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns.\n\nThis medium card uses spacing-300 for internal padding.\n\nNote that specific components might have different options and states.\n\nExample of an app frame with a side navigation."
+    },
+    {
+      "type": "guideline",
+      "content": "Containers separate concepts with distinct purposes."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific contexts. Containers are used across Spectrum 2 interfaces in multiple ways, but the commonality they share is that they group related concepts together into distinct areas. Some usages of containers have more detailed guidelines."
+    },
+    {
+      "type": "guideline",
+      "content": "For example, a card uses a container and inherits its properties, but it can only represent a distinct object (such as an individual asset or product). A block of marketing material containing multiple concepts (like subscription information plus actions to take) is grouped together in a container, but is not considered a card. Whether broad or specific, a user should be able to readily tell the purpose of a container."
+    },
+    {
+      "type": "guideline",
+      "content": "Examples of containers: two cards with different sizes and layout options, and a select box."
+    },
+    {
+      "type": "guideline",
+      "content": "All containers share a set of defined styles."
+    },
+    {
+      "type": "guideline",
+      "content": "Internal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns."
+    },
+    {
+      "type": "guideline",
+      "content": "This medium card uses spacing-300 for internal padding."
+    },
+    {
+      "type": "guideline",
+      "content": "In this group of containers — each representing a product — different container styles can be used to draw attention to a specific item. In this case, the emphasized container is paired with a badge, and contrasts against the more subdued containers with filled (gray) backgrounds."
+    },
+    {
+      "type": "guideline",
+      "content": "Note that specific components might have different options and states."
+    },
+    {
+      "type": "guideline",
+      "content": "A consistent app frame helps create a sense of brand unity and helps users feel comfortable and familiar with our products. Predictable navigation is also especially helpful for users who work across multiple applications, and it makes it easier to learn how to use new products."
+    },
+    {
+      "type": "guideline",
+      "content": "Example of an app frame with a side navigation."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/containers/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [{ "ref": "states" }, { "ref": "s2-app-frame" }]
+}

package/guidelines/content-area-browsing-context.json

@@ -8,35 +8,35 @@
     { "type": "purpose", "content": "Browsing context: Content area" },
     {
       "type": "guideline",
-      "content": "Use dividers to separate related content.\n\nDividers are useful to separate content when using spacing alone wouldn’t be clear enough to mark the boundaries of distinct areas. Generally, more complex content with a varying alignment of objects will benefit the most from using a divider. For example, showing the contents from a selected folder, or a commenting panel of a selected file, would benefit from a divider. If showing content that’s unrelated, like an AI assistant that’s available across multiple pages, use the vertical layout. View more about border width in Spectrum 2."
+      "content": "Use dividers to separate related content.\n\nDividers are useful to separate content when using spacing alone wouldn’t be clear enough to mark the boundaries of distinct areas. Generally, more complex content with a varying alignment of objects will benefit the most from using a divider. For example, showing the contents from a selected folder, or a commenting panel of a selected file, would benefit from a divider. If showing content that’s unrelated, like an AI assistant that’s available across multiple pages, use the vertical layout. View more about border width in Spectrum 2. Image: Example of correct usage of including dividers to separate related content. Two sections, the first labeled Folders and the second labeled Filters, are separated by a divider. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_13a4d342533bda0badc4f9a0bf0e9a9b645daa6b3.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don't enable scrolling on multiple areas.\n\nWhen using horizontal sections, the page should scroll as a single unit. Consider other ways to minimize the top section if needed, such as through an additional control to show and hide content."
+      "content": "Don't enable scrolling on multiple areas.\n\nWhen using horizontal sections, the page should scroll as a single unit. Consider other ways to minimize the top section if needed, such as through an additional control to show and hide content. Image: Example of correct usage of scrolling, where the page scrolls as a single unit. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_13e801bea2744743556446c567b59c4132ebdc6b6.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage of scrolling in multiple areas, where the page does not scroll as a single unit. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_11957be8791ecefb17c39550d0b4c5d3df575d008.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Put scrollable content in the bottom section of a horizontal layout.\n\nThe top section of a horizontal layout should be reserved for high-attention marketing messages or quick actions, and it should not be scrollable. Put infinite scrolling and longer content in the bottom section."
+      "content": "Put scrollable content in the bottom section of a horizontal layout.\n\nThe top section of a horizontal layout should be reserved for high-attention marketing messages or quick actions, and it should not be scrollable. Put infinite scrolling and longer content in the bottom section. Image: Example of correct usage of including scrollable content in the bottom section of a horizontal layout. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1f53df0119f8b3554e0d92c237c081855521a5224.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "This layout is suitable to separate content that’s not semantically related, and if one of the content areas can be minimized. For example, this might apply for onboarding tutorials, or to include an AI assistant."
+      "content": "This layout is suitable to separate content that’s not semantically related, and if one of the content areas can be minimized. For example, this might apply for onboarding tutorials, or to include an AI assistant. Image: Example of an app frame layout that uses vertical sections. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1fb36b6057fa86021dea6212212cf5af06755c5e1.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "This layout is suitable to separate multiple groups of content that aren’t semantically related. For example, this could show several widgets and distinct marketing messages. This layout can also be useful if a user is able to customize the page. Make sure to consider smaller breakpoints and decide how content areas should reflow, hide, or combine. In general, show the most important information at the top, and if possible, then progressively disclose the not-as-important information."
+      "content": "This layout is suitable to separate multiple groups of content that aren’t semantically related. For example, this could show several widgets and distinct marketing messages. This layout can also be useful if a user is able to customize the page. Make sure to consider smaller breakpoints and decide how content areas should reflow, hide, or combine. In general, show the most important information at the top, and if possible, then progressively disclose the not-as-important information. Image: Example of an app frame layout that uses multiple sections in a grid. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_17f472a9fb791f6f6b4bf32f6e85b75acff1e92ab.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Creating attention hierarchy with gradients in the app frame.\n\nContainers in Spectrum share styles that draw different levels of attention, and the kind of container should be chosen based on the content within. Gradient backgrounds draw the most attention on a page; when used correctly, they help users better navigate the interface by drawing their attention to the most relevant, high-signal, and meaningful items at the given point in their workflow. For example, on a Home screen, gradient backgrounds might call attention to new AI features in the product. On a Learn screen, gradient backgrounds might call attention to tutorials from new creators. On a Files screen, gradient backgrounds might not be used at all in order to focus attention on asset previews. In any context, consider where you want to draw attention and what you want to highlight for the user, what the user’s intentions might be, and how gradient backgrounds may add or detract from the goals of the page. In general, less is more. The more gradients on a page, the more attention is diluted and no longer effective at communicating hierarchy of information. View more about attention hierarchy in Spectrum. While there isn’t an objective scale for each style, it can be helpful to think about backgrounds in terms of how much attention they draw, on a scale of low-to-high."
+      "content": "Creating attention hierarchy with gradients in the app frame.\n\nContainers in Spectrum share styles that draw different levels of attention, and the kind of container should be chosen based on the content within. Gradient backgrounds draw the most attention on a page; when used correctly, they help users better navigate the interface by drawing their attention to the most relevant, high-signal, and meaningful items at the given point in their workflow. For example, on a Home screen, gradient backgrounds might call attention to new AI features in the product. On a Learn screen, gradient backgrounds might call attention to tutorials from new creators. On a Files screen, gradient backgrounds might not be used at all in order to focus attention on asset previews. In any context, consider where you want to draw attention and what you want to highlight for the user, what the user’s intentions might be, and how gradient backgrounds may add or detract from the goals of the page. In general, less is more. The more gradients on a page, the more attention is diluted and no longer effective at communicating hierarchy of information. View more about attention hierarchy in Spectrum. While there isn’t an objective scale for each style, it can be helpful to think about backgrounds in terms of how much attention they draw, on a scale of low-to-high. Image: Diagram showing a scale of high attention to low attention elements in Spectrum 2. From low attention to high attention: spacing, lowest. Background. Emphasized background. Gradient background, highest. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1c946f08e2a2aa802108e7a62f87e16cd71066f0b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don’t use gradients as the background in navigational areas.\n\nWhile you may have seen past Spectrum 2 explorations showing gradients as the background in header and navigational areas, they should not be used in that context. This is because gradients that appear in the navigation of every page distract from more important information on the page, clash with other imagery, and might not work for some product segments. By using gradients in the content areas as backgrounds instead, there’s more flexibility to direct attention to different content and messages, depending on what’s important in the context of that page or workflow."
+      "content": "Don’t use gradients as the background in navigational areas.\n\nWhile you may have seen past Spectrum 2 explorations showing gradients as the background in header and navigational areas, they should not be used in that context. This is because gradients that appear in the navigation of every page distract from more important information on the page, clash with other imagery, and might not work for some product segments. By using gradients in the content areas as backgrounds instead, there’s more flexibility to direct attention to different content and messages, depending on what’s important in the context of that page or workflow. Image: Example of correct usage of a gradient as a background within a content area. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1a39c1a5c36012f84ae0cce926569e9706f8e31a6.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage of a gradient as a background in the header and side navigation. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_10fe927048d7a8f4137f7acdc9c866a55ed5b58b0.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Use gradient backgrounds to draw attention to one area.\n\nGradients are used to draw attention to important content and features. They can be used in the background of content areas. Using gradients in more than one content area results in multiple areas competing for attention. This is distracting from the task-at-hand workflows on the page."
+      "content": "Use gradient backgrounds to draw attention to one area.\n\nGradients are used to draw attention to important content and features. They can be used in the background of content areas. Using gradients in more than one content area results in multiple areas competing for attention. This is distracting from the task-at-hand workflows on the page. Image: Example of correct usage of using a gradient background in a single content area, with no other gradients included on the page. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1f583c9fa811c6e7a6ed8249469807b605e7238fa.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage of multiple gradient backgrounds in multiple content areas, in a single page. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1b5652087df9967978ce99a53e23c600ec454f706.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -44,14 +44,14 @@
     },
     {
       "type": "guideline",
-      "content": "Use gradient backgrounds that reflect the colors of the product brand or feature.\n\nGradient colors are directly tied to product brand color palettes."
+      "content": "Use gradient backgrounds that reflect the colors of the product brand or feature.\n\nGradient colors are directly tied to product brand color palettes. Image: Example of correct usage of gradient backgrounds that reflect the colors of their associated product. First example, Illustrator uses the brand color palette, mainly orange, in its gradient. Second example, Premiere Pro uses the brand color palette, mainly purple, in its gradient. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_10930db5f8be0a15da9ae43aae5937eb33b494687.png?width=750&format=png&optimize=medium)Image: Example of correct usage of gradient backgrounds that reflect the colors of their associated product. First example, Photoshop uses the brand color palette, mainly blue, in its gradient. Second example, Illustrator uses the brand color palette, mainly orange, in its gradient. Third example, Aero uses the brand color palette, mainly green, in its gradient. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_10fda315a0553ad584dbf6968c1b9e3d6ddf53913.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don't create your own gradients or customize them.\n\nGradients should always be delivered directly from the Spectrum Brand team and used as-is. Do not modify them."
+      "content": "Don't create your own gradients or customize them.\n\nGradients should always be delivered directly from the Spectrum Brand team and used as-is. Do not modify them. Image: Example of incorrect application of a gradient as a background in a content area. A modified gradient blending orange and green, that does not follow the Brand gradient system and standards. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_10a7448b827211c8ece643e26ebbd16ded2359004.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/content-area-browsing-context",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/content-area-browsing-context",
   "lastUpdated": "2026-09-04",
   "status": "published",
   "tags": [