@adobe/spectrum-design-data 3.3.0 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/accordion.json +32 -102
- package/components/action-bar.json +9 -23
- package/components/action-button.json +52 -92
- package/components/action-group.json +18 -129
- package/components/alert-banner.json +8 -27
- package/components/alert-dialog.json +45 -55
- package/components/avatar-group.json +20 -50
- package/components/avatar.json +44 -123
- package/components/badge.json +66 -160
- package/components/breadcrumbs.json +26 -100
- package/components/button-group.json +32 -63
- package/components/button.json +74 -105
- package/components/calendar.json +8 -67
- package/components/cards.json +31 -46
- package/components/checkbox-group.json +22 -84
- package/components/checkbox.json +33 -96
- package/components/close-button.json +31 -73
- package/components/coach-indicator.json +14 -44
- package/components/coach-mark.json +8 -26
- package/components/color-area.json +20 -93
- package/components/color-handle.json +25 -38
- package/components/color-loupe.json +18 -18
- package/components/color-slider.json +26 -122
- package/components/color-wheel.json +17 -84
- package/components/combo-box.json +56 -188
- package/components/contextual-help.json +87 -126
- package/components/date-picker.json +24 -120
- package/components/divider.json +25 -38
- package/components/drop-zone.json +25 -37
- package/components/field-label.json +22 -59
- package/components/help-text.json +16 -53
- package/components/illustrated-message.json +21 -72
- package/components/in-line-alert.json +13 -53
- package/components/link.json +31 -63
- package/components/list-view.json +15 -73
- package/components/menu.json +51 -180
- package/components/meter.json +35 -76
- package/components/number-field.json +34 -168
- package/components/picker.json +48 -187
- package/components/popover.json +47 -123
- package/components/progress-bar.json +33 -105
- package/components/progress-circle.json +25 -55
- package/components/radio-button.json +14 -67
- package/components/radio-group.json +34 -131
- package/components/rating.json +9 -38
- package/components/search-field.json +40 -125
- package/components/segmented-control.json +27 -69
- package/components/select-box.json +29 -96
- package/components/side-navigation.json +28 -69
- package/components/slider.json +45 -154
- package/components/standard-dialog.json +16 -88
- package/components/status-light.json +51 -133
- package/components/steplist.json +5 -24
- package/components/swatch-group.json +19 -55
- package/components/swatch.json +24 -79
- package/components/switch.json +42 -79
- package/components/table.json +26 -73
- package/components/tabs.json +35 -52
- package/components/tag-field.json +14 -60
- package/components/tag-group.json +22 -55
- package/components/tag.json +27 -77
- package/components/takeover-dialog.json +10 -61
- package/components/text-area.json +55 -204
- package/components/text-field.json +48 -169
- package/components/thumbnail.json +22 -63
- package/components/toast.json +30 -47
- package/components/tooltip.json +37 -84
- package/components/tree-view.json +51 -146
- package/fields/structure.json +1 -2
- package/guidelines/ai-resource-guide.json +42 -0
- package/guidelines/app-frame-overview.json +45 -44
- package/guidelines/applying-the-type-system.json +71 -0
- package/guidelines/attention-hierarchy.json +13 -22
- package/guidelines/background-layers.json +84 -10
- package/guidelines/bi-directionality.json +57 -0
- package/guidelines/border-width.json +70 -0
- package/guidelines/brand.json +24 -12
- package/guidelines/cognitive.json +229 -0
- package/guidelines/colors.json +55 -17
- package/guidelines/component-spacing.json +65 -0
- package/guidelines/contact-us.json +27 -0
- package/guidelines/containers.json +21 -28
- package/guidelines/content-area-browsing-context.json +73 -0
- package/guidelines/creating-bluelines-browsing-context.json +71 -0
- package/guidelines/design-tokens.json +186 -0
- package/guidelines/developer-overview.json +33 -9
- package/guidelines/drop-shadow.json +76 -0
- package/guidelines/faqs.json +100 -9
- package/guidelines/fonts.json +33 -14
- package/guidelines/grammar-and-mechanics.json +276 -0
- package/guidelines/grays.json +17 -44
- package/guidelines/header-browsing-context.json +40 -0
- package/guidelines/icon-fundamentals.json +7 -18
- package/guidelines/illustration.json +120 -0
- package/guidelines/in-product-word-list.json +25 -0
- package/guidelines/inclusive-design.json +101 -0
- package/guidelines/inclusive-ux-writing.json +34 -0
- package/guidelines/internationalization.json +103 -0
- package/guidelines/layout-spacing.json +39 -0
- package/guidelines/manifest.json +280 -16
- package/guidelines/motion.json +18 -13
- package/guidelines/object-styles-overview.json +17 -0
- package/guidelines/principles.json +7 -8
- package/guidelines/resources.json +29 -15
- package/guidelines/rounding.json +85 -0
- package/guidelines/side-navigation-browsing-context.json +74 -0
- package/guidelines/spacing-overview.json +78 -0
- package/guidelines/states.json +16 -11
- package/guidelines/support.json +125 -0
- package/guidelines/typography-overview.json +39 -0
- package/guidelines/typography-system.json +212 -0
- package/guidelines/using-icons.json +32 -47
- package/guidelines/voice-and-tone.json +51 -0
- package/guidelines/whats-new.json +21 -0
- package/guidelines/writing-about-people.json +99 -0
- package/guidelines/writing-for-errors.json +140 -0
- package/guidelines/writing-for-onboarding.json +123 -0
- package/guidelines/writing-for-readability.json +66 -0
- package/guidelines/writing-with-visuals.json +78 -0
- package/package.json +2 -2
- package/tokens/layout.tokens.json +88 -0
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/bi-directionality.json",
|
|
4
|
+
"name": "bi-directionality",
|
|
5
|
+
"title": "Bi-directionality",
|
|
6
|
+
"category": "designing",
|
|
7
|
+
"documentBlocks": [
|
|
8
|
+
{ "type": "purpose", "content": "Bi-directionality" },
|
|
9
|
+
{
|
|
10
|
+
"type": "guideline",
|
|
11
|
+
"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."
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"type": "guideline",
|
|
15
|
+
"content": "Mirror individual components.\n\nComponents and their constituting parts are affected by user interface mirroring. Mirroring guidelines for each component are available on their respective pages, when applicable. Image: Key example showing the correct usage of a bi-directional component. (source: https://spectrum.adobe.com/foundations/inclusivity/media_18e5aff774a8531f0cf4fb9dc3f5a154b7f6ef74a.png?width=750&format=png&optimize=medium)"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"type": "guideline",
|
|
19
|
+
"content": "Don't mirror components that represent time.\n\nComponents that are used to represent the concept of time should not be mirrored (e.g., a video player). Image: Key example showing the incorrect usage of a bi-directional component. (source: https://spectrum.adobe.com/foundations/inclusivity/media_19187d9d281d10a389dfd6809de49d18be985e1fe.png?width=750&format=png&optimize=medium)"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"type": "guideline",
|
|
23
|
+
"content": "Mirror composite images with directional flow.\n\nComposite images that depict a directional flow or convey a linear narrative require a dedicated bi-directional version since the sense of the narrative, reading from right to left, could appear reversed. Image: Key example of correct usage of bi-directional flow in a linear narrative. (source: https://spectrum.adobe.com/foundations/inclusivity/media_1a664a66a07b819bd3aff649b113040ff5097d898.png?width=750&format=png&optimize=medium)"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"type": "guideline",
|
|
27
|
+
"content": "Mirror icons that represent movement.\n\nIcons that depict horizontal movement (e.g., back icon) should be mirrored to follow the flow of the right-to-left interface. Image: Key examples of mirror icons that represent movement. (source: https://spectrum.adobe.com/foundations/inclusivity/media_195d5a351b079313e2e11c0dae134d74588e500f7.png?width=750&format=png&optimize=medium)"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"type": "guideline",
|
|
31
|
+
"content": "Don't mirror icons that represent time.\n\nIcons that refer to the passage of time (e.g., clock icon) should not be mirrored in right-to-left interfaces. Image: Key example of incorrectly mirroring icons that represent time. (source: https://spectrum.adobe.com/foundations/inclusivity/media_1b374016f329125585285f97e193eebd2acbc4e4a.png?width=750&format=png&optimize=medium)"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"type": "guideline",
|
|
35
|
+
"content": "Don't mirror checkmarks.\n\nCheckmarks are never mirrored in right-to-left interfaces. Image: Key example of illustrating not to mirror the checkmark component. (source: https://spectrum.adobe.com/foundations/inclusivity/media_1f3f57010df37d6833fadad8b45af031d78e543a8.png?width=750&format=png&optimize=medium)"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"type": "guideline",
|
|
39
|
+
"content": "Don't mirror slashes.\n\nSlashes are never mirrored in right-to-left interfaces. Image: Key example illustrating not to mirror slash marks. (source: https://spectrum.adobe.com/foundations/inclusivity/media_1eaa9deb489f9741568d5c8549da5fbb7742191c4.png?width=750&format=png&optimize=medium)"
|
|
40
|
+
}
|
|
41
|
+
],
|
|
42
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/bi-directionality",
|
|
43
|
+
"lastUpdated": "2026-09-03",
|
|
44
|
+
"status": "published",
|
|
45
|
+
"tags": [
|
|
46
|
+
"bi-directional",
|
|
47
|
+
"RTL",
|
|
48
|
+
"UI mirroring",
|
|
49
|
+
"right-to-left",
|
|
50
|
+
"time icons",
|
|
51
|
+
"back icon",
|
|
52
|
+
"checkmarks",
|
|
53
|
+
"slashes",
|
|
54
|
+
"directional flow",
|
|
55
|
+
"iconography mirroring"
|
|
56
|
+
]
|
|
57
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/border-width.json",
|
|
4
|
+
"name": "border-width",
|
|
5
|
+
"title": "Border width",
|
|
6
|
+
"category": "designing",
|
|
7
|
+
"documentBlocks": [
|
|
8
|
+
{ "type": "purpose", "content": "Border width" },
|
|
9
|
+
{
|
|
10
|
+
"type": "guideline",
|
|
11
|
+
"content": "Image: Faint blue icon of a rounded square containing a small toggle switch and rounded rectangle, illustrating minimal border use where borders aren't needed. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_17c3007ebae0f53d3422c819976245b9093c4f4f4.png?width=750&format=png&optimize=medium) Image: Three horizontal pink gradient bars of consistent border width, illustrating consistent border styling across elements. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1e8f2ff262e3c29774ba33c7130140c6fb22bf3a1.png?width=750&format=png&optimize=medium)"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"type": "guideline",
|
|
15
|
+
"content": "Borders when necessary only.\n\nBorders are an essential way to create separation, but they can also add visual noise to an interface by filling and disrupting negative space. As a result, they should be used sparingly, only when necessary. For example, a divider might sometimes be needed to separate two distinct action button groups. Or, an object might have a border to demarcate distinct areas, such as separating a panel or card from the rest of the content on a page. Whenever possible, achieve separation through other techniques, like negative space and section titles, instead of using borders."
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"type": "guideline",
|
|
19
|
+
"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."
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"type": "guideline",
|
|
23
|
+
"content": "Borders are primarily used to define component boundaries and organize content within layouts. Different border width styles communicate different levels of emphasis and separation. Spectrum supports two border widths that are used within in-product UI contexts."
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"type": "guideline",
|
|
27
|
+
"content": "Image: UI examples showing medium border widths: a radio button, checkbox, and toggle switch outline, a focused pill-shaped button with a blue border, an unfocused pill button, and a bordered text input field with label and value. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1a088c65b63f7e399bb131a44ff80e74953321fff.png?width=750&format=png&optimize=medium)"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"type": "guideline",
|
|
31
|
+
"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."
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"type": "guideline",
|
|
35
|
+
"content": "Image: A list UI with two collapsible \"Title\" sections separated by thin hairline borders, and a checklist titled \"Fruits\" with thin-bordered rows for Apples, Oranges, and Pears. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1435bfbbdbca2c110617d050031937775d717f036.png?width=750&format=png&optimize=medium)"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"type": "guideline",
|
|
39
|
+
"content": "Small borders (1 px) are used in specific components and patterns where there’s greater density (for example, in accordions and tables)."
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"type": "guideline",
|
|
43
|
+
"content": "Border treatments vary depending on their context. The following examples show how to apply borders across common interface patterns to create clear separation while maintaining a consistent appearance."
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"type": "guideline",
|
|
47
|
+
"content": "Image: Adobe GenStudio interface with two magnified callouts comparing a rounded corner border end cap against a squared-off border end cap on a sidebar element. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_149631f31e7ffca6e95f54f0128c7dadc81cc445b.png?width=750&format=png&optimize=medium)"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"type": "guideline",
|
|
51
|
+
"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."
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"type": "guideline",
|
|
55
|
+
"content": "Image: Close-up of an app toolbar with a bordered rounded container grouping a percentage dropdown, share icon, upload icon, and blue Download button, next to ungrouped icon buttons. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1fd7f0c9ddbc8acc442c352f72f2f9f1888c96383.png?width=750&format=png&optimize=medium)"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"type": "guideline",
|
|
59
|
+
"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."
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"type": "guideline",
|
|
63
|
+
"content": "Platform availability.\n\nThese tokens are currently available on web. Guidance for additional platforms will be added in a future release. Style Token Value Small border-width-100 1 px Medium border-width-200 2 px Large border-width-400 4 px"
|
|
64
|
+
}
|
|
65
|
+
],
|
|
66
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/border-width",
|
|
67
|
+
"lastUpdated": "2026-08-14",
|
|
68
|
+
"status": "published",
|
|
69
|
+
"tags": ["border width", "divider"]
|
|
70
|
+
}
|
package/guidelines/brand.json
CHANGED
|
@@ -8,43 +8,55 @@
|
|
|
8
8
|
{ "type": "purpose", "content": "Brand" },
|
|
9
9
|
{
|
|
10
10
|
"type": "guideline",
|
|
11
|
-
"content": "
|
|
11
|
+
"content": "There are a number of key assets that are used systematically across interfaces."
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
"type": "guideline",
|
|
15
|
-
"content": "
|
|
15
|
+
"content": "Product logos, app icons, and lockups.\n\nA product logo or tile color does not change, even if the background is dark. One-color product logos are for usage as workflow icons. Image: \"Adobe Express branding with colorful 'A' app icon and text lockups shown in horizontal and vertical orientations.\" (source: https://spectrum.adobe.com/foundations/media_1b535db2549466c3c1f81290211e8cb97e3b0277c.png?width=750&format=png&optimize=medium)"
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
18
|
"type": "guideline",
|
|
19
|
-
"content": "
|
|
19
|
+
"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."
|
|
20
20
|
},
|
|
21
21
|
{
|
|
22
22
|
"type": "guideline",
|
|
23
|
-
"content": "
|
|
23
|
+
"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."
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
"type": "guideline",
|
|
27
|
-
"content": "
|
|
27
|
+
"content": "Color has historically been an extremely important part of Adobe’s brand. Bringing more color into Spectrum 2 lets product experiences draw a much closer connection to marketing materials and product branding. Spectrum’s 6.0.0 color system didn’t throughly incorporate the Adobe brand colors, even though in-product UI colors are so close to them in both hue and saturation. With the colors for Spectrum 2, we’ve made some shifts to ensure that brand colors are better represented throughout product experiences. Image: Color-coded Adobe app icons with hex codes and names: Ai (Orange), Ps (Cyan), Dn (Celery), Ae (Indigo), Xd (Fuchsia), Id (Magenta). (source: https://spectrum.adobe.com/foundations/media_140ed33e3bdfc0215811463a3914f62aa3b83debd.png?width=750&format=png&optimize=medium) Brand colors used outside of in-product illustrations and splash imagery may differ slightly from the Spectrum 2 colors. Image: Color chart comparing brand colors and spectrum colors for Adobe apps, showing hex codes and color variations side by side. (source: https://spectrum.adobe.com/foundations/media_19e48a995352b0a44ae5ac4478d0b0780916e06e1.png?width=750&format=png&optimize=medium) Along with Adobe’s primary brand color palette (red, black, grey, and white), there’s also an extended color palette that brings a modern and bold personality to the Adobe brand. These colors are the starting point for graphics, diagrams and icons, illustrations, and backgrounds — and there are additional considerations for colors in Creative Cloud, Document Cloud, Experience Cloud, and Adobe Express for Spectrum 2 experiences."
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
"type": "guideline",
|
|
31
|
-
"content": "
|
|
31
|
+
"content": "Creative Cloud uses Adobe red and six product-specific colors, each with corresponding light and dark values. Image: Color palette grid with Adobe app icons (Ai, Dn, Ps, Ae, Xd, Id) above corresponding color swatches and hex codes. (source: https://spectrum.adobe.com/foundations/media_1fc8580f8a8ad1855ad6d91b5e412d1323e574af9.png?width=750&format=png&optimize=medium)"
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
34
|
"type": "guideline",
|
|
35
|
-
"content": "
|
|
35
|
+
"content": "Document Cloud’s colors align to Spectrum. There’s three primary product colors plus Adobe red, as well as six secondary colors. Image: Grid of color swatches with hex codes, featuring Adobe Acrobat icons in red, purple, and teal at the top row. (source: https://spectrum.adobe.com/foundations/media_1e553a0a604bb2734012ea65f4a3545209e9749b7.png?width=750&format=png&optimize=medium)"
|
|
36
36
|
},
|
|
37
37
|
{
|
|
38
38
|
"type": "guideline",
|
|
39
|
-
"content": "
|
|
39
|
+
"content": "Experience Cloud’s colors align to Spectrum. The foundational apps use cool colors, while the functional apps use warm colors. Image: Diagram categorizing \"Foundational\" and \"Functional\" elements with labeled colored squares: Insights, Content, Data, Setup, Marketing, Ads, Commerce. (source: https://spectrum.adobe.com/foundations/media_18af562eadd246ad3934851d77fca39cfca07bed5.png?width=750&format=png&optimize=medium)"
|
|
40
40
|
},
|
|
41
41
|
{
|
|
42
42
|
"type": "guideline",
|
|
43
|
-
"content": "
|
|
43
|
+
"content": "Adobe Express uses three colors. Indigo is used for a fill accent color and for highlighting main metaphors. Spectrum gray is the main stroke color. Image: Three colored squares with hex codes: light purple (#DEDEF9), blue (#5C5CE0), and black (#242424) displayed in a row. (source: https://spectrum.adobe.com/foundations/media_1704be25c74bac41af593635d0107205d2d97aec0.png?width=750&format=png&optimize=medium)"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"type": "guideline",
|
|
47
|
+
"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."
|
|
44
48
|
}
|
|
45
49
|
],
|
|
46
|
-
"sourceUrl": "https://
|
|
47
|
-
"lastUpdated": "2026-
|
|
50
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/brand",
|
|
51
|
+
"lastUpdated": "2026-09-10",
|
|
48
52
|
"status": "published",
|
|
49
|
-
"tags": [
|
|
53
|
+
"tags": [
|
|
54
|
+
"Brand assets",
|
|
55
|
+
"Product logos",
|
|
56
|
+
"App icons",
|
|
57
|
+
"Loading screens",
|
|
58
|
+
"Brand colors",
|
|
59
|
+
"Gradients",
|
|
60
|
+
"Creative Cloud"
|
|
61
|
+
]
|
|
50
62
|
}
|
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/cognitive.json",
|
|
4
|
+
"name": "cognitive",
|
|
5
|
+
"title": "Cognitive",
|
|
6
|
+
"category": "designing",
|
|
7
|
+
"documentBlocks": [
|
|
8
|
+
{
|
|
9
|
+
"type": "purpose",
|
|
10
|
+
"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."
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"type": "guideline",
|
|
14
|
+
"content": "Neurodivergent users process information in a variety of ways. While every lived experience is unique, these are some common traits that can be used to understand challenges and decision-making processes."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"type": "guideline",
|
|
18
|
+
"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."
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"type": "guideline",
|
|
22
|
+
"content": "Lateral thinking (over linear).\n\nDivergent, holistic, and tangential thinking as opposed to convergent, sequential thought processes."
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"type": "guideline",
|
|
26
|
+
"content": "Gapped working memory.\n\nStruggles to filter out “noise” and focus on the information at hand, creating gaps in working memory."
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"type": "guideline",
|
|
30
|
+
"content": "Ambiguity sensitivity.\n\nFinds ambiguity everywhere and sees many possible interpretations and conclusions."
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"type": "guideline",
|
|
34
|
+
"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."
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"type": "guideline",
|
|
38
|
+
"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."
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"type": "guideline",
|
|
42
|
+
"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."
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"type": "guideline",
|
|
46
|
+
"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."
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"type": "guideline",
|
|
50
|
+
"content": "While it is often assumed that more choices create more flexibility and control, the opposite is true - especially for neurodivergent users. Too many options make it difficult for users to compare them and make a satisfactory choice."
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"type": "guideline",
|
|
54
|
+
"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."
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"type": "guideline",
|
|
58
|
+
"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."
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"type": "guideline",
|
|
62
|
+
"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."
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"type": "guideline",
|
|
66
|
+
"content": "Consistent and intentional UI layout can provide neurodivergent users the support they need to complete challenging tasks."
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"type": "guideline",
|
|
70
|
+
"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."
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"type": "guideline",
|
|
74
|
+
"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."
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"type": "guideline",
|
|
78
|
+
"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."
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"type": "guideline",
|
|
82
|
+
"content": "It can be even more challenging for neurodivergent users to complete tasks within workflows that move across multiple products, product features, or tools. They can easily become stuck when relevant information is missing or hidden, or located in an unexpected place. They’re more likely to quit a workflow if a clear path forward is not obvious."
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"type": "guideline",
|
|
86
|
+
"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."
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"type": "guideline",
|
|
90
|
+
"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."
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"type": "guideline",
|
|
94
|
+
"content": "Complex or ambiguous workflows can cause major challenges for neurodivergent users. Too many options can easily overwhelm, and fear of failure can shatter user confidence. When designing product workflows, it’s important to continuously evaluate and consider supportive measures to help users complete their tasks."
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"type": "guideline",
|
|
98
|
+
"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."
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"type": "guideline",
|
|
102
|
+
"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."
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"type": "guideline",
|
|
106
|
+
"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."
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"type": "guideline",
|
|
110
|
+
"content": "Task management is especially important for neurodivergent users to stay focused on the work they should be doing rather than all the work they could be doing. But task management can be challenging because neurodivergent brains struggle to organize, focus on, and break down large tasks."
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"type": "guideline",
|
|
114
|
+
"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."
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"type": "guideline",
|
|
118
|
+
"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."
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"type": "guideline",
|
|
122
|
+
"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."
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"type": "guideline",
|
|
126
|
+
"content": "Neurodivergent users often welcome proactive AI interventions, recognizing their potential to enhance working memory, offer a judgment-free collaborator, and serve as a motivating presence. These tools can bridge gaps in memory, provide support without fear of rejection, and act as a body-double to help maintain focus and motivation."
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"type": "guideline",
|
|
130
|
+
"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."
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"type": "guideline",
|
|
134
|
+
"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."
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"type": "guideline",
|
|
138
|
+
"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."
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"type": "do-dont",
|
|
142
|
+
"content": "Avoid using multiple browser tabs and windows in a single workflow",
|
|
143
|
+
"dont": "If multiple tabs or windows are required, system information should pass easily between them."
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"type": "guideline",
|
|
147
|
+
"content": "Use inline customization options.\n\nAllow users to modify content without having to navigate to a separate menu. Support in-place editing."
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"type": "guideline",
|
|
151
|
+
"content": "Limit amount of options.\n\nReduce choices in a workflow or task to limit decision paralysis and overwhelm."
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"type": "guideline",
|
|
155
|
+
"content": "Notify user of transitions between containers.\n\nIf a context switch is necessary, prime users for it. Don’t hide transition information."
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"type": "guideline",
|
|
159
|
+
"content": "Offer a persistent frame of reference.\n\nProvide tools to orient users, even if the context seems obvious."
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"type": "guideline",
|
|
163
|
+
"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."
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"type": "guideline",
|
|
167
|
+
"content": "Support user agency.\n\nDon’t override user customizations with automated personalization."
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"type": "guideline",
|
|
171
|
+
"content": "Promote transparent content layout.\n\nAvoid hiding relevant content or dispersing it across multiple containers."
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"type": "guideline",
|
|
175
|
+
"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."
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"type": "guideline",
|
|
179
|
+
"content": "If you’re new to neuroinclusive design, it can be difficult to know what product features can best support neurodiverse users. Here are some ideas to try:"
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"type": "guideline",
|
|
183
|
+
"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"
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"type": "guideline",
|
|
187
|
+
"content": "Content.\n\nIntegrate or mimic window tiling capabilities, like those found in operating systems or screen organizing plugins"
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
"type": "guideline",
|
|
191
|
+
"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"
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"type": "guideline",
|
|
195
|
+
"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"
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"type": "guideline",
|
|
199
|
+
"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."
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
"type": "guideline",
|
|
203
|
+
"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."
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"type": "guideline",
|
|
207
|
+
"content": "Project Doombox wiki Project Doombox Goldmine research readout #project-doombox Slack channel"
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"type": "guideline",
|
|
211
|
+
"content": "Please post questions, feedback, or suggestions in the #project-doombox Slack channel."
|
|
212
|
+
}
|
|
213
|
+
],
|
|
214
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/cognitive",
|
|
215
|
+
"lastUpdated": "2026-09-03",
|
|
216
|
+
"status": "published",
|
|
217
|
+
"tags": [
|
|
218
|
+
"neurodivergence",
|
|
219
|
+
"neuroinclusion",
|
|
220
|
+
"cognition",
|
|
221
|
+
"ADHD",
|
|
222
|
+
"autism",
|
|
223
|
+
"dyslexia",
|
|
224
|
+
"pattern recognition",
|
|
225
|
+
"lateral thinking",
|
|
226
|
+
"working memory",
|
|
227
|
+
"Rejection Sensitive Dysphoria (RSD)"
|
|
228
|
+
]
|
|
229
|
+
}
|