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

package/guidelines/brand.json

@@ -8,15 +8,27 @@
     { "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](https://www.figma.com/file/8or0zCnGc5fiTnQ1NeIRnh/Product-App-icons?type=design\\&node-id=501%3A685\\&mode=design\\&t=BCgDXidUN5VZiBwu-1)."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Loading screens include desktop splash screens, mobile loading screens, and web loaders.\n\nDesktop 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.\n\nFollow OS-specific conventions for mobile loading screens. View more information about using [Android loading screens](https://wiki.corp.adobe.com/display/AdobeDesign/Android+Launch+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."
     },
     {
       "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.\n\nPrimary 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.\n\nThe 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](https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=AdobeDesign\\&title=Adobe+Design+Brand) under individual product delivery pages. View [web folders and file types](https://wiki.corp.adobe.com/pages/viewpage.action?pageId=1994851879)."
+      "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."
+    },
+    {
+      "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",
@@ -24,11 +36,11 @@
     },
     {
       "type": "guideline",
-      "content": "Document Cloud's colors align to Spectrum. There's three primary product colors plus Adobe red, as well as six secondary colors."
+      "content": "Document Cloud’s colors align to Spectrum. There’s three primary product colors plus Adobe red, as well as six secondary colors."
     },
     {
       "type": "guideline",
-      "content": "Experience Cloud's colors align to Spectrum. The foundational apps use cool colors, while the functional apps use warm colors."
+      "content": "Experience Cloud’s colors align to Spectrum. The foundational apps use cool colors, while the functional apps use warm colors."
     },
     {
       "type": "guideline",
@@ -36,15 +48,23 @@
     },
     {
       "type": "guideline",
-      "content": "Premium and Generative AI gradients.\n\n\\[See embedded content on website]"
+      "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."
     },
     {
       "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.\n\nAny new Spectrum 2 assets must be requested directly from the Brand team. It's very important that you do not create your own.\n\nTo view existing S2 Illustrations, visit the [S2 / Illustrations library](https://www.figma.com/design/xGhSI7y1ewp2fEiX5eNOKv/S2-%2F-Illustrations?node-id=1508-8563\\&t=T5G2KGbuUHuqGUnA-0) in Figma. If you need a new illustration, [make a request using Workfront](https://experience.adobe.com/#/@wfadoberm/so:adoberm-Production/workfront/requests/new?activeTab=tab-new-helpRequest\\&projectID=6780593b001a3fa9fe20195fcec6c39a\\&path=)."
+      "content": "Request assets from the Brand team.\n\nBrand considerations are highly strategic, and coherence is a priority. Don’t make your own illustrations, colors, gradients, logos, or other assets. The Brand team will work with you to create assets that align to your product’s strategy and timing. Any new Spectrum 2 assets must be requested directly from the Brand team. It’s very important that you do not create your own. To view existing S2 Illustrations, visit the S2 / Illustrations library in Figma. If you need a new illustration, make a request using Workfront."
     }
   ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/brand/",
-  "lastUpdated": "2026-02-02",
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/brand",
+  "lastUpdated": "2026-09-10",
   "status": "published",
-  "tags": ["designing"]
+  "tags": [
+    "Brand assets",
+    "Product logos",
+    "App icons",
+    "Loading screens",
+    "Brand colors",
+    "Gradients",
+    "Creative Cloud"
+  ]
 }

package/guidelines/cognitive.json

@@ -0,0 +1,197 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/cognitive.json",
+  "name": "cognitive",
+  "title": "Cognitive",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "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": "Maximizing (not Satisficing).\n\nCompelled to understand and compare all options to find the best opposed to selecting the first option that seems reasonable."
+    },
+    {
+      "type": "guideline",
+      "content": "Lateral thinking (over linear).\n\nDivergent, holistic, and tangential thinking as opposed to convergent, sequential thought processes."
+    },
+    {
+      "type": "guideline",
+      "content": "Gapped working memory.\n\nStruggles to filter out “noise” and focus on the information at hand, creating gaps in working memory."
+    },
+    {
+      "type": "guideline",
+      "content": "Ambiguity sensitivity.\n\nFinds ambiguity everywhere and sees many possible interpretations and conclusions."
+    },
+    {
+      "type": "guideline",
+      "content": "RSD (Rejection Sensitive Dysphoria).\n\nAvoids starting tasks where there is a chance of failure and compensates for their fear by striving for perfection."
+    },
+    {
+      "type": "guideline",
+      "content": "Pattern recognition.\n\nBecause neurodivergent brains often see the “bigger picture”, they are excellent at pattern recognition and finding new strategies that others can’t. They may have an easier time than neurotypical peers when problem solving, identifying opportunities, and drawing connections across seemingly disparate things."
+    },
+    {
+      "type": "guideline",
+      "content": "Deep subject matter interest.\n\nNeurodivergent people often have intense and enduring fascinations with specific topics, activities, or subjects. Unlike casual hobbies, special interests are pursued with extraordinary depth and enthusiasm, leading to detailed knowledge or exceptional skill. When these interests are aligned with professional tasks, neurodivergent users may have enhanced focus, motivation, and productivity, and are often relied on as subject matter experts."
+    },
+    {
+      "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": "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."
+    },
+    {
+      "type": "guideline",
+      "content": "Inability to decide.\n\nThe inability to make a choice from multiple options can lead to anxiety, stress, unhappiness, high expectations, regret, and self-blame. This is especially true if a poor choice is made. Users can‘t easily make choices when overwhelmed with information and options; the cognitive effort to compare all the options is too great. Instead of risking making a poor choice from too many options, users choose not to make a choice at all."
+    },
+    {
+      "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": "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."
+    },
+    {
+      "type": "guideline",
+      "content": "Transparency.\n\nTo make decisions confidently, neurodivergent users need to see all relevant information at once. It’s critical to keep important content within the same field of view so that it can be viewed and considered as part of a whole. If important content is hidden, neurodivergent people can struggle to make the correct decision and proceed."
+    },
+    {
+      "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": "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."
+    },
+    {
+      "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": "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."
+    },
+    {
+      "type": "guideline",
+      "content": "Streamlining workflows.\n\nGoing from step to step requires users to remember a sequence of steps, which can be very challenging for neurodivergent users with diminished working memory. Moving through steps in a workflow also requires decision-making, which is especially difficult for maximizers and users with ambiguity sensitivity. Repeating this process until the task is complete requires immense focus and motivation, which is difficult to sustain when the task is no longer novel or interesting to neurodivergent brains."
+    },
+    {
+      "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 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."
+    },
+    {
+      "type": "guideline",
+      "content": "Timing is everything.\n\nTask reminders usually aren’t helpful for neurodivergent users. Reminders show up at inconvenient times and can be distractions. As a result, neurodivergent users typically ignore reminders so that they can stay focused on their work, since maintaining focus already requires significant effort. Instead, neurodivergent users rely on calendar blocking to plan and execute tasks. This provides them with a designated time to complete the task instead of relying on reminders or working memory."
+    },
+    {
+      "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": "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."
+    },
+    {
+      "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."
+    },
+    {
+      "type": "guideline",
+      "content": "Offer a single path to complete a task.\n\nUse linear workflow paths for the user to move forward and backwards. Minimize branching workflows."
+    },
+    {
+      "type": "do-dont",
+      "content": "Avoid using multiple browser tabs and windows in a single workflow",
+      "dont": "If multiple tabs or windows are required, system information should pass easily between them."
+    },
+    {
+      "type": "guideline",
+      "content": "Use inline customization options.\n\nAllow users to modify content without having to navigate to a separate menu. Support in-place editing."
+    },
+    {
+      "type": "guideline",
+      "content": "Limit amount of options.\n\nReduce choices in a workflow or task to limit decision paralysis and overwhelm."
+    },
+    {
+      "type": "guideline",
+      "content": "Notify user of transitions between containers.\n\nIf a context switch is necessary, prime users for it. Don’t hide transition information."
+    },
+    {
+      "type": "guideline",
+      "content": "Offer a persistent frame of reference.\n\nProvide tools to orient users, even if the context seems obvious."
+    },
+    {
+      "type": "guideline",
+      "content": "Enable customization with dynamic containers.\n\nReduce cognitive load by allowing for multiple views or “tiles” within our tools. Enable resizing and rearranging of tiles to support user customization."
+    },
+    {
+      "type": "guideline",
+      "content": "Support user agency.\n\nDon’t override user customizations with automated personalization."
+    },
+    {
+      "type": "guideline",
+      "content": "Promote transparent content layout.\n\nAvoid hiding relevant content or dispersing it across multiple containers."
+    },
+    {
+      "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": "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"
+    },
+    {
+      "type": "guideline",
+      "content": "Content.\n\nIntegrate or mimic window tiling capabilities, like those found in operating systems or screen organizing plugins"
+    },
+    {
+      "type": "guideline",
+      "content": "Task management.\n\nProvide or integrate with time management tools to improve user efficiency and promote task completion. Integrate with 3rd party calendar tools to help users plan tasks and re-enter workflows more easily and quickly Leverage progress bars to help block sufficient time and provide any easy tool for users to manage their time"
+    },
+    {
+      "type": "guideline",
+      "content": "AI.\n\nConsider AI-generated reports like an “end-of-day summary” to boost user confidence and offer a starting point for the next day Provide AI Assistant reminders to help users complete unfinished tasks. Extend AI’s role to help users with task execution. Users don’t want to be responsible for creating tasks. Consider AI agents as a pro-active support"
+    },
+    {
+      "type": "guideline",
+      "content": "Project Doombox is currently building a set of use cases with various product teams, and design tools for neuroinclusion. These will be published here in a future update."
+    },
+    {
+      "type": "guideline",
+      "content": "Term Definition CognitionThe mental processes involved in acquiring knowledge and understanding through thought, experience, and the senses.Cognitive loadThe amount of mental effort being used in the working memory.ContainersCompartments within a UI layout or multi-layout workflow which are used to separate information or tools. (Example: browser windows, panels, toolbars, dialogs, etc.)DopamineA neurotransmitter that plays a key role in motivation, reward, and learning.HyperfocusA state of intense concentration on a specific task, interest, or activity, often to the exclusion of other stimuli or responsibilities.NeurodivergenceThe variation in neurological functioning that is seen as part of the normal spectrum of human diversity.NeurotypicalDescribes individuals whose neurological development and functioning are typical and not characterized by neurodivergence.Special interestsIntense and passionate interests in specific topics or activities, often seen in neurodivergent individuals.CustomizationUser-initiated modifications to suit individual needs or preferences.PersonalizationSystem-initiated modifications which assume preferences of an individual user or specific group of users."
+    },
+    {
+      "type": "guideline",
+      "content": "Project Doombox wiki Project Doombox Goldmine research readout #project-doombox Slack channel"
+    },
+    {
+      "type": "guideline",
+      "content": "Please post questions, feedback, or suggestions in the #project-doombox Slack channel."
+    }
+  ],
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/cognitive",
+  "lastUpdated": "2026-09-03",
+  "status": "published",
+  "tags": [
+    "neurodivergence",
+    "neuroinclusion",
+    "cognition",
+    "ADHD",
+    "autism",
+    "dyslexia",
+    "pattern recognition",
+    "lateral thinking",
+    "working memory",
+    "Rejection Sensitive Dysphoria (RSD)"
+  ]
+}

package/guidelines/colors.json

@@ -5,58 +5,76 @@
   "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": "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": "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": "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": "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": "Brand colors may differ from Spectrum colors"
     },
     {
       "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": "Key colors (shown in hue).\n\nThe Leonardo tool generates the color palette by using several key colors, including brand colors. Most color scales are not a single hue key color. Leonardo tends to darken and lighten on either end of the gradient by adding black and white to the key colors, so some are included to ensure a high degree of saturation in the palette. In other cases, some key colors shift the actual hue in order to keep colors bright or recognizable, or shift them to help most users avoid confusion with adjacent colors. Once the color scale is determined, lightness stops are input for each color in order to get aliased colors."
     },
     {
       "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. 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."
     },
     {
       "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."
     },
     {
       "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."
     },
     {
       "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."
     },
     {
       "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."
     },
     {
       "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."
     },
     {
       "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."
     }
   ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/colors/",
-  "lastUpdated": "2026-02-02",
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/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,49 @@
+{
+  "$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."
+    },
+    {
+      "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": "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": "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": "Spectrum's internal component spacing is defined by a comprehensive set of semantic tokens. Each of these tokens corresponds to a specific structural context. These tokens are built into every Spectrum component, and available to designers in the S2 / Variables Figma library. A full token reference will be available on this site in the future. If you do need to inspect or access them, please reach out to the Spectrum team."
+    },
+    {
+      "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://main--spectrum-hub--adobe.aem.live/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,67 @@
+{
+  "$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": "Post in #spectrum-general or email the Spectrum team."
+    },
+    {
+      "type": "guideline",
+      "content": "For general inquiries, feedback, bug reports, and other communication about Spectrum, please email us."
+    },
+    {
+      "type": "guideline",
+      "content": "For feature requests, bug reports, or other general feedback on the Spectrum website or designs, please visit the #spectrum-design Slack channel and fill out the embedded Slack form. Your input is important and helps us prioritize updates accordingly. We review submissions regularly and will create Jira tickets as needed, depending on the details of the request, our team's bandwidth, and current priorities."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum Design.\n\nCore components, styles, and resources, as well as general design questions #spectrum-design"
+    },
+    {
+      "type": "guideline",
+      "content": "CC Unified Experience Team (CCUE).\n\nCreative Cloud #ad-ue-general The Unified Experience effort is helping to define Adobe's shared experience standards. This is done through defining and documenting principles, patterns, and UI components to help product teams deliver modern, unified, cross-platform experiences through Spectrum components and guidelines."
+    },
+    {
+      "type": "guideline",
+      "content": "Brand and illustration #product-branding The Brand design team creates the product logos, file types and folders icons, and any other in-product branded element, such as splash and loading screens, or welcome banners for all Adobe surfaces. The Brand team also creates all in-product illustrations and can advise on how to uplift your product brand throughout the experience. View more information about requesting illustrations or brand elements."
+    },
+    {
+      "type": "guideline",
+      "content": "DX Unified Experience Team (DXUE).\n\nExperience Cloud #archon DXUE aims to unify the Experience Cloud across a comprehensive product stack of composable services to provide a user experience that is performant, scalable, and continuous, to serve the needs of enterprise to mid-market organizations through Spectrum components and patterns."
+    },
+    {
+      "type": "guideline",
+      "content": "Icons.\n\nWorkflow iconography #icons The Icons team designs delightful and consistent Spectrum iconography for all Adobe surfaces and provides product teams with thorough resources for icon usage and implementation. The team can also assist with vendor work by offering icon reviews, guidelines, and icon creation templates. View more information about requesting icons."
+    },
+    {
+      "type": "guideline",
+      "content": "Consonant.\n\nAdobe.com #consonant_general Consonant is an extension of Spectrum that both adds to and complements it by documenting everything you need to design and write for all Adobe marketing web experiences."
+    },
+    {
+      "type": "guideline",
+      "content": "For general questions, post in #spectrum-general. For questions related to a particular implementation, post in its designated Slack channel. If you’re not sure or don’t see the implementation listed here, post in #spectrum-general and the team will assist you. Additionally, view the Developer overview page for more information. React Spectrum #react-spectrum Spectrum Web Components #spectrum-web-components Spectrum iOS #spectrum-ios Spectrum Android #spectrum-android Spectrum Drover #spectrum-desktop Spectrum Tokens #spectrum-tokens"
+    },
+    {
+      "type": "guideline",
+      "content": "For questions about Spectrum's Figma libraries and resources, post in #spectrum-design. If you’re part of Adobe Design and have general Figma administrative or access questions, post in #ad-tooling-support. For those in other orgs, reach out to your manager for approval and follow Adobe’s process to request standard software."
+    }
+  ],
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/contact-us",
+  "lastUpdated": "2026-09-08",
+  "status": "published",
+  "tags": [
+    "Contact",
+    "Slack",
+    "Jira",
+    "Figma",
+    "CCUE",
+    "DXUE",
+    "Brand",
+    "Icons"
+  ]
+}

package/guidelines/content-area-browsing-context.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/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": "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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. Please reach out to the Spectrum Brand team for details on your product’s strategy for colors and usage of gradients."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    }
+  ],
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/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"
+  ]
+}