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

package/guidelines/inclusive-ux-writing.json

@@ -6,6 +6,10 @@
   "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"
@@ -16,14 +20,14 @@
     },
     {
       "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: PreferredAvoidWhyPeopleCustomersBe 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 allSee allBe descriptive. Not everyone is “seeing,” and the “do” options (“View,” “Show,” “Go to all”) have more nuance in meaning.Play videoWatch videoBe descriptive. Not everyone is “watching” the video.Last updated: 2 days agoUpdated • 2d agoBe 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 informationBe meaningful. Guide people in a stepped flow and tell them specifically what to do. Set accurate expectations for how long a task will take."
+      "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://preview.spectrum.adobe.com/content/language-and-inclusivity/inclusive-ux-writing",
+  "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

@@ -8,11 +8,11 @@
     { "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. For questions, feel free to reach out to the International Design team to collaborate and make our products equally effective in all regions. International Design Wiki"
+      "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": "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."
+      "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",
@@ -20,47 +20,63 @@
     },
     {
       "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://preview.spectrum.adobe.com/foundations/inclusivity/media_12d0cf1fe74f85d7d17b2af895a4aed7696b89c69.png?width=750&format=png&optimize=medium)"
+      "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": "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://preview.spectrum.adobe.com/foundations/inclusivity/media_153d879b21104a4f0c1d78509f59fce19f7de76e7.png?width=750&format=png&optimize=medium)"
+      "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": "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://preview.spectrum.adobe.com/foundations/inclusivity/media_13986caaebb1d7a6f5abca190d740e3b1376b67ed.png?width=750&format=png&optimize=medium)"
+      "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": "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://preview.spectrum.adobe.com/foundations/inclusivity/media_171d2c319579ea3381785da55935509291389acf7.png?width=750&format=png&optimize=medium)"
+      "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": "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://preview.spectrum.adobe.com/foundations/inclusivity/media_145b54e6902c0dcde5b0a130c5038e032c13a8c98.png?width=750&format=png&optimize=medium)"
+      "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": "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://preview.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."
+      "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": "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://preview.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."
+      "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": "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://preview.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."
+      "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": "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://preview.spectrum.adobe.com/foundations/inclusivity/media_14b70207acfebccd41df8f0b43da2c2a63ff61ef7.png?width=750&format=png&optimize=medium)"
+      "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": "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://preview.spectrum.adobe.com/foundations/inclusivity/media_1a4a8e0a8e957f8a8b5e8e2b9e581e7d7d67a8c1b.png?width=750&format=png&optimize=medium)"
+      "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://preview.spectrum.adobe.com/foundations/inclusivity/media_1199e568655abe578125f9a7bb4fe837e3465c1aa.png?width=750&format=png&optimize=medium)"
+      "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",
@@ -68,10 +84,10 @@
     },
     {
       "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://preview.spectrum.adobe.com/foundations/inclusivity/media_13229469b62ab31c7eb9039425c647c5c9d024eee.png?width=750&format=png&optimize=medium)"
+      "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://preview.spectrum.adobe.com/foundations/inclusivity/internationalization",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/internationalization",
   "lastUpdated": "2026-09-03",
   "status": "published",
   "tags": [

package/guidelines/layout-spacing.json

@@ -8,22 +8,22 @@
     { "type": "purpose", "content": "Layout spacing" },
     {
       "type": "guideline",
-      "content": "Layout spacing governs object relationships, such as the spacing between components, patterns, and regions of a UI. It’s implemented through global tokens, which follow a geometric progression with values that round to familiar numbers: 2, 4, 8, 16. If you're used to an 8 px grid, these will feel recognizable. The scale provides consistent perceptual difference between adjacent values across its full range. Image: Scale of gray squares increasing in size from left to right, labeled with values 1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, and 96, with a dotted diagonal line showing the growth curve. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_115ea12e4cac857c4b8d7fccac0293a81ae114447.png?width=750&format=png&optimize=medium)"
+      "content": "Layout spacing governs object relationships, such as the spacing between components, patterns, and regions of a UI. It’s implemented through global tokens, which follow a geometric progression with values that round to familiar numbers: 2, 4, 8, 16. If you're used to an 8 px grid, these will feel recognizable. The scale provides consistent perceptual difference between adjacent values across its full range. Image: Scale of gray squares increasing in size from left to right, labeled with values 1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, and 96, with a dotted diagonal line showing the growth curve. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_115ea12e4cac857c4b8d7fccac0293a81ae114447.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Global tokens govern object relationships in a layout. They create and distinguish the relationships between the components that make up a product UI. Smaller values create tighter relationships. Larger values create more visual independence. The choice should reflect the actual relationship between the objects being spaced. Image: Screenshot of the Adobe GenStudio interface showing a top navigation bar with a search field, a green table icon with a loading placeholder bar, and a floating toolbar with icons for image approval, comment, \"Cr,\" and a highlighted gold icon; two callouts label the horizontal bands as \"spacing-100\" and \"spacing-250.\" (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1a16efb69dea68171c4c4dcbcff449b7c21eaa2ad.png?width=750&format=png&optimize=medium)"
+      "content": "Global tokens govern object relationships in a layout. They create and distinguish the relationships between the components that make up a product UI. Smaller values create tighter relationships. Larger values create more visual independence. The choice should reflect the actual relationship between the objects being spaced. Image: Screenshot of the Adobe GenStudio interface showing a top navigation bar with a search field, a green table icon with a loading placeholder bar, and a floating toolbar with icons for image approval, comment, \"Cr,\" and a highlighted gold icon; two callouts label the horizontal bands as \"spacing-100\" and \"spacing-250.\" (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1a16efb69dea68171c4c4dcbcff449b7c21eaa2ad.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "A common approach to spacing is to pick a base unit and build all spacing values from its multiples, such as 8, 16, 24, 32. These values are familiar and easy to remember, which is part of their appeal. This approach is called a linear progression. Linear progressions like this work well in many situations, but have two limitations. First, spacing needs to grow with the elements around it. A 4 px gap between an icon and label looks right in a small component, but as the component scales up, the nearest grid values (4 px or 8 px) no longer fit the relationship correctly. Second, linear scales lose differentiation at larger values. The difference between 4 px and 8 px is obvious. The difference between 72 px and 80 px is almost imperceptible. Image: Scale of gray squares increasing in size from left to right beneath a pink upward curve, with a bracket over the first two squares labeled \"100% increase\" and a bracket over the last two squares labeled \"11% increase,\" illustrating a decelerating growth rate. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_10c237cd90839604eca53c6ac170d7cf2f3812435.png?width=750&format=png&optimize=medium)Both of these limitations come down to the same underlying cause: human perception doesn't measure space in fixed increments. Spectrum's spacing system is built around geometric progressions and semantic tokens to address this directly. The next page explains how."
+      "content": "A common approach to spacing is to pick a base unit and build all spacing values from its multiples, such as 8, 16, 24, 32. These values are familiar and easy to remember, which is part of their appeal. This approach is called a linear progression. Linear progressions like this work well in many situations, but have two limitations. First, spacing needs to grow with the elements around it. A 4 px gap between an icon and label looks right in a small component, but as the component scales up, the nearest grid values (4 px or 8 px) no longer fit the relationship correctly. Second, linear scales lose differentiation at larger values. The difference between 4 px and 8 px is obvious. The difference between 72 px and 80 px is almost imperceptible. Image: Scale of gray squares increasing in size from left to right beneath a pink upward curve, with a bracket over the first two squares labeled \"100% increase\" and a bracket over the last two squares labeled \"11% increase,\" illustrating a decelerating growth rate. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_10c237cd90839604eca53c6ac170d7cf2f3812435.png?width=750&format=png&optimize=medium) Both of these limitations come down to the same underlying cause: human perception doesn't measure space in fixed increments. Spectrum's spacing system is built around geometric progressions and semantic tokens to address this directly. The next page explains how."
     },
     {
       "type": "guideline",
-      "content": "Use global tokens for layout spacing. TokenValuespacing-251pxspacing-502pxspacing-754pxspacing-856pxspacing-1008pxspacing-20012pxspacing-30016pxspacing-35020pxspacing-40024pxspacing-50032pxspacing-60040pxspacing-70048pxspacing-75056pxspacing-80064pxspacing-90080pxspacing-100096px"
+      "content": "Use global tokens for layout spacing. Token Value spacing-25 1px spacing-50 2px spacing-75 4px spacing-85 6px spacing-100 8px spacing-200 12px spacing-300 16px spacing-350 20px spacing-400 24px spacing-500 32px spacing-600 40px spacing-700 48px spacing-750 56px spacing-800 64px spacing-900 80px spacing-1000 96px"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/layout-spacing",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/layout-spacing",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [