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

package/guidelines/creating-bluelines-browsing-context.json

@@ -1,91 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/creating-bluelines-browsing-context.json",
-  "name": "creating-bluelines-browsing-context",
-  "title": "Creating bluelines",
-  "category": "designing",
-  "documentBlocks": [
-    { "type": "purpose", "content": "Creating bluelines" },
-    {
-      "type": "guideline",
-      "content": "The accessible name is the text that software uses to identify a component, and communicates it to the user. Assistive technologies like screen readers and voice control require an accessible name to read aloud content to screen reader users, or to accept speech input from voice control users to interact with digital content. Learn more about accessible names. Accessible names vary depending on the content. Accessible names must be defined for controls that don’t have visible text labels."
-    },
-    {
-      "type": "guideline",
-      "content": "A. Side navigation state control.\n\nThe default accessible name are Show menu labels and Hide menu labels. In general, the names should be as specific as possible and are up to individual product teams to define, based on the content inside. View more details about side navigation state control."
-    },
-    {
-      "type": "guideline",
-      "content": "B. Product lock-up.\n\nWhen an interactive control has a visible text label, there is no requirement to specify an accessible name. The visible text label will be accessible and the graphic will be ignored by a screen reader."
-    },
-    {
-      "type": "guideline",
-      "content": "C. Side navigation labels.\n\nWhen the side navigation is partially minimized (icon-only), the labels on the tooltips and when the side navigation is expanded should match the accessible names. Because a text label is available in both expanded and minimized states, app frame side navigation buttons do not require additional annotation."
-    },
-    {
-      "type": "guideline",
-      "content": "D. Adobe-wide actions.\n\nIf using the universal navigation pattern, follow guidance defined in the design and implementation for continuity across products. Here are some guidelines to keep in mind as you define accessible names in the app frame:"
-    },
-    {
-      "type": "guideline",
-      "content": "D. Adobe-wide actions.\n\nIf using the universal navigation pattern, follow guidance defined in the design and implementation for continuity across products."
-    },
-    {
-      "type": "guideline",
-      "content": "Landmark regions create a programmatic identification of the visual areas or sections of web applications, which represent the spatial layout of the user interface. The purpose of annotating landmark regions is to ensure developers code the page structure correctly, include the correct content in the defined grouping, and apply an accessible name to the landmark regions that require them. Learn more about landmark regions. Any non-text element in a digital interface with a text label must have a text alternative. Here’s an example of how you might name landmark regions in an app frame:"
-    },
-    {
-      "type": "guideline",
-      "content": "Landmark regions create a programmatic identification of the visual areas or sections of web applications, which represent the spatial layout of the user interface. The purpose of annotating landmark regions is to ensure developers code the page structure correctly, include the correct content in the defined grouping, and apply an accessible name to the landmark regions that require them. Any non-text element in a digital interface with a text label must have a text alternative. Here’s an example of how you might name landmark regions in an app frame: Image: Diagram showing landmark regions of the app frame, including Navigation (Global), Banner, Navigation (Side), and Region, in which the name is descriptive of the content. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1eef1503193f9c071e33d7e4dcc7364d3fc831e1a.png?width=750&format=png&optimize=medium) Note that you may also want to include additional landmark regions for content within each area. A. The navigation areas require accessible names, because there is more than one area on the page. Depending on your content, the accessible names might be different for your product. B. Regions always require accessible names, and should be named based on the content of the region. If using content areas split into additional areas, make sure to name those regions as well. Note: In some cases, landmarks might be better defined as a complementary landmark instead of a region landmark. For example, the AI assistant in Digital Experience products is separate from the main content (not contained within another landmark), but is still supportive of the main content. In that case, the AI assistant would be a complementary landmark instead of a region landmark."
-    },
-    {
-      "type": "guideline",
-      "content": "Heading annotations describe the heading structure of a digital interface and are helpful for all users. Screen reader users in particular rely on them to navigate an interface. They organize information, help create an information hierarchy, and build a mental map of the content available. Learn more about heading annotations. There must be one <h1> heading, and any text that serves the purpose of a heading must be marked accordingly from <h1> to <h6>. Because headings rely greatly on structure and content, they will likely vary depending on the page. As a general rule, the <h1> should live in the main landmark region. Here’s an example of how you might structure heading annotations for this screen:"
-    },
-    {
-      "type": "guideline",
-      "content": "Heading annotations describe the heading structure of a digital interface and are helpful for all users. Screen reader users in particular rely on them to navigate an interface. They organize information, help create an information hierarchy, and build a mental map of the content available. There must be one <h1> heading, and any text that serves the purpose of a heading must be marked accordingly from <h1> to <h6>. Because headings rely greatly on structure and content, they will likely vary depending on the page. As a general rule, the <h1> should live in the main landmark region. Here’s an example of how you might structure heading annotations for this screen: Image: Example of heading annotations for Photoshop. H1, Welcome to Photoshop content area. H2, Start something new content area. H3, cards with marketing and user-customized content suggestions. H4, Favorites section in side navigation. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1f1c24c6a47078ee2e72f275cf116314df0e31178.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "The keyboard focus order describes how someone who uses a keyboard to operate the interface (instead of a pointing device like a mouse), would interact with an interface. Learn more about keyboard focus order. Keyboard focus order will depend on what controls are available on the page. Here’s an example of how you might define the order in the app frame:"
-    },
-    {
-      "type": "guideline",
-      "content": "The keyboard focus order describes how someone who uses a keyboard to operate the interface (instead of a pointing device like a mouse), would interact with an interface. Keyboard focus order will depend on what controls are available on the page. Here’s an example of how you might define the order in the app frame: Image: Example of a keyboard focus order for Photoshop, with an order from 1 as the side navigation show/hide affordance, and 22 as the filter for recent files. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_16b5e54f6ed6dd1b100303107eaeddc8409567f03.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Support keyboard focus for resizing the side navigation.\n\nExample of correct usage, support for keyboard focus for size navigation. The side navigation width is focusable and resizable by using the left and right arrow keys. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_15add197e527eb49a7a8f89286b990a582769f5f3.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Include a “Skip to main content” button.\n\nExample of correct usage, inclusion of a Skip to main content button within the app frame header. Image: Example of correct usage, inclusion of a Skip to main content button within the app frame header. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1727ff3b9a578166d4a5e3067f54d9ff2b404b80c.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Support F6 key navigation.\n\nWhen properly supported, the F6 key allows keyboard users to navigate through different regions of an application efficiently. Without this support, keyboard-only users have no means to jump to specific areas of the application, resulting in an excessive number of keystrokes to reach their desired goal. Here are some key quality factors to consider: A keyboard focus indicator should be present to show keyboard-only users their current location within the interface. Ideally, the focus of the F6 key should move in accordance with the landmark regions defined in the HTML of the application. Major sections of the app should be accessible through the F6 key, including main navigation, toolbars, contextual toolbars, and the canvas. Each of these regions must have an accessible name assigned to them, allowing screen reader users to understand which area of the user interface they are currently navigating. For more information about F6 key navigation, please refer to the Digital Accessibility Guide: Design a11y checklist. Image: Example of correct usage, support for F6 key navigation. This helps users traverse through different regions of an application efficiently. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1d708d40a17766cb37e6d7ff737079982577b079b.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Support F6 key navigation.\n\nWhen properly supported, the F6 key allows keyboard users to navigate through different regions of an application efficiently. Without this support, keyboard-only users have no means to jump to specific areas of the application, resulting in an excessive number of keystrokes to reach their desired goal. Here are some key quality factors to consider: A keyboard focus indicator should be present to show keyboard-only users their current location within the interface. Ideally, the focus of the F6 key should move in accordance with the landmark regions defined in the HTML of the application. Major sections of the app should be accessible through the F6 key, including main navigation, toolbars, contextual toolbars, and the canvas. Each of these regions must have an accessible name assigned to them, allowing screen reader users to understand which area of the user interface they are currently navigating. Image: Example of correct usage, support for F6 key navigation. This helps users traverse through different regions of an application efficiently. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1d708d40a17766cb37e6d7ff737079982577b079b.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Mobile overlay guidance: Keyboard focus.\n\nFor mobile breakpoints, a tray is used to open and close the app frame side navigation. In this example, the keyboard focus order starts at the “Create” button and ends at the close button. Clicking on esc should also close the tray. Image: Example of a keyboard focus order for the mobile overlay, with an order from 1 as the create button, 2 as the side navigation items, and 3 the close button. Note that the `esc` should also close the tray. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1c0739f2368c9914995fd166d727db38aa907b244.png?width=750&format=png&optimize=medium)"
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/creating-bluelines-browsing-context",
-  "lastUpdated": "2026-09-04",
-  "status": "published",
-  "tags": [
-    "app frame",
-    "bluelines",
-    "accessible names",
-    "landmark regions",
-    "heading annotations",
-    "side navigation",
-    "universal navigation",
-    "complementary landmark"
-  ]
-}

package/guidelines/design-tokens.json

@@ -1,158 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/design-tokens.json",
-  "name": "design-tokens",
-  "title": "Design tokens",
-  "category": "designing",
-  "documentBlocks": [
-    { "type": "purpose", "content": "Design tokens" },
-    {
-      "type": "guideline",
-      "content": "Design tokens enable alignment, automation, learnability, and multi-platform fidelity, resulting in high-quality experiences and efficient system management. By defining design decisions once and reusing them consistently, tokens create a shared foundation that helps maintain a common design language across teams, tools, products, and platforms. This allows experiences to adapt to different implementation needs while preserving the intent of the design language."
-    },
-    {
-      "type": "guideline",
-      "content": "Clear.\n\nDesign tokens are created within a well-defined scope, purpose, and meaning so they remain understandable and accurately represent the design language."
-    },
-    {
-      "type": "guideline",
-      "content": "Systematic.\n\nDesign tokens are defined and managed through a structured system that spans design and development resources."
-    },
-    {
-      "type": "guideline",
-      "content": "Learnable.\n\nDesign tokens are supported through documentation, guidance, and educational resources that help people identify, understand, and use them effectively."
-    },
-    {
-      "type": "guideline",
-      "content": "Spectrum uses tokens as a shared foundation for expressing and reusing design decisions throughout the design system. Rather than representing every possible design scenario, the token system focuses on reusable decisions that support many structures, components, products, and experiences Spectrum also prioritizes semantic design decisions over direct values whenever possible. By expressing intent rather than implementation details, tokens become easier to understand, easier to reuse, and more resilient to change over time. Design tokens work together with component libraries, implementation frameworks, documentation, and other Spectrum resources to help maintain a cohesive design language across products and platforms. While tokens capture many design decisions, they are only one part of the broader system used to design, document, and implement Spectrum experiences. Image: Nested concentric semicircle diagram illustrating a design system hierarchy, with \"Products\" as the outermost layer, \"Platform components\" in the middle, and \"Tokens\" at the innermost core, rendered in purple gradient tones. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1c3063afa864ec179a458d95d51558937b4bc43ed.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Token.\n\nA reusable design decision represented as structured data. A token consists of a name and a value. Together, these define both the purpose of a design decision and the data used to implement it."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Code snippet showing a JSON token definition for \"accent-content-color-default,\" including its schema reference, a value pointing to \"{accent-color-900},\" and a UUID. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_180c6be1720908c84590aced0e4ea46ec42d8c386.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Token name.\n\nThe structured classification of a design use case. Token names are created using Spectrum's token taxonomy, which defines the categories, terminology, and ordering used to describe design decisions. This helps ensure that names remain predictable, scalable, and understandable across teams, tools, products, and platforms. Token names form a shared language that helps people and systems understand and apply design decisions consistently across tools, products, and platforms."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Three example design tokens labeled \"Token name,\" each pointing to a specific token: a blue color swatch named \"blue-900\" with value rgb(59, 99, 251); a ruler icon for \"base-padding-vertical-large\" with value 10px; and a font icon for \"sans-serif-font-family\" with value \"Adobe Clean Spectrum VF.\" (source: https://preview.spectrum.adobe.com/foundations/design-data/media_16849d171f58f0ed54185afd8a10028da399cd46c.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Value.\n\nThe data associated with a token. A value may be a final implementation value such as a color, dimension, percentage, or duration. A value can be dependent on context, such as light or dark color themes. It may also be a reference to another token through aliasing."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Three tokens—\"blue-900\" (rgb(59, 99, 251)), \"base-padding-vertical-large\" (10px), and \"sans-serif-font-family\" (Adobe Clean Spectrum VF)—each with their resolved output highlighted and labeled \"Value.\" (source: https://preview.spectrum.adobe.com/foundations/design-data/media_18b43d82026c0f02530b5ce62978951a800a60d4c.png?width=750&format=png&optimize=medium).\n\nToken nameValue blue-900 rgb(59, 99, 251) spacing-100 8px container-padding-medium spacing-300"
-    },
-    {
-      "type": "guideline",
-      "content": "Alias.\n\nA token that references another token instead of a final value. Aliasing allows broad design decisions to be refined into more specific contexts and use cases while preserving consistency and reducing duplication. Each layer adds additional context without redefining the underlying value."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Diagram showing a token aliasing chain: the base color token \"blue-900\" ( #3B63FB) flows down through an alias called \"accent-color-900,\" which in turn flows into a further alias called \"accent-content-color-default.\" (source: https://preview.spectrum.adobe.com/foundations/design-data/media_11cea602f9ef5940fc07648edb357982ec8e90c5f.png?width=750&format=png&optimize=medium).\n\nToken nameValue (alias) accent-content-color-default accent-color-900"
-    },
-    {
-      "type": "guideline",
-      "content": "Primitive (aka Global) tokens.\n\nPrimitive tokens define the available values in the design language. They represent raw design values and generally communicate little or no information about how those values should be used. Examples: blue-800 gray-100 corner-radius-75 Primitive tokens provide the foundation for higher-level design decisions. Because they communicate values with no intent, they are typically used indirectly through semantic tokens as an alias."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Two token scales side by side: a vertical blue color ramp from light to dark labeled \"blue-900\" at its mid-dark point, and a vertical spacing scale of gray squares increasing in size labeled \"spacing-400\" at a mid-sized square. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_179482299e81daea4dfee0b8609e53447561d4bbb.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Semantic tokens define how design decisions are used throughout the system. Rather than describing values directly, they communicate purpose, intent, structure, or application. Examples: accent-background-color-default negative-content-color-default container-padding-medium group-gap-small Semantic tokens help people understand: Why a decision exists Where it should be used How it relates to other design decisions Semantic tokens are the primary way consumers interact with Spectrum design tokens."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Diagram showing the token \"accent-content-color-default\" branching out to five UI examples that use it: a radio button label, a checkbox label, a toggle switch label, a hyperlink, and a menu item checkmark—all rendered in the same blue. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1dc05f4cd2a0071e6256b9da67fd14f92340485e7.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Component-specific tokens.\n\nComponent-specific tokens represent design decisions that apply to a specific component or implementation. Examples: tooltip-maximum-width divider-thickness-small Spectrum prioritizes reusable semantic decisions whenever possible, which reduces the need for component-specific tokens. However, some implementation-specific needs may still require decisions that are scoped to a particular component. For this reason, component-specific tokens may exist within Spectrum or individual platform implementations, but they play a much smaller role than reusable semantic tokens."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Diagram showing the token \"tab-gap-horizontal-medium\" pointing to the pink-highlighted gap between two radio button labels in a UI example. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1de0d50e78fdc61dfc5ba6ac5e78ab4db2ea9bbdf.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Meaning.\n\nEvery design decision serves a purpose. Some decisions communicate meaning, helping users understand status, emphasis, importance, or feedback. Examples include: accent-background-color-default negative-border-color-default negative-content-color-default positive-background-color-default These decisions describe what a design choice is intended to communicate."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Diagram grouping UI examples by feedback type: \"Positive\" links to a green \"Approved\" tag and a password field with a matching-passwords confirmation; \"Negative\" links to a red \"Rejected\" tag and a password field showing a \"Passwords do not match\" error with a red tooltip; \"Informative\" links to a blue \"Active\" tag and a blue tooltip. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1492d46785f384e217b76912d774fa3f5b96d6b28.png?width=750&format=png&optimize=medium).\n\nMeaning helps people understand not only how an interface looks, but what it is trying to convey. By expressing meaning directly in token names, decisions become easier to understand, reuse, and apply consistently across products and platforms."
-    },
-    {
-      "type": "guideline",
-      "content": "Reusable structures.\n\nWhile some design decisions communicate meaning, others help define how components are organized and constructed. Examples include: container-padding-medium group-gap-small base-padding-vertical-large banner-gap-horizontal These decisions describe how interfaces are built."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Diagram grouping UI components by structure type: \"Base\" links to individual elements like an \"Approved\" tag, a value field, a delete button, a list item, and a stepper; \"Group\" links to sets of related elements like paired radio buttons, toggles, and stacked checkboxes. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_129333dbe5f3c9919f4aa947c23a26c2453169a48.png?width=750&format=png&optimize=medium).\n\nTo improve reuse and consistency, Spectrum organizes many of these decisions around recurring interface structures. These reusable structures are abstract concepts that describe common UI patterns. They are not specific components or implementation types. Instead, they provide a shared framework for organizing design decisions that can be reused across many different components, products, and technologies. Because these structures represent patterns rather than implementations, they help create design decisions that are more reusable, predictable, and easier to understand. Some structures may closely resemble familiar interface concepts, but they remain independent of any specific platform or implementation. These structures help answer “Where does this design decision apply?” Common structures include: Structure Description BaseThe primary functional element within a structureAccessoryA supporting element associated with another structureGroupA collection of related elementsListA sequence of repeated itemsContainerA structure that organizes contentBannerA structure used for prominent messagingThese structures help answer “Where does this design decision apply?”"
-    },
-    {
-      "type": "guideline",
-      "content": "Components are often composed from one or more reusable structures. Rather than creating unique design decisions for every component, Spectrum reuses decisions across common patterns that appear throughout the system. This approach allows many components to share the same underlying design language while adapting to different contexts and use cases. Platform implementations combine these reusable structures with platform-specific requirements, interaction patterns, accessibility considerations, and implementation constraints to create complete component experiences. By reusing tokens, structures, and components, teams can build cohesive experiences without redefining the same decisions in every implementation. As a result, decisions become more reusable, components become more modular, and the system becomes easier to learn, maintain, and evolve. Image: Diagram showing how reusable structures combine into compositions and then components: a \"Base\" structure and a \"List item\" structure each flow into composition examples with labels, descriptions, and toggles, which then combine into a finished \"Menu item\" component with a value and toggle. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_19eceefe7f3c359ba6f591936e3bf009582d70ea1.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Positive color 600.\n\nThe name identifies: what’s being communicated (positive) which option is used (600) Together they represent a specific color decision. Image: Diagram breaking down the token name \"accent-background-color-hover,\" with callouts showing that \"accent\" indicates what's communicated, \"background-color\" indicates what it affects, and \"hover\" indicates when it applies, next to a blue color swatch. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_138f950047d55d3e1a89f6f1cbd0b22558cab1ca2.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Accent background color hover.\n\nThe name identifies: what’s being communicated (accent) what it affects (background-color) when it applies (hover) Together they describe the background color used when an accentuated interface element is hovered. Image: Diagram breaking down the token name \"base-padding-vertical-small,\" with callouts showing that \"base\" indicates where it applies, \"padding-vertical\" indicates what it affects, and \"small\" indicates which option is used. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1a19e41620a76ada5ceae2dbb74a4778609a34e35.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Base padding vertical small.\n\nThe name identifies: where it’s applied (base) what it affects (padding) how it’s applied (vertical) which option is used (small) Together they describe a specific spacing decision used by base structures (Action button, Text field, List item contents, etc)."
-    },
-    {
-      "type": "guideline",
-      "content": "Start with Spectrum components.\n\nWhenever possible, use your platform's Spectrum components before working directly with design tokens. Components bring together design decisions, behavior, accessibility, and implementation guidance into reusable solutions that are already aligned with the Spectrum design language. Design tokens provide the foundation that supports those solutions. When existing components don't meet your needs, tokens can help you extend, compose, or create experiences that remain consistent with Spectrum. Image: Diagram tracing the token \"Spectrum Button\" to a purple-to-blue gradient \"Upgrade\" button with a crown icon, and further down to a plain rounded rectangle in the same gradient with no label. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1fe9a6362a1479a1f5959aced7df1ca13884e86b1.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Prioritize semantic tokens.\n\nStart with semantic tokens whenever possible. They communicate intent and context, making design decisions easier to understand, reuse, and maintain over time. Image: Diagram connecting the token \"background-layer-2-color\" to the light gray toolbar background of a Photoshop-style document window, showing a hamburger menu, the Photoshop app icon, \"Document\" text, and a cloud icon. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1b62af86b141ebe7a61e41687f36c25c542915749.png?width=750&format=png&optimize=medium)Image: Diagram connecting the token \"gray-25\" to the light gray toolbar background of a Photoshop-style document window, showing a hamburger menu, the Photoshop app icon, \"Document\" text, and a cloud icon. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1c851b0861fdf571ce6a19a98cbca1ef0be7c5f48.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Use primitive tokens only when necessary.\n\nPrimitive tokens define important building blocks of the design language but contain less contextual meaning. Use them only when no appropriate semantic decision exists. Image: Diagram connecting the token \"static-fuchsia-900,\" shown as a purple circle swatch, to a purple-to-blue gradient \"Upgrade\" button with a crown icon. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1ddaad670f23bdc8178d3642bf345d2c4bb13737a.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Use component-specific tokens only for their intended component.\n\nComponent-specific tokens are intentionally limited. Use them only for their intended component or implementation and avoid reusing them as general-purpose design decisions. Image: Diagram showing the token \"tab-gap-horizontal-medium\" pointing to the pink-highlighted gap between two radio button labels in a UI example. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1de0d50e78fdc61dfc5ba6ac5e78ab4db2ea9bbdf.png?width=750&format=png&optimize=medium)Image: Diagram showing the token \"tab-gap-horizontal-medium\" pointing to the pink-highlighted gap between two colorful gradient card components, each with a card title and description. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_111549edcd66a118c25888112eb46457758a1d42d.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Foundational tokens are shared design decisions that form the common language of Spectrum. They serve as the source of truth across products, platforms, and implementations."
-    },
-    {
-      "type": "guideline",
-      "content": "Platform tokens support the unique requirements of a specific platform implementation. They allow platforms to adapt shared design decisions to their own needs while remaining connected to the broader Spectrum design language."
-    },
-    {
-      "type": "guideline",
-      "content": "Shared language, flexible implementation.\n\nNot every platform needs every foundational token, and token values may differ between platforms to support differences in sizing, density, theming, or platform capabilities. Even when implementations differ, they remain rooted in the same taxonomy, terminology, and design language. Image: Diagram illustrating a design system's flexible structure: a purple diamond labeled \"Spectrum Foundations\" and a green pentagon labeled \"Platform\" combine under \"Flexible implementation,\" where the shapes overlap with dashed red gaps highlighted, resulting in \"Spectrum Platform\" — a purple pentagon that fully fills the green pentagon's shape. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1098f8070212b263e4d2aaeae48257cb8a3c74623.png?width=750&format=png&optimize=medium)Design data can be re-shaped to fit platform needs while maintaining system cohesion."
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/design-data/design-tokens",
-  "lastUpdated": "2026-08-14",
-  "status": "published",
-  "tags": [
-    "design tokens",
-    "token taxonomy",
-    "aliasing",
-    "semantic design",
-    "color",
-    "spacing",
-    "typography"
-  ]
-}

package/guidelines/drop-shadow.json

@@ -1,68 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/drop-shadow.json",
-  "name": "drop-shadow",
-  "title": "Drop shadow",
-  "category": "designing",
-  "documentBlocks": [
-    { "type": "purpose", "content": "Drop shadow" },
-    {
-      "type": "guideline",
-      "content": "Create elevation.\n\nUse drop shadows to indicate when content appears above other content. Shadows help establish spatial relationships between interface elements and reinforce the visual hierarchy of the interface."
-    },
-    {
-      "type": "guideline",
-      "content": "Support emphasis.\n\nDrop shadows can also be used to emphasize important interface elements. When applied sparingly, they help guide attention while maintaining a clear and consistent visual hierarchy."
-    },
-    { "type": "guideline", "content": "Drop shadow details" },
-    {
-      "type": "guideline",
-      "content": "Image: A stack of three rounded diamond shapes labeled 1, 2, and 3, illustrating the layered composition of a drop shadow effect. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1e55ad9fc6b8cfceff097a32b46183149d33d9353.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Composition.\n\nSpectrum drop shadows are composed of three layers that work together to create a natural sense of depth while preserving the shape of the component. Key shadow Defines the edge of the component against the background. Transition shadow Softens the transition between the key and ambient shadows to create a smoother appearance. Ambient shadow Creates the overall sense of depth and determines the total size of the shadow."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: A dark-theme context menu titled \"Publish and export\" with options for Quick export, Open a copy, and Share link, showing a submenu with Illustrator for iPad and Illustrator desktop, each panel using shadow to convey layering. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1a3fef3a1425a17547ec0a976a66ac1b4fbf475bd.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Dark theme.\n\nDrop shadows continue to communicate elevation in dark theme, but their appearance is adjusted to maintain sufficient contrast against darker surfaces. Dark theme shadows use three times the opacity of their light theme equivalents. Components that appear above other content, such as popovers, also use a border in dark theme to provide additional separation from the background."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: A card UI with an image header and placeholder text lines, shown with a drop shadow against a gray background to illustrate shadow overlay on a light surface. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_16e79c0908d8d8b02aeb26adfa231019beaac6661.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Overlay.\n\nAn overlay communicates elevation by visually separating foreground content from the rest of the interface. When an overlay is used, such as behind a dialog, an additional drop shadow isn't needed because the overlay already establishes the elevated relationship."
-    },
-    {
-      "type": "guideline",
-      "content": "Platform availability.\n\nThese tokens are currently available on web. Guidance for additional platforms will be added in a future release."
-    },
-    {
-      "type": "guideline",
-      "content": "Shadow styles.\n\nEach shadow style is represented by a single composite token that defines the key, transition, and ambient shadow layers used to create the final drop shadow. The table below lists the values for each shadow layer: X: Horizontal offset. 0 px for all layers. Y: Vertical offset. The ambient shadow uses the largest offset. Blur: Blur radius. Each layer uses a different value to create a smooth transition between the shadow layers. Spread: Spread value. 0 px for all layers. Shadow styleTokenKey valuesTransition valuesAmbient valuesEmphasized, defaultdrop-shadow-emphasizedX = 0 Y = 0 Blur = 1 Spread = 0X = 0 Y = 1 Blur = 4 Spread = 0X = 0 Y = 2 Blur = 8 Spread = 0Emphasized, hoverdrop-shadow-emphasized-hoverX = 0 Y = 0 Blur = 2 Spread = 0X = 0 Y = 2 Blur = 6 Spread = 0X = 0 Y = 4 Blur = 12 Spread = 0Elevateddrop-shadow-elevatedX = 0 Y = 0 Blur = 2 Spread = 0X = 0 Y = 2 Blur = 6 Spread = 0X = 0 Y = 4 Blur = 12 Spread = 0Draggeddrop-shadow-draggedX = 0 Y = 0 Blur = 6 Spread = 0X = 0 Y = 6 Blur = 8 Spread = 0X = 0 Y = 12 Blur = 16 Spread = 0"
-    },
-    {
-      "type": "guideline",
-      "content": "Shadow colors.\n\nSpectrum drop shadows use black (#000000) as their base color. The perceived appearance of each shadow is created by varying its opacity and layering. In dark theme, the opacity value is 3× the opacity value of light theme. Shadow colorTokenOpacity valuesEmphasized (Key shadow) drop-shadow-emphasized-key-color 8% (light) 24% (dark)Emphasized, hover (Key shadow) drop-shadow-emphasized-hover-key-color 12% (light) 36% (dark)Elevated (Key shadow) drop-shadow-elevated-key-color 12% (light) 36% (dark)Dragged (Key shadow) drop-shadow-dragged-key-color 16% (light) 48% (dark)All styles (Ambient shadow) drop-shadow-ambient-color 8% (light) 24% (dark)All styles (Transition shadow) drop-shadow-transition-color 4% (light) 12% (dark)"
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/drop-shadow",
-  "lastUpdated": "2026-08-14",
-  "status": "published",
-  "tags": [
-    "drop shadow",
-    "elevation",
-    "ambient shadow",
-    "transition shadow",
-    "key shadow",
-    "dark theme",
-    "overlay",
-    "shadow tokens"
-  ]
-}