@adobe/spectrum-design-data 3.3.0 → 3.4.0

package/guidelines/icon-fundamentals.json

@@ -5,10 +5,7 @@
   "title": "Icon fundamentals",
   "category": "designing",
   "documentBlocks": [
-    {
-      "type": "purpose",
-      "content": "### Icons designed to balance personality with function\n\nSpectrum 2 icons are crisp, modern, and clean. They have more personality in the form of rounder corners and motion, and use more playful but modern metaphors when there's the need to have more brand expression (for example, in feature onboarding, marketing, and Learn content). The updated icon style picks up the clean and irreducible style of Spectrum and supports the efforts to bring a unified experience to all Adobe products.\n\n### What's been updated?\n\nMost noticeably, there's been a switch to an outline style from the previous style of icons as being filled. There's also an updated priority for using meaningful metaphors consistently, focusing on content, and helping users navigate across interfaces. This combines into a cohesive theme: **icons signal familiarity**. In a product portfolio as complex as Adobe's, this familiarity is expressed through a consistent and cohesive usage of UI elements, colors, patterns, and icon metaphors.\n\nThe purpose of the updated icon style isn't just about functionality or the Adobe brand: it's about how many intricate details add up to make a big difference in the user experience. Using icon metaphors consistently makes Adobe's products usable."
-    },
+    { "type": "purpose", "content": "Icon fundamentals" },
     {
       "type": "guideline",
       "content": "How the Spectrum 2 icon set was developed.\n\nSeveral teams collaborated on the overall Spectrum 2 design language updates. One goal for iconography was to build out the current style into a unified icon language, to more closely align with our multi-platform design approach and to look and feel cohesive with the iOS and Android iconography systems. Previous testing and the launch of the outline icon style for Acrobat Modern Viewer and Adobe Express provided insights that informed style refinements."
@@ -19,27 +16,19 @@
     },
     {
       "type": "guideline",
-      "content": "The Spectrum 2 icon style aligns with contemporary UI and icon trends and is optimized for where the icons are viewed: displays across desktop and mobile. With a bigger focus on high-res screens, we've prioritized spacing and contrast for a more expressive range — leaving behind the problem of pixel-perfect snapping."
-    },
-    {
-      "type": "guideline",
-      "content": "We're also aligning the stroke weight into 4 subdivisions inside the pixel unit to create balanced stroke rendering with a 1.5 px stroke weight. This weight has been proven to work well with mobile retina screens, and it allows for a stronger appearance of the line renderings of icon shapes."
-    },
-    {
-      "type": "guideline",
-      "content": "Icons are outlined. They're mostly monochrome to allow for colored accents in badges for status updates like alerts, information, and notifications. Some icons also use fill and a stroke to illustrate a concept more clearly (for example, the favorite star rating, or third-party logos)."
+      "content": "The Spectrum 2 icon style aligns with contemporary UI and icon trends and is optimized for where the icons are viewed: displays across desktop and mobile. With a bigger focus on high-res screens, we've prioritized spacing and contrast for a more expressive range — leaving behind the problem of pixel-perfect snapping. We're also aligning the stroke weight into 4 subdivisions inside the pixel unit to create balanced stroke rendering with a 1.5 px stroke weight. This weight has been proven to work well with mobile retina screens, and it allows for a stronger appearance of the line renderings of icon shapes. Image: Diagram showing and example of Spectrum 2 icon stroke weight and spacing. Within 20 pixels, an icons stroke weight is divided into 4 areas. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_186e10215cc2ec94ea4794b27b57720bad8aee6ce.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Occasionally, there are duotone icons to indicate a perceived change of direction, exclusion, transition, or speed (like in flip horizontal/vertical)."
+      "content": "Icons are outlined. They're mostly monochrome to allow for colored accents in badges for status updates like alerts, information, and notifications. Some icons also use fill and a stroke to illustrate a concept more clearly (for example, the favorite star rating, or third-party logos). Occasionally, there are duotone icons to indicate a perceived change of direction, exclusion, transition, or speed (like in flip horizontal/vertical). Image: Chart showing 105 different examples of Spectrum 2 icons and demonstrating the visual style. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1254ce1f133d89a15f178e50f730facf76df26772.png?width=750&format=png&optimize=medium) Various examples of Spectrum 2 icons. Image: Diagram of the relationship between the Spectrum icons and the Adobe Express icons and how that merges into the Spectrum 2 icons. Spectrum icons are rational, classic, serious, and unique. Adobe Express icons are easy, trendy, playful, and familiar. Spectrum 2 icons combine these to be more expressive and also incorporate a sense of motion. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1569649220eef056016b5a0c7e8406d29712e6d62.png?width=750&format=png&optimize=medium) Similarities of icon styles across Spectrum and Adobe Express. Image: Chart showing history of Adobe's icon styles. 2018, Spectrum icons, 18 pixel canvas with 1 or 2 pixel stroke. 2020, Adobe Express icons, 18 pixel canvas with 2 pixel stroke. 2020, Document Cloud Modern icons, 18 pixel canvas with 1 and a half pixel stroke. 2023, Spectrum 2, 20 pixel canvas with 1 and a half pixel stroke. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_169156cc71c2b273a0cd95b4d79fc3d82d009e8ee.png?width=750&format=png&optimize=medium) How icons have evolved over time."
     },
     {
       "type": "guideline",
-      "content": "Characteristics.\n\nAdobe products often have complex controls, so our icon metaphors are **clear**, **functional**, and **additive to experiences**. They describe tools and topics as simply and accurately as possible. Icons that attempt to relay too much information often become busy and don't read well at small sizes.\n\nThe shapes of the icons themselves are based on predefined **key shapes** to ensure a balanced look and feel across interfaces."
+      "content": "Characteristics.\n\nAdobe products often have complex controls, so our icon metaphors are clear, functional, and additive to experiences. They describe tools and topics as simply and accurately as possible. Icons that attempt to relay too much information often become busy and don't read well at small sizes. The shapes of the icons themselves are based on predefined key shapes to ensure a balanced look and feel across interfaces. Image: Three examples of key shapes in Spectrum 2 icons, square, circle, and rectangle. A square becomes a document icon. A circle becomes a compass icon. A rectangle becomes a file folder icon. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1705813a0cc859925174da0e7e30ee6682bf7faee.png?width=750&format=png&optimize=medium) Examples of key shapes. Image: Examples of literal and abstract metaphors. Literal metaphor, house icon represents the concept of Home. Abstract metaphor, an icon with an assemblage of squares represents the concept of Group. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_12ffff18fd3f6c09e088eb092d6c3f227e948a5c9.png?width=750&format=png&optimize=medium) Image: Examples of platform standard icons for Share. iOS uses one icon for share while Android uses another. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_138e19a3781dffed7434c74ff313f64d711c91378.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/icon-fundamentals/",
-  "lastUpdated": "2026-02-02",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/icons-and-illustrations/icon-fundamentals",
+  "lastUpdated": "2026-09-24",
   "status": "published",
-  "tags": ["designing"]
+  "tags": ["icons", "outline", "monochrome", "stroke-weight", "iconography"]
 }

package/guidelines/illustration.json

@@ -0,0 +1,120 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/illustration.json",
+  "name": "illustration",
+  "title": "Illustration",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Illustration" },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 (S2) evolved around the need to bridge the gap between purely professional tools and more consumer-orientated applications, creating updates that prioritize more approachability, a clearer sense of attention hierarchy, and a stronger connection to product branding. Illustrations are a major part of how Spectrum 2 creates such experiences. Image: Photoshop web interface with options to upload images, quick actions, start from scratch, and tutorials. Blue header highlights AI tools. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1e2e92e2f9fe5ea738e0a0e068ed9a5849c918cef.png?width=750&format=png&optimize=medium) The S2 illustration styles reflect these ideas by introducing both clear, friendly UI illustrations and expressive brand illustrations with colors that are closely connected to Adobe’s product categories. Updated shapes and forms make clearer connections to Spectrum 2 iconography. The styles work as a dynamic, flexible, and robust system that supports foundational attention hierarchy principles through a range of options. They work across UI illustrations, empty states, cards, banners, and more. These illustrations were also developed with product implementation as top-of-mind, and have been intentionally created to support export as SVG native files — making the assets lean and easy to implement across many frameworks. With S2, we’re also introducing a new style of illustrations: gradient illustrations. The gradient swatches are a combination of the product-specific brand colors within the S2 color system and a set of shapes that connect to the Spectrum 2 principles: rational, human, focused, and collaborative. Together, this brings a dynamic sense of a product’s brand presence directly into the user experience. Gradient illustrations are engaging and positive, and add moments of delight. They can draw attention to specific areas (such as a drop zone or an empty state), and can encourage users to take a specific, intended action, like beginning a project or uploading files. They can also be applied to cards, banners, and backgrounds. Please note that parts of this illustration system are still in exploration, and will be added to these guidelines once they’re more defined. Animation is also currently being explored. Image: Grid of app icons and colorful symbols, including bells, confetti, chat bubbles, lightbulbs, and clouds, in varied sizes and styles. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_140407966f5b1950586ef661418a221a334950913.png?width=750&format=png&optimize=medium) Image: Diagram that shows the four forms by which the gradient fills are created, mapped to the four Spectrum principles. The diamond shape from the Spectrum logo stands for Rational. A radial gradient stands for Human. A circle with a linear gradient fill with sharper edges stands for Focused. A shape of two connected circles stands for Collaborative. These shapes are then combined with colors from the Spectrum 2 color system. The colors are arranged to overlap, to make the gradients flow into each other. An example of a final illustration using this method that brings everything together. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_17220922c12a43df682d231f96d133f3e9b7931ea.png?width=750&format=png&optimize=medium) Image: Examples of components that use gradient fills. A smaller card, a medium sized card, and a large banner, all with sample text. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_171e69ea467e4a5bf577681d3fa06681d1f2e65b0.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Comparing Spectrum 1 and Spectrum 2.\n\nHere’s a summary of the main updates that you’ll notice with Spectrum 2 illustrations, compared to the style of Spectrum 1: Similar to icons and text, all linear illustrations now use Spectrum gray 800 instead of gray 500. This meets accessibility standards by ensuring visibility regardless of the background color. These illustrations have a much closer connection to the icon metaphors and forms, for a consistent and cohesive visual language. Linear illustrations feature rounder and friendlier forms, making them feel more approachable. The compositions are also less cluttered and more clear, to promote focus and scaleability. The S2 illustrations come in three sizes: S (48×48 px), M (96×96 px), and L (160×160 px). These sizes are in line with the spacing tokens, and provide more flexibility for layouts. With the introduction of gradient illustrations, there's now an option for illustrations with more color. Color creates more expressiveness and brand integration, as well as supports multiple levels of attention hierarchy. Image: A diagram showing a comparison of the illustration styles in Spectrum 1 to Spectrum 2. Linear illustrations have been updated, evolved from the Spectrum 1 outline style. Gradient illustrations replace the Spectrum 1 filled illustration style. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_13eea667b3b4871c800862488c41d418e3980dc9f.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 illustrations have two styles: linear (monochromatic) and gradient (color). Both have specific use cases. Do not create your own illustrations, or use 3rd-party assets. Illustrations are very visible parts of our design system that drive the consistent look and feel to our products, so they need to be used strategically and thoughtfully."
+    },
+    {
+      "type": "guideline",
+      "content": "The Spectrum 2 linear illustrations are an evolution of the Spectrum 1 outline style. The Spectrum 2 icons serve as the blueprint; they follow the same metaphors and are drawn in a similar way. Linear illustrations are monochromatic. They use the same color token as the icons (S2 / gray 800), and switch colors according to dark and light UI. Image: Five examples of different Spectrum 2 linear illustrations in the three sizes, large, medium, and small. A notifications bell, a celebratory confetti popper, a comment bubble, a lit light bulb, and a cloud. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_15e48d825bc32d09b2377d937de58ecdc09f786ff.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Sizes.\n\nLinear illustrations come in three sizes: small (48×48 px), medium (96×96 px), and large (160×160 px). Small and medium are the most commonly used sizes; large is not used as often. For most use cases, the medium size works well across mobile, tablet, and desktop. Image: Comparison of the three different sizes of the linear illustrations, and examples of those same sizes in different components: empty states and a drag and drop state. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1b2b3bd8b3cf1fc8a4402bc506a62335dec3844f2.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Color.\n\nThe linear illustrations use Spectrum gray 800, and switch between light and dark UI. For production, the SVGs in the A4U libraries use embedded tokens, similar to the structure of the icons. This ensures that they can programmatically switch depending on UI brightness or color theme. Image: Example of the same linear illustration in light and dark UI, showing the color values and a snippet of the code block in the SVG asset that controls the fill color. In light UI, a paper airplane illustration uses the token Gray 800, hex 292929. In dark UI, it uses Gray 800, hex DBDBDB. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_161598787a4fc6bd5eb836f1803997f872a4a2b86.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Naming convention.\n\nLinear illustrations use the following naming convention: Prefix identifies it as part of a larger group of assets: in this case, S2 (Spectrum 2). Type is the type of the asset: lin for linear illustration. Illustration name is in camel case, and there are no empty spaces or individual characters allowed. Illustration size is stated in pixels at @1x. Filetype suffix indicates the asset format, like SVG or PNG. Image: A breakdown of the correct linear illustration naming convention: prefix, type, illustration name, size, and filetype suffix. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_18d304a08e374f9964e12890ec38c9bba85567f79.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Use cases.\n\nLinear illustrations are straightforward and clear UI illustrations for a variety of use cases, such as empty states or error messages. They support calls to action — like a drop zone illustration, or an empty state illustration — that explain the next steps for how to use the interface in order to get started or move forward. A good example of a use case for a linear illustration is with the illustrated message component. Image: Example of a linear illustration used in the illustrated message component, in both light and dark UI. A lock illustration, with text This album is private. You can create a link to share it with others. Two buttons, main action Create link, secondary action Not now. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1f87c9768563bddfd65060b06d1e681715feb80c7.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Gradient illustrations are new to our design system with the update to Spectrum 2. Compared to linear illustrations, they’re much bolder. They can help users understand a message more quickly, or motivate them to perform a specific action. Gradient illustrations also introduce color, which makes them more expressive, reinforces product branding, and supports attention hierarchy. They use distinct pairings of colors and shapes that are tied to the product brand categories and the Spectrum 2 principles. This style replaces the Spectrum 1 filled illustration style. Image: Five examples of different Spectrum 2 gradient illustrations in the three sizes, large, medium, and small. A notifications bell, a celebratory confetti popper, a comment bubble, a lit light bulb, and a cloud. All use various gradients that include colors like orange, red, blue, purple, and green. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_129f033dee3ead54276751e0d47b1d9c68dc40c0f.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Sizes.\n\nGradient illustrations come in the same sizes as the linear illustrations: small (48×48 px), medium (96×96 px), and large (160×160 px). For most use cases, the medium size works well across mobile, tablet, and desktop. Image: Diagram comparing the three different sizes of the gradient illustrations, small, medium, and large, and their pixel measurements. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1c75bf06101012a147b3e64b1ae8dae81b87bd15d.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Colors.\n\nThe colors of the gradient illustrations use Spectrum’s 6.0.0 color system. They're tied to the different Adobe product categories and individual products. There are two gradients that can be used for surfaces that show different products, or that are not product-specific. The other gradients are tied to specific products or clouds. For example, blue is tied to the photography and digital imaging category (such as Photoshop, Lightroom, and Fresco), while green represents the 3D category (such as Substance 3D Stager and Substance 3D Designer). It’s essential to use the appropriate illustration colors according to the product categories. If the application is for multiple products, use one of the gradient swatches that incorporate the Adobe brand red. Do not use the category gradient sets as semantic colors to communicate meanings like errors (red), warnings (yellow), or successes (green). Image: Colorful gradient speech bubble icons representing Adobe products, grouped by categories like Creative Cloud, Experience Cloud, and Document Cloud. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1f1087412344f583f6cf99cba255acea92ff13593.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Naming convention.\n\nGradient illustrations use the following naming convention: Prefix identifies it as part of a larger group of assets: in this case S2 (Spectrum 2). Type is the type of the asset: fill for gradient illustration. Illustration name is in camel case, and there are no empty spaces or individual characters allowed. Category differentiates the different gradient fill colors. The categories include: allproduct1, allproduct2, 3D, DC, drawing, DVA, express, EC, photo, and print. Illustration size is stated in pixels at @1x. Filetype suffix indicates the asset format, like SVG or PNG. Image: A breakdown of the correct gradient illustration naming convention: prefix, type, illustration name, product category, size, and filetype suffix. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_176dfbbc5046d16e2b1322c5bb5b3a1e6bbb62ed3.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Illustrations and attention hierarchy.\n\nThe different styles of illustrations are connected to the Spectrum 2 concept of attention hierarchy. Linear illustrations are elements that communicate lower attention, as they blend in well with the rest of the UI. They can be used multiple times in a layout without drawing too much attention. Gradient illustrations are high attention elements that should be used sparingly and selectively. Only one illustration, element, or group of elements should have high attention on a page. Learn more about this with the Spectrum 2 attention hierarchy guidelines. Image: Photoshop welcome screen with options to upload an image, quick actions, start from scratch, and set document size. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_15590169166eda531bea9081c8216c90570e96b7c.png?width=750&format=png&optimize=medium) Image: Photoshop welcome screen with options: Quick actions, Start from scratch, Start with a prompt, Document size, and Drop a file. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_15b4ef4b67fc664c934cf0106875d1f23c7551d8a.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Use linear illustrations for errors or critical messages.\n\nErrors or critical messages should only use linear illustrations. Gradient illustrations use colors that can be misunderstood as semantic colors (e.g., green for positive, red for negative). They also have an upbeat and inspirational tone, which isn’t appropriate in situations where a user may be frustrated by something that’s an inconvenience or is disruptive to them in accomplishing their work. Image: Example of the correct way to use a linear illustration. An error message alongside with a linear illustration to supplement the text. Example text, Browser not supported. Google Chrome is currently the only browser that supports this site. Make sure you are running the latest version of Chrome and try again. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1909bc87fc71510c164fd1a8688537bd3c0097ce1.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Use linear style when showing several illustrations together.\n\nThe linear illustration style works well for layouts that feature a number of illustrations together (such as a collection of cards). Linear illustrations draw a lower level of attention and blend in well with the UI, so it’s appropriate to use them in a collection of elements. Gradient illustrations draw a lot of attention in multiples, so they need to be used sparingly and sparsely. Image: Example of the correct way to use several linear illustrations at once, one in each card, in a group of three cards. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_19bfd79664ef916477bd94eaec0e9aaf6af20c954.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Don’t resize illustrations.\n\nDon’t scale or resize linear illustrations. The stroke weight and the corner radii are already set to work best in the given canvas sizes. Image: Example of incorrect way of using linear illustrations. Sizes and scales are not using the pre-determined standards, and are too large, too small, or their outlines are too thick or too thin. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_11865922d8a74adaf2dfd62332e4393aa2233919a.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Don’t create your own linear illustrations.\n\nIt’s essential to have consistency in tone and metaphors across all Adobe products. Don’t create your own linear illustrations or alter existing ones. Image: Examples of the correct and incorrect way to use linear illustrations, through an illustration of a camera. Correct way, using an existing illustration. Incorrect way, creating your own for the exact same metaphor. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1b48ab458f55ea7bf1c36445f7579a26fadedbc63.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Don’t recolor illustrations.\n\nAlways use gray 800 for the illustration color. Using semantic colors (red, orange, green, blue) can help reinforce meaning, but should be considered on a case-by-case basis. Image: Example of the correct way to use color in linear illustrations. Semantic color of green is only used in an illustration of a checkmark, to reinforce the meaning of the “success” semantic. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1ba96a91ade65c30aec9dd769e5b3b8552f611923.png?width=750&format=png&optimize=medium) Image: Example of the incorrect way to use color in linear illustrations. A collection of 3 linear illustrations that all use various colors and gradients, when they should only be monotone. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1eb0cebc9e7fb6ac19aa296f4b9584b3926a2b180.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Use gradient illustrations thoughtfully.\n\nGradient illustrations are high attention elements in the layout. Use them strategically and thoughtfully to draw the user’s attention and to provoke a delightful moment. Image: Adobe Lightroom interface showing an empty photo library with a prompt to drag and drop files. Sidebar menu and search bar visible. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1d2f8dd7d12147ec4f5f09c7a608d5a2064e1d4aa.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Don’t show more than one gradient illustration at a time.\n\nGradient illustrations draw more attention because they’re very colorful. Using more then one in a given view will make the UI too busy and too loud. Use gradient illustrations sparingly to guide a user’s attention to engaging, high-value actions such as uploads, starting projects, or commenting. Image: Example of the incorrect way to use gradient illustrations. Several gradient illustrations are being used at the same time, one in each card in a group of three cards. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_12ee1bcd102ca17d661adbfe3c89b9c8372bb88d7.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Don’t use gradient illustrations for error or critical messages.\n\nGradient illustrations incorporate product category colors, and also include colors that have semantic meanings in Spectrum: red, orange, or green. It creates inconsistency and confusion to have an error message or a critical alert in green (a color has a positive semantic meaning). Use gradient illustrations when you want to emphasize positive actions. Gradient illustrations have an upbeat and inspirational tone, which isn’t appropriate in situations where a user may be frustrated by something that’s an inconvenience or is disruptive to them in accomplishing their work. Image: Example of an incorrect way to use a gradient illustration. An error message alongside with a gradient illustration to supplement the text. The illustration uses a green gradient, which doesn’t match what it’s communicating in the text. Text, Browser not supported. Google Chrome is currently the only browser that supports this site. Make sure you are running the latest version of Chrome and try again. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1e3e4893c0094c98dbb653518d0a7a24cb8c0f7eb.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Don’t create your own gradient illustrations.\n\nIt’s essential to have consistency in tone and metaphors across all Adobe products. Don’t create your own gradient illustrations or alter existing ones. Image: Examples of the correct and incorrect way to use gradient illustrations, through an illustration of a camera. Correct way, using an existing illustration with the correct gradient for the product. Incorrect way, creating your own gradient with incorrect colors for the product, as well as a different illustration style. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1c4ab820dc40eeee3ba200b37d9d213b60a2bc1fd.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Use the correct colors for your product.\n\nThe colors in gradient illustrations are connected to the product categories. For example, an illustration for a Substance 3D product should use the Substance 3D green colors. Do not use different colors than those of your product category. Reach out to the Spectrum Brand team for guidance about the appropriate colors for your use case. Image: Two icons compared: a blue chat bubble marked incorrect with a red \"X,\" and a green chat bubble marked correct with a green checkmark. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_1e017c1f9e39fcbf65abdaa277f2018d2363d1b59.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Test if gradient illustrations work well in your layout.\n\nIt’s highly recommended to test gradient illustrations as you’re designing your layout. They’re very expressive and colorful, so it’s important to determine how they complement (or don’t) different communication points (e.g., user-generated content, onboarding, feature banners, upsells, and more). If gradient illustrations are making the layout too noisy, use linear illustrations instead."
+    },
+    {
+      "type": "guideline",
+      "content": "Thematic banners are descriptive and represent a specific topic or feature. Similar to the gradient illustrations, they’re either connected to the product brand categories by color, or they use the generic gradient swatches. These banners use the same shapes, metaphors, and elements as the linear illustrations, but they have a distinct style that is combined with the gradients and colors of the gradient illustrations. With their size, usage of color, and high editorial quality, thematic banners are high on the attention hierarchy scale. In layout, they work best when used to promote positive and high-impact moments, such as announcing new features. Because of this, they should be used sparingly. Thematic banners are created on a case-by-case basis by the Spectrum Brand team. There is no asset library for thematic banners because they have unique needs for each product use case. Image: Premiere Pro UI with semantic search banner, \"Start something new\" options for timeline, blank document, and preset dimensions. (source: https://spectrum.adobe.com/foundations/icons-and-illustrations/media_19ee2981afc4939c4ce4ba256e53603324443b9e7.png?width=750&format=png&optimize=medium)"
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/foundations/icons-and-illustrations/illustration",
+  "lastUpdated": "2026-08-14",
+  "status": "published",
+  "tags": [
+    "illustrations",
+    "gradient illustrations",
+    "linear illustrations",
+    "brand colors",
+    "SVG export"
+  ]
+}

package/guidelines/in-product-word-list.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/in-product-word-list.json",
+  "name": "in-product-word-list",
+  "title": "In-product word list",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "In-product word list" },
+    {
+      "type": "guideline",
+      "content": "Consistent language builds user trust and strengthens their knowledge that a product is meeting their needs. Using inconsistent vocabulary across Adobe’s apps and products can be confusing to users, and it makes it harder for those creating education and documentation. Below is a list of words that we either recommend using, or suggest avoiding. For capitalization guidance, view the Grammar and mechanics page for the UX writing style guide. Keep in mind that some terms are branded and follow Adobe Brand Guidelines for styling and usage. This list is regularly updated and is by no means complete. If you have any questions or seek clarity on any words on this list, you can email us. Word or Phrase Status Usage Notes add Use with caution In Creative Cloud products, to add is to bring already existing assets into a certain browser or view. In Experience Cloud products, this word is reserved for images. For example: Add PNG Add images, fonts, styles, and more to a library to keep what you need nearby. Avoid using the word add for the action of inviting people to a document or other shareable resource. affordance Avoid Internal jargon used as a word to describe a feature or a control. Do not use the word affordance in UI copy, and refer to the action that a component is used for instead. app Preferred App is preferred over application for the sake of brevity, simplicity, and because app is so widely used now to describe both desktop and mobile software applications. application Use with caution App is preferred over application for the sake of brevity, simplicity, and because app is so widely used now to describe both desktop and mobile software applications. asset Use with caution Jargon for any file, element, or content that a user needs to complete their goal, as well as the output of completing that goal. At Adobe, this includes things such as desktop-synced files, mobile creations, Creative Cloud libraries, images, fonts, colors, gradients, or CSS information. Asset is a generic word and has multiple meanings which can be conflicting or ambiguous. For example, there are assets that are part of a creative agency workflow, and there are assets to describe a generic grouping of disparate items. Try to avoid using this word if possible. Instead, be more specific and describe what something is, such as a video or an illustration. If you can’t, proceed with asset. auto / auto- Use with caution For feature names and UI labels, use the adjective form (e.g., Auto tag, Auto crop, Auto analyze, Auto save). New names and labels that use auto require the Brand team’s approval. In general references, use the combining form (e.g., auto-tag, auto-crop, auto-analyze, auto-save). When describing how UI elements with auto labels work, generally spell out automatic or automatically. available / not available Preferred Use not available to describe an app, service, or control that temporarily can’t be accessed or used (e.g., an app is taken down for maintenance). View also supported / not supported. begin Preferred Preferred for descriptive text. For a call-to-action, use start. blacklist Avoid This word has roots in racism and oppression. Replace it with this format to provide contextual clarity: (Action)(object) For example: Blocked users Prohibited IP addresses button Preferred When referring to a specific button in an interface, try to refer to the action (e.g, undo, edit) rather than naming the button. If you need to refer to the interface element directly, capitalize and bold the name of the button but not the word button itself (e.g., Undo button, Edit button). click Avoid Avoid instructing a user to click or tap. Instead, use a call-to-action and the right design component to imply the interaction. View select. When you need to refer to the result of clicking on something, use the same words as the call-to-action. close Preferred Use close as a catchall term for a dismissal action. It can also reference OS-specific patterns. Whenever possible, use workflow-specific verbs (e.g., publish, export, delete) to reinforce the action being taken, instead of the more generic close, finish, or OK. cloud docs Avoid Internal-only jargon. View cloud documents. Amended guidance to come on the rare exception to this rule. Abbreviate as cloud docs in English on mobile when called for due to space constraints. cloud documents Preferred Use across Creative Cloud products, experiences, and messaging as a functional name, and not as a branded feature of Creative Cloud. Do not capitalize cloud documents on its own. For product UI, align to the interface style specific to the design component (e.g., if all caps, use all caps; if title case, use title case). Only attribute this to relevant apps such as XD or Photoshop, and never to Creative Cloud. (e.g., XD cloud document, not: Adobe Creative Cloud cloud document). Do not shorten to cloud docs or documents in product UI, marketing, or messaging. Translate this where other functional names are also translated. Amended guidance to come on the rare exception to this rule. Abbreviate as cloud docs in English on mobile when called for due to space constraints. continue / cancel Preferred Use continue and cancel as dual actions in workflows where there is only one way to move forward and it’s not possible to skip or go back steps. course Use with caution Use sparingly to describe a sequential arrangement of multiple tutorials that form a cohesive learning experience. Use words like tutorial, tutorials, or tutorial series instead. create Use with caution Create should only be used descriptively (e.g., Use everyday language to create extraordinary results with generative AI). Do not use create as a UI action in the context of generative AI technology, where content is generated rather than created. credits Use with caution View generative credits current version / previous version Avoid When referring to apps, latest version / older version is preferred. custom models Required A model that has been trained on a unique style (e.g., Firefly custom models). Do not use title case. This is not a branded term. dismiss Avoid Avoid using dismiss as an action to signify acknowledgement or completion. Use OK instead. This word can be acceptable in rare cases of when the action being taken is a “hard dismiss,” or the equivalent of a user communicating that they do not want to be shown something ever again. If possible, show an icon-only close affordance (typically, a cross icon) if appropriate to the component, to indicate dismissal. document Preferred Documents is commonly used in Document Cloud to refer to files in general, of any file format. In Creative Cloud, use the word file for a local document, to better distinguish from cloud documents. While all cloud documents are files, not all files are cloud documents. Similarly, all documents are files, but not all documents are cloud documents. done Use with caution Close and finish are preferred over done for a dismissal call to action. In general, stick to verbs (like close) over adjectives (like done) to label actions — verbs more clearly reflect whatever action the user is taking. Use done as an acknowledgment or call to action for a standalone button in a modal, dialog, or overlay when it wouldn’t make sense for the context to use finish, close, or OK. Done conveys finality, allowing users to signal that they no longer want to interact with a given element. download Preferred When writing instructional copy, word choice should mirror that of the OS. Otherwise, use download only when referring to the transfer of assets or files from a server onto a device. When guiding users through an installation or update flow, be explicit about the different steps they will take. View also install. drag and drop Use with caution Instructions for interactions should use the same words that the OS does. edit in Avoid See open in. embed Preferred Placing an embedded file means that it is no longer connected to the original source file. This saves a static copy of the file’s content into the destination file. For example: Embed a PDF as an image layer in Fresco Place an image as an embedded object to save a copy right here in your Photoshop file. Place as embedded enable / disable Avoid These terms are needlessly technical to convey the more straightforward on / off. Use turn on / turn off to refer to the actions of activating and deactivating a capability or mode. entitlement Use with caution Internal-only jargon, along with entitlement-aware, to describe access to a particular app or program. export Preferred Use export when a file will be saved in a different format than it was created in. If the file will be opened as-is in a different app than it was created in, use open in. fail, failure Use with caution Fail and failure are vague technical terms with a strong negative connotation. Avoid using these words in error messaging when you can be specific about what the problem was. View also success, successful, successfully. feature Use with caution A single, outcome-oriented functionality of a product or service. Determining if something is a feature happens through a partnership between product, marketing, and branding. This word should not be used to mean “everything in a product.” file name Preferred Two words. Use instead of one word, filename, in user-facing content. A filename is the technical name that a file system creates (and includes the file type extension). The file name is the name for the file that a user creates. file type Preferred Two words. Use instead of one word, filetype, to refer to file formats such as PNG, JPEG, PDF, PSD, AI, PSDC, etc. Do not abbreviate file types unless there is a character constraint. View JPEG. finish Preferred Use finish in headlines, body copy, or metadata to describe the completion of a user-invoked process or flow. Finish can be used for the last step of interactive learning experiences. Use it strategically in user-driven experiences, not for things that launch automatically. free Use with caution When using free to describe to an Adobe offering, the offering and all of its features must: cost nothing not require a credit card or subscription for download or use Use free trial to refer to both trials that require payment information and trials that do not. View also freemium. free trial Preferred Free trial is the legally required term for trials with payment, which require a credit card to start the free trial and then automatically convert to a paid subscription after the trial period is over. It is also the preferred way of referring to trials without payment. In the initial call to action for trials with payment, it is required to use one of the following: Start free trial Free trial Start free trial to subscribe Agree and start free trial freemium Avoid Do not use the word freemium in UI copy. A freemium app is internal jargon for an app that is free to use but requires a credit card payment if the user wants to access its premium features. In the initial call to action for a freemium app, use one of the following: Start for free Download for free Start now Download Get started For actions within a freemium app that do not require a credit card payment or subscription, use “free to try” or “free to edit.” gen tech Avoid Do not use gen tech to describe generative AI or other kinds of AI. generate Required Use generate as a UI action in the context of generative AI technology across the Adobe product ecosystem, where content is generated rather than created. Generate is the initial action as well as the action any time an existing prompt is modified or changed in some way. It is also used where variations are replaced/destructive (formerly refresh). generate again Required Not common. Use generate again instead of generate where a single variation is replaced (whether destructive or not) and the use of generate isn't clear enough (e.g., the generative extend feature in Premiere Pro). Use generate more for sets of multiple variations. generate more Required Use generate more instead of load more where variations are stacked (formerly load more ). generate similar Required Use generate similar instead of show similar. generations Use with caution Use generation or generations as a noun to refer to the act of producing output in the context of a Creative Cloud plan or feature. For example: This feature uses 100 credits per generation. Each generation outputs 4 images. Your complimentary generations have been used. generative AI Required Do not use GenerativeAI, GenAI, Gen AI, or other shorthand for generative AI. generative credits Preferred Use to describe Creative Cloud generative credits. OK to shorten to credits on second mention only, if the generative credits context is clear. got it Avoid Got it is overly colloquial. Use OK instead. import Use with caution In most Creative Cloud products, this word means to convert a file to a different format to open it in an application. For Adobe’s video products, import has a broader definition, encompassing add and place. This is because people using these products collect files of different formats into a single view, and then those are converted or “ingested” as links to improve machine performance. For example: Learn more about the supported file formats you can import in Premiere Pro. Go to File > Import to open a Sketch file in XD. In Experience Cloud products, import can refer to adding data sources to a view. View add. in the cloud Preferred Use in the cloud (not on the cloud) to describe a process that is part of the cloud or deployed using cloud software, like cloud storage and cloud rendering. Do not use with the cloud except in phrasing like “software with cloud services.” View also to / from the cloud. install Preferred When writing instructional copy, word choice should mirror that of the OS. Otherwise, use install (verb) or installation (noun) to describe the process of adding and making software usable on a device. When guiding users through an installation or update flow, be explicit about the different steps involved. For example, don’t use an Install call to action if the user will be redirected to a store or website. View also download. intelligent Avoid Do not use intelligent in naming any UI element. JPEG Preferred Use the full form JPEG, not JPG. latest version / older version Preferred Preferred over current version / previous version when referring to apps. launch Avoid When referring to apps or services or an aspect thereof (e.g., a new window), open is the preferred action. lesson Avoid The Learn team does not use this term at all. Avoid in UI content. link Preferred Placing a linked file turns it into a reference to the original source file. Changes made to the placed content in the destination file or to the original source file will be reflected and updated automatically in both locations. For example: Go to File > Place > Linked object to make changes to the Photoshop file from here. Place a linked PDF if you want it to be updated automatically when you edit the PDF. load Use with caution Preferred for messages like Loading…, Loading {appName}…, Can’t load page, or similar. Use open as an action in reference to an app or service or an aspect thereof (e.g., Open {appName}, Open a new window). load more Use with caution View generate more lock / unlock Preferred To lock something is to freeze it at the current moment in time and prevent changes to its contents. When something is locked, objects associated with it can’t be selected or altered. To unlock something allows a user to select and edit it. These actions are usually represented in the interface via an open or closed padlock icon. long press Use with caution Instructions for interactions should use the same words that the OS does. magic Avoid Do not use magic in naming any UI element. master Avoid Master is an established software term that has roots in bigotry and oppression. Do not use master descriptors to mean primary, main, or source (e.g., main track or source graphic). Do not use master to describe hierarchy, (e.g., master and slave servers). Instead, describe hierarchical relationships as primary, secondary, tertiary, etc. More menu Preferred In interface language, try not to directly refer to the ellipsis (“…”) contextual menu that provides more options. If you need to refer to it directly, call it the More menu. Bold the word More and capitalize it; menu is lowercase, not bolded. name Preferred Another word for file. Do not use title to mean name. next / back Preferred Use next and back in workflows (e.g., tours, tasks) where someone would be going back and forth in the flow. next / previous Preferred Use next and previous for pagination (e.g., pages of search results). OK Preferred Use OK as a primary action for acknowledgement if taking that action will not impact a user in a negative way. Style in all-caps no matter the interface element, not as Ok, ok, Okay, or okay. Avoid using dismiss as an action. Be mindful of using OK as an action in flows that involve a user agreeing to options that require payment, or for giving consent. Instead, use more specific verbs and explicitly communicate what someone is acknowledging or agreeing to. on the cloud Avoid View in the cloud and to / from the cloud. one-of-a-kind X Avoid Do not describe generative AI content as one-of-a-kind. We cannot guarantee that all generated content will be 100% one-of-a-kind unique. open Preferred Use open as an action in reference to file, app, service, or an aspect thereof (e.g., Open a new window ). open in Preferred Open in is preferred over edit in, view in, comment in or similar because it is secondary action-agnostic and doesn’t guess at what the user might want to do (e.g., edit, view, review, comment). Secondary actions can be referenced in supporting copy if necessary for a particular flow or context (e.g., “This file is view only on web. To make edits or leave comments, open it in the desktop app”). If the app context is clear (e.g., the user is in Photoshop web and wants to open something on Photoshop desktop), it’s preferred to say, Open in {surface} app (e.g., “Open in desktop app”) for the call to action. If the app context will change (e.g., the user is in Photoshop web and wants to open something on Illustrator desktop), it’s preferred to say, Open in {appName} {surface} and drop app (e.g., “Open in Illustrator desktop”) for the call to action. OS Preferred Abbreviation of operating system. It's also acceptable to spell out the full term, if needed for extra clarity. panel Use with caution Avoid referring to the names of interface elements in UI content unless absolutely necessary; describe the action, rather than the interaction. You can describe something as a panel if it’s a centralized collection of multiple tools, options, or other controls that has a fixed placement and could be collapsible as a navigational element (as opposed to being a temporary view). pinch Use with caution Instructions for interactions should use the same words that the OS does. place Preferred Placing brings content (e.g., images, other files) from an original source into a destination file. For example: You can place an Illustrator file into your XD layout. One way to bring an image into your Photoshop file is to go to File > Place. Things can be placed as linked or embedded files. platform Use with caution A platform is a technology or group of technologies that are used as a base upon which other applications, processes, technologies, or even other platforms are developed. This word is used to communicate the concept of a centralized, foundational infrastructure (as opposed to a system, which is a grouping of things that work together in the same place). Usage of this word is extremely dependent on context. It can describe where something appears, where something is stored, or a product itself: A tech framework (e.g., UXP) Hardware and devices (e.g., mobile, tablet, desktop) Operating systems (e.g., Android, iOS) Adobe products (e.g., Adobe Experience Platform) playlist Use with caution Use series to refer to a list of tutorials in a sequence (e.g., “Select the second tutorial in the series”). please Preferred Use in an instructional way, and in error messages when asking a user to do an action that requires significant effort or time (e.g., Please provide feedback, Please reload the page ). plugin Preferred One word, with no hyphen (not: plug-in ). preferences Use with caution For both web and mobile apps, treat preferences as a subset of settings and in menu names, call out the type of settings (e.g., Preferences may be found under App settings or Account settings). A user can customize, choose, or select preferences for various things within a settings menu rather than setting their preferences. press Use with caution Instructions for interactions should use the same words that the OS does. product Use with caution Internal-only jargon. Use sparingly to describe a self-contained experience that provides a user with a specific benefit (e.g., Creative Cloud is a collection of products). To those outside of Adobe, a product is often thought of as a name-branded thing that is a countable unit of sale that may be downloaded to a device (e.g., one Adobe Photoshop subscription). Use the word app to describe this concept. program Avoid Use app instead. prompt Use with caution OK to use prompt consistently in your product if approved by Content Strategy, Brand, and Legal. Eventually we may all move to something like input. quit Avoid Avoid this word especially as a call-to-action because it is platform-specific. While you can quit on MacOS, you can exit or close on Windows. Quit can be used generally as a reference to this action on MacOS. rail Avoid Internal-only jargon used to describe the UI element that spans the top or the bottom of a screen. To make accessible products, this word should not be used in UI content. Instead, be more directive. If you need to refer to this design element in your product, try to write around describing its appearance and instead talk about its function. For example, talk about the actions or the feature names inside the rail, rather than the rail itself. recalled Avoid Whenever possible, use generic language such as not supported or not available to describe an app or service that can’t be used. Words like revoked, recalled, or rescinded have negative connotations, often making users feel like they’re being scolded or fearful of losing work. Instead of getting into the reason for an error, guide users to a resolution. View also the Spectrum Writing for errors page. recommend, recommendation Preferred Use recommend (verb) and recommendation (noun) for when a human is doing the action (e.g., “We recommend backing up your work before sharing”). To suggest or make a suggestion is the preferred way to describe when AI or other technology is doing the action. redline Avoid Redline is a common design term that has roots in racism and oppression. To refer to the details, parameters, or attributes of a design that are communicated to engineers for implementation, use specifications or specs instead. reference X Required When using a reference to generate content (e.g., an image), use reference X to label or refer to this element (e.g., reference image ). refresh Preferred Use refresh as the action to view page or screen updates, or to fix issues (e.g., “Refresh this page and contact support if the issue persists”). regenerate Avoid Do not use regenerate. View Generate, Generate again, Generate more, Generate similar. relaunch Avoid Restart is the preferred action for any hardware, process, app, or service, regardless of desktop, mobile, or web surface context. reload Use with caution There may be a technical reason why we’d want to use reload, but for most use cases we can say things like Refresh this page, Restart the app, and so on. rescinded Avoid Whenever possible, use generic language such as not supported or not available to describe an app or service that can’t be used. Words like revoked, recalled, or rescinded have negative connotations, often making users feel like they’re being scolded or fearful of losing work. Instead of getting into the reason for an error, guide users to a resolution. View also the Spectrum Writing for errors page. restart Preferred Use restart as an action in reference to an app, service, device, process, or workflow. results Use with caution Avoid results as a label or description of generated content in generative AI creative modules, features, or tools. View variations. OK to use in things like tooltips to describe an effect (e.g., move an object for a desired result). revoked Avoid Whenever possible, use generic language such as not supported or not available to describe an app or service that can’t be used. Words like revoked, recalled, or rescinded have negative connotations, often making users feel like they’re being scolded or fearful of losing work. Instead of getting into the reason for an error, guide users to a resolution. View also the Spectrum Writing for errors page. run Use with caution Use run to describe scenarios where a machine or system is the actor rather than the user (e.g., run a report, run a script, or run a simulation ). scroll Use with caution Instructions for interactions should use the same words that the OS does. see Avoid In order to be more inclusive, avoid using the word see. Use the word view instead. For example, instead of See all results, say View all results. select Preferred Select is the preferred gestural word over click or tap for several reasons: It’s device-agnostic, meaning that it’s not necessary to write a new string for different devices. It’s more inclusive because many people using assistive technology aren’t clicking or tapping to take an action. It guards against future design changes and surface migrations. For example, if a UI element stops being clickable and instead uses a slider, the word select would still work for both cases. send to Avoid Use open a copy or open a copy in instead. View also open in. series Preferred Series refers to a list of tutorial videos. Use sparingly, such as a tutorial series or series of tutorials. Preferred over playlist. service Preferred Describes content, components, data, and/or dynamic features. At Adobe, this word is used contextually across many things (e.g., plugins, cloud storage, search, help) to describe “something that Adobe offers.” A service may be something that is contained to a single product or experience, or something that is available across multiple offerings. It’s often designed for a use case that relies on the functionality of a platform. settings Preferred In menu names, describe the type of settings (e.g., App settings, Account settings ). See also preferences. show similar Use with caution View generate similar skip Preferred OK to use as a call-to-action in stepped flows, such as a coach mark series. smart Avoid Do not use smart in naming any UI element. software Use with caution Programs and other services that are used by a device. Only use software when the words app, service, or product are not sufficient for the use case. solution Use with caution Jargon. Solution is often used interchangeably with app or product, and can describe something that integrates into a larger whole. It’s often used to talk about something descriptively in terms of its use case (instead of its product or feature name) as a way to achieve a goal or complete an intent. However, people may feel excluded by this word; if something is described as a solution and it doesn’t work for someone, they could feel that they themselves are the “problem.” Instead of using the noun solution, frame the message using active verb phrases such as solve, help solve, try to solve, or helps (someone) do (something). sorry Use with caution Only use the word sorry in error messaging scenarios where the error causes a major interruption and inconvenience for a user (e.g., needing to restart their device, if work they had saved was lost). space Preferred The amount of room available. Space refers to this concept on a local machine or device (e.g., “You don’t have enough space on your computer to save this file”). Storage is the word for this in the cloud (e.g., “Your Creative Cloud storage is full”). start Preferred Preferred over begin for calls-to-action. Variations on this call-to-action using the word start are also acceptable (e.g., Start tour ). start Preferred Use start as an action in reference to a device, process, or workflow. storage Preferred The amount of room available. Storage refers to this concept in the cloud (e.g., Your Creative Cloud storage is full). Space is the word for this on a local machine or device. (e.g., You don’t have enough space on your computer to save this file). stuff Avoid This word is a U.S.-centric colloquialism used to describe things without specificity, and is difficult to accurately localize. Do not use the word stuff in UI copy, and refer to items directly instead (e.g., files, not your stuff ). submit Preferred Submit is the preferred word for the action of sending data in a form. When asking users to share feedback, use Submit as the call-to-action, not Share. success, successful, successfully Avoid Adding success, successful, or successfully to a message is usually redundant and unnecessary. For example, say “Your password was reset” instead of “Your password has been reset successfully.” suggest, suggestion Preferred Use suggest (verb) or suggestion (noun) for when AI or other technology — not a human — is doing the action. To recommend or make a recommendation is the preferred way to describe when a human is doing the action. supported / not supported Preferred Use not supported or no longer supported as a catch-all descriptor for an app or service that permanently can’t be accessed or used (e.g., an outdated or unauthorized app version). View also available / unavailable. surface Avoid Internal-only term for a consumer-facing framework that delivers content or services to a user. A product may have multiple surfaces (e.g., Adobe.com, Creative Cloud desktop, mobile, and web). swipe Avoid Instructions for interactions should use the same words that the OS does. Reserving swipe actions for intuitive actions in-line with the mobile OS should make it unnecessary to use this word in UI copy. switch on / switch off Use with caution Turn on / turn off is preferred over switch on / switch off because it's a more general and accessible way of referring to the actions of activating and deactivating a capability or mode. Only use switch on / switch off when there is a need to refer to a switch UI component directly in interface copy. In these rare cases, the action/verb should closely match the component/noun. The phrase “switch between modes” is OK to use. tab Preferred When referring to a specific tab in an interface, respect the capitalization of the name of the tab as it appears in the UI but don’t capitalize the word “tab.” Bold the name of the tab but not the word tab (e.g., Learn tab, Your Work tab, Apps tab ). tap Use with caution If at all possible, avoid instructing a user to tap or click. Instead, use a call-to-action and the right design component to imply the interaction. View select. When referring to the result of tapping on something, use the same word(s) as the call-to-action. There are some instances where using the word tap can't be avoided because of device mechanics, such as selecting points on a tablet. template Preferred A template is a document that has been pre-formatted or contains pre-formatted elements so that a user doesn’t have to start from scratch. Use template rather than starter file or other jargon for templates. title Avoid For field labels, name is the preferred word for a file name or for the name of another kind of entity. Do not use title to mean name. to / from the cloud Preferred Files are uploaded (or backed up) to the cloud and downloaded from the cloud. View also in the cloud. toggle Avoid Jargon used as a verb to describe the action of switching between two modes, or used as a noun to describe the button or switch for going between two modes. To make accessible products, do not reference UI elements. If you need to refer to this design element or what it does in your product, write around describing its appearance and instead talk about its function. View turn on / turn off. tool Preferred When referring to a specific tool in an interface, respect the capitalization of the name of the tool as it appears in the UI but do not capitalize the word tool. Bold the name of the tool but not the word “tool” (e.g., Zoom tool, Pen tool, Undo tool ). touch and hold Avoid Instructions for interactions should use the same words that the OS does. trial Avoid See free trial. turn on / turn off Preferred Use turn on / turn off to refer to the actions of activating and deactivating a capability or mode. tutorial Preferred Can be used to describe a single tutorial, or a series of two or more tutorials. unique X Avoid Do not describe generative AI content as unique (e.g., unique images ). We cannot guarantee that all generated content will be 100% one-of-a-kind unique. update Preferred Unlike an upgrade, an update does not usually require payment (e.g., Update your browser, Update your app ). update Preferred Use update (verb) to refer to the act of replacing software with a new version of itself that brings the system up to date or includes improvements. Use update (noun) to refer to the replacement software version. When guiding users through an update flow, be explicit about the different steps involved. For example, don’t use an Update call to action if the user will be redirected to a store or website. update later Use with caution Use Update later as a call to action when presenting the user with the option to defer updating an app or to have an app update automatically when certain installation criteria ( e.g., quitting or restarting) are met. View Update now. update now Use with caution Use Update now as a call to action only when the user can choose between updating later and taking the necessary steps to begin updating immediately. View update later. upgrade Preferred Unlike an update, an upgrade usually requires payment (e.g., Upgrade your plan, Upgrade to the full version of Photoshop ). User Guidelines Required When referring to the Adobe Generative AI User Guidelines, it is always title case User Guidelines on both first and second mention. Do not use other terms or shorthand in place of User Guidelines (e.g., GenAI User Guidelines, GenAI Terms, terms). variations Required Use variations to label or describe generated content in generative AI creative modules, features, or tools (e.g., Your prompt will generate four variations, AI Assistant generated four image variations in its response ). Avoid results. video Use with caution Use this word sparingly as a lightweight alternative to describe a standalone tutorial, tutorial series, or course (e.g., “Learn Illustrator step by step in our series of short videos”). Video is a preferred word to use when talking generically about the type of media (e.g., video and audio, video files, video assets). view Preferred To be more inclusive, view is preferred over the word see. For example, say View all results instead of See all results. watermark, watermarking Preferred Use watermark (noun) to refer to a logo, text, or signature that is superimposed onto an asset. Watermarking (verb) is used for identifying the artist behind the asset, copyright protection, preventing unlicensed usage, or marketing. whitelist Avoid This word has roots in racism and oppression. Replace it with this format to provide contextual clarity: (Action)(object) For example: Shared domains Approved users Targeted sites wifi Preferred All lowercase, no hyphen or space."
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/content/in-product-word-list",
+  "lastUpdated": "2026-09-04",
+  "status": "published",
+  "tags": [
+    "UX writing",
+    "in-product language",
+    "Adobe Brand Guidelines",
+    "internal jargon",
+    "app vs application",
+    "asset terminology"
+  ]
+}

package/guidelines/inclusive-design.json

@@ -0,0 +1,101 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/inclusive-design.json",
+  "name": "inclusive-design",
+  "title": "Inclusive design",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Inclusive design" },
+    {
+      "type": "guideline",
+      "content": "Inclusive design is part of Adobe’s mission. Designers, engineers, and product builders are invested in learning how to think more broadly, seeking out more voices, and working together to make better experiences. Spectrum also builds for the widest audience possible. Our system is designed to be clearly readable, intuitive to use, and mindful of those who use assistive technology. From how components function to language and internationalization, we consider inclusion to be a top priority."
+    },
+    {
+      "type": "guideline",
+      "content": "Assume nothing is perfect.\n\nProvide context-sensitive help to ensure that people can be supported throughout many kinds of interactions. Prevent error conditions wherever possible, and highlight error conditions when they exist. When an error occurs, provide clear guidance about what someone can do to resolve the error by using clear and helpful messaging."
+    },
+    {
+      "type": "guideline",
+      "content": "Make room to adapt.\n\nProvide targets large enough to see and interact with. Label and describe all objects. Ensure that designs can be interacted with by mouse, keyboard, pen, fingertips, voice, accessibility API, or other methods. When designing for the web, embrace responsiveness. Accommodate web page size down to 320 px."
+    },
+    {
+      "type": "guideline",
+      "content": "Give people a choice.\n\nAllow for someone to customize their experiences within a product, and respect system-wide user preferences such as captions, large fonts, and high contrast. Ensure that every task can be completed in a logical order using only a keyboard."
+    },
+    {
+      "type": "guideline",
+      "content": "Avoid distractions.\n\nDon’t place animations near paragraphs of text. Allow users to turn off unnecessary animation."
+    },
+    {
+      "type": "guideline",
+      "content": "Be consistent.\n\nUse common components for well-defined tasks and interaction patterns, instead of new or custom-built ones. Use common shortcuts across experiences, and especially within products that accomplish similar tasks."
+    },
+    {
+      "type": "guideline",
+      "content": "Involve marginalized users.\n\nInclude people with diverse ranges of ability in user testing, and co-design whenever possible. Seek feedback from historically underinvested communities."
+    },
+    {
+      "type": "guideline",
+      "content": "Make documentation a priority.\n\nDocument all accessibility features and workflows (keyboard shortcuts, support for operating system features, etc.), and make it easy to find the information in your product’s help content."
+    },
+    {
+      "type": "guideline",
+      "content": "Structure.\n\nEnsure that complex components — such as lists, forms, and panels — have a logical reading order. Check that the keyboard tab order has been defined in a logical progression. Image: Example of a well-structured sign-up form with fields labeled \"Name,\" \"Email,\" and \"Password\" in a logical order, each with helper text below it: \"Enter your full name,\" an example email format, and a password requirement of at least 8 characters. (source: https://spectrum.adobe.com/foundations/inclusivity/media_13116949f51e1251f437a6ccd74236176a3c27f9f.png?width=750&format=png&optimize=medium) Image: Example of a poorly structured sign-up form with fields ordered \"Email,\" \"Password,\" then \"Name,\" each showing only placeholder text (\"Type email...,\" \"Type password...,\" \"Type name...\") instead of persistent labels or helpful guidance. (source: https://spectrum.adobe.com/foundations/inclusivity/media_190c545acc6616a50ebfe052dfc50f0c7f0bea267.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Color.\n\nAvoid referring to objects by color (or by location) alone. Instead, refer to these by their names or by the grouping in which they belong. Image: Example of a well-written confirmation dialog titled \"Delete 3 documents,\" with body text reading \"Select Delete to delete these 3 documents. This action can't be undone,\" and \"Cancel\" and \"Delete\" buttons — referring to the action by its label rather than its color or position. (source: https://spectrum.adobe.com/foundations/inclusivity/media_154197dd2e06a9db12d1de607acbdfb1e2df1ffbb.png?width=750&format=png&optimize=medium) Image: Example of a poorly written confirmation dialog titled \"Delete 3 documents,\" with body text reading \"Click the red button to the right to delete the 3 selected documents,\" relying on color (\"red\") and position (\"to the right\") to identify the button rather than its label. (source: https://spectrum.adobe.com/foundations/inclusivity/media_14c57c8599b21ecd8ffbb81fcb7e011835242f37d.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "High contrast mode in Windows.\n\nWindows high contrast mode is a setting that replaces all colors in the operating system to a simplified high contrast color palette. It includes preset color theme options and allows users to create their own color themes. This is an important feature for users with low vision, contrast sensitivity, and other needs, and should be supported by all Adobe web-based and Windows applications. Spectrum component documentation will include visual references for what the component should look like in Windows high contrast mode. These examples will all be shown in the default Windows high contrast black theme."
+    },
+    {
+      "type": "guideline",
+      "content": "Image: Table illustrating a Windows High Contrast Mode color scheme on a black background, listing six color roles with swatches and live examples: black background, yellow hyperlinks (shown as an underlined \"link\"), green disabled text (shown in a disabled text field), cyan-highlighted selected text, a white button with cyan outline labeled \"Action,\" and white body text. (source: https://spectrum.adobe.com/foundations/inclusivity/media_11d383e31a72cc9a1171a3983c98c76bcb036d2cb.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Animation.\n\nAvoid making parts of a screen flash more then 3 times per second, to help prevent photo-epileptic seizures. Also, don’t create content that moves or blinks for more than a couple of seconds, to help prevent people from getting distracted."
+    },
+    {
+      "type": "guideline",
+      "content": "Interactions.\n\nAvoid “clear”/”reset” actions on forms, since someone could select these by accident and erase a lot of painstaking work. Let people save forms so that they can leave and come back. Provide keywords before or inside of links."
+    },
+    {
+      "type": "guideline",
+      "content": "Text alternatives.\n\nInclude a textual label for all elements. There may be a few exceptions, when the context is sufficient (e.g., document zoom level “100%”). Use the label element in HTML where possible. If not, use ARIA to set the label (depending on the context, “aria-label” or “aria-labelledby”). Make sure labels are concise and have a clear association with objects. For objects in a table or a list, make sure that they can be identified by the structure around them (e.g., using a table header). Label all images when possible, and in all cases, include a short, meaningful text alternative. Exceptions are for decorative images as outlined in Guideline 1.1 Text Alternatives in the WCAG 2.1 standards. Provide a long description for any object that requires more information for understanding or operating it (e.g., tooltips and coach marks), so that those using assistive technology can read it in context. Learn more about creating text alternatives in Spectrum’s Inclusive UX writing guide. Image: Example showing a \"Full name\" labeled text field containing \"Lisa Wilson,\" and two icon buttons below it—a document icon and a gear icon—with the gear button showing a visible tooltip labeled \"Settings.\" (source: https://spectrum.adobe.com/foundations/inclusivity/media_1e31e94e04b0135f475c13897765090c6fdb8ee8f.png?width=750&format=png&optimize=medium) Image: Example showing an unlabeled text field containing \"Lisa Wilson,\" with no visible label above it indicating what the field represents. (source: https://spectrum.adobe.com/foundations/inclusivity/media_164c0f034fa9017293dde7e226191db3fbf3c84aa.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Fonts and text.\n\nUse Spectrum typography and colors to ensure proper type scale, line height, weight, and contrast for blocks of text. Use one column per page, with a width no longer than 80 characters (or 40 CJK characters) wide. Have line lengths at a maximum of 50-75 characters. Organize writing for comprehension. In layouts, left-align running text (this will be mirrored along with the UI for right-to-left languages). Fully-justified text creates text rivers, or irregular alignment of spaces that creates running gaps throughout the text; this makes it more difficult for readers with dyslexia. Avoid switching alignments in a single view. Whenever possible, provide options for people to adjust font size, color themes, and contrast, either manually, in-app, or through operating system preferences. Image: Example of the same body text titled \"For everyone,\" set in left-aligned (ragged-right) formatting with even, consistent word spacing throughout. (source: https://spectrum.adobe.com/foundations/inclusivity/media_117e361196192d3667c57c542e016ee9a14c0d76e.png?width=750&format=png&optimize=medium) Image: Example of body text titled \"For everyone,\" set in full justification, creating uneven spacing between words and noticeable gaps (\"rivers\") within the paragraph. (source: https://spectrum.adobe.com/foundations/inclusivity/media_1f82f6edb56492c8458c3f87989e4d97f88985588.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Error prevention and correction.\n\nAvoid the need for error messages by designing workflows that prevent an error state from even happening in the first place. When there is an error, associate it with the field or element that needs to be corrected or addressed. Make errors visually and semantically different from other messages (e.g., including icons, colors, placement), and write error messaging in a helpful and guiding way. Use appropriate click/touch zones to leave enough space between elements. Doing this minimizes click/touch target errors. Anticipate spelling mistakes in search queries, and accommodate multiple spellings of words in search results. Image: Example of a well-designed error state on an \"Email address\" field containing \"wilson@adobe,\" with a red outline, a warning triangle icon inside the field, and red helper text below reading \"Enter a valid email address.\" (source: https://spectrum.adobe.com/foundations/inclusivity/media_127d51b23d7ca48317c0f012ae1f34b0b2e3cbd92.png?width=750&format=png&optimize=medium) Image: Example showing an unlabeled text field containing \"Lisa Wilson,\" with no visible label above it indicating what the field represents. (source: https://spectrum.adobe.com/foundations/inclusivity/media_164c0f034fa9017293dde7e226191db3fbf3c84aa.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Keyboard equivalents.\n\nUse the built-in keyboard focus states that are defined in Spectrum components. Ensure that people can complete any action using a keyboard and keyboard equivalents, including on mobile (e.g., iPad Smart Keyboard). Set a tab order so that people can move back and forth within a view by using the Tab key."
+    },
+    {
+      "type": "guideline",
+      "content": "Image: Example of visible keyboard focus indicators on a UI: a tab bar with \"Section 1,\" \"Section 2\" (highlighted with a blue focus outline), and \"Section 3\"; a \"Label\" dropdown reading \"Select an option...\" with a blue focus outline; and a row of removable tags (Traveling, Hiking, Camping, Biking, Running), with \"Hiking\" highlighted by a blue focus outline. (source: https://spectrum.adobe.com/foundations/inclusivity/media_1b00cb5370bcd64b094e8752f1437789bcc9a1429.png?width=750&format=png&optimize=medium)"
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/inclusive-design",
+  "lastUpdated": "2026-09-03",
+  "status": "published",
+  "tags": [
+    "inclusive design",
+    "accessibility",
+    "assistive technology",
+    "high contrast",
+    "keyboard accessibility",
+    "internationalization",
+    "responsive design",
+    "color naming",
+    "co-design",
+    "user testing"
+  ]
+}

package/guidelines/inclusive-ux-writing.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/inclusive-ux-writing.json",
+  "name": "inclusive-ux-writing",
+  "title": "Inclusive UX writing",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Inclusive UX writing" },
+    {
+      "type": "guideline",
+      "content": "Language is an extremely powerful way to promote inclusivity. As folks who make products for other people, we like to believe that we are intimately connected with each and every person using what we build. But our thoughts and actions are inherently prejudiced because we bring the biases of our societies to work with us. By continuing to build products centered on one kind of person deemed “typical” or “standard,” we fail to explicitly ensure that our products include as many people as possible. When people don’t see themselves represented in a product, they feel like it isn’t for them and may miss out on something that could improve their lives. Research consistently shows that diverse, more inclusive companies deliver more innovation, better financial results, and improved user experiences. We all have the responsibility to make inclusivity a top priority. Not having inclusivity as a priority when building products has shown to negatively impact the following, and more:"
+    },
+    {
+      "type": "guideline",
+      "content": "Business.\n\nCompanies connect with fewer people Non-inclusive products directly reflect on the company that makes them, generating negative sentiment both inside the company and in the broader industry"
+    },
+    {
+      "type": "guideline",
+      "content": "Brand value.\n\nCompanies recruit fewer candidates from historically underinvested communities Companies and their products perpetuate stereotypes of and prejudice against historically underinvested communities"
+    },
+    {
+      "type": "guideline",
+      "content": "Accessibility as a discipline falls under the umbrella of inclusivity. Inclusive UX writing must address how people with disabilities access information, but not in a vacuum; it’s necessary to also think about how designers and developers build products to function with assistive technology. Inclusive UX writing is accessible, but the reverse isn’t always true. UX content includes: Visible text, including labels for UI elements, text on buttons, links, and forms Non-visible descriptions that don’t appear on screen (e.g., alt text for buttons with icons), images, workflows, tutorial formats Anything else that a person can read inside a product No matter what kind of UX content it is, it should be descriptive and meaningful. Here are some examples of why certain words and phrases are preferred, and why some should be avoided: Preferred Avoid Why People Customers Be inclusive of current and potential users of products — not just the paying ones. If the context is dependent on a payment or subscription, “customers” is acceptable. You (when speaking to your audience about themselves) Users (when speaking to your audience about themselves) Be inclusive of the person who’s reading. If the context is dependent on a role (e.g., an admin managing permissions), “user” is acceptable. Adobe Dimension helps you create in 3D. Adobe Dimension is for graphic designers looking to get a 3D edge. Be inclusive of more reasons to use a given product. View, Show, Go to all See all Be descriptive. Not everyone is “seeing,” and the “do” options (“View,” “Show,” “Go to all”) have more nuance in meaning. Play video Watch video Be descriptive. Not everyone is “watching” the video. Last updated: 2 days ago Updated • 2d ago Be meaningful. Symbols and abbreviations, when read aloud by a screen reader, can obscure the message if you don’t take additional steps to ensure they read correctly. Update your information (step 1 of 3) Confirm your information Be meaningful. Guide people in a stepped flow and tell them specifically what to do. Set accurate expectations for how long a task will take."
+    },
+    {
+      "type": "guideline",
+      "content": "There are a number of additional pages about language and inclusivity that make up this guide: Writing about people Writing for readability Writing with visuals This is a list of topic areas to think about when creating inclusive content. It’s just a start, and will evolve as often as necessary."
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/content/language-and-inclusivity/inclusive-ux-writing",
+  "lastUpdated": "2026-09-04",
+  "status": "published",
+  "tags": ["inclusive UX writing", "inclusive language", "assistive technology"]
+}

package/guidelines/internationalization.json

@@ -0,0 +1,103 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/internationalization.json",
+  "name": "internationalization",
+  "title": "Internationalization",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Internationalization" },
+    {
+      "type": "guideline",
+      "content": "There are roughly 200 countries and 6500 spoken languages in the world. Culture is deeply rooted in our thinking patterns, and it affects how users interact with and benefit from digital experiences. International design is a complex challenge that goes beyond translation. Acknowledging cultural characteristics and differences is the first step to create richer, world-ready digital experiences. Here, you'll find recommendations and guardrails for how to start creating user experiences that are scalable globally, and concepts to better understand how varied our user landscape is. Designing for a global audience is not an exact science, but by acknowledging the following issues, we take an important first step to develop more empathy towards our international users and build globally relevant user interfaces."
+    },
+    {
+      "type": "guideline",
+      "content": "One of the biggest challenges of designing for a global audience is to create interfaces that can efficiently adapt to different languages that have different writing and reading systems, different grammar rules, different typographic convention, and translating content leads to textual content that can differ drastically in length. When translating content to different languages, the length of the translated text is likely going to be very different — sometimes up to 300% longer than the original one. Text expansion is one of the main challenges of designing effective global user interfaces. IBM Globalization Guidelines reported an interesting correlation between the number of characters in a text field and the amount of text expansion. These experimental values clearly indicate that shorter text fields are more susceptible to text expansion, and these values can help us predict the effect on our user interfaces. To read further, visit W3's Internationalization article. Characters Max. estimated expansion Likely mapping to: Up to 10 300% Buttons, pickers, tabs 11 to 20 200% Labels, input fields 21 to 30 180% Large headers 31 to 50 160% Small headers, tooltips 51 to 70 140% Short paragraphs 70+ 130% Longer paragraphs Image: Image illustrating the content from the table, using a button and a tooltip as examples. Buttons have a max estimated horizontal expansion of 300% from 4 characters in English, like \"View\", and tooltips have a max estimated horizontal expansion of 200% from 9 characters in English, like \"Copy link\". (source: https://spectrum.adobe.com/foundations/inclusivity/media_1d7852e427ceb2de7f6308ed0fd120597e663f962.png?width=750&format=png&optimize=medium) Image: Image illustrating the content from the table, using a page title as an example. Page titles have a max estimated horizontal expansion of 300% from 36 characters in English, like \"Build your photography skills, fast.\" (source: https://spectrum.adobe.com/foundations/inclusivity/media_1c0b3ea402d014a947dae364b455a46b8056e68be.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Localization-ready design.\n\nLocalized content and text expansion have a substantial impact on how user interfaces look and perform across different countries. It’s vital to create layouts that can efficiently flow with the textual content of different length and nature."
+    },
+    {
+      "type": "guideline",
+      "content": "There are a few things to keep in mind in terms of how visual metaphors are being perceived differently country by country. To learn more, visit the Icon fundamentals page."
+    },
+    {
+      "type": "guideline",
+      "content": "Correct or incorrect.\n\nCheckmarks and “X” glyphs are commonly used in Western cultures to represent affirmation. However, in some countries such as Japan, these symbols are mostly used to indicate that something is not correct. At the same time, in Japan the “O” mark is the common way to express positive feedback to an action instead. Image: Illustration of 3 icons in a row: an X, a checkmark, and a circle. (source: https://spectrum.adobe.com/foundations/inclusivity/media_12d0cf1fe74f85d7d17b2af895a4aed7696b89c69.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Artifacts.\n\nWe often use icons to represent real life objects that are familiar to the human eye and use everyday. However, some of these objects take different shapes in different countries. A common example is the mailbox icon; familiar to North American users, it doesn’t translate well for users in other countries. Image: Illustration comparing two mailbox icon designs: one style of mailbox that is common in North America, and one style of mailbox that is common in Japan. (source: https://spectrum.adobe.com/foundations/inclusivity/media_153d879b21104a4f0c1d78509f59fce19f7de76e7.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Hands and animals.\n\nHands gestures are, generally speaking, tricky to use. Even gestures that we frequently use such as thumbs up and thumbs down can be perceived in an offensive way in certain countries. Animals can lead to misunderstandings as well. An example is the owl, which is a symbol of wisdom in the United States, carries the opposite meaning in some Asian countries. Image: Two illustrations of owls, side by side in a comparison. One owl is wearing a North American style graduation or scholar's cap and meant to be shown as wise. The other owl is not wearing anything but has a thought bubble over its head, with a question mark in the bubble, meant to show that it is confused or doesn't know anything. (source: https://spectrum.adobe.com/foundations/inclusivity/media_13986caaebb1d7a6f5abca190d740e3b1376b67ed.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Embedded text.\n\nAs a rule of thumb, embedding text within icons, illustrations, and images can potentially lead to headaches when the content needs to be localized, as the content is not easy to translate and as the icons are not meant to adapt to text expansion. As a workaround, it’s reasonable to use lines instead of real text. Image: 5 different icons of speech bubbles, all including a different representation of a language. Examples include characters in Japanese, Hindi, English, Simplified Chinese, and 4 lines representing a block of text. (source: https://spectrum.adobe.com/foundations/inclusivity/media_171d2c319579ea3381785da55935509291389acf7.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "As imagery is closely related to society, culture, beliefs, religion, and political values, it’s extremely important to be careful and intentional about picking pictures for each region or even country."
+    },
+    {
+      "type": "guideline",
+      "content": "People and portraits.\n\nIt’s important to pick models who are dressed appropriately for the region. Editing of portraits also differs with facial manipulation and skin smoothing being popular in many Asian countries such as China and Korea. The amount of skin shown can also be considered too suggestive in some cultures. Similarly, political, inspirational figures that are celebrated and extremely popular in the United States are likely to be unknown in some regions. Image: Semi-abstract illustration of ethnically diverse men and women wearing modest clothing. (source: https://spectrum.adobe.com/foundations/inclusivity/media_145b54e6902c0dcde5b0a130c5038e032c13a8c98.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Religion and politics.\n\nIn general, it’s best practice to avoid religious symbolism, hand gestures, and political imagery, as regions may perceive them differently. Image: Tibetan monk wearing a red robe walking across a bridge covered with multicolor prayer flags. (source: https://spectrum.adobe.com/foundations/inclusivity/media_136dd5563938c3103ef68fb95063e79458395957e.png?width=750&format=png&optimize=medium) Photos of Tibetan monks are perceived in Western cultures as deeply spiritual. In China, on the other hand, Tibetan Buddhist monasteries are a symbol of a long religious and political dispute."
+    },
+    {
+      "type": "guideline",
+      "content": "Seasonal content is greatly different country by country, and photography should reflect it accordingly. For example, there is a variety of celebrations, such as Thanksgiving, that are not meaningful in Asian countries, or interpreted in different ways. Image: Two images of people holding gifts of red roses and a small box of chocolates with a pink bow. (source: https://spectrum.adobe.com/foundations/inclusivity/media_1134eeec03a90a25ba3ee8f9399e660b6a01548a8.png?width=750&format=png&optimize=medium) Valentine’s day in Japan is quite unique from a western standpoint. The common roles are reversed and it’s the women who present gifts to significant others, usually chocolate or sweets."
+    },
+    {
+      "type": "guideline",
+      "content": "Traditions and manners.\n\nIt’s often said that the best way to experience a country is to learn and respect its customs. Similarly, when choosing imagery across different cultures, we need to be respectful and aware of different traditions and manners across different regions, and act accordingly. Image: Person laying on their back on a bench in the sun with their feet in the air showing the soles of their feet. (source: https://spectrum.adobe.com/foundations/inclusivity/media_1de505324ce29dc46aa5a19334b24302dc1e47497.png?width=750&format=png&optimize=medium) Pictures like this one would likely represent “relaxation” in the United States, but are inappropriate in countries like Thailand, where you are not supposed to show the soles of your feet."
+    },
+    {
+      "type": "guideline",
+      "content": "As mentioned in the Inclusive Design page, it’s important to not refer to objects by color, as users across countries perceive colors in different ways. Similarly, colors are perceived differently around the globe and carry different emotional, political, and cultural meanings."
+    },
+    {
+      "type": "guideline",
+      "content": "The meaning of color is rooted in culture.\n\nLet’s consider an example: the design for a finance application. To display how certain stock options are performing, designers from the United States or Europe would likely use the color green to depict good performance and red to display stocks performing poorly. On the other hand, surprisingly, designers in China or Japan would likely take an opposite approach, and reverse the usage of these two colors. While in the United States and most western countries the color red is often associated with the idea of error or danger. However, in eastern countries the color is tied to the concept of good luck and happiness. White is a color tied to the concept of purity in western countries, but can be seen as a mourning color in countries like China. In Japan, purple is a color that expresses luxury and financial success, while in Italian popular culture is seen as a color that attracts bad luck. The list goes on. Image: Images showing how color has different semantic meaning in different countries. Top image of stock exchange monitor using green for negative values, and red for positive values. Bottom image showing a color swatch of red, labeled with the United States' sentiment of passion, excitement, danger, loss, and error, and China's sentiment of happiness, good fortune, and prosperity. (source: https://spectrum.adobe.com/foundations/inclusivity/media_14b70207acfebccd41df8f0b43da2c2a63ff61ef7.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Best practices.\n\nIn general, no color can be assumed to have a consistent meaning across cultures. When approaching the design of user interfaces for a global audience, colors should not be the only indicator of a specific status or use case. It's always better to integrate with textual or other visual clues. When designing promotional content, capturing the right tone and emotions from the local audience is key, and colors can have a big impact. It’s important to research specific markets from a cultural standpoint to choose the right creative decision. Image: Radial diagram showing colors and their meaning across different cultures. (source: https://spectrum.adobe.com/foundations/inclusivity/media_1a4a8e0a8e957f8a8b5e8e2b9e581e7d7d67a8c1b.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean is our standard system typeface. Developed specifically for Adobe's brand identity and user interface design, it provides extensive language support. Please refer to the Typography page for an in-depth overview of our typography system."
+    },
+    {
+      "type": "guideline",
+      "content": "Readability across languages.\n\nLanguages like Chinese, Japanese, and Thai use characters that are visually complex compared to the Latin ones. The peculiar nature of these writing systems has an impact on the character size, which is usually slightly bigger than western typography. To ensure good readability, it’s important to adjust the line-height value of paragraphs to create some extra breathing room between lines, and when necessary, increase interline spacing between characters. Similarly to text expansion, these differences can have an impact on the width and height of localized paragraphs. Image: A lowercase Latin letter 'a' shown alongside a Chinese/Japanese character, in gray on a light background, illustrating the visual comparison between Latin and CJK typography. (source: https://spectrum.adobe.com/foundations/inclusivity/media_1199e568655abe578125f9a7bb4fe837e3465c1aa.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Content volume expectation.\n\nDifferent cultures have varying expectations around volume of content. Japanese users generally prefer larger amounts of content and greater detail compared to North Americans, so content-heavy interface designers should consider the volume of content expected by these users. We recommend a modular design that allows for additional content. This is both for usability and user satisfaction of our products."
+    },
+    {
+      "type": "guideline",
+      "content": "Emphasis.\n\nUsing bold and italics to emphasize words or phrases is common in Western typography, but for certain languages it might not be the right way of highlighting content. For example, languages like Chinese, Korean, and Japanese do not commonly rely on italicization because they lack oblique faces, and use alternatives like emphasis dots. Image: Alt text: \"Two text examples in gray showing emphasis techniques: the English phrase 'I love New York' with 'New York' in italics, and a Japanese phrase with '東京' (Tokyo) in bold to show emphasis, illustrating how emphasis differs across scripts. (source: https://spectrum.adobe.com/foundations/inclusivity/media_13229469b62ab31c7eb9039425c647c5c9d024eee.png?width=750&format=png&optimize=medium)"
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/internationalization",
+  "lastUpdated": "2026-09-03",
+  "status": "published",
+  "tags": [
+    "international design",
+    "localization",
+    "text expansion",
+    "globalization",
+    "cultural differences",
+    "iconography",
+    "metaphors",
+    "user interface localization"
+  ]
+}