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

package/guidelines/manifest.json

@@ -5,7 +5,7 @@
       "title": "AI resource guide",
       "category": "support",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/ai-resource-guide",
+      "sourceUrl": "https://spectrum.adobe.com/support/ai-resource-guide",
       "file": "guidelines/ai-resource-guide.json"
     },
     {
@@ -37,7 +37,7 @@
       "title": "App frame",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/overview",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/overview",
       "file": "guidelines/app-frame-overview.json"
     },
     {
@@ -53,7 +53,7 @@
       "title": "Applying the type system",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/typography/applying-the-type-system",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/typography/applying-the-type-system",
       "file": "guidelines/applying-the-type-system.json"
     },
     {
@@ -61,7 +61,7 @@
       "title": "Attention hierarchy",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/attention-hierarchy",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/attention-hierarchy",
       "file": "guidelines/attention-hierarchy.json"
     },
     {
@@ -69,7 +69,7 @@
       "title": "Background layers",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/color/background-layers",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/color/background-layers",
       "file": "guidelines/background-layers.json"
     },
     {
@@ -77,7 +77,7 @@
       "title": "Bi-directionality",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/inclusivity/bi-directionality",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/bi-directionality",
       "file": "guidelines/bi-directionality.json"
     },
     {
@@ -85,7 +85,7 @@
       "title": "Border width",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/border-width",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/border-width",
       "file": "guidelines/border-width.json"
     },
     {
@@ -93,7 +93,7 @@
       "title": "Brand",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/brand",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/brand",
       "file": "guidelines/brand.json"
     },
     {
@@ -109,7 +109,7 @@
       "title": "Colors",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/color/colors",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/color/colors",
       "file": "guidelines/colors.json"
     },
     {
@@ -117,7 +117,7 @@
       "title": "Component spacing",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/component-spacing",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/component-spacing",
       "file": "guidelines/component-spacing.json"
     },
     {
@@ -125,7 +125,7 @@
       "title": "Contact us",
       "category": "support",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/support/contact-us",
+      "sourceUrl": "https://spectrum.adobe.com/support/contact-us",
       "file": "guidelines/contact-us.json"
     },
     {
@@ -133,7 +133,7 @@
       "title": "Containers",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/containers/",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/containers",
       "file": "guidelines/containers.json"
     },
     {
@@ -141,63 +141,15 @@
       "title": "Browsing context: Content area",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/content-area-browsing-context",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/content-area-browsing-context",
       "file": "guidelines/content-area-browsing-context.json"
     },
-    {
-      "slug": "content-design-grammar-and-mechanics",
-      "title": "Grammar and mechanics",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/content-design/grammar-and-mechanics",
-      "file": "guidelines/content-design-grammar-and-mechanics.json"
-    },
-    {
-      "slug": "content-design-voice-and-tone",
-      "title": "Voice and tone",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/content-design/voice-and-tone",
-      "file": "guidelines/content-design-voice-and-tone.json"
-    },
-    {
-      "slug": "content-grammar-and-mechanics",
-      "title": "Grammar and mechanics",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/content/grammar-and-mechanics",
-      "file": "guidelines/content-grammar-and-mechanics.json"
-    },
-    {
-      "slug": "content-language-and-inclusivity-writing-about-people",
-      "title": "Writing about people",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/content/language-and-inclusivity/writing-about-people",
-      "file": "guidelines/content-language-and-inclusivity-writing-about-people.json"
-    },
-    {
-      "slug": "content-language-and-inclusivity-writing-with-visuals",
-      "title": "Writing with visuals",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/content/language-and-inclusivity/writing-with-visuals",
-      "file": "guidelines/content-language-and-inclusivity-writing-with-visuals.json"
-    },
-    {
-      "slug": "content-voice-and-tone",
-      "title": "Voice and tone",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/content/voice-and-tone",
-      "file": "guidelines/content-voice-and-tone.json"
-    },
     {
       "slug": "creating-bluelines-browsing-context",
       "title": "Creating bluelines",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/creating-bluelines-browsing-context",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/creating-bluelines-browsing-context",
       "file": "guidelines/creating-bluelines-browsing-context.json"
     },
     {
@@ -205,7 +157,7 @@
       "title": "Design tokens",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/design-data/design-tokens",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/design-data/design-tokens",
       "file": "guidelines/design-tokens.json"
     },
     {
@@ -221,7 +173,7 @@
       "title": "Drop shadow",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/drop-shadow",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/drop-shadow",
       "file": "guidelines/drop-shadow.json"
     },
     {
@@ -245,7 +197,7 @@
       "title": "Grammar and mechanics",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/grammar-and-mechanics",
+      "sourceUrl": "https://spectrum.adobe.com/content/grammar-and-mechanics",
       "file": "guidelines/grammar-and-mechanics.json"
     },
     {
@@ -253,7 +205,7 @@
       "title": "Grays",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/color/grays",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/color/grays",
       "file": "guidelines/grays.json"
     },
     {
@@ -261,7 +213,7 @@
       "title": "Browsing context: Header",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/header-browsing-context",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/header-browsing-context",
       "file": "guidelines/header-browsing-context.json"
     },
     {
@@ -269,7 +221,7 @@
       "title": "Icon fundamentals",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/icon-fundamentals",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/icons-and-illustrations/icon-fundamentals",
       "file": "guidelines/icon-fundamentals.json"
     },
     {
@@ -277,7 +229,7 @@
       "title": "Illustration",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/visual-language/illustration",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/icons-and-illustrations/illustration",
       "file": "guidelines/illustration.json"
     },
     {
@@ -293,7 +245,7 @@
       "title": "In-product word list",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/content/in-product-word-list",
+      "sourceUrl": "https://spectrum.adobe.com/content/in-product-word-list",
       "file": "guidelines/in-product-word-list.json"
     },
     {
@@ -301,7 +253,7 @@
       "title": "Inclusive design",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/inclusivity/inclusive-design",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/inclusive-design",
       "file": "guidelines/inclusive-design.json"
     },
     {
@@ -309,7 +261,7 @@
       "title": "Inclusive UX writing",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/content/language-and-inclusivity/inclusive-ux-writing",
+      "sourceUrl": "https://spectrum.adobe.com/content/language-and-inclusivity/inclusive-ux-writing",
       "file": "guidelines/inclusive-ux-writing.json"
     },
     {
@@ -317,7 +269,7 @@
       "title": "Internationalization",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/inclusivity/internationalization",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/internationalization",
       "file": "guidelines/internationalization.json"
     },
     {
@@ -328,44 +280,12 @@
       "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/introduction/",
       "file": "guidelines/introduction.json"
     },
-    {
-      "slug": "language-and-inclusivity-writing-about-people",
-      "title": "Writing about people",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/writing-about-people",
-      "file": "guidelines/language-and-inclusivity-writing-about-people.json"
-    },
-    {
-      "slug": "language-and-inclusivity-writing-with-visuals",
-      "title": "Writing with visuals",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/content-design/language-and-inclusivity/writing-with-visuals",
-      "file": "guidelines/language-and-inclusivity-writing-with-visuals.json"
-    },
-    {
-      "slug": "layout-and-structure-containers",
-      "title": "Containers",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/containers",
-      "file": "guidelines/layout-and-structure-containers.json"
-    },
-    {
-      "slug": "layout-and-structure-spacing-overview",
-      "title": "Spacing",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/overview",
-      "file": "guidelines/layout-and-structure-spacing-overview.json"
-    },
     {
       "slug": "layout-spacing",
       "title": "Layout spacing",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/layout-spacing",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/layout-spacing",
       "file": "guidelines/layout-spacing.json"
     },
     {
@@ -373,7 +293,7 @@
       "title": "Motion",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/behavior/motion",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/behavior/motion",
       "file": "guidelines/motion.json"
     },
     {
@@ -389,7 +309,7 @@
       "title": "Object styles",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/overview",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/overview",
       "file": "guidelines/object-styles-overview.json"
     },
     {
@@ -397,7 +317,7 @@
       "title": "Principles",
       "category": "fundamentals",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/getting-started/principles",
+      "sourceUrl": "https://spectrum.adobe.com/getting-started/principles",
       "file": "guidelines/principles.json"
     },
     {
@@ -413,7 +333,7 @@
       "title": "Rounding",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/rounding",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/rounding",
       "file": "guidelines/rounding.json"
     },
     {
@@ -421,7 +341,7 @@
       "title": "Browsing context: Side nav",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/side-navigation-browsing-context",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/side-navigation-browsing-context",
       "file": "guidelines/side-navigation-browsing-context.json"
     },
     {
@@ -434,10 +354,10 @@
     },
     {
       "slug": "spacing-overview",
-      "title": "Spacing overview",
+      "title": "Spacing",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/spacing-overview",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/overview",
       "file": "guidelines/spacing-overview.json"
     },
     {
@@ -445,7 +365,7 @@
       "title": "States",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/behavior/states",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/behavior/states",
       "file": "guidelines/states.json"
     },
     {
@@ -453,7 +373,7 @@
       "title": "FAQs",
       "category": "support",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/support",
+      "sourceUrl": "https://spectrum.adobe.com/support",
       "file": "guidelines/support.json"
     },
     {
@@ -469,7 +389,7 @@
       "title": "Typography",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/typography/overview",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/typography/overview",
       "file": "guidelines/typography-overview.json"
     },
     {
@@ -477,7 +397,7 @@
       "title": "Typography system",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/typography/typography-system",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/typography/typography-system",
       "file": "guidelines/typography-system.json"
     },
     {
@@ -485,31 +405,23 @@
       "title": "Using icons",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/using-icons",
+      "sourceUrl": "https://spectrum.adobe.com/foundations/icons-and-illustrations/using-icons",
       "file": "guidelines/using-icons.json"
     },
-    {
-      "slug": "visual-language-containers",
-      "title": "Containers",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/foundations/visual-language/containers",
-      "file": "guidelines/visual-language-containers.json"
-    },
     {
       "slug": "voice-and-tone",
       "title": "Voice and tone",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/voice-and-tone",
+      "sourceUrl": "https://spectrum.adobe.com/content/voice-and-tone",
       "file": "guidelines/voice-and-tone.json"
     },
     {
       "slug": "whats-new",
-      "title": "Great design systems evolve alongside the people who use them",
+      "title": "A new home for Spectrum",
       "category": "fundamentals",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/getting-started/whats-new",
+      "sourceUrl": "https://spectrum.adobe.com/getting-started/whats-new",
       "file": "guidelines/whats-new.json"
     },
     {
@@ -517,7 +429,7 @@
       "title": "Writing about people",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/writing-about-people",
+      "sourceUrl": "https://spectrum.adobe.com/content/language-and-inclusivity/writing-about-people",
       "file": "guidelines/writing-about-people.json"
     },
     {
@@ -525,7 +437,7 @@
       "title": "Writing for errors",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/content/writing-for-errors",
+      "sourceUrl": "https://spectrum.adobe.com/content/writing-for-errors",
       "file": "guidelines/writing-for-errors.json"
     },
     {
@@ -533,7 +445,7 @@
       "title": "Writing for onboarding",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/content/writing-for-onboarding",
+      "sourceUrl": "https://spectrum.adobe.com/content/writing-for-onboarding",
       "file": "guidelines/writing-for-onboarding.json"
     },
     {
@@ -541,7 +453,7 @@
       "title": "Writing for readability",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://preview.spectrum.adobe.com/content/language-and-inclusivity/writing-for-readability",
+      "sourceUrl": "https://spectrum.adobe.com/content/language-and-inclusivity/writing-for-readability",
       "file": "guidelines/writing-for-readability.json"
     },
     {
@@ -549,7 +461,7 @@
       "title": "Writing with visuals",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/writing-with-visuals",
+      "sourceUrl": "https://spectrum.adobe.com/content/language-and-inclusivity/writing-with-visuals",
       "file": "guidelines/writing-with-visuals.json"
     }
   ]

package/guidelines/motion.json

@@ -11,22 +11,26 @@
     },
     {
       "type": "guideline",
-      "content": "Linear motion indicates forward movement and a sentiment of progress. When emphasizing movement to a different section, page, or item (such as a button or link), the destination is readily clear and minimally disruptive. If you’re creating a custom animation, consider RTL (right-to-left) languages and also how the meaning of motion might differ depending on cultural context. Progress bars communicate forward progression. They work well to show determinate (finite) progress.Image: A labeled progress bar reading \"Progress bar label,\" approximately 60% filled in blue with the remaining portion shown in gray. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1410ad434da4df2e5f27e65cb39cf6e9dd762b988.png?width=750&format=png&optimize=medium)Image: A labeled progress bar reading \"Progress bar label,\" fully filled in blue from end to end, indicating 100% completion. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1976d0b4d46d779f561e43f584769fcdb1ee46257.png?width=750&format=png&optimize=medium)In this example of a button, a static arrow icon facing toward the right already indicates forward movement. When linear motion is added to the arrow upon hover, the movement is emphasized. Use this button option with motion sparingly, only on the most important action(s) on a page.Image: A black pill-shaped 'Next' button with a right arrow icon, shown with a cursor positioned just below it, before hover. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_13c1db2becccdae3e3c51faee90f9f0f7223a79ee.png?width=750&format=png&optimize=medium)Image: The same black 'Next' button, now with the cursor positioned directly on top of it in a hover or click state. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_13780e91120d63ef14c91f7ca97c5e88d49481814.png?width=750&format=png&optimize=medium)"
+      "content": "The directions in which motion happens communicate intentional meanings. There are three basic categories of directional motion, each used for their own purpose."
     },
     {
       "type": "guideline",
-      "content": "Diagonal motion indicates larger movement, and can be potentially disruptive. This type of motion can be used to emphasize that there’s a switch in context happening, like linking out to a different view or destination. In this example of a link, a static arrow icon facing the top right already indicates a potentially disruptive action. When diagonal motion is added to the arrow on hover, the meaning of the arrow is emphasized. Use this link option with motion sparingly, and only to communicate that there will be a switch in context.Image: Text reading 'For more information, visit the Adobe Help Center' with the link underlined in blue and a diagonal external-link arrow, cursor positioned below the link, before hover. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_16efc4fe0b70604bccaff2a9935bfcd487b64a73e.png?width=750&format=png&optimize=medium)Image: The same 'Adobe Help Center' link, now with the cursor positioned directly on the link text in a hover state. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1824800b0d2b9ce2e5980fe39e3d526807ab0b7a5.png?width=750&format=png&optimize=medium)"
+      "content": "Linear motion indicates forward movement and a sentiment of progress. When emphasizing movement to a different section, page, or item (such as a button or link), the destination is readily clear and minimally disruptive. If you’re creating a custom animation, consider RTL (right-to-left) languages and also how the meaning of motion might differ depending on cultural context. Progress bars communicate forward progression. They work well to show determinate (finite) progress. Image: A labeled progress bar reading \"Progress bar label,\" approximately 60% filled in blue with the remaining portion shown in gray. (source: https://spectrum.adobe.com/foundations/behavior/media_1410ad434da4df2e5f27e65cb39cf6e9dd762b988.png?width=750&format=png&optimize=medium) Image: A labeled progress bar reading \"Progress bar label,\" fully filled in blue from end to end, indicating 100% completion. (source: https://spectrum.adobe.com/foundations/behavior/media_1976d0b4d46d779f561e43f584769fcdb1ee46257.png?width=750&format=png&optimize=medium) In this example of a button, a static arrow icon facing toward the right already indicates forward movement. When linear motion is added to the arrow upon hover, the movement is emphasized. Use this button option with motion sparingly, only on the most important action(s) on a page. Image: A black pill-shaped 'Next' button with a right arrow icon, shown with a cursor positioned just below it, before hover. (source: https://spectrum.adobe.com/foundations/behavior/media_13c1db2becccdae3e3c51faee90f9f0f7223a79ee.png?width=750&format=png&optimize=medium) Image: The same black 'Next' button, now with the cursor positioned directly on top of it in a hover or click state. (source: https://spectrum.adobe.com/foundations/behavior/media_13780e91120d63ef14c91f7ca97c5e88d49481814.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Clockwise motion indicates a holding pattern that’s repetitive and doesn’t have clear forward momentum or progress. This is most often used for loading indicators. Progress circles have clockwise motion and work well to show indeterminate (infinite) progress.Image: A circular progress indicator on a light gray background, showing roughly 20% complete in blue against a gray track. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1113e169705ecbd524e5b138be65b9a4e595aaf6f.png?width=750&format=png&optimize=medium)Image: A circular progress indicator on a light gray background, showing roughly 85% complete in blue against a gray track. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1aa94bf6842145f9e11edf213d92ede35aeab5324.png?width=750&format=png&optimize=medium)"
+      "content": "Diagonal motion indicates larger movement, and can be potentially disruptive. This type of motion can be used to emphasize that there’s a switch in context happening, like linking out to a different view or destination. In this example of a link, a static arrow icon facing the top right already indicates a potentially disruptive action. When diagonal motion is added to the arrow on hover, the meaning of the arrow is emphasized. Use this link option with motion sparingly, and only to communicate that there will be a switch in context. Image: Text reading 'For more information, visit the Adobe Help Center' with the link underlined in blue and a diagonal external-link arrow, cursor positioned below the link, before hover. (source: https://spectrum.adobe.com/foundations/behavior/media_16efc4fe0b70604bccaff2a9935bfcd487b64a73e.png?width=750&format=png&optimize=medium) Image: The same 'Adobe Help Center' link, now with the cursor positioned directly on the link text in a hover state. (source: https://spectrum.adobe.com/foundations/behavior/media_1824800b0d2b9ce2e5980fe39e3d526807ab0b7a5.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Motion shows users feedback that, when interacting with the UI, their actions are registering with a system. It’s not the only way to show feedback, but it helps objects to feel more dynamic and responsive. It also can help communicate meaning, or add emphasis that something is happening that requires attention. A microinteraction is a single action (like a click, tap, or swipe) which triggers a response (like a transition or animation). In Spectrum 2, microinteractions offer moments of personality that are reflective of product branding. In this example, the button scales down on the down state, emphasizing that something — the action of selecting — happened. Image: A black pill-shaped button labeled 'Button,' with a cursor positioned below it, before interaction. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1912db9847e2a13fa026399336088aadc29ab9886.png?width=750&format=png&optimize=medium)Image: The same 'Button' element, slightly larger and darker with a pointer/hand cursor overlapping its bottom edge, indicating a pressed or clicked state. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_16bedff0632adae2a74753d9064814716b15c1265.png?width=750&format=png&optimize=medium)"
+      "content": "Clockwise motion indicates a holding pattern that’s repetitive and doesn’t have clear forward momentum or progress. This is most often used for loading indicators. Progress circles have clockwise motion and work well to show indeterminate (infinite) progress. Image: A circular progress indicator on a light gray background, showing roughly 20% complete in blue against a gray track. (source: https://spectrum.adobe.com/foundations/behavior/media_1113e169705ecbd524e5b138be65b9a4e595aaf6f.png?width=750&format=png&optimize=medium) Image: A circular progress indicator on a light gray background, showing roughly 85% complete in blue against a gray track. (source: https://spectrum.adobe.com/foundations/behavior/media_1aa94bf6842145f9e11edf213d92ede35aeab5324.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Motion shows users feedback that, when interacting with the UI, their actions are registering with a system. It’s not the only way to show feedback, but it helps objects to feel more dynamic and responsive. It also can help communicate meaning, or add emphasis that something is happening that requires attention. A microinteraction is a single action (like a click, tap, or swipe) which triggers a response (like a transition or animation). In Spectrum 2, microinteractions offer moments of personality that are reflective of product branding. In this example, the button scales down on the down state, emphasizing that something — the action of selecting — happened. Image: A black pill-shaped button labeled 'Button,' with a cursor positioned below it, before interaction. (source: https://spectrum.adobe.com/foundations/behavior/media_1912db9847e2a13fa026399336088aadc29ab9886.png?width=750&format=png&optimize=medium) Image: The same 'Button' element, slightly larger and darker with a pointer/hand cursor overlapping its bottom edge, indicating a pressed or clicked state. (source: https://spectrum.adobe.com/foundations/behavior/media_16bedff0632adae2a74753d9064814716b15c1265.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/behavior/motion",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/behavior/motion",
   "lastUpdated": "2026-09-04",
   "status": "published",
   "tags": [

package/guidelines/object-styles-overview.json

@@ -7,10 +7,10 @@
   "documentBlocks": [
     {
       "type": "purpose",
-      "content": "Spectrum’s object styles include rounding, border width, and drop shadow. Object styles are combined with color in different ways to communicate specific cues about interactions, adding a layer of meaning to the style of components. For example, different types of inputs all share styles. Search fields, text fields, and combo boxes use object styles to communicate text input. A search field is often more of a global scope, and has full rounding to add emphasis and differentiation from other types of fields. Action buttons, pickers, and in-field buttons share a fill color to indicate selection. Checkboxes, radio buttons, and switches share object styles to indicate binary selection. Image: Wireframe comparison of three form control categories — Text input (search field, text field, dropdown), Selection (button, dropdown menu, dropdown menu), and Binary selection (radio buttons, checkboxes, toggle switches) — each shown in unselected and selected states. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_17ff0c24745d8692c51ff3e23285f23e24844313c.png?width=750&format=png&optimize=medium)\n\n### Jump to\n\nImage: Four corner brackets arranged in a square formation illustrating corner rounding, with the top-right corner highlighted in a blue-to-teal gradient. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1ca22cd57315c5e0ec18a85ef74211e5c2f683177.png?width=750&format=png&optimize=medium) Rounding Rounding Image: Three horizontal pill-shaped bars illustrating different border width styles: a thin gradient outline, a thicker soft-edged border, and a wide blurred border. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1f2b7a2b6809ec86f7eab36c3ab90fcd7f31bd677.png?width=750&format=png&optimize=medium) Border width Border width Image: A rounded square outline with a soft drop shadow next to a diagonal rounded line in a pink-to-purple gradient, illustrating drop shadow styling. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_17d32a2b3be83c7c4f7541a166559a90e9683c24d.png?width=750&format=png&optimize=medium) Drop shadow Drop shadow"
+      "content": "Spectrum’s object styles include rounding, border width, and drop shadow. Object styles are combined with color in different ways to communicate specific cues about interactions, adding a layer of meaning to the style of components. For example, different types of inputs all share styles. Search fields, text fields, and combo boxes use object styles to communicate text input. A search field is often more of a global scope, and has full rounding to add emphasis and differentiation from other types of fields. Action buttons, pickers, and in-field buttons share a fill color to indicate selection. Checkboxes, radio buttons, and switches share object styles to indicate binary selection. Image: Wireframe comparison of three form control categories — Text input (search field, text field, dropdown), Selection (button, dropdown menu, dropdown menu), and Binary selection (radio buttons, checkboxes, toggle switches) — each shown in unselected and selected states. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_17ff0c24745d8692c51ff3e23285f23e24844313c.png?width=750&format=png&optimize=medium)\n\n### Jump to\n\nImage: Four corner brackets arranged in a square formation illustrating corner rounding, with the top-right corner highlighted in a blue-to-teal gradient. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1ca22cd57315c5e0ec18a85ef74211e5c2f683177.png?width=750&format=png&optimize=medium) Rounding Rounding Image: Three horizontal pill-shaped bars illustrating different border width styles: a thin gradient outline, a thicker soft-edged border, and a wide blurred border. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1f2b7a2b6809ec86f7eab36c3ab90fcd7f31bd677.png?width=750&format=png&optimize=medium) Border width Border width Image: A rounded square outline with a soft drop shadow next to a diagonal rounded line in a pink-to-purple gradient, illustrating drop shadow styling. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_17d32a2b3be83c7c4f7541a166559a90e9683c24d.png?width=750&format=png&optimize=medium) Drop shadow Drop shadow"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/overview",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/overview",
   "lastUpdated": "2026-08-14",
   "status": "published",
   "tags": ["Object styles", "Rounding", "Border width", "Drop shadow"]

package/guidelines/principles.json

@@ -12,7 +12,7 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum places people's needs first. It's deeply committed to a high standard of inclusivity, accessibility, honesty, and respect. Spectrum is adaptable to meet as many user expectations, platform requirements, and product visions as possible. It's always what it needs to be, accommodating a flexible range of expression. It balances the human needs of utility and joy. Image: Aperture/lens icon representing the Focused principle (source: https://preview.spectrum.adobe.com/getting-started/media_1d733c7a6b8739373a7b68306edb74b7c2ffe34b4.png?width=750&format=png&optimize=medium)Image: Two overlapping speech bubbles representing the Collaborative principle (source: https://preview.spectrum.adobe.com/getting-started/media_1289706018f1e7799026af8a56beeec33c163c2ee.png?width=750&format=png&optimize=medium)"
+      "content": "Spectrum places people's needs first. It's deeply committed to a high standard of inclusivity, accessibility, honesty, and respect. Spectrum is adaptable to meet as many user expectations, platform requirements, and product visions as possible. It's always what it needs to be, accommodating a flexible range of expression. It balances the human needs of utility and joy. Image: Aperture/lens icon representing the Focused principle (source: https://spectrum.adobe.com/getting-started/media_1d733c7a6b8739373a7b68306edb74b7c2ffe34b4.png?width=750&format=png&optimize=medium) Image: Two overlapping speech bubbles representing the Collaborative principle (source: https://spectrum.adobe.com/getting-started/media_1289706018f1e7799026af8a56beeec33c163c2ee.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -23,7 +23,7 @@
       "content": "Spectrum belongs to everyone. It's a reflection of an ever-growing community that makes decisions thoughtfully, holistically, and collectively. Spectrum examines from multiple angles, then refines, then repeats. Constantly."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/getting-started/principles",
+  "sourceUrl": "https://spectrum.adobe.com/getting-started/principles",
   "lastUpdated": "2026-09-10",
   "status": "published"
 }

package/guidelines/resources.json

@@ -18,6 +18,10 @@
       "type": "guideline",
       "content": "Access the Spectrum 2 iOS library:.\n\nS2/iOS: Contains Spectrum 2 components, typography styles, and variables for iOS If you don’t have access to Figma, you may be able to request view-only access through your product’s design team. Learn more at the Adobe Design Figma Usage: Guidelines and Resources wiki."
     },
+    {
+      "type": "guideline",
+      "content": "As the design of Spectrum 2 is finalized, the existing design data will be updated and released incrementally. For more information, view our Developer overview page."
+    },
     {
       "type": "guideline",
       "content": "Spectrum Tokens repository.\n\nThis GitHub repository houses Spectrum’s design tokens, which are primarily name-value pairs used to store design decisions and distributed in a way that platforms, implementations, and products can use across design tools and coding languages. View Spectrum Tokens on GitHub"
@@ -26,6 +30,10 @@
       "type": "guideline",
       "content": "Spectrum Token Visualizer tool.\n\nThis tool allows you to search for token names or values, filter values by scale and theme, and explore the relationship between Spectrum’s tokens by selecting tokens to see their connections. View the Spectrum 2 Token Visualizer"
     },
+    {
+      "type": "guideline",
+      "content": "For teams developing with an implementation of Spectrum, reference that implementation’s documentation for information regarding component availability, specific usage guidelines, and other developer resources. More information is also available on the Developer overview page."
+    },
     {
       "type": "guideline",
       "content": "Spectrum Web Components 1.0 uses an approach to Spectrum 2 that applies the design system’s new colors, corner radii, and icons to its components without introducing breaking changes. For more detailed information about this approach, read the initial announcement on the Spectrum wiki. When Spectrum Web Components 2.0 releases, it will include the full Spectrum 2 implementation of its components. The team is currently defining the product strategy, and major announcements about its availability and timeline will be released through Slack channels ( #swc-announcements and #spectrum-web-components ), the Spectrum 2 Wiki, and e-mails to members of the DL GRP-SWC-OFFICEHOURS. Access to this DL is self-serve through Adobe’s IMS portal. View the Spectrum Web Components documentation site"