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

package/guidelines/app-frame-overview.json

@@ -8,162 +8,160 @@
     { "type": "purpose", "content": "App frame" },
     {
       "type": "guideline",
-      "content": "Flexible and adaptable.\n\nThe app frame needs to be opinionated without being restrictive. It directly accounts for the needs of future Spectrum 2 products, and is also flexible enough to be readily adaptable across varying product segment needs."
+      "content": "The app frame is the core navigation direction for Spectrum 2. It’s designed as a flexible framework that’s readily adaptable to specific product needs while still creating a shared, predictable experience across products."
     },
     {
       "type": "guideline",
-      "content": "Cohesive and predictable.\n\nA cohesive, consistent app frame reinforces Adobe’s brand and helps users feel comfortable and familiar with our products. Predictable navigation across products is also imperative for Adobe to support users working across multiple applications — and helps people more readily learn how to use new products."
+      "content": "The app frame needs to be opinionated without being restrictive. It directly accounts for the needs of future Spectrum 2 products, and is also flexible enough to be readily adaptable across varying product segment needs."
     },
     {
       "type": "guideline",
-      "content": "Embodies Spectrum 2.\n\nThe app frame is the main stage to showcase the Spectrum 2 style, and it reflects the core foundations and principles of the design system. It works readily with all other design system resources, is committed to complying with WCAG standards, and holds the highest standards for globalization support."
+      "content": "A cohesive, consistent app frame reinforces Adobe’s brand and helps users feel comfortable and familiar with our products. Predictable navigation across products is also imperative for Adobe to support users working across multiple applications — and helps people more readily learn how to use new products."
     },
     {
       "type": "guideline",
-      "content": "Spectrum offers a high-level direction as well as a definition of which parts can be flexible and which parts need to be highly predictable. Product teams are then empowered to apply this direction in ways that make the most sense for their use cases and users. We’re designing the app frame in stages that align to the two main experiences that are shared across all Adobe products: browsing and editing. What’s currently defined here is mainly focused on the browsing context: workflows that draw attention to the content as the primary focus (examples of pages in browsing contexts include a Home or Files experience). This does overlap with the editing context, where the workflow draws attention to the canvas as the primary focus, but we’re still defining the editing context in more detail overall. This framework defines broad information architecture: the general categories of objects, and where they go in the app frame. It does not define the location or ordering of specific objects within those categories. View Spectrum Patterns for more specific information architecture by product group. For guidance on Experience Cloud products, contact the DX Unified Experience team. For guidance on Creative Cloud products, contact the CC Unified Experience team."
+      "content": "The app frame is the main stage to showcase the Spectrum 2 style, and it reflects the core foundations and principles of the design system. It works readily with all other design system resources, is committed to complying with WCAG standards, and holds the highest standards for globalization support."
     },
     {
       "type": "guideline",
-      "content": "Spectrum offers a high-level direction as well as a definition of which parts can be flexible and which parts need to be highly predictable. Product teams are then empowered to apply this direction in ways that make the most sense for their use cases and users. We’re designing the app frame in stages that align to the two main experiences that are shared across all Adobe products: browsing and editing. What’s currently defined here is mainly focused on the browsing context: workflows that draw attention to the content as the primary focus (examples of pages in browsing contexts include a Home or Files experience). This does overlap with the editing context, where the workflow draws attention to the canvas as the primary focus, but we’re still defining the editing context in more detail overall. This framework defines broad information architecture: the general categories of objects, and where they go in the app frame. It does not define the location or ordering of specific objects within those categories."
+      "content": "Spectrum offers a high-level direction as well as a definition of which parts can be flexible and which parts need to be highly predictable. Product teams are then empowered to apply this direction in ways that make the most sense for their use cases and users."
     },
     {
       "type": "guideline",
-      "content": "Browsing context: Zones.\n\nZones are the general areas into which certain types of actions should go. They’re not specific to components. Image: Diagram showing the three zones of the construction of the Spectrum 2 app frame: A, navigation zone, B, global action zone, and C, contextual action zone. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_19aef995718b2fb929aef522835b8af9a752400ed.png?width=750&format=png&optimize=medium)"
+      "content": "Zones are the general areas into which certain types of actions should go. They’re not specific to components."
     },
     {
       "type": "guideline",
-      "content": "A. Navigation zone.\n\nThis area holds the primary navigational items on a page. Navigation should be highly predictable across products. In the Spectrum 2 app frame, navigation can be shown in different ways: through the header and side navigation components, as well as through other navigational components (e.g., side navigation and tabs ) within the content area for secondary navigation."
+      "content": "This is a general area that contains global actions, such as view actions (e.g., layout and zoom options) and supplemental features (e.g., AI Assistants). Actions here can be shown in different ways, such as using part of the content area to show actions in the header, or in a dedicated side rail. There is no single visual representation of how actions should look in this area."
     },
     {
       "type": "guideline",
-      "content": "B. Global action zone.\n\nThis is a general area that contains global actions, such as view actions (e.g., layout and zoom options) and supplemental features (e.g., AI Assistants). Actions here can be shown in different ways, such as using part of the content area to show actions in the header, or in a dedicated side rail. There is no single visual representation of how actions should look in this area."
+      "content": "This area is reserved for transient actions that are contextual to content on the page (e.g., an action bar)."
     },
     {
       "type": "guideline",
-      "content": "C. Contextual action zone.\n\nThis area is reserved for transient actions that are contextual to content on the page (e.g., an action bar)."
+      "content": "Parts of the anatomy have defined rules and behaviors. The terms used here to describe the anatomy of the app framework are for internal alignment only, and are not representative of how these parts of the app frame should be described to end users."
     },
     {
       "type": "guideline",
-      "content": "Browsing context: Anatomy.\n\nParts of the anatomy have defined rules and behaviors. The terms used here to describe the anatomy of the app framework are for internal alignment only, and are not representative of how these parts of the app frame should be described to end users. Image: Diagram showing the three parts of the anatomy of the Spectrum 2 app frame: A, header, B, side navigation, and C, content area. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_187bd949ffe1f05a278b9a306eabdb7516805dc19.png?width=750&format=png&optimize=medium)"
+      "content": "In the S2 app frame, gradients are only used as backgrounds in content areas — they are not used in the header (A) and navigational areas (B). This allows for greater flexibility between pages where gradients may be calling attention to different kinds of content."
     },
     {
       "type": "guideline",
-      "content": "A. App frame header (Navigation, required).\n\nHolds the product brand and global actions, including the universal nav. This area can include top-level navigation, and is suitable for categorizing product segments (e.g., marketing contexts) and for larger fly-outs. If there is an app frame side navigation instead, use this area for global, app-wide actions (e.g., search). View header guidelines and examples in App frame header (browsing context)."
+      "content": "There are two variants of the side navigation state control: hamburger and panel. They should never be used at the same time."
     },
     {
       "type": "guideline",
-      "content": "B. App frame side navigation (Navigation, optional).\n\nHolds the main categories of product functionality, such as workflow-related navigational items (e.g., home, files, learn, dashboards). This navigation has specific behaviors for showing and minimizing labels. Do not use this for categorizing marketing pages. View side navigation guidelines and examples in App frame side navigation (browsing context)."
+      "content": "Interacting with this icon in the header will either fully expand and collapse, or partially collapse, the panel."
     },
     {
       "type": "guideline",
-      "content": "C. Content area (Required).\n\nModular space that supports multiple layout configurations. The content that goes inside this area is free and not defined by the app frame. More specific guidelines will be defined in Spectrum Patterns. Gradients, when used in this space, are applied with clear intent and strategic purpose. They should contribute to the visual hierarchy, not distract from it. And, their colors are directly tied to product brand color palettes. In the S2 app frame, gradients are only used as backgrounds in content areas — they are not used in the header (A) and navigational areas (B). This allows for greater flexibility between pages where gradients may be calling attention to different kinds of content. View side navigation guidelines and examples in App frame content area (browsing context)."
+      "content": "When hovering on the panel icon, the icon will show an animated preview of what action would be done upon interaction (either expanding or collapsing). This animation offers more context about what to expect. The placement of the panel icon is at the bottom of the app frame side navigation panel."
     },
-    { "type": "guideline", "content": "Anatomy examples" },
     {
       "type": "guideline",
-      "content": "C. Content area (Required).\n\nModular space that supports multiple layout configurations. The content that goes inside this area is free and not defined by the app frame. Gradients, when used in this space, are applied with clear intent and strategic purpose. They should contribute to the visual hierarchy, not distract from it. And, their colors are directly tied to product brand color palettes. In the S2 app frame, gradients are only used as backgrounds in content areas — they are not used in the header (A) and navigational areas (B). This allows for greater flexibility between pages where gradients may be calling attention to different kinds of content. View side navigation guidelines and examples in App frame content area (browsing context)."
+      "content": "To activate or deactivate the TAB, select the 9-grid icon. Once clicked on, the TAB will appear above the header. On a screen reader, if there is an alert banner present, then the visual placement from top to bottom would be alert banner, TAB, then header."
     },
     {
       "type": "guideline",
-      "content": "Anatomy examples.\n\nImage: Two examples of Spectrum 2 app frame anatomy. Example one: Header only. Header contains the primary navigation and global actions. Example two: Header plus side navigation. Because the side navigation is present, the header is used for global, app-wide actions instead. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1b47658c35e18eead92d82cc540f886a57b6ee84f.png?width=750&format=png&optimize=medium)"
+      "content": "The placement and appearance of the TAB icon may differ across Adobe products. Not all products will utilize the TAB. The currently supported products are Adobe Home, Firefly, Express, Photoshop, Lightroom, and Acrobat."
     },
     {
       "type": "guideline",
-      "content": "Hamburger.\n\nInteracting with this icon in the header will either fully expand and collapse, or partially collapse, the panel."
+      "content": "For products that use the TAB, the side navigation state control (panel icon) will be at the bottom of the side navigation. For mobile experiences, the side navigation state control (hamburger icon) and product switcher will be in the header."
     },
     {
       "type": "guideline",
-      "content": "Panel.\n\nWhen hovering on the panel icon, the icon will show an animated preview of what action would be done upon interaction (either expanding or collapsing). This animation offers more context about what to expect. The placement of the panel icon is at the bottom of the app frame side navigation panel. Learn more about the side navigation state control’s user customization and preserve user preferences. App frame variants: Top App Bar (TAB) will go over the use cases of hamburger and panel icons."
+      "content": "The following are some common terms used at Adobe for describing the core UI elements that make up the app frame, along with some notable usage considerations. Consider this as a starting point for you to take and develop into working language that may need to be more contextual for your product. Work with your Content Strategy partners to adapt it to your needs."
     },
     {
       "type": "guideline",
-      "content": "How to use the TAB.\n\nTo activate or deactivate the TAB, select the 9-grid icon. Once clicked on, the TAB will appear above the header. On a screen reader, if there is an alert banner present, then the visual placement from top to bottom would be alert banner, TAB, then header."
+      "content": "The word “content” is general in theory but specific in application. In general, it’s a catch-all word for something that is contained in a designated space, and communicates meaning or intention. Specific to the context of the app frame, it describes that what goes into this area is at the discretion of a given situation or user experience."
     },
     {
       "type": "guideline",
-      "content": "Product-Specific Variations.\n\nThe placement and appearance of the TAB icon may differ across Adobe products. Not all products will utilize the TAB. The currently supported products are Adobe Home, Firefly, Express, Photoshop, Lightroom, and Acrobat."
+      "content": "This is a commonly used internal term, but is not recommended for describing the interface to an end user. This is because it relies upon a visual metaphor to mimic an analog concept: something that “sinks” into a UI plane, like a water well sinks into the surface of the ground."
     },
     {
       "type": "guideline",
-      "content": "TAB products (Digital Media).\n\nFor products that use the TAB, the side navigation state control (panel icon) will be at the bottom of the side navigation. For mobile experiences, the side navigation state control (hamburger icon) and product switcher will be in the header."
+      "content": "Internal jargon is important and we want to be aligned across teams, but we also need to be careful about using internal terms, externally. By “user-facing term,” we mean that user to be the “end user”: the person who encounters the UI of an Adobe experience."
     },
     {
       "type": "guideline",
-      "content": "Anatomy examples.\n\nImage: Examples of the product switcher in different places. One example of the Top App Bar (TAB) active at the top of the viewport with the panel icon state switcher at the end of the side navigation section. Another example is the mobile experience with the hamburger icon state switcher and the product switcher in the header. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_19bf4524cadbd94da0231a7cce0d587f0be0ac845.png?width=750&format=png&optimize=medium)"
+      "content": "In general, if you’re creating resources for internal usage (such as design guidelines or specs), you can safely use internal jargon. If you’re creating actual product UI, you will need to ensure that you’re using the appropriate terms that will help your user best understand and navigate the interface. Use the following steps to decide on terms:"
     },
     {
       "type": "guideline",
-      "content": "Non-TAB products (Digital Experience and Unified Shell).\n\nFor products that don’t use the TAB, the side navigation state control will always be the hamburger icon. View the Unified Shell component (Shell Frame) in the Spectrum 2 Experience Cloud Patterns library for more information."
+      "content": "What's the context — the workflow or scenario — for where a term will appear? That will help you determine who you’re speaking to, with what language."
     },
     {
       "type": "guideline",
-      "content": "Non-TAB products (Digital Experience and Unified Shell).\n\nFor products that don’t use the TAB, the side navigation state control will always be the hamburger icon. Image: Diagrams of the hamburger side navigation state control in a web and mobile breakpoint. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1ba4d3297356f4f73b02b4fb05bed4596a9fcd706.png?width=750&format=png&optimize=medium)"
+      "content": "Different deliverables will each have their own audience. For example:"
     },
     {
       "type": "guideline",
-      "content": "Some common Adobe terms for describing the UI.\n\nThe following are some common terms used at Adobe for describing the core UI elements that make up the app frame, along with some notable usage considerations. Consider this as a starting point for you to take and develop into working language that may need to be more contextual for your product. Work with your Content Strategy partners to adapt it to your needs. Image: Illustration of where panels or rails appear in the app frame layout: to either the left or right side of the UI. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1c4e8402f034d1e4c9737e42b72fad58518c38c1f.png?width=750&format=png&optimize=medium)Image: Illustration of one example where a content area can appear in the app frame layout: as the main focus or work area. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1600fc2e5b4260da2d3f688f8b0c9d7c4604016f1.png?width=750&format=png&optimize=medium)Image: Illustration of an example of where a well can appear in the app frame layout: in the middle of a content area. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1a80cabda2a52fad2708546441c70773dd8942506.png?width=750&format=png&optimize=medium)"
+      "content": "Are you creating something for internal builders (designers, engineers, anyone creating products) at Adobe? Or are you creating something for an external user?"
     },
     {
       "type": "guideline",
-      "content": "Panel, Rail.\n\nPanels and rails share so many similarities in their appearance and behaviors, as well as the same root concept: an area of content, with visible boundaries, affixed to one side, that has a specific focus or intention. These are a type of container, and can be flexible in what they contain. A panel is the preferred way to describe this general concept. This is because the word borrows from the well-known analog metaphor of a “control panel”: a flat board, usually square or rectangular, where controls are fixed."
+      "content": "Be specific about who you’re speaking to. If you're speaking to an internal audience looking at design direction for how to build UI, that’s a different audience from the users who will ultimately work with the UI."
     },
     {
       "type": "guideline",
-      "content": "Content area.\n\nSpectrum refers to a designated part of a composition of components as a content area if it can support many layout options, and is flexible in what it can contain. The word “content” is general in theory but specific in application. In general, it’s a catch-all word for something that is contained in a designated space, and communicates meaning or intention. Specific to the context of the app frame, it describes that what goes into this area is at the discretion of a given situation or user experience."
+      "content": "Will the term appear as a UI string (such as the title of a panel)? Would it appear as a label in an image that shows the anatomy of different parts of the component?"
     },
     {
       "type": "guideline",
-      "content": "Well.\n\nA well is a type of container that is used to show non-user-editable content. It generally communicates lower-attention, supplementary information. This is a commonly used internal term, but is not recommended for describing the interface to an end user. This is because it relies upon a visual metaphor to mimic an analog concept: something that “sinks” into a UI plane, like a water well sinks into the surface of the ground."
+      "content": "The main focus for most users is on the content — the information being shown, and the actions to select from — rather than where or the means by which the action is contained."
     },
     {
       "type": "guideline",
-      "content": "Identifying user-facing terms vs. internal-only terms.\n\nInternal jargon is important and we want to be aligned across teams, but we also need to be careful about using internal terms, externally. By “user-facing term,” we mean that user to be the “end user”: the person who encounters the UI of an Adobe experience. In general, if you’re creating resources for internal usage (such as design guidelines or specs), you can safely use internal jargon. If you’re creating actual product UI, you will need to ensure that you’re using the appropriate terms that will help your user best understand and navigate the interface. Use the following steps to decide on terms: Image: A black-and-white line icon of a browser window with a top toolbar and a single dot. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_15b3b3fb77bc097c8d306652754e50f38e16cb7fb.png?width=750&format=png&optimize=medium)Image: A black-and-white line icon of a magnifying glass, representing search. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_12ac292a56a7ce97b0042216244922f5d9e32f56f.png?width=750&format=png&optimize=medium)Image: A black-and-white line icon of two overlapping user silhouettes, representing a group of people. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_150f01f672f95313815260ac49144b5023d36ae5e.png?width=750&format=png&optimize=medium)"
+      "content": "This app framework intentionally uses the anatomy term “content area” to describe the main information or main focus in a given view, because it’s a flexible area that’s contextual to the main view of a given place in a user’s workflow."
     },
     {
       "type": "guideline",
-      "content": "Note your context.\n\nWhat's the context — the workflow or scenario — for where a term will appear? That will help you determine who you’re speaking to, with what language. Different deliverables will each have their own audience. For example: A label on a button in a UI mock, in Figma: end user Technical specs that show how to build UI: Adobe engineer Design guidelines that show assemblages of components: Adobe designer"
+      "content": "To create more inclusive products, describe parts of the UI in terms of function (what something does, or what something is) rather than appearance or position (such as relative direction: left, right, top, bottom)."
     },
     {
       "type": "guideline",
-      "content": "Assess your audience.\n\nAre you creating something for internal builders (designers, engineers, anyone creating products) at Adobe? Or are you creating something for an external user? Be specific about who you’re speaking to. If you're speaking to an internal audience looking at design direction for how to build UI, that’s a different audience from the users who will ultimately work with the UI."
+      "content": "Describe the actions or items available."
     },
     {
       "type": "guideline",
-      "content": "Identify where the term will appear.\n\nWill the term appear as a UI string (such as the title of a panel)? Would it appear as a label in an image that shows the anatomy of different parts of the component? It’s generally OK to say things like \"left rail\" or “side panel” descriptively in day-to-day work conversation, but be careful about using that description in an end user/customer facing capacity. Review Creating accessible app frame terminology for more guidance."
+      "content": "Avoid describing where to find specific items or actions in relation to UI construction."
     },
     {
       "type": "guideline",
-      "content": "Focus on the content, not the container.\n\nThe main focus for most users is on the content — the information being shown, and the actions to select from — rather than where or the means by which the action is contained. This app framework intentionally uses the anatomy term “content area” to describe the main information or main focus in a given view, because it’s a flexible area that’s contextual to the main view of a given place in a user’s workflow."
+      "content": "The word panel is acceptable as a user-facing term only when there is no other way to describe the interface."
     },
     {
       "type": "guideline",
-      "content": "Avoid terms of relative direction or appearance.\n\nTo create more inclusive products, describe parts of the UI in terms of function (what something does, or what something is) rather than appearance or position (such as relative direction: left, right, top, bottom). Talk about the actions available or the names of the features inside of a part of the interface, rather than how the interface itself looks. View the Spectrum Inclusive UX writing guide for more guidelines and examples. Image: Example of correct usage. Approvals. Colors. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_114c85b714942bddf4a0baaac51146c4e1755a454.png?width=750&format=png&optimize=medium)Describe the actions or items available.Image: Example of incorrect usage. Approvals rail. Colors panel. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_16927fb5340c20e1bd0dbaf651eb68d4c4d76032e.png?width=750&format=png&optimize=medium)Avoid describing where to find specific items or actions in relation to UI construction."
+      "content": "The word rail is acceptable to use as internal jargon, but it should never be used as a user-facing term. This is because the word is about how something looks: a long, straight divider, like a slide rule or a railroad track."
     },
     {
       "type": "guideline",
-      "content": "Using “panel” and “rail” as user-facing terms.\n\nThe word panel is acceptable as a user-facing term only when there is no other way to describe the interface. The word rail is acceptable to use as internal jargon, but it should never be used as a user-facing term. This is because the word is about how something looks: a long, straight divider, like a slide rule or a railroad track. View the Spectrum in-product word list for more details and usage notes about these and other terms to refer to parts of the interface. Image: Example of correct usage. Show more options. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1bc5bf7de9abaf2318532d97026370f9d9be0fa1e.png?width=750&format=png&optimize=medium)Describe the action to take on the UI.Image: Example of incorrect usage. Hide navigation rail. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_17fc6b06737dfff7420c77dd28a9df09d1715610d.png?width=750&format=png&optimize=medium)Don’t describe the UI itself."
+      "content": "Describe the action to take on the UI."
     },
+    { "type": "guideline", "content": "Don’t describe the UI itself." },
     {
       "type": "guideline",
-      "content": "“Show” and “Hide”.\n\n“Show” and “hide” are the preferred terms to use to describe the open/close actions on the side navigation. This is for several reasons: Globalization readiness. The words “show” and “hide” both have low character counts in U.S. English, and are the most common already-existing terms to express this concept across Adobe products. Plain language. “Hide” is more straightforward and common language than “Minimize,” and is also at the appropriate reading level for UI text. Conceptual accuracy. “Show” and “Hide” better align to their associated actions; items aren’t disappearing completely from view, but are being tucked away or are changing appearance. Image: Example of correct usage. Show menu labels. Hide navigation. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_18c67799a786aa0e8335712032da5e43b57fdc230.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage. Expand menu labels. Minimize navigation. Collapse side bar. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1ab30756ab3323c279063b24ab1950d5ecd12b932.png?width=750&format=png&optimize=medium)"
+      "content": "“Show” and “hide” are the preferred terms to use to describe the open/close actions on the side navigation. This is for several reasons:"
     },
     {
       "type": "guideline",
-      "content": "When in doubt, use sentence case.\n\nAs you’re designing the UI content of your app frame using this framework, follow the Spectrum content standards for all UI text and labels. Most of the writing you’ll be doing for the app frame will be short labels. These, as well as all other UI content, are formatted in sentence case: only the first letter of the first word is capitalized. View the Spectrum Grammar and mechanics page. Image: Example of correct usage. All templates. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1f4aca7a576edf2610ac55b033fa6c32b0ce79736.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage. All Templates. ALL TEMPLATES. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1d2fe39e9e168e4a5493e212e36a31d36e765060d.png?width=750&format=png&optimize=medium)"
+      "content": "As you’re designing the UI content of your app frame using this framework, follow the Spectrum content standards for all UI text and labels."
     },
     {
       "type": "guideline",
-      "content": "Refer to Spectrum Patterns.\n\nThere may be particular content standards or specific writing scenarios that are designed for your product. Defer to these product-specific terms and language preferences. Check the Spectrum Patterns documentation for product-specific writing guidelines, or ask your team’s Content Strategist for more resources."
+      "content": "Most of the components that will go into your app frame design have their own associated content standards:"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/overview",
-  "lastUpdated": "2026-09-04",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-overview/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "App frame",
-    "Framework",
-    "Navigation",
-    "Browsing context",
-    "Editing context"
+  "tags": ["designing"],
+  "related": [
+    { "ref": "containers" },
+    { "ref": "s2-app-frame-header-browsing-context" }
   ]
 }

package/guidelines/attention-hierarchy.json

@@ -8,26 +8,35 @@
     { "type": "purpose", "content": "Attention hierarchy" },
     {
       "type": "guideline",
-      "content": "Attention hierarchy is a core concept in Spectrum 2. This idea has always been a part of Spectrum as a design system — and a tenet of responsible UX design as a whole — but it’s now more formalized as a way to validate assumptions using clear guidelines and considerations. It’s based on the methods of typographic hierarchy, where scale, size, and text pairings help readers to readily recognize what’s the most broad and important information to the most detailed and nice-to-know information. We’ve extended this practice beyond just text and into all the ways that UI communicates. Another way to think of attention hierarchy is as a way to manage the ratio of signal-to-noise in an experience. Different parts of the UI all communicate meaning, at different levels of attention. High attention elements show a primary area of focus, and communicate timely, high-signal meanings. Low attention elements blend into the background, and communicate more utilitarian, lower-priority meanings. Things like object styles, component options, and typography all draw different levels of attention."
+      "content": "Design systems are ultimately communication systems. A main goal of any kind of UI communication — visual, linguistic, motion, and more — is to convey a message in a way that the audience can readily understand what they need to know and why it matters. And most importantly, communication needs to be respectful of user attention."
     },
     {
       "type": "guideline",
-      "content": "High attention elements should be used sparingly and selectively. If too many things are high attention at once, the experience becomes noisy and unfocused. For example, both high-contrast colors and elevation communicate specific meanings and add emphasis within pages and flows — and these are both used very thoughtfully. Image: Three labeled pill buttons on a low-to-high attention scale: a light gray button on the left (low attention), a dark gray/black button in the middle, and a solid blue button on the right (high attention). (source: https://preview.spectrum.adobe.com/foundations/media_14ae3b9cab583541ca3057219e82b963cb577f719.png?width=750&format=png&optimize=medium)Image: Four empty rounded rectangle cards arranged on a low-to-high attention scale, showing progressively deeper drop shadows from left to right to indicate increasing visual elevation and attention. (source: https://preview.spectrum.adobe.com/foundations/media_145c026b410020965c87b15781c669231233cd7fa.png?width=750&format=png&optimize=medium)"
+      "content": "**Attention hierarchy** is a core concept in Spectrum 2. This idea has always been a part of Spectrum as a design system — and a tenet of responsible UX design as a whole — but it's now more formalized as a way to validate assumptions using clear guidelines and considerations. It's based on the methods of typographic hierarchy, where scale, size, and text pairings help readers to readily recognize what's the most broad and important information to the most detailed and nice-to-know information. We've extended this practice beyond just text and into all the ways that UI communicates."
     },
     {
       "type": "guideline",
-      "content": "As a general rule, only one element or group of elements should have high attention on a page. Too many elements drawing high attention makes it difficult to focus. Image: A vertical sidebar with a blue circular add button at top, followed by icons for recent, cloud, and people, with a tooltip labeled 'Recent' pointing to the clock icon, and a panel toggle icon at the bottom. (source: https://preview.spectrum.adobe.com/foundations/media_1a93a0b0e1b7fb0945b404bf29ffcc9bd5cc43d71.png?width=750&format=png&optimize=medium)Image: A vertical sidebar with a blue circular add button, a highlighted blue 'Recent' clock icon with a matching blue tooltip label, plus cloud and people icons, and a panel toggle icon at the bottom — showing overuse of blue accent color across multiple elements. (source: https://preview.spectrum.adobe.com/foundations/media_19fb239ceeb047bb8e509bb2f502737325765d41e.png?width=750&format=png&optimize=medium)The plus button is the most timely and high impact action to take in this example.Selected state of items in the navigation is competing with the plus button."
+      "content": "Another way to think of attention hierarchy is as a way to manage the ratio of signal-to-noise in an experience. Different parts of the UI all communicate meaning, at different levels of attention. High attention elements show a primary area of focus, and communicate timely, high-signal meanings. Low attention elements blend into the background, and communicate more utilitarian, lower-priority meanings. Things like object styles, component options, and typography all draw different levels of attention."
+    },
+    {
+      "type": "guideline",
+      "content": "High attention elements should be used sparingly and selectively. If too many things are high attention at once, the experience becomes noisy and unfocused. For example, both high-contrast colors and elevation communicate specific meanings and add emphasis within pages and flows — and these are both used very thoughtfully."
+    },
+    {
+      "type": "guideline",
+      "content": "As a general rule, only one element or group of elements should have high attention on a page. Too many elements drawing high attention makes it difficult to focus."
+    },
+    {
+      "type": "guideline",
+      "content": "**Good example:** The \"Share\" button is the most timely and high-impact action to take in this example. It's high attention because the next step after finishing creating something within the canvas would be to share it."
+    },
+    {
+      "type": "guideline",
+      "content": "**Bad example:** The \"Share\" button is competing with the selected states of items in the navigation. These navigational items are still important for communicating wayfinding and context, but are not as timely as the action of sharing."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/attention-hierarchy",
-  "lastUpdated": "2026-08-24",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/attention-hierarchy/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "attention hierarchy",
-    "high attention",
-    "low attention",
-    "UI communication",
-    "elevation",
-    "contrast"
-  ]
+  "tags": ["designing"]
 }

package/guidelines/background-layers.json

@@ -5,104 +5,34 @@
   "title": "Background layers",
   "category": "designing",
   "documentBlocks": [
-    { "type": "purpose", "content": "Background layers" },
     {
-      "type": "guideline",
-      "content": "In Spectrum, background layers are used differently depending on the primary context of the page. For pages where the primary purpose is the canvas and related actions for editing, view Editing contexts. For pages where the primary focus is browsing content, such as a Home or Files experience, view Browsing contexts. If you’re not sure whether a page is in an editing or browsing context, contact the Spectrum design team. In addition to the three existing background layer options — background layer 1, background layer 2, and background base — Spectrum includes an elevated option. Elevated background layers create depth and emphasize content floating on top of a canvas. Image: A stack of five overlapping flat panels labeled with callouts from front to back: elevated, layer-2, layer-1, base, and pasteboard, illustrating a background layer hierarchy. (source: https://preview.spectrum.adobe.com/foundations/color/media_125baf8974fe134e65d43f0f3ae7eeac5a7fd609b.png?width=750&format=png&optimize=medium) Background layer Light theme Dark theme Elevatedgray-25 (with drop shadow)gray-75 (with drop shadow)Layer 2gray-25gray-75Layer 1gray-50gray-50Pasteboardgray-100gray-25"
-    },
-    {
-      "type": "guideline",
-      "content": "Overview.\n\nIn Spectrum, background layers are used differently depending on the primary context of the page. For pages where the primary purpose is the canvas and related actions for editing, view Editing contexts. For pages where the primary focus is browsing content, such as a Home or Files experience, view Browsing contexts. If you’re not sure whether a page is in an editing or browsing context, contact the Spectrum design team."
-    },
-    {
-      "type": "guideline",
-      "content": "Editing application.\n\nPages in editing contexts draw attention to the canvas, which is the primary focus. Image: A UI mockup showing a light gray toolbar and content area, with a small white vertical panel on the left labeled 'elevated. (source: https://preview.spectrum.adobe.com/foundations/color/media_170fe70f90d11502945ba73f759534964da2df900.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Image: An isometric exploded view of a UI panel showing stacked layers labeled layer-2, elevated, pasteboard, and layer-2 again, illustrating depth and stacking order. (source: https://preview.spectrum.adobe.com/foundations/color/media_1f8b886169da3f23ccfffdbb27b5c0ea4021846d2.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Elevated (highest attention).\n\nElevated backgrounds create the illusion of depth through the use of a drop shadow, and display content that appears on top of other content. They draw attention and are used sparingly. In an editing application, this background option works well for parts of the app frame that appear on top of the canvas, such as a floating toolbar, panel, or popover."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: The same UI mockup with a light gray toolbar and content area, with the surrounding background area labeled 'layer-2.' (source: https://preview.spectrum.adobe.com/foundations/color/media_10fb4e74c2e2cf1b5db032034b80119c621df637f.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Layer 2 is the color of the canvas. This background layer color can also be used in both professional and lightweight editing applications, in the app frame, to put it on the same dimension as the primary content."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: The same UI mockup with a light gray toolbar and content area, with the outermost background area labeled 'pasteboard.' (source: https://preview.spectrum.adobe.com/foundations/color/media_110c564baa38fffaae914eb5a11d469cd41ccf2a1.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Pasteboard.\n\nThe pasteboard has a dedicated background layer. This is because no components are placed directly on top of it, with the exception of an artboard (which uses a white background color). Other components should be placed on a layer 1, layer 2, or elevated background."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: A UI mockup showing a toolbar, content area, and a floating rounded button, with the button labeled 'elevated.' (source: https://preview.spectrum.adobe.com/foundations/color/media_19136fb540bd10ab5985b00318dd4c6a06d6648db.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Image: The same UI mockup with a toolbar, content area, and floating button, with the light gray sidebar area labeled 'Layer 2.' (source: https://preview.spectrum.adobe.com/foundations/color/media_1167297ee70d5bc333820478afdcf8410d5cd2e22.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Image: The same UI mockup with a toolbar, content area, and floating button, with the white toolbar area labeled 'Layer 1. (source: https://preview.spectrum.adobe.com/foundations/color/media_18abc351c445528d2ace3af106f13f2b6626b2715.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
+      "type": "purpose",
       "content": "Layer 1 can be used as the app frame color in professional editing applications, which require additional depth differentiation."
     },
     {
       "type": "guideline",
-      "content": "Image: The same UI mockup with a toolbar, content area, and floating button, with the outermost background area labeled 'Pasteboard.' (source: https://preview.spectrum.adobe.com/foundations/color/media_1fca78125ec28d3d0af8819e33bc53e96dd8dbfd2.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Pasteboard.\n\nThe pasteboard has a dedicated background layer. This is because no components are placed directly on top of it, with the exception of an artboard (which uses a white background color)."
-    },
-    {
-      "type": "guideline",
-      "content": "Elevated (highest attention).\n\nElevated backgrounds create the illusion of depth through the use of a drop shadow, and display content that appears on top of other content. They draw attention and are used sparingly. In browsing contexts, this background layer style is used in components like menus and tooltips."
-    },
-    {
-      "type": "guideline",
-      "content": "Image: A UI mockup showing a content area with a floating rounded card in the top-right corner, with the surrounding gray background labeled 'base.' (source: https://preview.spectrum.adobe.com/foundations/color/media_1856cd39f76bc9d38d6f9ddfe57400ceb603e983b.png?width=750&format=png&optimize=medium)"
+      "content": "Layer 2 is the color of the canvas. This background layer color can also be used in both professional and lightweight editing applications, in the app frame, to put it on the same dimension as the primary content."
     },
     {
       "type": "guideline",
-      "content": "Layer 2 is used to group related content together and to create separation from the primary content on a page, such as in the background of the app frame."
+      "content": "The pasteboard has a dedicated background layer. This is because no components are placed directly on top of it, with the exception of an artboard (which uses a white background color). Other components should be placed on a layer 1, layer 2, or elevated background."
     },
     {
       "type": "guideline",
-      "content": "Image: The same UI mockup with a content area and floating card, with the white content panel labeled 'layer 2.' (source: https://preview.spectrum.adobe.com/foundations/color/media_14cfd47611567b8649816d2022de82b47339f2d42.png?width=750&format=png&optimize=medium)"
+      "content": "This example shows an editing application using background layer 2 for both the artboard and the app frame. An elevated background is used for a floating toolbar, which appears on top of the canvas."
     },
     {
       "type": "guideline",
-      "content": "Base.\n\nSpectrum 2 uses gray-25 as the base background color to draw attention to the primary content of a page. Using gray-25 allows for higher contrast between the background and content, and it provides a blank canvas for more vibrant colors. For using a drop shadow to draw emphasis to a container that isn’t elevated, view container emphasis. Image: Two side-by-side diagrams, light theme and dark theme, each showing three overlapping square panels labeled elevated, Layer 2, and Base from front to back, illustrating background layer hierarchy in both color modes. (source: https://preview.spectrum.adobe.com/foundations/color/media_135b74d5364580adabc3490eb36efcbd74084d1e8.png?width=750&format=png&optimize=medium) Background layer Light theme Dark theme Elevatedgray-25 (with drop shadow)gray-75 (with drop shadow)Layer 2gray-25gray-75Layer 1gray-50gray-50Pasteboardgray-100gray-25"
+      "content": "Spectrum 2 uses gray-25 as the base background color to draw attention to the primary content of a page. Using gray-25 allows for higher contrast between the background and content, and it provides a blank canvas for more vibrant colors."
     },
     {
       "type": "guideline",
-      "content": "Image: Screenshot of a 3D asset browsing tool titled 'Outdoor_backpack,' with a left panel showing model categories (Containers, Apparel, Furniture, Interior) and a preview pane showing an orange and black backpack, with layer callouts labeling the top toolbar as 'layer-1,' the sidebar as 'layer 2,' the models panel as 'layer-1,' and the surrounding gray area as 'pasteboard.' (source: https://preview.spectrum.adobe.com/foundations/color/media_12b24cc5d6f942a4c6769e90771cd05722c956374.png?width=750&format=png&optimize=medium) Professional editing applications have the option to use background layer 1 for the app frame in order to create additional depth differentiation. To create separation for toolbars and panels that meet at the edges, include a border in size medium that matches the pasteboard color. In dark theme, the primary background (using the background base layer) is the darkest color. This allows for more flexibility for the grays that are layered on top of it, and provides contrast for more vibrant user-created content. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/color/media_1907964fc16b62bc9bc0128942fac3063e8fbed18.png?width=750&format=png&optimize=medium) This example shows containers that are emphasized to draw attention. They don’t use the elevated background because they don’t appear on top of other content. View container emphasis for more context. Image: Screenshot of Photoshop's web interface showing a 'Size & position' panel with Move, Auto-select, Align, Transform, and Crop options, overlaid on a photo of a basketball player dribbling on a teal court. (source: https://preview.spectrum.adobe.com/foundations/color/media_1bdb575c4f4ad7b4e47b95c65287e274faa06bfcb.png?width=750&format=png&optimize=medium)This example shows an editing application using background layer 2 for both the artboard and the app frame. An elevated background is used for a floating toolbar, which appears above the canvas."
+      "content": "In dark theme, the primary background (using the background base layer) is the darkest color. This allows for more flexibility for the grays that are layered on top of it, and provides contrast for more vibrant user-created content."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/color/background-layers",
-  "lastUpdated": "2026-08-13",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/background-layers/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "background layers",
-    "elevated background",
-    "editing contexts",
-    "browsing contexts",
-    "canvas",
-    "Layer 1",
-    "Layer 2",
-    "Pasteboard",
-    "artboard"
-  ]
+  "tags": ["designing"],
+  "related": [{ "ref": "colors" }, { "ref": "typography-fundamentals" }]
 }

package/guidelines/brand.json

@@ -8,63 +8,43 @@
     { "type": "purpose", "content": "Brand" },
     {
       "type": "guideline",
-      "content": "Product logos, app icons, and lockups.\n\nA product logo or tile color does not change, even if the background is dark. One-color product logos are for usage as workflow icons. You can find app icons within the App Icons library."
+      "content": "Product logos, app icons, and lockups.\n\nA product logo or tile color does not change, even if the background is dark. One-color product logos are for usage as workflow icons. You can find app icons within the [App Icons library](https://www.figma.com/file/8or0zCnGc5fiTnQ1NeIRnh/Product-App-icons?type=design\\&node-id=501%3A685\\&mode=design\\&t=BCgDXidUN5VZiBwu-1)."
     },
     {
       "type": "guideline",
-      "content": "Product logos, app icons, and lockups.\n\nA product logo or tile color does not change, even if the background is dark. One-color product logos are for usage as workflow icons. Image: \"Adobe Express branding with colorful 'A' app icon and text lockups shown in horizontal and vertical orientations.\" (source: https://preview.spectrum.adobe.com/foundations/media_1b535db2549466c3c1f81290211e8cb97e3b0277c.png?width=750&format=png&optimize=medium)"
+      "content": "Loading screens include desktop splash screens, mobile loading screens, and web loaders.\n\nDesktop splash screens celebrate artwork from the Adobe community and are updated at least once a year. All desktop products that have a loading time of longer than 2 seconds, or don't open instantaneously, are required to have a splash screen. This is so a user can understand that there's a loading process happening.\n\nFollow OS-specific conventions for mobile loading screens. View more information about using [Android loading screens](https://wiki.corp.adobe.com/display/AdobeDesign/Android+Launch+Screens)."
     },
     {
       "type": "guideline",
-      "content": "Loading screens include desktop splash screens, mobile loading screens, and web loaders. Desktop splash screens celebrate artwork from the Adobe community and are updated at least once a year. All desktop products that have a loading time of longer than 2 seconds, or don’t open instantaneously, are required to have a splash screen. This is so a user can understand that there’s a loading process happening. Follow OS-specific conventions for mobile loading screens. View more information about using Android loading screens."
+      "content": "File type and folder illustrations.\n\nOn desktop, product folder icons are branded to help users find any product-related settings. For web and mobile, folders use Spectrum colors to fit better in the experience.\n\nPrimary file types always utilize brand colors, since they're often file formats proprietary to the product (for example, PSD to Photoshop, or AEP to AE). Secondary filetypes are shared across many products, so they take a neutral palette using Spectrum 1 colors.\n\nThe Brand team creates desktop versions of these icons in ICNS (for Mac) and ICO (for Windows) files, while web versions are delivered most often as SVGs. Desktop folders and file types can be found on the [Brand wiki](https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=AdobeDesign\\&title=Adobe+Design+Brand) under individual product delivery pages. View [web folders and file types](https://wiki.corp.adobe.com/pages/viewpage.action?pageId=1994851879)."
     },
     {
       "type": "guideline",
-      "content": "Loading screens include desktop splash screens, mobile loading screens, and web loaders. Desktop splash screens celebrate artwork from the Adobe community and are updated at least once a year. All desktop products that have a loading time of longer than 2 seconds, or don’t open instantaneously, are required to have a splash screen. This is so a user can understand that there’s a loading process happening. Follow OS-specific conventions for mobile loading screens."
+      "content": "Creative Cloud uses Adobe red and six product-specific colors, each with corresponding light and dark values."
     },
     {
       "type": "guideline",
-      "content": "File type and folder illustrations.\n\nOn desktop, product folder icons are branded to help users find any product-related settings. For web and mobile, folders use Spectrum colors to fit better in the experience. Primary file types always utilize brand colors, since they’re often file formats proprietary to the product (for example, PSD to Photoshop, or AEP to AE). Secondary filetypes are shared across many products, so they take a neutral palette using Spectrum 1 colors. The Brand team creates desktop versions of these icons in ICNS (for Mac) and ICO (for Windows) files, while web versions are delivered most often as SVGs. Desktop folders and file types can be found on the Brand wiki under individual product delivery pages. View web folders and file types."
+      "content": "Document Cloud's colors align to Spectrum. There's three primary product colors plus Adobe red, as well as six secondary colors."
     },
     {
       "type": "guideline",
-      "content": "File type and folder illustrations.\n\nOn desktop, product folder icons are branded to help users find any product-related settings. For web and mobile, folders use Spectrum colors to fit better in the experience. Primary file types always utilize brand colors, since they’re often file formats proprietary to the product (for example, PSD to Photoshop, or AEP to AE). Secondary filetypes are shared across many products, so they take a neutral palette using Spectrum 1 colors."
+      "content": "Experience Cloud's colors align to Spectrum. The foundational apps use cool colors, while the functional apps use warm colors."
     },
     {
       "type": "guideline",
-      "content": "Creative Cloud uses Adobe red and six product-specific colors, each with corresponding light and dark values. Image: Color palette grid with Adobe app icons (Ai, Dn, Ps, Ae, Xd, Id) above corresponding color swatches and hex codes. (source: https://preview.spectrum.adobe.com/foundations/media_1fc8580f8a8ad1855ad6d91b5e412d1323e574af9.png?width=750&format=png&optimize=medium)"
+      "content": "Adobe Express uses three colors. Indigo is used for a fill accent color and for highlighting main metaphors. Spectrum gray is the main stroke color."
     },
     {
       "type": "guideline",
-      "content": "Document Cloud’s colors align to Spectrum. There’s three primary product colors plus Adobe red, as well as six secondary colors. Image: Grid of color swatches with hex codes, featuring Adobe Acrobat icons in red, purple, and teal at the top row. (source: https://preview.spectrum.adobe.com/foundations/media_1e553a0a604bb2734012ea65f4a3545209e9749b7.png?width=750&format=png&optimize=medium)"
+      "content": "Premium and Generative AI gradients.\n\n\\[See embedded content on website]"
     },
     {
       "type": "guideline",
-      "content": "Experience Cloud’s colors align to Spectrum. The foundational apps use cool colors, while the functional apps use warm colors. Image: Diagram categorizing \"Foundational\" and \"Functional\" elements with labeled colored squares: Insights, Content, Data, Setup, Marketing, Ads, Commerce. (source: https://preview.spectrum.adobe.com/foundations/media_18af562eadd246ad3934851d77fca39cfca07bed5.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Adobe Express uses three colors. Indigo is used for a fill accent color and for highlighting main metaphors. Spectrum gray is the main stroke color. Image: Three colored squares with hex codes: light purple (#DEDEF9), blue (#5C5CE0), and black (#242424) displayed in a row. (source: https://preview.spectrum.adobe.com/foundations/media_1704be25c74bac41af593635d0107205d2d97aec0.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Gradients are a significant characteristic of Spectrum 2 and a very noticeable part of how the Adobe brand is expressed in UI contexts. They help communicate product differentiation across our brand portfolio, and also allow for individual products to have a wider range of expression. Both of these aspects heavily contribute to the bolder, more colorful visual language of Spectrum 2. Because gradients are very expressive, they’re always placed intentionally and with a strategic meaning. They should not distract from the main content in an experience. They’re only used in specific areas in order to create a system, feature the product brand, and support visual hierarchy. And, their colors are directly tied to product brand color palettes."
-    },
-    {
-      "type": "guideline",
-      "content": "Request assets from the Brand team.\n\nBrand considerations are highly strategic, and coherence is a priority. Don’t make your own illustrations, colors, gradients, logos, or other assets. The Brand team will work with you to create assets that align to your product’s strategy and timing. Any new Spectrum 2 assets must be requested directly from the Brand team. It’s very important that you do not create your own. To view existing S2 Illustrations, visit the S2 / Illustrations library in Figma. If you need a new illustration, make a request using Workfront."
+      "content": "Request assets from the Brand team.\n\nBrand considerations are highly strategic, and coherence is a priority. Don't make your own illustrations, colors, gradients, logos, or other assets. The Brand team will work with you to create assets that align to your product's strategy and timing.\n\nAny new Spectrum 2 assets must be requested directly from the Brand team. It's very important that you do not create your own.\n\nTo view existing S2 Illustrations, visit the [S2 / Illustrations library](https://www.figma.com/design/xGhSI7y1ewp2fEiX5eNOKv/S2-%2F-Illustrations?node-id=1508-8563\\&t=T5G2KGbuUHuqGUnA-0) in Figma. If you need a new illustration, [make a request using Workfront](https://experience.adobe.com/#/@wfadoberm/so:adoberm-Production/workfront/requests/new?activeTab=tab-new-helpRequest\\&projectID=6780593b001a3fa9fe20195fcec6c39a\\&path=)."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/brand",
-  "lastUpdated": "2026-09-10",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/brand/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "Brand assets",
-    "Product logos",
-    "App icons",
-    "Loading screens",
-    "Brand colors",
-    "Gradients",
-    "Creative Cloud"
-  ]
+  "tags": ["designing"]
 }