@adobe/spectrum-design-data 3.3.0 → 3.5.0

package/guidelines/colors.json

@@ -5,58 +5,96 @@
   "title": "Colors",
   "category": "designing",
   "documentBlocks": [
+    { "type": "purpose", "content": "Colors" },
     {
-      "type": "purpose",
-      "content": "Once the color scale is determined, lightness stops are input for each color in order to get aliased colors.\n\nWe also needed a couple of darker shades to work for our data visualization palettes (available soon)."
+      "type": "guideline",
+      "content": "Image: A green gradient circle icon, half outlined and half filled, representing accessibility. (source: https://spectrum.adobe.com/foundations/color/media_1c94508d2c8164b33419f7de3b02ce8d1743a2884.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://spectrum.adobe.com/foundations/color/media_10985f419157e45e54cd587380a88c865e3ddca53.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://spectrum.adobe.com/foundations/color/media_1bd273c6063e5b01f5c689a82cead8f8265f0714b.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."
+    },
+    {
+      "type": "guideline",
+      "content": "Scalable.\n\nSpectrum uses structured relationships between colors, grays, themes, and contrast ratios so it can work consistently across Adobe’s many apps, surfaces, and modes."
+    },
+    {
+      "type": "guideline",
+      "content": "Purposeful.\n\nColor is used to create hierarchy, signal meaning, and guide attention. Spectrum avoids unnecessary color so important actions, states, and messages stand out."
+    },
+    {
+      "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. 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://spectrum.adobe.com/foundations/color/media_1b61b63c16d0c1bd67be971ead2447f6a4fb87a03.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "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."
     },
     {
       "type": "guideline",
-      "content": "This update to the color palette improves how colors appear on the solid white primary background, includes brand colors in the palette, and makes our data visualization colors more color vision deficiency-safe."
+      "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://spectrum.adobe.com/foundations/color/media_11dbaa344681e410a0abb24a800f8f99770341781.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "The 6.0.0 color system didn’t account for any Adobe product brand colors, despite the colors being so close in hue and saturation. With the Spectrum 2 color update, we’ve shifted some previous colors to be able to include brand colors in the new palette."
+      "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://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://spectrum.adobe.com/foundations/color/media_1b3856ffb32cd28a1427b18829e04a3ea760d4f74.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "The Leonardo tool generated 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."
+      "content": "Sometimes it’s necessary to use color for the background or fill of an object in an interface. Use color backgrounds sparingly, except for the following cases."
     },
     {
       "type": "guideline",
-      "content": "Once the color scale is determined, lightness stops are input for each color in order to get aliased colors."
+      "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://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": "Brand colors are used to generate the Spectrum colors, but brand colors aren’t used one-to-one in the Spectrum palette. Branding is not strictly tied to using Spectrum colors, despite this alignment for Spectrum 2."
+      "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://spectrum.adobe.com/foundations/color/media_1000f1eb95187ddf34fbfdb0dd0a7b6c6d840aa28.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "In Spectrum 2, colors have shifted blue to be more indigo. This is so we can continue using “blue” aliases but can have an updated, more approachable blue hue that leans more indigo. Moving forward, all products will use blue for the informative and accent semantics. This will help better unify all of Adobe’s products, including Adobe Express."
+      "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://spectrum.adobe.com/foundations/color/media_13c6937cd9b5481376c50a5b6f4b418421f5e9253.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "This change works nicely with the new integration with brand colors. For example, Photoshop’s blue is somewhere in between the current Spectrum blue and cyan. Pushing blue to be more indigo creates space for cyan to lean more blue and accommodate Photoshop’s blue. Similarly, pushing blue more indigo also means pushing indigo to be more purple, which allows for After Effect’s purple to fit nicely in the new indigo range."
+      "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://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://spectrum.adobe.com/foundations/color/media_1c9cefe91435c778a9966713132ffeb845940fbf7.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "The lightest shades of yellow and chartreuse were extra-saturated in Spectrum 6.0.0 colors, despite being the same 1.08:1 contrast with all the other colors. The Spectrum 2 update for colors desaturates these shades to keep them more uniform in style."
+      "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://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://spectrum.adobe.com/foundations/color/media_1f9b9739c5896b12daf20a89b108ee81f1f3f8d9b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Spectrum 2 now uses solid white as the primary background for light UI. There’s also new variants of components, like the in-line alert, that use color-100 as the background. Having this lighter background introduced the need for a lighter shade for components, so the contrast of the lightest value (color-100) was lowered from 1.08:1 to 1.06:1."
+      "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://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://spectrum.adobe.com/foundations/color/media_1cf6f2433a57f6e0819eab3ddaf38308bf05dab80.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "We also needed a couple of darker shades to work for our data visualization palettes (available soon)."
+      "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://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://spectrum.adobe.com/foundations/color/media_1e8d1753ca0cb27e0406771145711cc317fd99e3a.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "The color update for Spectrum 2 also aimed to fix some general issues with the previous color palette. Colors have become brighter and more saturated, contrast has been lightened where possible, and some shades like orange, yellow, and chartreuse have been fixed to appear less muddy."
+      "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://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://spectrum.adobe.com/foundations/color/media_1175eb8974edd034d8ed87844041434397f19af31.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/colors/",
-  "lastUpdated": "2026-02-02",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/color/colors",
+  "lastUpdated": "2026-08-13",
   "status": "published",
-  "tags": ["designing", "design-tokens", "color"],
-  "related": [{ "ref": "grays" }, { "ref": "background-layers" }]
+  "tags": [
+    "color system",
+    "accessibility",
+    "WCAG contrast",
+    "Leonardo color tool",
+    "brand colors",
+    "key colors",
+    "hue ranges",
+    "contrast ratios",
+    "two-tone color pairing"
+  ]
 }

package/guidelines/component-spacing.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/component-spacing.json",
+  "name": "component-spacing",
+  "title": "Component spacing",
+  "category": "designing",
+  "documentBlocks": [
+    { "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. 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://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1093862bea5fe456337910a0401c4d9f316872067.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum organizes components into common structural types called structural templates. Each template type has a corresponding set of semantic tokens that handle its internal spacing relationships. When designing a component, start by identifying which structural type it most closely matches. That identification points you to the right token category. A component that behaves like a list uses list-level tokens. One that behaves like a container uses container-level tokens. One built around a single interactive element uses base-level tokens. Components can also combine multiple structures. A list item, for example, is made up of base and group elements. Each structural type within the composition uses its own tokens. Image: Diagram showing component spacing application with base components on the left (Layer 1 with thumbnail and action icons) and how they're spaced in a list item on the right, with \"Base gap medium\" and \"List gap medium\" labels indicating spacing between elements. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1c38a7177a98b59473f8f820d236ea4a411cb0905.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://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_14597f05908fb1ba90ed338d764edb72e40c79d04.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Component density controls the internal spacing of a component, independent of its size tier. To make a component more compact, decrease each spacing token by one step. To make it more spacious, increase by one step. For example, if the regular variant uses spacing-200, compact uses spacing-100 and spacious uses spacing-300. Image: Three versions of a labeled radio button component, each annotated with three spacing measurements—gaps (1, pink), vertical paddings (2, green), and horizontal paddings (3, blue)—shown increasing in size from left to right, with corresponding scaling squares below each category. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1584dbdc041e6ba6e4cf11b739494f7b1064b2b40.png?width=750&format=png&optimize=medium) Some tokens are labeled compact, regular, or spacious. These labels can serve two purposes. In some cases, they correspond directly to a component's density setting, such as a compact button group. In others, they represent a range of options within a specific spacing context, giving you the flexibility to choose what fits the composition and the visual characteristics of the elements involved. Image: Three \"Table cell\" examples labeled \"Table item padding compact,\" \"regular,\" and \"spacious,\" each showing increasing vertical spacing around the cell text. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1a4757920ba552b38711823f4f6394b669ca3de0f.png?width=750&format=png&optimize=medium) Density named tokens corresponding to density options of a table component. Image: Diagram showing a dark toast notification reading \"Toast message describing what happened.\" with a \"Label\" button and close icon, with its left and right edge padding labeled \"Banner padding horizontal\" and \"Banner padding horizontal compact.\" (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_18e87a92eedea2792741e3b4d764a160b02c2954d.png?width=750&format=png&optimize=medium) Density named token options used to construct a toast component. Not all components support density as a configurable option. Only collections and containers do. Collections are components made of repeated child elements, such as lists, groups, and tables. Containers hold compositions of other components, such as cards and toolbars. Basic components such as buttons and text fields don't support density variants"
+    },
+    {
+      "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://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://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."
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/component-spacing",
+  "lastUpdated": "2026-08-13",
+  "status": "published",
+  "tags": [
+    "component spacing",
+    "semantic tokens",
+    "structural templates",
+    "density",
+    "spacing tokens",
+    "collections",
+    "containers",
+    "base-level tokens",
+    "list-level tokens",
+    "container-level tokens"
+  ]
+}

package/guidelines/contact-us.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/contact-us.json",
+  "name": "contact-us",
+  "title": "Contact us",
+  "category": "support",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Contact us" },
+    {
+      "type": "guideline",
+      "content": "For general inquiries, feedback, bug reports, and other communication about Spectrum, please email us."
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/support/contact-us",
+  "lastUpdated": "2026-09-08",
+  "status": "published",
+  "tags": [
+    "Contact",
+    "Slack",
+    "Jira",
+    "Figma",
+    "CCUE",
+    "DXUE",
+    "Brand",
+    "Icons"
+  ]
+}

package/guidelines/containers.json

@@ -7,56 +7,49 @@
   "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."
+      "content": "In Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific contexts. Containers are used across Spectrum 2 interfaces in multiple ways, but the commonality they share is that they group related concepts together into distinct areas. Some usages of containers have more detailed guidelines. For example, a card uses a container and inherits its properties, but it can only represent a distinct object (such as an individual asset or product). A block of marketing material containing multiple concepts (like subscription information plus actions to take) is grouped together in a container, but is not considered a card. Whether broad or specific, a user should be able to readily tell the purpose of a container. Separation of containers is marked through a clear visual change, such as contrast in a background color or through spacing. All containers share a common set of rules for styles, padding, and emphasis.\n\n### Example\n\nCards and select boxes share container styles. In this example, both use the emphasized style. Cards also have additional options that select boxes do not, like t-shirt size and layout. Image: UI components showing examples of card layouts for a Photoshop photo editing course on the left with multiple card variations, and a select box component example on the right featuring a checkbox and favorites heart icon. (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_1daffa98ca15b1299210db1dd829d7377de85e65a.png?width=750&format=png&optimize=medium) Examples of containers: two cards with different sizes and layout options, and a select box."
     },
     {
       "type": "guideline",
-      "content": "Containers separate concepts with distinct purposes."
+      "content": "All containers share a set of defined styles. Image: Unlabeled image (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_130061659941d2e3f73cf5a50fb9df8aeb95ca596.png?width=750&format=png&optimize=medium) Background color By default, containers are visually distinguished through a change in background color. Learn more about this in background layers. Emphasized In some situations, drop shadows are used to provide emphasis to a container or group of containers, like in a set of related cards. Emphasized containers should be used sparingly. View more about container emphasis. Border Borders can also be used around objects as an alternate style to a background color, and should be used without a fill. Vertical, full-width dividers can also be used to create separation for larger sections of content, like in a panel. View more about border width. Spacing This is the container style with the least emphasis. Instead of using a visible border, spacing is used to create separation between concepts. View more about spacing."
     },
     {
       "type": "guideline",
-      "content": "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."
+      "content": "Internal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns. The following chart is a point of reference for how padding values are used in Spectrum 2 containers. The spacing values themselves remain unchanged from Spectrum 1. View more about spacing. Image: Container spacing examples, each shown in a square from smallest to largest, with labels spacing-100, spacing-200, spacing-300, spacing-400, spacing-500, spacing-600. (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_1bac253ef640094fbbe2ea80a63cc3875690b424b.png?width=750&format=png&optimize=medium) Spacing token Value Example usage in Spectrum spacing-100 8 px Extra-small cards spacing-200 12 px High density panels, small cards spacing-300 16 px Medium density panels, medium cards spacing-400 24 px Low density panels, large cards, mobile standard and alert dialogs spacing-500 32 px Desktop standard and alert dialogs spacing-600 40 px Takeover dialog"
     },
     {
       "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."
+      "content": "Example.\n\nThis medium card uses spacing-300 for internal padding. Image: Card component example with checkbox, abstract wavy image, title and description text, showing spacing-300 (16px) padding measurement indicated by dotted line on the left. (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_13224b595dae476332958fef768371a29adbc1572.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Examples of containers: two cards with different sizes and layout options, and a select box."
+      "content": "An emphasized container has a drop shadow to draw attention. When deciding whether a container should be emphasized, consider the rest of the page. Emphasized containers should be used to highlight the main content. Consider how different container styles can be used to draw attention to the most important content. As a general rule, a group of containers should all have the same intent. While there are exceptions, generally only one group at a time should be emphasized on a page. For example, a group of related cards can use a drop shadow, but not every element on a page should have a drop shadow."
     },
     {
       "type": "guideline",
-      "content": "All containers share a set of defined styles."
+      "content": "Example.\n\nIn this group of containers — each representing a product — different container styles can be used to draw attention to a specific item. In this case, the emphasized container is paired with a badge, and contrasts against the more subdued containers with filled (gray) backgrounds. Image: Three app product cards displaying Acrobat, Photography, and All apps with icons, pricing placeholders, and Buy now buttons, with the All apps card highlighted by a \"Best value\" badge. (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_18c340f95534d724d0566c68fa959d8cc3bf5668e.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Internal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns."
+      "content": "States of interactive, emphasized containers.\n\nIf the whole container is interactive, hover is shown through a slightly more prominent drop shadow. When dragged, a much more prominent shadow is shown in order to bring focus to the dragged item and show elevation above the rest of the UI. Note that specific components might have different options and states. Image: Unlabeled image (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_1d5c23228ef95a1f5def853200c19be7fd89b487e.png?width=750&format=png&optimize=medium) Emphasized, default Emphasized, hover Dragged"
     },
     {
       "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."
+      "content": "A consistent app frame helps create a sense of brand unity and helps users feel comfortable and familiar with our products. Predictable navigation is also especially helpful for users who work across multiple applications, and it makes it easier to learn how to use new products. The Spectrum 2 app frame framework provides a consistent visual style and navigation. It offers foundational structures and guidelines that product teams can adapt to their own contexts. View more details about the S2 app frame. The main content area is defined by a unique container style that's used only in the app frame. It has a subtle drop shadow to provide separation from the navigation. View more about using container styles to divide content within content areas. Image: Adobe Firefly app interface showing left sidebar with navigation menu items (Home, Files, Brands, Discover, Schedule, Learn, Plugins) and a Create button, plus top header with search bar and utility icons. (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_16b19bf7867ae4d830240dad00019054f87d38fb8.png?width=750&format=png&optimize=medium) Example of an app frame with a side navigation."
     }
   ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/containers/",
-  "lastUpdated": "2026-02-02",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/containers",
+  "lastUpdated": "2026-09-11",
   "status": "published",
-  "tags": ["designing"],
-  "related": [{ "ref": "states" }, { "ref": "s2-app-frame" }]
+  "tags": [
+    "containers",
+    "cards",
+    "select boxes",
+    "padding",
+    "spacing",
+    "background color",
+    "emphasis",
+    "border",
+    "dividers"
+  ]
 }

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

@@ -0,0 +1,73 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/content-area-browsing-context.json",
+  "name": "content-area-browsing-context",
+  "title": "Browsing context: Content area",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Browsing context: Content area" },
+    {
+      "type": "guideline",
+      "content": "This layout is suitable when all content is related and unified by the primary purpose of the page. This single section can be subdivided using full-width dividers, or by creating visual groupings of content using proximity and spacing. View more about spacing in Spectrum 2. Image: Example of a generic product, single section content area layout. (source: https://spectrum.adobe.com/foundations/app-frame/media_1bd6570c3132e00c1dc765b1c52515dff97b92e39.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "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. 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://spectrum.adobe.com/foundations/app-frame/media_13a4d342533bda0badc4f9a0bf0e9a9b645daa6b3.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "The top section can also be useful to visually indicate that the content is separate and has additional affordances, such as the ability to be minimized. For example, “welcome” type content might be shown in the top section, and recent files might be shown below. Image: Example of a generic product, using horizontal sections for the content area layout, with a top section and a bottom section. (source: https://spectrum.adobe.com/foundations/app-frame/media_15affee1906cbe98362d056855b92c441786caf97.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. Image: Example of correct usage of scrolling, where the page scrolls as a single unit. (source: https://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://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. Image: Example of correct usage of including scrollable content in the bottom section of a horizontal layout. (source: https://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. Image: Example of an app frame layout that uses vertical sections. (source: https://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. Image: Example of an app frame layout that uses multiple sections in a grid. (source: https://spectrum.adobe.com/foundations/app-frame/media_17f472a9fb791f6f6b4bf32f6e85b75acff1e92ab.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Backgrounds that use gradients are always placed within the app frame intentionally and with a strategic meaning. They should contribute to the visual hierarchy, not distract from it. And, their colors are directly tied to product brand color palettes. In the S2 app frame, gradients are only used as backgrounds in content areas — they are not used in the header and navigational areas. This allows for greater flexibility between pages where gradients may be calling attention to different kinds of content."
+    },
+    {
+      "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. 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://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. Image: Example of correct usage of a gradient as a background within a content area. (source: https://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://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. 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://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://spectrum.adobe.com/foundations/app-frame/media_1b5652087df9967978ce99a53e23c600ec454f706.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "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. 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://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://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. 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://spectrum.adobe.com/foundations/app-frame/media_10a7448b827211c8ece643e26ebbd16ded2359004.png?width=750&format=png&optimize=medium)"
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/content-area-browsing-context",
+  "lastUpdated": "2026-09-04",
+  "status": "published",
+  "tags": [
+    "app frame",
+    "content area",
+    "multi-layout sections",
+    "horizontal sections",
+    "vertical sections",
+    "grid layout"
+  ]
+}

package/guidelines/creating-bluelines-browsing-context.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/creating-bluelines-browsing-context.json",
+  "name": "creating-bluelines-browsing-context",
+  "title": "Creating bluelines",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Creating bluelines" },
+    {
+      "type": "guideline",
+      "content": "The accessible name is the text that software uses to identify a component, and communicates it to the user. Assistive technologies like screen readers and voice control require an accessible name to read aloud content to screen reader users, or to accept speech input from voice control users to interact with digital content. Accessible names vary depending on the content. Accessible names must be defined for controls that don’t have visible text labels. Image: Diagram showing the areas of the app frame to include accessible names. A, side navigation state control. B, product lock-up. C, Side navigation labels. D, Adobe-wide actions. (source: https://spectrum.adobe.com/foundations/app-frame/media_1e2f50d49e3390a5bd8d9651aa674dd0d2ac75a42.png?width=750&format=png&optimize=medium) Here are some guidelines to keep in mind as you define accessible names in the app frame:"
+    },
+    {
+      "type": "guideline",
+      "content": "A. Side navigation state control.\n\nThe default accessible name are Show menu labels and Hide menu labels. In general, the names should be as specific as possible and are up to individual product teams to define, based on the content inside. View more details about side navigation state control."
+    },
+    {
+      "type": "guideline",
+      "content": "B. Product lock-up.\n\nWhen an interactive control has a visible text label, there is no requirement to specify an accessible name. The visible text label will be accessible and the graphic will be ignored by a screen reader."
+    },
+    {
+      "type": "guideline",
+      "content": "C. Side navigation labels.\n\nWhen the side navigation is partially minimized (icon-only), the labels on the tooltips and when the side navigation is expanded should match the accessible names. Because a text label is available in both expanded and minimized states, app frame side navigation buttons do not require additional annotation."
+    },
+    {
+      "type": "guideline",
+      "content": "D. Adobe-wide actions.\n\nIf using the universal navigation pattern, follow guidance defined in the design and implementation for continuity across products."
+    },
+    {
+      "type": "guideline",
+      "content": "Landmark regions create a programmatic identification of the visual areas or sections of web applications, which represent the spatial layout of the user interface. The purpose of annotating landmark regions is to ensure developers code the page structure correctly, include the correct content in the defined grouping, and apply an accessible name to the landmark regions that require them. Any non-text element in a digital interface with a text label must have a text alternative. Here’s an example of how you might name landmark regions in an app frame: Image: Diagram showing landmark regions of the app frame, including Navigation (Global), Banner, Navigation (Side), and Region, in which the name is descriptive of the content. (source: https://spectrum.adobe.com/foundations/app-frame/media_1eef1503193f9c071e33d7e4dcc7364d3fc831e1a.png?width=750&format=png&optimize=medium) Note that you may also want to include additional landmark regions for content within each area. A. The navigation areas require accessible names, because there is more than one area on the page. Depending on your content, the accessible names might be different for your product. B. Regions always require accessible names, and should be named based on the content of the region. If using content areas split into additional areas, make sure to name those regions as well. Note: In some cases, landmarks might be better defined as a complementary landmark instead of a region landmark. For example, the AI assistant in Digital Experience products is separate from the main content (not contained within another landmark), but is still supportive of the main content. In that case, the AI assistant would be a complementary landmark instead of a region landmark."
+    },
+    {
+      "type": "guideline",
+      "content": "Heading annotations describe the heading structure of a digital interface and are helpful for all users. Screen reader users in particular rely on them to navigate an interface. They organize information, help create an information hierarchy, and build a mental map of the content available. There must be one <h1> heading, and any text that serves the purpose of a heading must be marked accordingly from <h1> to <h6>. Because headings rely greatly on structure and content, they will likely vary depending on the page. As a general rule, the <h1> should live in the main landmark region. Here’s an example of how you might structure heading annotations for this screen: Image: Example of heading annotations for Photoshop. H1, Welcome to Photoshop content area. H2, Start something new content area. H3, cards with marketing and user-customized content suggestions. H4, Favorites section in side navigation. (source: https://spectrum.adobe.com/foundations/app-frame/media_1f1c24c6a47078ee2e72f275cf116314df0e31178.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "The keyboard focus order describes how someone who uses a keyboard to operate the interface (instead of a pointing device like a mouse), would interact with an interface. Keyboard focus order will depend on what controls are available on the page. Here’s an example of how you might define the order in the app frame: Image: Example of a keyboard focus order for Photoshop, with an order from 1 as the side navigation show/hide affordance, and 22 as the filter for recent files. (source: https://spectrum.adobe.com/foundations/app-frame/media_16b5e54f6ed6dd1b100303107eaeddc8409567f03.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Support keyboard focus for resizing the side navigation.\n\nExample of correct usage, support for keyboard focus for size navigation. The side navigation width is focusable and resizable by using the left and right arrow keys. Image: Unlabeled image (source: https://spectrum.adobe.com/foundations/app-frame/media_15add197e527eb49a7a8f89286b990a582769f5f3.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Include a “Skip to main content” button.\n\nExample of correct usage, inclusion of a Skip to main content button within the app frame header. Image: Example of correct usage, inclusion of a Skip to main content button within the app frame header. (source: https://spectrum.adobe.com/foundations/app-frame/media_1727ff3b9a578166d4a5e3067f54d9ff2b404b80c.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Support F6 key navigation.\n\nWhen properly supported, the F6 key allows keyboard users to navigate through different regions of an application efficiently. Without this support, keyboard-only users have no means to jump to specific areas of the application, resulting in an excessive number of keystrokes to reach their desired goal. Here are some key quality factors to consider: A keyboard focus indicator should be present to show keyboard-only users their current location within the interface. Ideally, the focus of the F6 key should move in accordance with the landmark regions defined in the HTML of the application. Major sections of the app should be accessible through the F6 key, including main navigation, toolbars, contextual toolbars, and the canvas. Each of these regions must have an accessible name assigned to them, allowing screen reader users to understand which area of the user interface they are currently navigating. Image: Example of correct usage, support for F6 key navigation. This helps users traverse through different regions of an application efficiently. (source: https://spectrum.adobe.com/foundations/app-frame/media_1d708d40a17766cb37e6d7ff737079982577b079b.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Mobile overlay guidance: Keyboard focus.\n\nFor mobile breakpoints, a tray is used to open and close the app frame side navigation. In this example, the keyboard focus order starts at the “Create” button and ends at the close button. Clicking on esc should also close the tray. Image: Example of a keyboard focus order for the mobile overlay, with an order from 1 as the create button, 2 as the side navigation items, and 3 the close button. Note that the `esc` should also close the tray. (source: https://spectrum.adobe.com/foundations/app-frame/media_1c0739f2368c9914995fd166d727db38aa907b244.png?width=750&format=png&optimize=medium)"
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/creating-bluelines-browsing-context",
+  "lastUpdated": "2026-09-04",
+  "status": "published",
+  "tags": [
+    "app frame",
+    "bluelines",
+    "accessible names",
+    "landmark regions",
+    "heading annotations",
+    "side navigation",
+    "universal navigation",
+    "complementary landmark"
+  ]
+}