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

package/guidelines/inclusive-design.json

@@ -1,101 +0,0 @@
-{
-  "$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://preview.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://preview.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://preview.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://preview.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://preview.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://preview.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://preview.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://preview.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://preview.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://preview.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://preview.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://preview.spectrum.adobe.com/foundations/inclusivity/media_1b00cb5370bcd64b094e8752f1437789bcc9a1429.png?width=750&format=png&optimize=medium)"
-    }
-  ],
-  "sourceUrl": "https://preview.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

@@ -1,30 +0,0 @@
-{
-  "$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": "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: 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."
-    },
-    {
-      "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",
-  "lastUpdated": "2026-09-04",
-  "status": "published",
-  "tags": ["inclusive UX writing", "inclusive language", "assistive technology"]
-}

package/guidelines/internationalization.json

@@ -1,87 +0,0 @@
-{
-  "$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. 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"
-    },
-    {
-      "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": "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": "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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."
-    },
-    {
-      "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."
-    },
-    {
-      "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."
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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)"
-    },
-    {
-      "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://preview.spectrum.adobe.com/foundations/inclusivity/media_13229469b62ab31c7eb9039425c647c5c9d024eee.png?width=750&format=png&optimize=medium)"
-    }
-  ],
-  "sourceUrl": "https://preview.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"
-  ]
-}

package/guidelines/language-and-inclusivity-writing-about-people.json

@@ -1,85 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/language-and-inclusivity-writing-about-people.json",
-  "name": "language-and-inclusivity-writing-about-people",
-  "title": "Writing about people",
-  "category": "designing",
-  "documentBlocks": [
-    { "type": "purpose", "content": "Writing about people" },
-    {
-      "type": "guideline",
-      "content": "Use neutral, precise, relevant descriptions.\n\nOnly include personal qualities if they’re relevant and important. Write what you mean, then look back at what you wrote and think about whom you’re centering with your words. Doing this can reveal which people you’re leaving out. What’s the sentiment behind your words?"
-    },
-    {
-      "type": "guideline",
-      "content": "Choose words carefully and understand historical significance.\n\nBe cautious of appropriating terms from marginalized communities. In this guide, we say “underrepresented groups.” You can also reference 3rd-party sources such as Wikipedia’s list of which words to use and which to avoid."
-    },
-    {
-      "type": "guideline",
-      "content": "Be clear and avoid stereotypes.\n\nBe on the lookout for proxy questions and statements, which appeal to generalizations and stereotypes. For example, saying, “just buy more storage” is a proxy statement on economic status, while “view additional storage options” doesn’t make those assumptions. Communicate from a place of equality, not condescension, and think about the worst-case interpretation of your words. Clear intent excludes fewer people and reduces bias."
-    },
-    {
-      "type": "guideline",
-      "content": "Account for machine learning and AI.\n\nWhen collecting user data in app or web experiences, first think about whether that information is actually needed, and then if it really is, communicate why. Allow for both common and custom responses, self-identification, multiple selections, and the option to opt out of responding. Artificial intelligence learns only from the information we provide to it, so our inherent biases can easily become included in training data. If content allows for variable and AI-provided information, consider the ways that may affect any copy."
-    },
-    {
-      "type": "guideline",
-      "content": "Use neutral, precise, relevant descriptions.\n\nPerson-first language centers the person, not their qualities, by using those qualities as modifiers: “Design Adobe apps for people who use assistive technology.” But for identity-first language, which some communities and individuals prefer instead, language highlights the disability: “Design Adobe apps for deaf people.” No group unilaterally chooses one over the other, so when you’re writing about someone, ask them how they want to be identified. Avoid euphemisms like “differently abled,” which are regarded as condescending, and descriptors used as nouns, like “the disabled” or “the blind.” These tend to present a group of individuals as a monolith and suggests a lack of individual diversity within the group. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_1a388ca91b3dac07b8b9d41e693a811e0a4f3cbd5.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_12215c42c43588b7fd9a9105f6e3f6345bfdb485a.png?width=750&format=png&optimize=medium) Preferred Avoid Disabled person or person with disabilities Differently abled or the disabled Blind person or person who is blind The blind Some phrases in common parlance that imply negativity are based on slurs against people with disabilities, such as “crazy” or “lame.” Never imply that a person is “suffering” from a disability or is a “victim” of a condition. Avoid appropriating terms from the disability community. Preferred Avoid Ridiculous or unpredictable Crazy Inconsiderate Tone-deaf Incompetent or bad Dumb or lame Keyanna has autism.Keyanna is suffering from autism. Placeholder variable Dummy variableAmir uses a wheelchair.Amir is confined to a wheelchair."
-    },
-    {
-      "type": "guideline",
-      "content": "Be clear and avoid stereotypes.\n\nWith imagery and language, avoid implying that a person has to look a certain way, be a certain size, or have a certain cognitive ability to do something. Depict more types of people as typical. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_124bc820debd47d09f5906d12389717f1a10e28c1.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_19f42ceaff4d200a149259d1997cfae3e1638808f.png?width=750&format=png&optimize=medium) Preferred Avoid This tutorial teaches cropping and usually takes 5 minutes.Follow this fast, easy tutorial.This feature works best when you zoom out to 75%.This feature isn’t for the vision-impaired."
-    },
-    {
-      "type": "guideline",
-      "content": "Avoid appropriating terms from underrepresented groups.\n\nBe aware of how words that are often associated with physical and mental health are often used as metaphors to describe interactions and product functionality. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_1b0a570fd23357daed6ee5e264ec5b8326414be6f.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_111b67af622d45a34e944d58d16912287e1b2e2ad.png?width=750&format=png&optimize=medium) Preferred Avoid Unavailable or locked or turned off or deactivated Grayed out Coherence check Sanity check Organize or organized OCD"
-    },
-    {
-      "type": "guideline",
-      "content": "Account for machine learning and AI.\n\nEnter metadata with caution. For example, don’t tag a photograph of a child with words like “crazy” or “weird.” Image: Key example showing how not to account for machine learning and AI. Incorrect usage, photograph with metadata tag field, label Tags. Inside tag field, tag label Crazy. (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_190b76647c472a96e68eb4a2a396895832da538a7.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Use neutral, precise, relevant descriptions.\n\nLet’s say you’re writing a persona. When describing a person's country of origin or race, be as descriptive as possible as to not generalize any race or ethnicity. Race is only pertinent to biographical and announcement-related content that involves significant, groundbreaking, or historical events. For capitalization, Adobe follows AP Stylebook guidelines: capitalize nationalities, peoples, races (all except white), and tribes."
-    },
-    {
-      "type": "guideline",
-      "content": "Choose words carefully and understand historical significance.\n\nAdobe’s Inclusive Engineering Terminology Standard covers a set of established software terms to avoid, such as “whitelist,” “blacklist,” “master,” and “slave.” Don’t use terms assigning good or bad values to racial characteristics, such as “dark pattern.” (Terms like \"dark mode,\" \"light theme,\" or \"black screen\" literally refer to color and brightness and don't assign good or bad values, so continue using them.) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_18351e9324b727a617022c4fa7a520fa10bf6179b.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_164ef15d2cd8f0f5b55809dd2abb240ba5b5766db.png?width=750&format=png&optimize=medium) Preferred Avoid Use this format to provide contextual clarity: ( Result in past participle form ) ( object ) Examples: Shared domains, approved people, targeted sites For coding constructs: Allowlist Whitelist Use this format to provide contextual clarity: ( Result in past participle form ) ( object ) For coding constructs: Blocklist Blacklist Legacy Grandfather clause Futile undertaking or a project destined to fail Death march Primary or main or source (e.g., “ main track ”)“ Master ” descriptors Primary / secondary Master / slave"
-    },
-    {
-      "type": "guideline",
-      "content": "Be clear and avoid stereotypes.\n\nIf you want to use a certain idiomatic or casual phrase, research its history before doing so. For example, imperfect spellings or pronunciations of words can imply pejorative associations with an accent. Be on the lookout for proxy questions, such as relating postal codes to ethnicity in rejecting job candidates, or making pricing or marketing decisions based on the average income of postal codes."
-    },
-    {
-      "type": "guideline",
-      "content": "Use plain language.\n\nSince English isn’t everyone’s first language, it’s best to write using clear, plain language — as well as avoid idioms and phrases that might be complicated for non-English speakers to understand. Plain language is more widely understood and, therefore, avoids alienating people. It especially avoids alienating people in ways that specifically belittle non-English speakers. For example, the conversational and casual phrases “long time no see” and “no can do” were originally used to belittle Native Americans. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_19592eaedc34900d2aa16d15a70386bb9ccd17148.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_18e9557448586e8ad2d413900937f8932099077ea.png?width=750&format=png&optimize=medium) Preferred Avoid Welcome backLong time no see2-step processWax on, wax offSorry, something went wrongNo can do"
-    },
-    {
-      "type": "guideline",
-      "content": "Depict more types of people as typical.\n\nWe must focus on building successful experiences for all users. That means writing and designing in a way that depicts all skin types, names, and cultures as typical. We cannot keep centering white-skinned, Western cultures in our designs. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_173561d2b0362bcca77aeaba6586133cb79fb99c6.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_10a9a65e9b14def281e2185bac817af10dff0ce3a.png?width=750&format=png&optimize=medium) Preferred Avoid Dark brown or beige or tan or peach, etc. Skin or flesh or nude (referring to color swatch) Critics Peanut gallery A broad range of name examples within a product experience (e.g., Ayesha, Ibrahim, Vignesh, Quynh) Only culturally white name examples within a product experience (e.g., John, Bill, Karen, Amy)"
-    },
-    {
-      "type": "guideline",
-      "content": "Be cautious of appropriating terms from underrepresented groups.\n\nHere’s a list of preferred words that are alternatives to common technology industry jargon. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_1cb3343dbe99abbdf43db13cf6c7bd826bacb904f.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_19045f2f94103c9130a672b9359d61145623e217f.png?width=750&format=png&optimize=medium) Preferred Avoid Native to the operating system or built-in feature Native Meeting Pow wow or circle the wagons Vision statement or strategic statement or value proposition Zen statement or Zen garden Role model or kindred spirit Spirit animal Guide Sherpa Authority or expert Guru or ninja"
-    },
-    {
-      "type": "guideline",
-      "content": "Be clear and avoid gendered language and stereotypes.\n\nRather than “he” or “she,” if you don’t know a person’s pronouns, make the phrase plural and use “they” instead. Use of “they” to describe one person is also accepted, although the syntax remains plural (e.g., “they are” = “that person is”). It’s also best to avoid using roles or stereotypes that have gendered roots (e.g., “businessman\" or “waitress”). Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_11f4fc44c503c2e74074d1314b59e3ba53534177b.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_14eb1213b292de728d3ae57bcee81ffeb5ca4f012.png?width=750&format=png&optimize=medium) Preferred Avoid Server Waitress Businessperson Businessman Flight attendant Stewardess They He/she or (S)he A group of people or a group of women Guys or girls or ladies Parents Moms"
-    },
-    {
-      "type": "guideline",
-      "content": "Choose words carefully and understand historical significance.\n\nUse gender and sexuality descriptors as modifiers, not nouns (e.g., “transgender woman” rather than “a transgender,” “bisexual person” rather than “a bisexual”). A person’s pronouns are not opinion or preference, even if they may change over time (view Spectrum’s guidelines on pronouns ). All of this helps us emphasize every person’s humanity, and keeps us from alienating people who aren’t cisgender and heterosexual. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_168e25aded8844c4098a3e13fa36e868c505a615b.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_1d210ed4b5a99533380b6da0bd2af860b88029994.png?width=750&format=png&optimize=medium) Preferred Avoid Transgender people or trans people Transgendered people or transgenders or the transgendered or transexuals Trans women Trans-women A transgender man A transman Alejandra, a lesbian woman Alejandra is a lesbian Jing, a non-binary person Jing is a non-binary Saadi is cis Saadi is CIS What are your pronouns?What are your preferred pronouns?Jamal’s pronouns are he/him/his. Jamal prefers he/him pronouns. Wholehearted or impassioned Hysterical"
-    },
-    {
-      "type": "guideline",
-      "content": "Be specific and kind.\n\nKnow the difference between sex (male/female) and gender (man/woman). When collecting personal data from users, consider if it is really necessary to ask for a person’s gender. Data collection and forms, while useful to product builders, can feel intrusive when asking about gender. When you really do need the information, allow for both common and custom responses, self-identification, multiple selections, and the option to opt out of responding. Avoid asking proxy questions, for example, asking for someone’s gender when the information that is actually needed is their bike size. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_104a2fe5be94e7d900c6368f6cc24d20f85d0012f.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_11fde27c76debb0ef7dbc1bd67858fa6c2cf5c569.png?width=750&format=png&optimize=medium) Preferred Avoid Prefer to self-describe and Prefer to not respond Other"
-    },
-    {
-      "type": "guideline",
-      "content": "Account for machine learning and AI.\n\nPeople globally identify with many genders and sexualities, so it's important to teach AI exactly that. It wasn’t until June 2018 that the World Health Organization (WHO) declassified being transgender as a mental illness, so even though humans have adjusted this perspective, machine learning and AI can still perpetuate these biases. Don’t use AI or machine learning to guess genders based on image recognition, text analysis, or anything else."
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/writing-about-people",
-  "lastUpdated": "2026-08-19",
-  "status": "published"
-}

package/guidelines/language-and-inclusivity-writing-with-visuals.json

@@ -1,61 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/language-and-inclusivity-writing-with-visuals.json",
-  "name": "language-and-inclusivity-writing-with-visuals",
-  "title": "Writing with visuals",
-  "category": "designing",
-  "documentBlocks": [
-    { "type": "purpose", "content": "Writing with visuals" },
-    {
-      "type": "guideline",
-      "content": "Try different ways of organizing information.\n\nOrganize thoughts chronologically, not spatially. If interfaces are organized around time instead of position (e.g., “before” and “after” instead of “above” and “below”), it alleviates a major pain point for people with visual impairments who rely on screen readers (audio or braille devices) or magnifiers (for example, an interface may be too zoomed-in for it to be apparent that person is in a modal). Doing this also avoids confusion for people with learning disabilities that make it hard to understand directional language. Create content that can be presented in different ways without losing information or structure, sometimes called “modular content.” Perhaps the layout can be simplified, or the order of content can be switched around. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_1c1dc4df379f4d4000b519df4a8df3be19adff5d4.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_1f6fc9881e0884994e76ad4b606dced6c500a3f89.png?width=750&format=png&optimize=medium) Preferred Avoid This article describes linking in more detail.Click here to learn more about linking. Learn how to crop images Take this hands-on tutorial now. [ Start ] This is modular content; all the content pieces could stand alone or be rearranged. Ready to learn? Or are you ready to dig in? How about both? [ Start tutorial / Go back ] This is more traditional content; the content pieces depend on each other in a certain order to make sense. Update your information (step 1 of 3)Confirm your information"
-    },
-    {
-      "type": "guideline",
-      "content": "Avoid directional language.\n\nOrganize interfaces around time (chronologically) instead of position (spatially) to ensure that you don’t use directional language to describe how to accomplish a task. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_110ca6da0114667ec40138d1c6ae7ba8c33b69950.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_162ff93be0b03bb073e96c26e715cf375769de4ce.png?width=750&format=png&optimize=medium) Preferred Avoid FirstAboveNextBelowIn the menu barOn the leftFinallyAt the bottom"
-    },
-    {
-      "type": "guideline",
-      "content": "Prevent errors before correcting them.\n\nHelp people avoid and correct mistakes by writing in a predictable and consistent way, and make screens look and act the way people expect. Consistent navigation and identification of components across products and surfaces will aid in this. Especially in forms, label and instruct sufficiently. If an error occurs, describe the problem in text without relying on icons or colors alone. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_11376671b0abc29eb2039aa53218afc5aa9b279c4.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Avoid naming things.\n\nEvery new name is a new concept that a person must learn, which increases cognitive load. But when naming is unavoidable, be consistent. Name actions across experiences and products the same, or at least predictably. Describe and define the name before mentioning it in UI content."
-    },
-    {
-      "type": "guideline",
-      "content": "Describe what’s happening.\n\nProvide titles to describe a situation, such as in coach marks or a stepped flow, and keep them consistent within the same situation. This helps all people navigate, find content, and determine where they are. If visual content is time-based media, like a tutorial video, text provides descriptive identification and ideally offers an alternative to the visual, such as a transcript, closed captioning, or a step-by-step written guide."
-    },
-    {
-      "type": "guideline",
-      "content": "Write about actions and their effects.\n\nTake a step back to think about the interaction you’re writing about. Then, write about what controls and buttons do, not what they look like, in the interaction. Control type (e.g., “button” or “slider”) is coded separately, so screen readers will already pick up what it’s called. Give each a name that describes its purpose. Focus your attention on results and UI words, not how people should physically interact with a control. Each person’s accessibility tech will describe the correct interaction for them. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_191b4e8a624329ecde87f67128da614a530e691f4.png?width=750&format=png&optimize=medium)Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_128dece0b359eaaed84cdf64e529620307e27c8ff.png?width=750&format=png&optimize=medium)Write about the effect (“make changes with the Edit tool”) rather than the interaction (“click to edit”). Preferred Avoid Enter emailType email addressSaveThe \"Save\" buttonZoom inPinch the trackpadCancelCloseOn/offSwitch/toggle, activateMenuSide drawerEditThe pencil iconSelect, go toClick, tap"
-    },
-    {
-      "type": "guideline",
-      "content": "​​Don’t rely only on color or icons.\n\nAdding words to an interface is better than relying on color or icons as the only way of conveying information, indicating an action, prompting a response, or distinguishing a visual element. If you use links in text, make the purpose of each link clear from the link text alone. Screen readers usually inform the reader if a word is a hyperlink, so the words “click here” or “link” get in the way. Additionally, screen readers can’t differentiate between the many times “click here” can appear in one view. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_12b83bac79712fd24e6b1888a6fcd5f6ebd6a1bb6.png?width=750&format=png&optimize=medium)Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_1e2ca96cc7adf7e30732122a616f952c3acfd8f5f.png?width=750&format=png&optimize=medium)Add error message text to the interface, rather than relying only on a red outline to communicate an error state."
-    },
-    {
-      "type": "guideline",
-      "content": "Don’t rely on visuals alone to communicate.\n\nThe visual metaphors of emoji and icons can have a wide variety of interpretations, especially across cultures. Describe the interface in terms of actions and tasks, not component color or visual design. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_17c3e920a6440c98e2cb7c5e4b31f20f3cac0b7df.png?width=750&format=png&optimize=medium) Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_1731ab8abc7bbac6a3f64aef590d145e560ff877f.png?width=750&format=png&optimize=medium) Preferred Avoid Secure site🔒Saved to the cloud☁️The number you entered isn’t in our system.❌The Go buttonThe green button"
-    },
-    {
-      "type": "guideline",
-      "content": "Provide alt text.\n\nAlt text — short strings that describe the function of interface elements and describe images — improves understanding and clarity for everybody using a product, not only people using assistive technology. For example, if you were to hover your mouse over the “search” magnifying glass icon on Adobe.com, it would reveal the alt text “Search Adobe.com.” This provides more context about the available action. Alt text for any non-text content allows it to be changed into other forms that people need, such as large print, braille, speech, symbols, or simpler language. It makes visual cues, like icons and images, legible to people with low vision using assisted services (e.g., Voiceover on iOS, Talkback on Android ). Talk with engineers about providing alt text, hints, and traits for components. For example, an icon-only button that doesn’t have a text label needs to still communicate its purpose using text. Spectrum’s documentation has detailed guidance about building accessible interfaces, and the W3C also has a list of resources and tutorials about alt text that offer a more comprehensive introduction. For alt text for images, view our writing guide. Preferred Avoid alt=”Chicago Bulls player Michael Jordan making his first of 38 points against the Utah Jazz on their home court, despite widespread speculation that he had the flu.”alt=”Basketball player making a basket at an arena”alt=”Animation showing how to use the touch shortcut. Take the tutorial for more info.”alt=”Animation showing the touch shortcut used with the shape tool to create a shape with a constrained aspect ratio”"
-    },
-    {
-      "type": "guideline",
-      "content": "Photographs and stock images.\n\nIn general, just speak to what something is. One way to approach this is to imagine that you’re describing the image to someone over the phone. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_136dd5563938c3103ef68fb95063e79458395957e.png?width=750&format=png&optimize=medium)Tibetan monk wearing a red robe walking across a wooden bridge covered with multicolor prayer flags."
-    },
-    {
-      "type": "guideline",
-      "content": "Images that show or function as UI.\n\nMention all parts of the UI and what the content is for each part, if applicable. Write in the order of how a screen reader would read the components in the actual UI. When an image functions as a UI component — for example, an icon-only button or an image being used as a button — use verbs to describe the action instead of the appearance of the iconography. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_1a22871ce2657f1384c883cbc027b73ecbf320c7c.png?width=750&format=png&optimize=medium)First example: 2 meters showing positive status. First meter labeled Tutorials completed, 2 of 8. Second meter labeled Storage space, 15%. Second example: Send message (Not: “paper airplane in motion”)."
-    },
-    {
-      "type": "guideline",
-      "content": "Images that describe usage notes or guidelines.\n\nDescribe any specific examples of how to apply (or not to apply) a concept or guideline that has been outlined in other text. Be sure to include any text that’s part of the image. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/media_10dd8f51f80783ba79e4642cea18ff806d07ced9e.png?width=750&format=png&optimize=medium)3 key examples showing correct usage of writing in simple tense. She ran for president. He writes great poetry. Carmen will make the poster."
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/writing-with-visuals",
-  "lastUpdated": "2026-08-19",
-  "status": "published"
-}

package/guidelines/layout-and-structure-containers.json

@@ -1,47 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/layout-and-structure-containers.json",
-  "name": "layout-and-structure-containers",
-  "title": "Containers",
-  "category": "designing",
-  "documentBlocks": [
-    {
-      "type": "purpose",
-      "content": "In Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific contexts. Containers are used across Spectrum 2 interfaces in multiple ways, but the commonality they share is that they group related concepts together into distinct areas. Some usages of containers have more detailed guidelines. For example, a card uses a container and inherits its properties, but it can only represent a distinct object (such as an individual asset or product). A block of marketing material containing multiple concepts (like subscription information plus actions to take) is grouped together in a container, but is not considered a card. Whether broad or specific, a user should be able to readily tell the purpose of a container. Separation of containers is marked through a clear visual change, such as contrast in a background color or through spacing. All containers share a common set of rules for styles, padding, and emphasis.\n\n### Example\n\nCards and select boxes share container styles. In this example, both use the emphasized style. Cards also have additional options that select boxes do not, like t-shirt size and layout. Image: UI components showing examples of card layouts for a Photoshop photo editing course on the left with multiple card variations, and a select box component example on the right featuring a checkbox and favorites heart icon. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/media_1daffa98ca15b1299210db1dd829d7377de85e65a.png?width=750&format=png&optimize=medium)Examples of containers: two cards with different sizes and layout options, and a select box."
-    },
-    {
-      "type": "guideline",
-      "content": "All containers share a set of defined styles. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/media_130061659941d2e3f73cf5a50fb9df8aeb95ca596.png?width=750&format=png&optimize=medium) Background color By default, containers are visually distinguished through a change in background color. Learn more about this in background layers. Emphasized In some situations, drop shadows are used to provide emphasis to a container or group of containers, like in a set of related cards. Emphasized containers should be used sparingly. View more about container emphasis. Border Borders can also be used around objects as an alternate style to a background color, and should be used without a fill. Vertical, full-width dividers can also be used to create separation for larger sections of content, like in a panel. View more about border width. Spacing This is the container style with the least emphasis. Instead of using a visible border, spacing is used to create separation between concepts. View more about spacing."
-    },
-    {
-      "type": "guideline",
-      "content": "Example.\n\nThis medium card uses spacing-300 for internal padding. Image: Card component example with checkbox, abstract wavy image, title and description text, showing spacing-300 (16px) padding measurement indicated by dotted line on the left. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/media_13224b595dae476332958fef768371a29adbc1572.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Example.\n\nIn this group of containers — each representing a product — different container styles can be used to draw attention to a specific item. In this case, the emphasized container is paired with a badge, and contrasts against the more subdued containers with filled (gray) backgrounds. Image: Three app product cards displaying Acrobat, Photography, and All apps with icons, pricing placeholders, and Buy now buttons, with the All apps card highlighted by a \"Best value\" badge. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/media_18c340f95534d724d0566c68fa959d8cc3bf5668e.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "States of interactive, emphasized containers.\n\nIf the whole container is interactive, hover is shown through a slightly more prominent drop shadow. When dragged, a much more prominent shadow is shown in order to bring focus to the dragged item and show elevation above the rest of the UI. Note that specific components might have different options and states. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/media_1d5c23228ef95a1f5def853200c19be7fd89b487e.png?width=750&format=png&optimize=medium) Emphasized, default Emphasized, hover Dragged"
-    },
-    {
-      "type": "guideline",
-      "content": "A consistent app frame helps create a sense of brand unity and helps users feel comfortable and familiar with our products. Predictable navigation is also especially helpful for users who work across multiple applications, and it makes it easier to learn how to use new products. The Spectrum 2 app frame framework provides a consistent visual style and navigation. It offers foundational structures and guidelines that product teams can adapt to their own contexts. View more details about the S2 app frame. The main content area is defined by a unique container style that's used only in the app frame. It has a subtle drop shadow to provide separation from the navigation. View more about using container styles to divide content within content areas. Image: Adobe Firefly app interface showing left sidebar with navigation menu items (Home, Files, Brands, Discover, Schedule, Learn, Plugins) and a Create button, plus top header with search bar and utility icons. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/media_16b19bf7867ae4d830240dad00019054f87d38fb8.png?width=750&format=png&optimize=medium)Example of an app frame with a side navigation."
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/containers",
-  "lastUpdated": "2026-09-11",
-  "status": "published",
-  "tags": [
-    "containers",
-    "cards",
-    "select boxes",
-    "padding",
-    "spacing",
-    "background color",
-    "emphasis",
-    "border",
-    "dividers"
-  ]
-}

package/guidelines/layout-and-structure-spacing-overview.json

@@ -1,66 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/layout-and-structure-spacing-overview.json",
-  "name": "layout-and-structure-spacing-overview",
-  "title": "Spacing",
-  "category": "designing",
-  "documentBlocks": [
-    { "type": "purpose", "content": "Spacing" },
-    {
-      "type": "guideline",
-      "content": "Image: Stylized 3D icon of a pentagon shape made of glowing green connected nodes and lines, like a graph or network diagram, on a soft white background. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1c4326bd9edb77f5d2a52d5aa0e940ddcc9550aa8.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Stylized 3D icon of four rounded outline squares of varying sizes arranged in a 2x2 grid, in a blue-purple gradient, resembling an app grid or dashboard icon. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_184d3e0ac92561baea450f5c37769314753e05828.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Stylized 3D icon of an eye with a purple-to-pink gradient, featuring a simplified almond-shaped outline and a comma-shaped iris, on a soft white background. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1235ef29d70ad3b98566f79b372b39bd4dc8cf5e7.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Relational.\n\nEvery spacing decision carries meaning. Proximity communicates what belongs together, what is separate, and how an interface is organized."
-    },
-    {
-      "type": "guideline",
-      "content": "Proportional.\n\nNot all elements grow at the same rate. Spectrum uses distinct spacing scales, each tuned to the elements they serve. This keeps values consistent and harmonious across all sizes and contexts."
-    },
-    {
-      "type": "guideline",
-      "content": "Perceptual.\n\nSpectrum's spacing values are based on visual perception. They are designed to support accurate visual interpretation and maintain consistent relationships between interface elements across different contexts."
-    },
-    { "type": "guideline", "content": "Relationships" },
-    {
-      "type": "guideline",
-      "content": "Relationships.\n\nCloser elements are more associated. Distant elements are more independent. Image: Diagram showing a list of content cards grouped by relevance: the top two cards are bracketed and labeled \"More related,\" while all three cards together are bracketed and labeled \"Less related\" on the right side. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_160a34223f929bf2e94eee1cb1d58d7ec90ec86a8.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Boundaries.\n\nConsistent proximity within a group signals that all members are equally related. Image: Diagram showing two identical pairs of content cards, each pair enclosed in a dashed pink box, illustrating a repeated grouping structure. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1201af3d7c478557df34557c19dab71dc46fd9ad8.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Structure.\n\nThe overall distribution of space shows how content is organized within a layout. Image: Grayscale wireframe mockup of an application interface showing a top navigation bar with tabs, a left sidebar with icon buttons, and a right panel with four labeled sliders and a dropdown menu. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_17a7999c3c47bf695711fccc10e0799cbd6b1957a.png?width=750&format=png&optimize=medium) These three things are connected. Change one, and the others shift too. Spacing decisions are not visual alone, but rather they are structural and meaningful. Spacing also shapes how an interface feels. Negative space (the open areas between and around elements) creates a sense of calm and helps people focus on what matters. It's one of the most effective ways to create visual balance and direct user attention within a layout. Image: Grayscale wireframe mockup of a webpage or app interface with a top navigation bar, a profile icon and menu tabs, a left sidebar list, and a highlighted content panel with text lines and two buttons. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_11265bfff799dcff670349049460f288b6195ee05.png?width=750&format=png&optimize=medium)Less negative space creates clutter and increases cognitive load. Image: Diagram showing two identical pairs of content cards, each pair enclosed in a dashed pink box, illustrating a repeated grouping structure. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1770c6aefbbcb0ef043022106ea246562c4382558.png?width=750&format=png&optimize=medium)More negative space creates a calm, focused experience."
-    },
-    {
-      "type": "guideline",
-      "content": "Jump to.\n\nImage: Stylized 3D icon of a rounded square divided into three panels—one wide top panel and two smaller bottom panels—in a purple gradient, representing a dashboard or layout structure. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1caf3f715f3bcde815b184c56914ddf0808a00ffd.png?width=750&format=png&optimize=medium) Layout spacing Layout spacing Image: Stylized 3D icon of two toggle switches stacked vertically in a blue gradient—the top toggle shown in the off position and the bottom toggle shown in the on position. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_164937f2c0285c78dd62f96e1e82519a58de2a3e6.png?width=750&format=png&optimize=medium) Component spacing Component spacing"
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/overview",
-  "lastUpdated": "2026-08-13",
-  "status": "published",
-  "tags": [
-    "Spacing",
-    "Proximity",
-    "Negative space",
-    "Layout spacing",
-    "Component spacing",
-    "Relational",
-    "Perceptual",
-    "Boundaries",
-    "Structure",
-    "Cognitive load"
-  ]
-}