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

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

@@ -1,67 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/applying-the-type-system.json",
-  "name": "applying-the-type-system",
-  "title": "Applying the type system",
-  "category": "designing",
-  "documentBlocks": [
-    { "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "type": "guideline",
-      "content": "Mobile browsing.\n\nThe same typography principles scale across screen sizes. On native mobile platforms, Spectrum preserves a clear visual hierarchy by adapting type styles to smaller layouts while maintaining consistent relationships between headings, supporting content, and actions. Heading L Title L Body XS Body S Monospace number / Body XXS"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/typography/applying-the-type-system",
-  "lastUpdated": "2026-08-13",
-  "status": "published",
-  "tags": [
-    "typography",
-    "visual hierarchy",
-    "readability",
-    "font sizes",
-    "monospace numbers",
-    "tabular numbers"
-  ]
-}

package/guidelines/bi-directionality.json

@@ -1,57 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/bi-directionality.json",
-  "name": "bi-directionality",
-  "title": "Bi-directionality",
-  "category": "designing",
-  "documentBlocks": [
-    { "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."
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/inclusivity/bi-directionality",
-  "lastUpdated": "2026-09-03",
-  "status": "published",
-  "tags": [
-    "bi-directional",
-    "RTL",
-    "UI mirroring",
-    "right-to-left",
-    "time icons",
-    "back icon",
-    "checkmarks",
-    "slashes",
-    "directional flow",
-    "iconography mirroring"
-  ]
-}

package/guidelines/border-width.json

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

package/guidelines/cognitive.json

@@ -1,197 +0,0 @@
-{
-  "$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/component-spacing.json

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

package/guidelines/contact-us.json

@@ -1,67 +0,0 @@
-{
-  "$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://preview.spectrum.adobe.com/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

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