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

package/guidelines/applying-the-type-system.json

@@ -8,15 +8,19 @@
     { "type": "purpose", "content": "Applying the type system" },
     {
       "type": "guideline",
-      "content": "Image: Card example with numbered callouts: 1) \"Card title\" labeled as the Title style, and 2) \"Card description\" labeled as the Body style, over a colorful gradient image. (source: https://preview.spectrum.adobe.com/foundations/typography/media_18dd0601a7059dd3b917ba5cc09fa50cfc5e3786e.png?width=750&format=png&optimize=medium)"
+      "content": "The following are some general examples to show how the Spectrum 2 typography system all comes together, and how type styles can be used together to create visual hierarchy."
     },
     {
       "type": "guideline",
-      "content": "Card.\n\nIn this card example, Title and Body text styles are used together to establish a clear visual hierarchy, helping users quickly identify the primary content while keeping supporting information easy to scan. Title S The card title uses the Title style to establish the primary focus of the card. It provides strong visual emphasis, making it easy for users to quickly identify and scan content across multiple cards. Body XS The supporting description uses the Body style because it provides additional context without competing with the title. Its lighter weight and smaller size reinforce the content hierarchy while maintaining readability. The body text is presented in gray-700 to further distinguish it as secondary information and keep attention on the primary title. Image: Dark \"Featured project\" page section for \"Dreams from Oostende\" with numbered callouts labeling the eyebrow text, heading, body paragraph, byline, and button group. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1e2a2ea1530d45f5b5ab50e4406d52bfc78a2b4e6.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Card example with numbered callouts: 1) \"Card title\" labeled as the Title style, and 2) \"Card description\" labeled as the Body style, over a colorful gradient image. (source: https://spectrum.adobe.com/foundations/typography/media_18dd0601a7059dd3b917ba5cc09fa50cfc5e3786e.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Page section.\n\nSpectrum's type scale creates a clear visual hierarchy that naturally guides the eye through the page. By assigning each type style a distinct role, Spectrum organizes information into predictable patterns that make content easier to scan and understand. Title M Heading XXL Body M Body S Component M, used in a button group Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/typography/media_1cd4d7ef6ccfd52ab7af605bc861bcdd334201f0a.png?width=750&format=png&optimize=medium)"
+      "content": "Card.\n\nIn this card example, Title and Body text styles are used together to establish a clear visual hierarchy, helping users quickly identify the primary content while keeping supporting information easy to scan. Title S The card title uses the Title style to establish the primary focus of the card. It provides strong visual emphasis, making it easy for users to quickly identify and scan content across multiple cards. Body XS The supporting description uses the Body style because it provides additional context without competing with the title. Its lighter weight and smaller size reinforce the content hierarchy while maintaining readability. The body text is presented in gray-700 to further distinguish it as secondary information and keep attention on the primary title. Image: Dark \"Featured project\" page section for \"Dreams from Oostende\" with numbered callouts labeling the eyebrow text, heading, body paragraph, byline, and button group. (source: https://spectrum.adobe.com/foundations/typography/media_1e2a2ea1530d45f5b5ab50e4406d52bfc78a2b4e6.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Page section.\n\nSpectrum's type scale creates a clear visual hierarchy that naturally guides the eye through the page. By assigning each type style a distinct role, Spectrum organizes information into predictable patterns that make content easier to scan and understand. Title M Heading XXL Body M Body S Component M, used in a button group Image: Unlabeled image (source: https://spectrum.adobe.com/foundations/typography/media_1cd4d7ef6ccfd52ab7af605bc861bcdd334201f0a.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -24,36 +28,36 @@
     },
     {
       "type": "guideline",
-      "content": "All-caps.\n\nAll-caps styles are not recommended for usage within UI components because it does not support accessibility requirements An all-caps style can still be used sparingly and strategically in use cases where longform content is the primary experience (like a blog post or a marketing website). All-caps text brings a heavier, punctuated feel to letterforms and adds visual impact to single words or short, standalone phrases. Image: Button labeled \"EXPORT VIDEO\" in all-caps text, shown as a don't example. (source: https://preview.spectrum.adobe.com/foundations/typography/media_111cb65fe657204f59fbf7ba2758d84ed1330d7c2.png?width=750&format=png&optimize=medium)"
+      "content": "All-caps.\n\nAll-caps styles are not recommended for usage within UI components because it does not support accessibility requirements An all-caps style can still be used sparingly and strategically in use cases where longform content is the primary experience (like a blog post or a marketing website). All-caps text brings a heavier, punctuated feel to letterforms and adds visual impact to single words or short, standalone phrases. Image: Button labeled \"EXPORT VIDEO\" in all-caps text, shown as a don't example. (source: https://spectrum.adobe.com/foundations/typography/media_111cb65fe657204f59fbf7ba2758d84ed1330d7c2.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Use Spectrum font sizes.\n\nChoose from Spectrum's defined font sizes. By using unique font sizes, you risk upsetting the hierarchy and balance of typography in your product. Image: Text reading \"Spectrum delivers what's needed, when it's needed.\" labeled with a custom value of 17 px instead of a Spectrum font size token, shown as a don't example. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1280ff1daf36ac669b43bcc3e021b8a6774c4cbb6.png?width=750&format=png&optimize=medium)Image: Text reading \"Spectrum delivers what's needed, when it's needed.\" labeled with the token font-size-200, shown as a do example. (source: https://preview.spectrum.adobe.com/foundations/typography/media_17c4dbbf625e3b2e743e6a75e591d7f5991b5cfbc.png?width=750&format=png&optimize=medium)"
+      "content": "Use Spectrum font sizes.\n\nChoose from Spectrum's defined font sizes. By using unique font sizes, you risk upsetting the hierarchy and balance of typography in your product. Image: Text reading \"Spectrum delivers what's needed, when it's needed.\" labeled with a custom value of 17 px instead of a Spectrum font size token, shown as a don't example. (source: https://spectrum.adobe.com/foundations/typography/media_1280ff1daf36ac669b43bcc3e021b8a6774c4cbb6.png?width=750&format=png&optimize=medium) Image: Text reading \"Spectrum delivers what's needed, when it's needed.\" labeled with the token font-size-200, shown as a do example. (source: https://spectrum.adobe.com/foundations/typography/media_17c4dbbf625e3b2e743e6a75e591d7f5991b5cfbc.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Respect capitalization rules.\n\nUse sentence case for all UX content. For more on capitalization guidelines, go to Grammar and mechanics. Image: Form with a \"Create audience\" button, an \"Email address\" field, and a \"Contact preference\" dropdown listing \"Phone call,\" \"Email address,\" and \"Text message\" in sentence case, shown as a do example. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1e8d9950994f825a7339aaac2677a0f16286e1762.png?width=750&format=png&optimize=medium)"
+      "content": "Respect capitalization rules.\n\nUse sentence case for all UX content. For more on capitalization guidelines, go to Grammar and mechanics. Image: Form with a \"Create audience\" button, an \"Email address\" field, and a \"Contact preference\" dropdown listing \"Phone call,\" \"Email address,\" and \"Text message\" in sentence case, shown as a do example. (source: https://spectrum.adobe.com/foundations/typography/media_1e8d9950994f825a7339aaac2677a0f16286e1762.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Use tabular numbers for numerical data.\n\nNumbers within components should be tabular with lining figures. In tables, numbers should be right aligned to make numerical data easier to read and compare. This is used, for example, in tables, time stamps, and bar loaders. This is supported by Adobe Clean (via the Monospace uppercase option in Figma, the OpenType panel in Illustrator, or the CSS font feature settings). For iOS and Android, use the Spectrum Monospace numbers type styles. Image: Table with a \"Count\" column showing right-aligned tabular numbers 2, 5, 10, 12, and 25, with a bolded total of 324, shown as a do example. (source: https://preview.spectrum.adobe.com/foundations/typography/media_17aab398526c4b42c420abce55611379ee1eba044.png?width=750&format=png&optimize=medium)"
+      "content": "Use tabular numbers for numerical data.\n\nNumbers within components should be tabular with lining figures. In tables, numbers should be right aligned to make numerical data easier to read and compare. This is used, for example, in tables, time stamps, and bar loaders. This is supported by Adobe Clean (via the Monospace uppercase option in Figma, the OpenType panel in Illustrator, or the CSS font feature settings). For iOS and Android, use the Spectrum Monospace numbers type styles. Image: Table with a \"Count\" column showing right-aligned tabular numbers 2, 5, 10, 12, and 25, with a bolded total of 324, shown as a do example. (source: https://spectrum.adobe.com/foundations/typography/media_17aab398526c4b42c420abce55611379ee1eba044.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "do-dont",
       "content": "Don't let paragraph widths get too thin",
-      "dont": "Paragraphs of text that are too long are difficult to follow, and paragraphs of text that are too thin are difficult to read. Ideally, blocks of text should be roughly 70 characters wide. Be sure to keep them at least between 50 and 120 characters wide. Image: Narrow column of the \"Collaborative\" paragraph broken into many short lines, illustrating a paragraph width that is too thin, shown as a don't example. (source: https://preview.spectrum.adobe.com/foundations/typography/media_13bb8774bddfb85d336faadbf8f1f4936f9020f4e.png?width=750&format=png&optimize=medium)"
+      "dont": "Paragraphs of text that are too long are difficult to follow, and paragraphs of text that are too thin are difficult to read. Ideally, blocks of text should be roughly 70 characters wide. Be sure to keep them at least between 50 and 120 characters wide. Image: Narrow column of the \"Collaborative\" paragraph broken into many short lines, illustrating a paragraph width that is too thin, shown as a don't example. (source: https://spectrum.adobe.com/foundations/typography/media_13bb8774bddfb85d336faadbf8f1f4936f9020f4e.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Keep content short and to the point.\n\nKeep paragraphs concise. Some users with cognitive disabilities (and even those who don't) can have a very difficult time reading and comprehending large blocks of text. Image: Moderate-width column of the \"Collaborative\" paragraph with comfortably readable line lengths, shown as a do example. (source: https://preview.spectrum.adobe.com/foundations/typography/media_15433cd18805249164930961eb963e4bec4bacba9.png?width=750&format=png&optimize=medium)"
+      "content": "Keep content short and to the point.\n\nKeep paragraphs concise. Some users with cognitive disabilities (and even those who don't) can have a very difficult time reading and comprehending large blocks of text. Image: Moderate-width column of the \"Collaborative\" paragraph with comfortably readable line lengths, shown as a do example. (source: https://spectrum.adobe.com/foundations/typography/media_15433cd18805249164930961eb963e4bec4bacba9.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "do-dont",
       "content": "Don't fully-justify text",
-      "dont": "Do not use fully-justified blocks of text. This adds trapped white space within paragraphs, which makes it harder to read, especially for those with cognitive disabilities or dyslexia. Right alignment (left rag) is also discouraged for paragraphs of text. Image: The \"Collaborative\" paragraph shown fully justified with uneven word spacing on a pink background, shown as a don't example. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1da6c7af0217c78e26865de32b20a08b32471b743.png?width=750&format=png&optimize=medium)"
+      "dont": "Do not use fully-justified blocks of text. This adds trapped white space within paragraphs, which makes it harder to read, especially for those with cognitive disabilities or dyslexia. Right alignment (left rag) is also discouraged for paragraphs of text. Image: The \"Collaborative\" paragraph shown fully justified with uneven word spacing on a pink background, shown as a don't example. (source: https://spectrum.adobe.com/foundations/typography/media_1da6c7af0217c78e26865de32b20a08b32471b743.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/typography/applying-the-type-system",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/typography/applying-the-type-system",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/attention-hierarchy.json

@@ -12,14 +12,14 @@
     },
     {
       "type": "guideline",
-      "content": "High attention elements should be used sparingly and selectively. If too many things are high attention at once, the experience becomes noisy and unfocused. For example, both high-contrast colors and elevation communicate specific meanings and add emphasis within pages and flows — and these are both used very thoughtfully. Image: Three labeled pill buttons on a low-to-high attention scale: a light gray button on the left (low attention), a dark gray/black button in the middle, and a solid blue button on the right (high attention). (source: https://preview.spectrum.adobe.com/foundations/media_14ae3b9cab583541ca3057219e82b963cb577f719.png?width=750&format=png&optimize=medium)Image: Four empty rounded rectangle cards arranged on a low-to-high attention scale, showing progressively deeper drop shadows from left to right to indicate increasing visual elevation and attention. (source: https://preview.spectrum.adobe.com/foundations/media_145c026b410020965c87b15781c669231233cd7fa.png?width=750&format=png&optimize=medium)"
+      "content": "High attention elements should be used sparingly and selectively. If too many things are high attention at once, the experience becomes noisy and unfocused. For example, both high-contrast colors and elevation communicate specific meanings and add emphasis within pages and flows — and these are both used very thoughtfully. Image: Three labeled pill buttons on a low-to-high attention scale: a light gray button on the left (low attention), a dark gray/black button in the middle, and a solid blue button on the right (high attention). (source: https://spectrum.adobe.com/foundations/media_14ae3b9cab583541ca3057219e82b963cb577f719.png?width=750&format=png&optimize=medium) Image: Four empty rounded rectangle cards arranged on a low-to-high attention scale, showing progressively deeper drop shadows from left to right to indicate increasing visual elevation and attention. (source: https://spectrum.adobe.com/foundations/media_145c026b410020965c87b15781c669231233cd7fa.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "As a general rule, only one element or group of elements should have high attention on a page. Too many elements drawing high attention makes it difficult to focus. Image: A vertical sidebar with a blue circular add button at top, followed by icons for recent, cloud, and people, with a tooltip labeled 'Recent' pointing to the clock icon, and a panel toggle icon at the bottom. (source: https://preview.spectrum.adobe.com/foundations/media_1a93a0b0e1b7fb0945b404bf29ffcc9bd5cc43d71.png?width=750&format=png&optimize=medium)Image: A vertical sidebar with a blue circular add button, a highlighted blue 'Recent' clock icon with a matching blue tooltip label, plus cloud and people icons, and a panel toggle icon at the bottom — showing overuse of blue accent color across multiple elements. (source: https://preview.spectrum.adobe.com/foundations/media_19fb239ceeb047bb8e509bb2f502737325765d41e.png?width=750&format=png&optimize=medium)The plus button is the most timely and high impact action to take in this example.Selected state of items in the navigation is competing with the plus button."
+      "content": "As a general rule, only one element or group of elements should have high attention on a page. Too many elements drawing high attention makes it difficult to focus. Image: A vertical sidebar with a blue circular add button at top, followed by icons for recent, cloud, and people, with a tooltip labeled 'Recent' pointing to the clock icon, and a panel toggle icon at the bottom. (source: https://spectrum.adobe.com/foundations/media_1a93a0b0e1b7fb0945b404bf29ffcc9bd5cc43d71.png?width=750&format=png&optimize=medium) Image: A vertical sidebar with a blue circular add button, a highlighted blue 'Recent' clock icon with a matching blue tooltip label, plus cloud and people icons, and a panel toggle icon at the bottom — showing overuse of blue accent color across multiple elements. (source: https://spectrum.adobe.com/foundations/media_19fb239ceeb047bb8e509bb2f502737325765d41e.png?width=750&format=png&optimize=medium) The plus button is the most timely and high impact action to take in this example. Selected state of items in the navigation is competing with the plus button."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/attention-hierarchy",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/attention-hierarchy",
   "lastUpdated": "2026-08-24",
   "status": "published",
   "tags": [

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. 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"
+      "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://spectrum.adobe.com/foundations/color/media_125baf8974fe134e65d43f0f3ae7eeac5a7fd609b.png?width=750&format=png&optimize=medium) Background layer Light theme Dark theme Elevated gray-25 (with drop shadow) gray-75 (with drop shadow) Layer 2 gray-25 gray-75 Layer 1 gray-50 gray-50 Pasteboard gray-100 gray-25"
     },
     {
       "type": "guideline",
@@ -16,11 +16,11 @@
     },
     {
       "type": "guideline",
-      "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)"
+      "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://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)"
+      "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://spectrum.adobe.com/foundations/color/media_1f8b886169da3f23ccfffdbb27b5c0ea4021846d2.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -28,7 +28,7 @@
     },
     {
       "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)"
+      "content": "Image: The same UI mockup with a light gray toolbar and content area, with the surrounding background area labeled 'layer-2.' (source: https://spectrum.adobe.com/foundations/color/media_10fb4e74c2e2cf1b5db032034b80119c621df637f.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -36,7 +36,7 @@
     },
     {
       "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)"
+      "content": "Image: The same UI mockup with a light gray toolbar and content area, with the outermost background area labeled 'pasteboard.' (source: https://spectrum.adobe.com/foundations/color/media_110c564baa38fffaae914eb5a11d469cd41ccf2a1.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -44,15 +44,19 @@
     },
     {
       "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)"
+      "content": "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 on top of the canvas. Image: An isometric exploded view of a UI panel with a floating button element, showing stacked layers labeled layer-1, elevated, pasteboard, and layer-2 (twice), illustrating depth and stacking order. (source: https://spectrum.adobe.com/foundations/color/media_1c8fba7f2acf4599eb31649e0b3ee41437f88041b.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)"
+      "content": "Image: A UI mockup showing a toolbar, content area, and a floating rounded button, with the button labeled 'elevated.' (source: https://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 white toolbar area labeled 'Layer 1. (source: https://preview.spectrum.adobe.com/foundations/color/media_18abc351c445528d2ace3af106f13f2b6626b2715.png?width=750&format=png&optimize=medium)"
+      "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://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://spectrum.adobe.com/foundations/color/media_18abc351c445528d2ace3af106f13f2b6626b2715.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -60,7 +64,7 @@
     },
     {
       "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)"
+      "content": "Image: The same UI mockup with a toolbar, content area, and floating button, with the outermost background area labeled 'Pasteboard.' (source: https://spectrum.adobe.com/foundations/color/media_1fca78125ec28d3d0af8819e33bc53e96dd8dbfd2.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -68,30 +72,30 @@
     },
     {
       "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."
+      "content": "Pages in browsing contexts draw attention to the content, which is the primary focus. Examples of pages in browsing contexts include a Home or Files experience. Image: An isometric exploded view of a UI panel with a floating rounded element on top, showing stacked layers labeled base, layer 2, and elevated, illustrating depth and stacking order. (source: https://spectrum.adobe.com/foundations/color/media_1060f435fd95504c233c5d57dc8d8f6570ce93e02.png?width=750&format=png&optimize=medium)"
     },
     {
       "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)"
+      "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": "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."
+      "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://spectrum.adobe.com/foundations/color/media_1856cd39f76bc9d38d6f9ddfe57400ceb603e983b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "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)"
+      "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. 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"
+      "content": "Image: The same UI mockup with a content area and floating card, with the white content panel labeled 'layer 2.' (source: https://spectrum.adobe.com/foundations/color/media_14cfd47611567b8649816d2022de82b47339f2d42.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "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."
+      "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://spectrum.adobe.com/foundations/color/media_135b74d5364580adabc3490eb36efcbd74084d1e8.png?width=750&format=png&optimize=medium) Background layer Light theme Dark theme Elevated gray-25 (with drop shadow) gray-75 (with drop shadow) Layer 2 gray-25 gray-75 Layer 1 gray-50 gray-50 Pasteboard gray-100 gray-25"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/color/background-layers",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/color/background-layers",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/bi-directionality.json

@@ -8,38 +8,38 @@
     { "type": "purpose", "content": "Bi-directionality" },
     {
       "type": "guideline",
-      "content": "In digital experiences, languages that are based on Latin script (e.g., English and French), Cyrillic script (e.g., Russian and Bulgarian), Chinese and Japanese* are consistently read and written from left to right. Languages that are based on certain writing systems like Arabic (e.g., Arabic, Persian, and Urdu) and Hebrew (Hebrew and Yiddish), are mostly read and written from right to left. These languages are called “bi-directional,” or are also commonly referred to as “RTL” (“right-to-left”) languages. Digital experiences for these languages should be mirrored to follow the same right-to-left reading pattern. UI mirroring is the process of positioning components in the opposite side of the interface, which creates, as the term suggests, a mirror-like effect. * Chinese and Japanese, especially in printing, books, and publications, maintain their top-to-bottom, right-to-left writing/reading patterns, but are mainly using the left-to-right system in digital experiences."
+      "content": "In digital experiences, languages that are based on Latin script (e.g., English and French), Cyrillic script (e.g., Russian and Bulgarian), Chinese and Japanese* are consistently read and written from left to right. Languages that are based on certain writing systems like Arabic (e.g., Arabic, Persian, and Urdu) and Hebrew (Hebrew and Yiddish), are mostly read and written from right to left. These languages are called “bi-directional,” or are also commonly referred to as “RTL” (“right-to-left”) languages. Digital experiences for these languages should be mirrored to follow the same right-to-left reading pattern. UI mirroring is the process of positioning components in the opposite side of the interface, which creates, as the term suggests, a mirror-like effect. *Chinese and Japanese, especially in printing, books, and publications, maintain their top-to-bottom, right-to-left writing/reading patterns, but are mainly using the left-to-right system in digital experiences."
     },
     {
       "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. 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)"
+      "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://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). 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)"
+      "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://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. 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)"
+      "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://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. 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)"
+      "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://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. 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)"
+      "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://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. 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)"
+      "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://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. 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)"
+      "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://spectrum.adobe.com/foundations/inclusivity/media_1eaa9deb489f9741568d5c8549da5fbb7742191c4.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/inclusivity/bi-directionality",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/bi-directionality",
   "lastUpdated": "2026-09-03",
   "status": "published",
   "tags": [

package/guidelines/border-width.json

@@ -6,6 +6,10 @@
   "category": "designing",
   "documentBlocks": [
     { "type": "purpose", "content": "Border width" },
+    {
+      "type": "guideline",
+      "content": "Image: Faint blue icon of a rounded square containing a small toggle switch and rounded rectangle, illustrating minimal border use where borders aren't needed. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_17c3007ebae0f53d3422c819976245b9093c4f4f4.png?width=750&format=png&optimize=medium) Image: Three horizontal pink gradient bars of consistent border width, illustrating consistent border styling across elements. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1e8f2ff262e3c29774ba33c7130140c6fb22bf3a1.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Borders when necessary only.\n\nBorders are an essential way to create separation, but they can also add visual noise to an interface by filling and disrupting negative space. As a result, they should be used sparingly, only when necessary. For example, a divider might sometimes be needed to separate two distinct action button groups. Or, an object might have a border to demarcate distinct areas, such as separating a panel or card from the rest of the content on a page. Whenever possible, achieve separation through other techniques, like negative space and section titles, instead of using borders."
@@ -16,7 +20,11 @@
     },
     {
       "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)"
+      "content": "Borders are primarily used to define component boundaries and organize content within layouts. Different border width styles communicate different levels of emphasis and separation. Spectrum supports two border widths that are used within in-product UI contexts."
+    },
+    {
+      "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://spectrum.adobe.com/foundations/styles/object-styles/media_1a088c65b63f7e399bb131a44ff80e74953321fff.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -24,7 +32,7 @@
     },
     {
       "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)"
+      "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://spectrum.adobe.com/foundations/styles/object-styles/media_1435bfbbdbca2c110617d050031937775d717f036.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -32,7 +40,11 @@
     },
     {
       "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)"
+      "content": "Border treatments vary depending on their context. The following examples show how to apply borders across common interface patterns to create clear separation while maintaining a consistent appearance."
+    },
+    {
+      "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://spectrum.adobe.com/foundations/styles/object-styles/media_149631f31e7ffca6e95f54f0128c7dadc81cc445b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -40,7 +52,7 @@
     },
     {
       "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)"
+      "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://spectrum.adobe.com/foundations/styles/object-styles/media_1fd7f0c9ddbc8acc442c352f72f2f9f1888c96383.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -48,10 +60,10 @@
     },
     {
       "type": "guideline",
-      "content": "Platform availability.\n\nThese tokens are currently available on web. Guidance for additional platforms will be added in a future release. StyleTokenValueSmall border-width-100 1 pxMedium border-width-200 2 pxLarge border-width-400 4 px"
+      "content": "Platform availability.\n\nThese tokens are currently available on web. Guidance for additional platforms will be added in a future release. Style Token Value Small border-width-100 1 px Medium border-width-200 2 px Large border-width-400 4 px"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/border-width",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/border-width",
   "lastUpdated": "2026-08-14",
   "status": "published",
   "tags": ["border width", "divider"]

package/guidelines/brand.json

@@ -8,54 +8,46 @@
     { "type": "purpose", "content": "Brand" },
     {
       "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. You can find app icons within the App Icons library."
+      "content": "There are a number of key assets that are used systematically across interfaces."
     },
     {
       "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. 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",
-      "content": "Loading screens include desktop splash screens, mobile loading screens, and web loaders. Desktop splash screens celebrate artwork from the Adobe community and are updated at least once a year. All desktop products that have a loading time of longer than 2 seconds, or don’t open instantaneously, are required to have a splash screen. This is so a user can understand that there’s a loading process happening. Follow OS-specific conventions for mobile loading screens. View more information about using Android loading screens."
+      "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://spectrum.adobe.com/foundations/media_1b535db2549466c3c1f81290211e8cb97e3b0277c.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
       "content": "Loading screens include desktop splash screens, mobile loading screens, and web loaders. Desktop splash screens celebrate artwork from the Adobe community and are updated at least once a year. All desktop products that have a loading time of longer than 2 seconds, or don’t open instantaneously, are required to have a splash screen. This is so a user can understand that there’s a loading process happening. Follow OS-specific conventions for mobile loading screens."
     },
-    {
-      "type": "guideline",
-      "content": "File type and folder illustrations.\n\nOn desktop, product folder icons are branded to help users find any product-related settings. For web and mobile, folders use Spectrum colors to fit better in the experience. Primary file types always utilize brand colors, since they’re often file formats proprietary to the product (for example, PSD to Photoshop, or AEP to AE). Secondary filetypes are shared across many products, so they take a neutral palette using Spectrum 1 colors. The Brand team creates desktop versions of these icons in ICNS (for Mac) and ICO (for Windows) files, while web versions are delivered most often as SVGs. Desktop folders and file types can be found on the Brand wiki under individual product delivery pages. View web folders and file types."
-    },
     {
       "type": "guideline",
       "content": "File type and folder illustrations.\n\nOn desktop, product folder icons are branded to help users find any product-related settings. For web and mobile, folders use Spectrum colors to fit better in the experience. Primary file types always utilize brand colors, since they’re often file formats proprietary to the product (for example, PSD to Photoshop, or AEP to AE). Secondary filetypes are shared across many products, so they take a neutral palette using Spectrum 1 colors."
     },
     {
       "type": "guideline",
-      "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)"
+      "content": "Color has historically been an extremely important part of Adobe’s brand. Bringing more color into Spectrum 2 lets product experiences draw a much closer connection to marketing materials and product branding. Spectrum’s 6.0.0 color system didn’t throughly incorporate the Adobe brand colors, even though in-product UI colors are so close to them in both hue and saturation. With the colors for Spectrum 2, we’ve made some shifts to ensure that brand colors are better represented throughout product experiences. Image: Color-coded Adobe app icons with hex codes and names: Ai (Orange), Ps (Cyan), Dn (Celery), Ae (Indigo), Xd (Fuchsia), Id (Magenta). (source: https://spectrum.adobe.com/foundations/media_140ed33e3bdfc0215811463a3914f62aa3b83debd.png?width=750&format=png&optimize=medium) Brand colors used outside of in-product illustrations and splash imagery may differ slightly from the Spectrum 2 colors. Image: Color chart comparing brand colors and spectrum colors for Adobe apps, showing hex codes and color variations side by side. (source: https://spectrum.adobe.com/foundations/media_19e48a995352b0a44ae5ac4478d0b0780916e06e1.png?width=750&format=png&optimize=medium) Along with Adobe’s primary brand color palette (red, black, grey, and white), there’s also an extended color palette that brings a modern and bold personality to the Adobe brand. These colors are the starting point for graphics, diagrams and icons, illustrations, and backgrounds — and there are additional considerations for colors in Creative Cloud, Document Cloud, Experience Cloud, and Adobe Express for Spectrum 2 experiences."
     },
     {
       "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. 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)"
+      "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://spectrum.adobe.com/foundations/media_1fc8580f8a8ad1855ad6d91b5e412d1323e574af9.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. 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)"
+      "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://spectrum.adobe.com/foundations/media_1e553a0a604bb2734012ea65f4a3545209e9749b7.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. 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)"
+      "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://spectrum.adobe.com/foundations/media_18af562eadd246ad3934851d77fca39cfca07bed5.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Gradients are a significant characteristic of Spectrum 2 and a very noticeable part of how the Adobe brand is expressed in UI contexts. They help communicate product differentiation across our brand portfolio, and also allow for individual products to have a wider range of expression. Both of these aspects heavily contribute to the bolder, more colorful visual language of Spectrum 2. Because gradients are very expressive, they’re always placed intentionally and with a strategic meaning. They should not distract from the main content in an experience. They’re only used in specific areas in order to create a system, feature the product brand, and support visual hierarchy. And, their colors are directly tied to product brand color palettes."
+      "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://spectrum.adobe.com/foundations/media_1704be25c74bac41af593635d0107205d2d97aec0.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "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."
+      "content": "Gradients are a significant characteristic of Spectrum 2 and a very noticeable part of how the Adobe brand is expressed in UI contexts. They help communicate product differentiation across our brand portfolio, and also allow for individual products to have a wider range of expression. Both of these aspects heavily contribute to the bolder, more colorful visual language of Spectrum 2. Because gradients are very expressive, they’re always placed intentionally and with a strategic meaning. They should not distract from the main content in an experience. They’re only used in specific areas in order to create a system, feature the product brand, and support visual hierarchy. And, their colors are directly tied to product brand color palettes."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/brand",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/brand",
   "lastUpdated": "2026-09-10",
   "status": "published",
   "tags": [

package/guidelines/cognitive.json

@@ -9,6 +9,10 @@
       "type": "purpose",
       "content": "Neurodivergence encompasses a wide range of cognitive, behavioral, and developmental differences. It includes medical diagnoses like ADHD, Autism Spectrum Disorder, Dyslexia, Anxiety, Tourette Syndrome, and more. Approximately 1 in 5 humans have neurodivergent diagnoses, although rates are significantly higher in tech workers, marketers, entrepreneurs, creatives, and younger generations. Neurodivergence is not directly related to a level of intelligence or physical ability, but sometimes overlaps with other disabilities. Every neurodivergent person experiences neurodivergence differently. While all people enter and exit disability throughout their lives, and may require special support temporarily, neurodivergent people live with their disabilities and cognitive experiences every day. For them, it’s not about finding a cure but adapting to their challenges to make the most of their abilities. They can’t change who they are or how they think, so it’s our duty to adapt to our products to suit their unique cognitive needs.\n\n### Opportunities from neuroinclusion\n\nNeurotypical users often feel frustrated by overly complex workflows and product inconsistencies. Neurodivergent users also find these things frustrating, but may become so overwhelmed by these challenges that they choose not to use these products at all. This shared frustration across different user types can negatively impact customer retention and potential loss of custom acquisition."
     },
+    {
+      "type": "guideline",
+      "content": "Neurodivergent users process information in a variety of ways. While every lived experience is unique, these are some common traits that can be used to understand challenges and decision-making processes."
+    },
     {
       "type": "guideline",
       "content": "Maximizing (not Satisficing).\n\nCompelled to understand and compare all options to find the best opposed to selecting the first option that seems reasonable."
@@ -41,6 +45,10 @@
       "type": "guideline",
       "content": "The importance of novelty & stimulation.\n\nWhile finding patterns and building deep knowledge of special interests is a strength for many neurodivergent people, it can also be difficult for neurodivergent users to maintain focus on task completion. Neurodivergent brains often seek novelty due to differences in how their nervous systems process stimuli and regulate dopamine. For some, like individuals with ADHD, the brain may have lower baseline dopamine levels, making new or exciting experiences more rewarding and necessary to sustain interest and focus. Novelty can help reduce monotony and provide stimulation, which some neurodivergent individuals need to maintain engagement and regulate emotions. This drive for newness isn't universal, but reflects how diverse brains may seek balance, learning, and growth through fresh and varied experiences."
     },
+    {
+      "type": "guideline",
+      "content": "While it is often assumed that more choices create more flexibility and control, the opposite is true - especially for neurodivergent users. Too many options make it difficult for users to compare them and make a satisfactory choice."
+    },
     {
       "type": "guideline",
       "content": "Options can create a negative experience.\n\nMore options can make it harder to choose the right one. Deciding between many options requires more time and effort to weigh each one, especially since neurodivergent users often need to consider all details to proceed. This process leads to overwhelm and reduces user confidence."
@@ -53,6 +61,10 @@
       "type": "guideline",
       "content": "Increased impact on neurodivergent users.\n\nWhile all users are affected by choice-paralysis, neurodivergent users have a lower tolerance due to the increased volume of daily decisions (as compared to neurotypical peers) and risk aversion to failure. Neurodivergent users are more likely to quit a workflow if they feel overwhelmed by choices."
     },
+    {
+      "type": "guideline",
+      "content": "Consistent and intentional UI layout can provide neurodivergent users the support they need to complete challenging tasks."
+    },
     {
       "type": "guideline",
       "content": "Content volume.\n\nNeurodivergent users need to see the whole picture, but showing too much content can be demotivating. While extensive content may initially look more appealing, it can actually damage users’ motivation when they experience choice paralysis. Instead of trying to satisfy all of the users’ different needs in one space, offer more flexible tools to organize content."
@@ -65,6 +77,10 @@
       "type": "guideline",
       "content": "Consistency is key.\n\nUsers subconsciously learn the layout of apps as they use them. They come to expect side menus, containers, and other elements to appear in the same places. Users even expect this consistency across tools when multiple apps are part of the same workflow. When the layout within and across tools is inconsistent, users get confused and become frustrated. This can impact product adoption and even customer retention."
     },
+    {
+      "type": "guideline",
+      "content": "It can be even more challenging for neurodivergent users to complete tasks within workflows that move across multiple products, product features, or tools. They can easily become stuck when relevant information is missing or hidden, or located in an unexpected place. They’re more likely to quit a workflow if a clear path forward is not obvious."
+    },
     {
       "type": "guideline",
       "content": "Containers within a single screen.\n\nContaining editing tools within a single screen is a great way to reduce cognitive load and help neurodivergent users complete tasks. Editing tools should be placed in the same container or adjacent container to reduce transition time and distance. It’s best to avoid extraneous editing containers and switching context to access editing tools."
@@ -73,6 +89,10 @@
       "type": "guideline",
       "content": "Containers across screens.\n\nMany neurodivergent users leverage split screens and window tiling to improve cognition when multiple browsers are required. When there is no feedback between windows, or when a task requires multiple large transitions, task completion becomes difficult."
     },
+    {
+      "type": "guideline",
+      "content": "Complex or ambiguous workflows can cause major challenges for neurodivergent users. Too many options can easily overwhelm, and fear of failure can shatter user confidence. When designing product workflows, it’s important to continuously evaluate and consider supportive measures to help users complete their tasks."
+    },
     {
       "type": "guideline",
       "content": "Task breakdown.\n\nBreaking down tasks into steps requires linear thinking, which isn’t natural for neurodivergent brains. They need help identifying the correct steps to take and support to make sure tasks are prioritized in the correct order."
@@ -85,6 +105,10 @@
       "type": "guideline",
       "content": "Transitions.\n\nMoving between steps can become especially difficult for neurodivergent users when they also have to transition between containers (like multiple browser tabs, panels, or products). The space between screens is where neurodivergent users get lost, largely due to gapped working memory. Transitions can make or break an experience for neurodivergent users, so it’s important to identify and minimize transition time, ambiguity, and the number of containers."
     },
+    {
+      "type": "guideline",
+      "content": "Task management is especially important for neurodivergent users to stay focused on the work they should be doing rather than all the work they could be doing. But task management can be challenging because neurodivergent brains struggle to organize, focus on, and break down large tasks."
+    },
     {
       "type": "guideline",
       "content": "Task support for increased user confidence.\n\nAgentic AI can help users to identify and complete tasks, and navigate complex workflows. This is especially impactful for neurodivergent users who may become more easily overwhelmed by decision-making and task completion. As AI continues to support neurodivergent users, it can become a reliable tool to maintain motivation and increase task completion, which in turn leads to improved product loyalty.The challenge of task lists While task lists can remove the burden of remembering tasks, and act as a safety net for anxious users, they aren’t sufficient tools for continued task management support. Neurodivergent users need help planning and prioritizing tasks by clearly seeing when the task is due and how long it will take. Transparency is key to maintaining focus on the most important tasks and driving task execution. Even if the task list has sufficient details to be helpful, most task lists exist outside of the users’ workspace. It’s also common for users to have multiple task lists in different tools. Users often need to add a task reminder quickly in the most convenient tool, out of fear that they will forget the task due."
@@ -97,6 +121,10 @@
       "type": "guideline",
       "content": "Content layout and stylistic preferences depend on cognitive processing abilities and needs. Since these needs can vary significantly between neurodivergent users, it’s important to give users tools to customize their spaces. Supportive customization tools can allow users to (un)hide content. User-customized spaces can improve efficiency, reduce cognitive load, and build product confidence, trust, and loyalty."
     },
+    {
+      "type": "guideline",
+      "content": "Neurodivergent users often welcome proactive AI interventions, recognizing their potential to enhance working memory, offer a judgment-free collaborator, and serve as a motivating presence. These tools can bridge gaps in memory, provide support without fear of rejection, and act as a body-double to help maintain focus and motivation."
+    },
     {
       "type": "guideline",
       "content": "Supporting different communication needs.\n\nAI can be a valuable tool to support neurodiverse communication needs by customizing language and tone. Reassuring and encouraging AI tone and voice can provide content accessibility across different reading levels. Options for formal or casual tones can support neurodivergent users with RSD and ambiguity sensitivity, and “read aloud” options can support users who have difficulty processing written information."
@@ -146,6 +174,10 @@
       "type": "guideline",
       "content": "Use supportive AI voice and tone.\n\nSome users may become overwhelmed when they perceive rejection or a demand. Words can either encourage or discourage users to take action."
     },
+    {
+      "type": "guideline",
+      "content": "If you’re new to neuroinclusive design, it can be difficult to know what product features can best support neurodiverse users. Here are some ideas to try:"
+    },
     {
       "type": "guideline",
       "content": "Workflows.\n\nShow users what other people in similar situations chose Show users which choice they have selected in the past Offer templates as visual examples or to provide quick start options Show users a preview of the outcome of their choice so they can better gauge which choice is best Consider streamlined, in-product experiences that allow users to share decision making responsibilities with coworkers in similar roles Use judgement-free content strategy tactics to support and encourage decision making"