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

package/guidelines/manifest.json

@@ -1,35 +1,51 @@
 {
   "guidelines": [
     {
-      "slug": "ai-resource-guide",
-      "title": "AI resource guide",
-      "category": "support",
+      "slug": "app-frame-content-area",
+      "title": "App frame content area (browsing context)",
+      "category": "designing",
+      "status": "published",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-content-area/",
+      "file": "guidelines/app-frame-content-area.json"
+    },
+    {
+      "slug": "app-frame-creating-bluelines",
+      "title": "Creating bluelines (browsing context)",
+      "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/ai-resource-guide",
-      "file": "guidelines/ai-resource-guide.json"
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-creating-bluelines/",
+      "file": "guidelines/app-frame-creating-bluelines.json"
+    },
+    {
+      "slug": "app-frame-header",
+      "title": "App frame header (browsing context)",
+      "category": "designing",
+      "status": "published",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-header/",
+      "file": "guidelines/app-frame-header.json"
     },
     {
       "slug": "app-frame-overview",
       "title": "App frame",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/overview",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-overview/",
       "file": "guidelines/app-frame-overview.json"
     },
     {
-      "slug": "applying-the-type-system",
-      "title": "Applying the type system",
+      "slug": "app-frame-side-navigation",
+      "title": "App frame side navigation (browsing context)",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/applying-the-type-system",
-      "file": "guidelines/applying-the-type-system.json"
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-side-navigation/",
+      "file": "guidelines/app-frame-side-navigation.json"
     },
     {
       "slug": "attention-hierarchy",
       "title": "Attention hierarchy",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/attention-hierarchy",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/attention-hierarchy/",
       "file": "guidelines/attention-hierarchy.json"
     },
     {
@@ -37,111 +53,47 @@
       "title": "Background layers",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/background-layers",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/background-layers/",
       "file": "guidelines/background-layers.json"
     },
-    {
-      "slug": "bi-directionality",
-      "title": "Bi-directionality",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/bi-directionality",
-      "file": "guidelines/bi-directionality.json"
-    },
-    {
-      "slug": "border-width",
-      "title": "Border width",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/border-width",
-      "file": "guidelines/border-width.json"
-    },
     {
       "slug": "brand",
       "title": "Brand",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/brand",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/brand/",
       "file": "guidelines/brand.json"
     },
-    {
-      "slug": "cognitive",
-      "title": "Cognitive",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/cognitive",
-      "file": "guidelines/cognitive.json"
-    },
     {
       "slug": "colors",
       "title": "Colors",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/colors",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/colors/",
       "file": "guidelines/colors.json"
     },
     {
-      "slug": "component-spacing",
-      "title": "Component spacing",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/spacing/component-spacing",
-      "file": "guidelines/component-spacing.json"
-    },
-    {
-      "slug": "contact-us",
-      "title": "Contact us",
-      "category": "support",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/contact-us",
-      "file": "guidelines/contact-us.json"
-    },
-    {
-      "slug": "content-area-browsing-context",
-      "title": "Browsing context: Content area",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/content-area-browsing-context",
-      "file": "guidelines/content-area-browsing-context.json"
-    },
-    {
-      "slug": "creating-bluelines-browsing-context",
-      "title": "Creating bluelines",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/creating-bluelines-browsing-context",
-      "file": "guidelines/creating-bluelines-browsing-context.json"
-    },
-    {
-      "slug": "design-tokens",
-      "title": "Design tokens",
+      "slug": "containers",
+      "title": "Containers",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/design-data/design-tokens",
-      "file": "guidelines/design-tokens.json"
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/containers/",
+      "file": "guidelines/containers.json"
     },
     {
       "slug": "developer-overview",
       "title": "Developer overview",
       "category": "developing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/developer-overview",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/developer-overview/",
       "file": "guidelines/developer-overview.json"
     },
-    {
-      "slug": "drop-shadow",
-      "title": "Drop shadow",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/drop-shadow",
-      "file": "guidelines/drop-shadow.json"
-    },
     {
       "slug": "faqs",
       "title": "FAQs",
       "category": "support",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/faqs",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/faqs/",
       "file": "guidelines/faqs.json"
     },
     {
@@ -149,127 +101,63 @@
       "title": "Fonts",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/fonts",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/fonts/",
       "file": "guidelines/fonts.json"
     },
-    {
-      "slug": "grammar-and-mechanics",
-      "title": "Grammar and mechanics",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/grammar-and-mechanics",
-      "file": "guidelines/grammar-and-mechanics.json"
-    },
     {
       "slug": "grays",
       "title": "Grays",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/grays",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/grays/",
       "file": "guidelines/grays.json"
     },
-    {
-      "slug": "header-browsing-context",
-      "title": "Browsing context: Header",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/header-browsing-context",
-      "file": "guidelines/header-browsing-context.json"
-    },
     {
       "slug": "icon-fundamentals",
       "title": "Icon fundamentals",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/icons-and-illustrations/icon-fundamentals",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/icon-fundamentals/",
       "file": "guidelines/icon-fundamentals.json"
     },
     {
-      "slug": "illustration",
-      "title": "Illustration",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/visual-language/illustration",
-      "file": "guidelines/illustration.json"
-    },
-    {
-      "slug": "in-product-word-list",
-      "title": "In-product word list",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/in-product-word-list",
-      "file": "guidelines/in-product-word-list.json"
-    },
-    {
-      "slug": "inclusive-design",
-      "title": "Inclusive design",
+      "slug": "illustrations",
+      "title": "Illustrations",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/inclusive-design",
-      "file": "guidelines/inclusive-design.json"
-    },
-    {
-      "slug": "inclusive-ux-writing",
-      "title": "Inclusive UX writing",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/inclusive-ux-writing",
-      "file": "guidelines/inclusive-ux-writing.json"
-    },
-    {
-      "slug": "internationalization",
-      "title": "Internationalization",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/internationalization",
-      "file": "guidelines/internationalization.json"
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/illustrations/",
+      "file": "guidelines/illustrations.json"
     },
     {
       "slug": "introduction",
       "title": "Introduction",
       "category": "fundamentals",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/getting-started/introduction",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/introduction/",
       "file": "guidelines/introduction.json"
     },
-    {
-      "slug": "layout-and-structure-containers",
-      "title": "Containers",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/containers",
-      "file": "guidelines/layout-and-structure-containers.json"
-    },
-    {
-      "slug": "layout-spacing",
-      "title": "Layout spacing",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/spacing/layout-spacing",
-      "file": "guidelines/layout-spacing.json"
-    },
     {
       "slug": "motion",
       "title": "Motion",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/behavior/motion",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/motion/",
       "file": "guidelines/motion.json"
     },
     {
-      "slug": "object-styles-overview",
+      "slug": "object-styles",
       "title": "Object styles",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/overview",
-      "file": "guidelines/object-styles-overview.json"
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/object-styles/",
+      "file": "guidelines/object-styles.json"
     },
     {
       "slug": "principles",
       "title": "Principles",
       "category": "fundamentals",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/getting-started/principles",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/principles/",
       "file": "guidelines/principles.json"
     },
     {
@@ -277,120 +165,40 @@
       "title": "Resources",
       "category": "support",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/resources",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/resources/",
       "file": "guidelines/resources.json"
     },
     {
-      "slug": "rounding",
-      "title": "Rounding",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/rounding",
-      "file": "guidelines/rounding.json"
-    },
-    {
-      "slug": "side-navigation-browsing-context",
-      "title": "Browsing context: Side nav",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/side-navigation-browsing-context",
-      "file": "guidelines/side-navigation-browsing-context.json"
-    },
-    {
-      "slug": "spacing-overview",
-      "title": "Spacing overview",
+      "slug": "spacing",
+      "title": "Spacing",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/spacing/spacing-overview",
-      "file": "guidelines/spacing-overview.json"
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/spacing/",
+      "file": "guidelines/spacing.json"
     },
     {
       "slug": "states",
       "title": "States",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/behavior/states",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/states/",
       "file": "guidelines/states.json"
     },
     {
-      "slug": "typography-overview",
-      "title": "Typography",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/overview",
-      "file": "guidelines/typography-overview.json"
-    },
-    {
-      "slug": "typography-system",
-      "title": "Typography system",
+      "slug": "typography-fundamentals",
+      "title": "Typography fundamentals",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/typography-system",
-      "file": "guidelines/typography-system.json"
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/typography-fundamentals/",
+      "file": "guidelines/typography-fundamentals.json"
     },
     {
       "slug": "using-icons",
       "title": "Using icons",
       "category": "designing",
       "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/icons-and-illustrations/using-icons",
+      "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/using-icons/",
       "file": "guidelines/using-icons.json"
-    },
-    {
-      "slug": "visual-language-containers",
-      "title": "Containers",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/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",
-      "file": "guidelines/voice-and-tone.json"
-    },
-    {
-      "slug": "writing-about-people",
-      "title": "Writing about people",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/writing-about-people",
-      "file": "guidelines/writing-about-people.json"
-    },
-    {
-      "slug": "writing-for-errors",
-      "title": "Writing for errors",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/writing-for-errors",
-      "file": "guidelines/writing-for-errors.json"
-    },
-    {
-      "slug": "writing-for-onboarding",
-      "title": "Writing for onboarding",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/writing-for-onboarding",
-      "file": "guidelines/writing-for-onboarding.json"
-    },
-    {
-      "slug": "writing-for-readability",
-      "title": "Writing for readability",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/writing-for-readability",
-      "file": "guidelines/writing-for-readability.json"
-    },
-    {
-      "slug": "writing-with-visuals",
-      "title": "Writing with visuals",
-      "category": "designing",
-      "status": "published",
-      "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/writing-with-visuals",
-      "file": "guidelines/writing-with-visuals.json"
     }
   ]
 }

package/guidelines/motion.json

@@ -7,36 +7,35 @@
   "documentBlocks": [
     {
       "type": "purpose",
-      "content": "Spectrum 2 builds on top of the Spectrum 1 motion guidelines for the design system: that motion is always purposeful, intuitive, and seamless. With this update, we also use motion to draw attention to areas where we want to add personality. No matter what, the usage of motion should be adding meaning to an experience. And, motion over large surface areas needs to support browser and system settings for reduced motion. Motion is also an important part of brand expression. Just like tone in language, tone in motion can range from formal and direct to lighthearted and subtle. Motion in Spectrum 2 is categorized into the areas of directional motion, interaction motion, and wayfinding motion. Wayfinding motion is still in development."
+      "content": "Spectrum 2 builds on top of the [existing motion guidelines for the design system](https://spectrum.corp.adobe.com/page/motion/): that motion is always purposeful, intuitive, and seamless. With this update, we also use motion to draw attention to areas where we want to add personality. No matter what, the usage of motion should be adding meaning to an experience. And, motion over large surface areas needs to support browser and system settings for reduced motion.\n\nMotion is also an important part of brand expression. Just like tone in language, tone in motion can range from formal and direct to lighthearted and subtle.\n\nMotion in Spectrum 2 is categorized into the areas of **directional** motion, **interaction** motion, and **wayfinding** motion. Wayfinding motion is still in development."
     },
     {
       "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.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."
+      "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.\n\nIf you're creating a custom animation, consider [RTL (right-to-left) languages](https://spectrum.corp.adobe.com/page/bi-directionality/) and also how the meaning of motion might differ depending on cultural context.\n\nProgress bars communicate forward progression. They work well to show determinate (finite) progress.\n\nIn the 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."
     },
     {
       "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."
+      "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.\n\nIn the 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."
     },
     {
       "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."
+      "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.\n\nProgress circles have clockwise motion and work well to show indeterminate (infinite) progress."
     },
     {
       "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."
+      "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."
+    },
+    {
+      "type": "guideline",
+      "content": "A [microinteraction](https://www.nngroup.com/articles/microinteractions/) 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."
+    },
+    {
+      "type": "guideline",
+      "content": "In this example, the button scales down on the down state, emphasizing that something — the action of selecting — happened."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/behavior/motion",
-  "lastUpdated": "2026-09-04",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/motion/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "Motion",
-    "Directional motion",
-    "Linear motion",
-    "Diagonal motion",
-    "Clockwise motion",
-    "Interaction motion",
-    "Wayfinding motion",
-    "Microinteractions"
-  ]
+  "tags": ["designing"]
 }

package/guidelines/object-styles.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/object-styles.json",
+  "name": "object-styles",
+  "title": "Object styles",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Example of how object styles are combined to communicate different interactions.\n\nIn general, Spectrum 2’s system for rounding is more pronounced and flexible than in Spectrum 1.\n\nIn general, this system of rounding creates a visually balanced gap when nesting smaller objects within larger objects.\n\n\"There are two border widths used within in-product UI contexts:\"\n\n\"The third option is not used within in-product UI contexts:\"\n\nA medium divider separates two action button groups. Note that when dividers are used with visible gaps on both ends, the end caps are fully rounded.\n\nWhile the detailed values are still in progress, the foundational concepts for drop shadows still apply.\n\n\"In Spectrum 2, shadows are composed of three layers: a key shadow, an ambient shadow, and a transition shadow that’s between them.\"\n\nContainers that appear on top of content, such as menus and tooltips, have drop shadows to show elevation."
+    },
+    {
+      "type": "guideline",
+      "content": "Object styles are specific visual shapes or effects that are used to communicate intent or to give cues about an interaction."
+    },
+    {
+      "type": "guideline",
+      "content": "For example, different types of inputs all share styles. Search fields, text fields, and combo boxes use object styles to communicate a primary purpose: 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."
+    },
+    {
+      "type": "guideline",
+      "content": "Example of how object styles are combined to communicate different interactions."
+    },
+    {
+      "type": "guideline",
+      "content": "In general, Spectrum 2’s system for rounding is more pronounced and flexible than in Spectrum 1."
+    },
+    {
+      "type": "guideline",
+      "content": "Larger rounding values give components more expression and personality, and having more rounding options makes it possible to create visual balance across a wide range of contexts."
+    },
+    {
+      "type": "guideline",
+      "content": "In general, this system of rounding creates a visually balanced gap when nesting smaller objects within larger objects."
+    },
+    {
+      "type": "guideline",
+      "content": "Avatars are displayed in circles to draw attention to user content. All other representations, such as groups and products, are displayed in rounded squares."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 2, rounding for different sized components varies based on a Major Second logarithmic scale. This allows for components to retain a consistent and identifiable shape at all sizes. Desktop and mobile scales share the same base rounding. Note that the values displayed are base values for desktop scale components, and specific corner radius values may vary between components."
+    },
+    {
+      "type": "guideline",
+      "content": "Borders are only used when spacing isn’t enough to show separation. For example, a divider might sometimes be needed to separate two distinct action button groups. Or, an object might have a border to demarcate distinct areas, such as separating a panel or card from the rest of the content on a page."
+    },
+    {
+      "type": "guideline",
+      "content": "There are two border widths used within in-product UI contexts:"
+    },
+    {
+      "type": "guideline",
+      "content": "The third option is not used within in-product UI contexts:"
+    },
+    {
+      "type": "guideline",
+      "content": "A medium divider separates two action button groups. Note that when dividers are used with visible gaps on both ends, the end caps are fully rounded."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 2, large borders are only used in longform content, such as in documentation pages. Large borders aren’t used within in-product UI contexts."
+    },
+    {
+      "type": "guideline",
+      "content": "A full-width medium divider can be a helpful option for separating two distinct parts of a page, such as dividing a navigation panel from the rest of the content. When deciding whether a divider is needed, consider whether groups of information are still clear without one. Generally, more complex content with a varying alignment of objects will benefit the most from using a divider."
+    },
+    {
+      "type": "guideline",
+      "content": "Similarly to the previous example, a full-width medium divider separates a commenting panel from the rest of the page. The divider is helpful in this context since the commenting panel can have varying content, from an empty state to many layers of nested comments. By creating a clear boundary, this helps set expectations for what content is presented in the panel."
+    },
+    {
+      "type": "guideline",
+      "content": "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content."
+    },
+    {
+      "type": "guideline",
+      "content": "While the detailed values are still in progress, the foundational concepts for drop shadows still apply."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 2, shadows are composed of three layers: a key shadow, an ambient shadow, and a transition shadow that’s between them."
+    },
+    {
+      "type": "guideline",
+      "content": "Containers that appear on top of content, such as menus and tooltips, have drop shadows to show elevation."
+    },
+    {
+      "type": "guideline",
+      "content": "By default, objects have no drop shadows. When a container is dragged, a drop shadow is used to show elevation in both default and emphasized containers."
+    },
+    {
+      "type": "guideline",
+      "content": "An overlay represents elevation in a different way: it focuses attention on the content above the overlay only. When using an overlay (for example, behind a dialog), no additional drop shadow is applied to the background."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/object-styles/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [{ "ref": "fonts" }, { "ref": "spacing" }]
+}

package/guidelines/principles.json

@@ -23,8 +23,8 @@
       "content": "Collaborative.\n\nSpectrum belongs to everyone. It's a reflection of an ever-growing community that makes decisions thoughtfully, holistically, and collectively.\n\nSpectrum examines from multiple angles, then refines, then repeats. Constantly."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/getting-started/principles",
-  "lastUpdated": "2026-09-17",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/principles/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
   "tags": ["fundamentals"]
 }