@adobe/spectrum-design-data 3.3.0 → 3.4.0

package/guidelines/resources.json

@@ -8,52 +8,66 @@
     { "type": "purpose", "content": "Resources" },
     {
       "type": "guideline",
-      "content": "The Spectrum 2 Figma libraries are the primary resource for Spectrum 2 components, styles, and variables. These libraries are stable, so you can use the designs in production."
+      "content": "Figma libraries.\n\nThe Spectrum 2 Figma libraries are the primary resource for Spectrum 2 components, styles, and variables. These libraries are stable, so you can use the designs in production. We’re continuing to work on exciting improvements as we expand Spectrum 2. Make sure to regularly review design documentation to keep up-to-date with releases. Familiarize yourself with the changes to components, patterns, styles, variables, and usage guidelines. And most importantly, read the release notes (posted in #spectrum-bulletin ). For any questions, view the FAQs or contact us. To provide feedback on the Spectrum 2 Figma libraries, please visit the #spectrum-design Slack channel and fill out the embedded Slack form. Your input is important and helps us prioritize updates accordingly. Assets, such as icons and illustrations, are published in separate libraries. Reach out to the Icons team to request product-specific icons that are not currently included in a library by submitting a request. For questions specific to the Spectrum 2 Figma icon libraries, post in #figma-icons-libraries on Slack. For general questions about icons, post in #icons. An example of the Spectrum 2 library: the action button page."
     },
     {
       "type": "guideline",
-      "content": "An example of the Spectrum 2 library: the action button page."
+      "content": "Access the Spectrum 2 web libraries:.\n\nS2 / Web with Variables: Formerly known as S2 / Variables, this library is now a single stop for all Spectrum 2 web design data and components, including typography styles, tokens, variables, and up-to-date component statuses S2 / Web (Deprecated): Formerly known as S2 / Web (Desktop scale), contained Spectrum 2 components and typography styles. This library will no longer receive updates but will remain available to use until further notice. S2/Icons, Global: Contains a set of commonly used Spectrum 2 icons S2/Illustrations: Contains a set of Spectrum 2 linear and gradient illustrations"
     },
     {
       "type": "guideline",
-      "content": "This GitHub repository houses Spectrum’s design tokens, which are primarily name-value pairs used to store design decisions and distributed in a way that platforms, implementations, and products can use across design tools and coding languages."
+      "content": "Access the Spectrum 2 iOS library:.\n\nS2/iOS: Contains Spectrum 2 components, typography styles, and variables for iOS If you don’t have access to Figma, you may be able to request view-only access through your product’s design team. Learn more at the Adobe Design Figma Usage: Guidelines and Resources wiki."
     },
     {
       "type": "guideline",
-      "content": "This tool allows you to search for token names or values, filter values by scale and theme, and explore the relationship between Spectrum’s tokens by selecting tokens to see their connections."
+      "content": "As the design of Spectrum 2 is finalized, the existing design data will be updated and released incrementally. For more information, view our Developer overview page."
     },
     {
       "type": "guideline",
-      "content": "To support this transition, S2/Color has been removed from the inheritance chain in the Figma libraries. Designers should update their files to replace color styles with color variables. Following the steps in the guide will help ensure your files remain stable and aligned with the Spectrum system moving forward."
+      "content": "Spectrum Tokens repository.\n\nThis GitHub repository houses Spectrum’s design tokens, which are primarily name-value pairs used to store design decisions and distributed in a way that platforms, implementations, and products can use across design tools and coding languages. View Spectrum Tokens on GitHub"
     },
     {
       "type": "guideline",
-      "content": "These changes are for Spectrum 2 libraries. They do not apply to Spectrum 1."
+      "content": "Spectrum Token Visualizer tool.\n\nThis tool allows you to search for token names or values, filter values by scale and theme, and explore the relationship between Spectrum’s tokens by selecting tokens to see their connections. View the Spectrum 2 Token Visualizer"
     },
     {
       "type": "guideline",
-      "content": "To support the new font, we’ve updated our default line-height values and introduced symmetrical vertical padding token values to our design system. The Spectrum 2 typography guide includes details about what’s changing, what’s staying the same, and options for updating design files or implementations."
+      "content": "For teams developing with an implementation of Spectrum, reference that implementation’s documentation for information regarding component availability, specific usage guidelines, and other developer resources. More information is also available on the Developer overview page."
     },
     {
       "type": "guideline",
-      "content": "These changes are for Spectrum 2 libraries and implementations. They do not apply to Spectrum 1 components."
+      "content": "Spectrum Web Components 1.0 uses an approach to Spectrum 2 that applies the design system’s new colors, corner radii, and icons to its components without introducing breaking changes. For more detailed information about this approach, read the initial announcement on the Spectrum wiki. When Spectrum Web Components 2.0 releases, it will include the full Spectrum 2 implementation of its components. The team is currently defining the product strategy, and major announcements about its availability and timeline will be released through Slack channels ( #swc-announcements and #spectrum-web-components ), the Spectrum 2 Wiki, and e-mails to members of the DL GRP-SWC-OFFICEHOURS. Access to this DL is self-serve through Adobe’s IMS portal. View the Spectrum Web Components documentation site"
     },
     {
       "type": "guideline",
-      "content": "Spectrum 2 includes two new grays — gray-25 and gray-1000 — plus an update to the rest of the 11 grays. The migration guide goes into more detail about what’s changing and what’s staying the same."
+      "content": "React Spectrum’s implementation of Spectrum 2 is available for use through the npm package @react-spectrum/s2, and automated migration assistance from React Spectrum V3 to Spectrum 2 is available through the migration wizard. Check the Spectrum 2 in React Spectrum page for more information, including which components are available and how to get started. Releases are announced in the #react-spectrum and #rsp-announcements Slack channels, and developers using the Spectrum 2 library can also request access to a dedicated support channel. View the React Spectrum documentation website"
     },
     {
       "type": "guideline",
-      "content": "Creating interfaces that support right-to-left (RTL) and bi-directional (Bidi) languages is essential to ensuring that our products are inclusive of global audiences. These guides, created by the Adobe International team, offer comprehensive frameworks on how to design and build for both web and mobile components."
+      "content": "Spectrum iOS recently released an initial set of components and foundations in its 1.0 release. More information, including the projected components for future releases, are documented on the iOS project’s wiki. Announcements about releases are made in the #spios-announcements and #spectrum-ios Slack channels. For instructions on how to integrate Spectrum iOS into your project, please visit the following wiki page. View spectrum-ios on GitHub View documentation for spectrum-ios View documentation for spectrum-tokens-ios Sign up for access to the Catalog App on TestFlight to try Spectrum iOS on device."
     },
     {
       "type": "guideline",
-      "content": "The Adobe Design Brand team has created Spectrum 2-inspired desktop and mobile backgrounds for you to download."
+      "content": "Color variables migration guide.\n\nSpectrum 2 Figma libraries are officially moving from color styles to color variables. Now that Figma variables are fully supported, color styles are being phased out in favor of directly linked variables, from the S2/Variables library. This is now a public library, enabling everyone to connect directly to Spectrum’s source of truth. To support this transition, S2/Color has been removed from the inheritance chain in the Figma libraries. Designers should update their files to replace color styles with color variables. Following the steps in the guide will help ensure your files remain stable and aligned with the Spectrum system moving forward. These changes are for Spectrum 2 libraries. They do not apply to Spectrum 1. View the Spectrum 2 color variables migration guide"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Spectrum VF typography guide.\n\nSpectrum 2 uses a new default font, Adobe Clean Spectrum VF. Aesthetically, this font is the same glyphs as Adobe Clean, but it has an adjusted baseline to sit vertically centered in UI. It also includes modern variable technology for width and weight axes. To support the new font, we’ve updated our default line-height values and introduced symmetrical vertical padding token values to our design system. The Spectrum 2 typography guide includes details about what’s changing, what’s staying the same, and options for updating design files or implementations. These changes are for Spectrum 2 libraries and implementations. They do not apply to Spectrum 1 components. View the Spectrum 2 typography guide"
+    },
+    {
+      "type": "guideline",
+      "content": "Right-to-left mirroring and bi-directional language formatting guides.\n\nCreating interfaces that support right-to-left (RTL) and bi-directional (Bidi) languages is essential to ensuring that our products are inclusive of global audiences. These guides, created by the Adobe International team, offer comprehensive frameworks on how to design and build for both web and mobile components. View the RTL and Bidi formatting guide View the Mirroring for RTL languages framework"
     }
   ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/resources/",
-  "lastUpdated": "2026-02-02",
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/resources",
+  "lastUpdated": "2026-09-04",
   "status": "published",
-  "tags": ["support"],
-  "related": [{ "ref": "contact" }]
+  "tags": [
+    "Figma libraries",
+    "Design tokens",
+    "Spectrum Web Components",
+    "implementation",
+    "guides",
+    "resources"
+  ]
 }

package/guidelines/rounding.json

@@ -0,0 +1,85 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/rounding.json",
+  "name": "rounding",
+  "title": "Rounding",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Rounding" },
+    {
+      "type": "guideline",
+      "content": "Image: A rounded triangle icon with softened corners on a light gradient background, illustrating the principle of avoiding sharp corners. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1679863e98a51e7b0ee74efe42d30c2a60c9eb9a2.png?width=750&format=png&optimize=medium) Image: Four corner bracket shapes forming a square outline, with the top-right corner highlighted in green, illustrating visually balanced corner treatment. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_15d9fe99db8308191713c76cbdf0cbc1d99a99a8a.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "No sharp corners.\n\nSpectrum generally uses rounded corners throughout the interface. Exceptions to this rule are rare and reserved for specialized cases when precision is especially important and helps communicate meaning or improve the accuracy of a visual representation. For example, the fill of a slider or progress bar may use a sharp edge to indicate a specific value or position more precisely."
+    },
+    {
+      "type": "guideline",
+      "content": "Visually balanced corners.\n\nWhen rounded surfaces are nested inside one another, their corner radii should adjust in proportion to the space between them. This helps maintain visually consistent gaps and creates the appearance of concentric curves. Learn more about creating balanced nested corners below."
+    },
+    {
+      "type": "guideline",
+      "content": "Image: A sequence of five corner shapes numbered 1 through 5, progressing from a sharp square corner to a fully rounded circular corner, illustrating the rounding system scale. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_10b83b08dd022d2bb9fef04bdb0e37671af553061.png?width=750&format=png&optimize=medium) Small Small controls such as checkbox, in-field button Medium (default) Most components, extra-small and small cards Large Medium and large cards, panels, action boxes, select boxes, toolbars Extra-large Dialogs Full Button, avatar, floating action button, search Image: Four gray rounded rectangles of increasing size, labeled with corner radius values 7 (7.111px), 8px, 9px, and 10 (10.125px), illustrating how corner radius scales with component size. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_15d74d9cce885aad6e05c3c661570e9f00d0b1a28.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Rounding for component sizes.\n\nCorner radius values scale using a Major Second logarithmic scale, the same scale used throughout Spectrum's type system. This allows corner rounding to scale proportionally with component sizes and labels, helping components maintain a consistent visual shape across the interface. The values shown are base values, and the applied corner radius may vary by component."
+    },
+    {
+      "type": "guideline",
+      "content": "Balancing nested corners.\n\nSpectrum uses different approaches to create visually balanced nested corners, depending on the relationship between the surrounding surfaces. Some scenarios follow a mathematical relationship, while others prioritize optical balance to achieve the intended visual result."
+    },
+    {
+      "type": "guideline",
+      "content": "Image: Diagram of a rounded card with a blue focus ring, labeling outer radius, inner radius, and the gap between the component edge and the focus ring. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1580eaee52110544895d8754b90e30a99e0d27767.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Focus rings use an outer stroke separated from the component by a consistent gap. To maintain visually balanced spacing around every corner radius, Spectrum calculates the focus ring radius using the following formula: <outer radius> - <gap> = <inner radius> Image: Diagram of a rounded card containing a small checkbox and heart icon, labeling the large container radius and the small nested component radius. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1238596e6de27dfab676345a245d99aca9c0a01c0.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Nested components.\n\nSpectrum components are designed so that smaller objects use smaller corner radii and larger objects use larger corner radii. When components are nested, this creates optically balanced corners and spacing while maintaining consistent relationships throughout the design system. Image: Diagram of a dropdown input field, labeling the medium radius of the field and the small radius of the nested chevron button. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_117277faee1a1249b79388f9456db5a94d180aa4b.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "When designing custom containers and surfaces, nested corners that always match the formula precisely can often create complexity and fragmentation. Instead, aim for overall visual harmony instead of numerical precision by nesting smaller corners within larger ones and creating gaps using Spectrum’s Spacing system. Image: Photo gallery UI with a \"1 selected\" toolbar, annotated with corner radius tokens: extra-large and medium for image tiles, large for the selection toolbar, and spacing values of 12px and 6px. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1e549dc82517f4c8d70a43fefa55aec784e2dc85a.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Example.\n\nThis example shows how nested corner radii can vary depending on spacing. The thumbnails use a larger gap, so the corner radii are adjusted for optical balance rather than following the formula exactly. The action bar uses a smaller gap, allowing the formula to produce a visually balanced result."
+    },
+    { "type": "guideline", "content": "Spectrum iOS" },
+    {
+      "type": "guideline",
+      "content": "Image: Two pink rounded squares labeled \"Off\" and \"On,\" comparing a standard rounded corner to a smoothed squircle-style corner, used as the reduced-motion alternative to the corner smoothing animation. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1daec0c3ae55113ee136895ff6e8c32f68c1a0c74.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Corner smoothing.\n\nUse Apple’s continuous corner style for rounded shapes, such as rounded rectangles and capsules. Continuous corners create a smooth transition between curved and straight edges and align with the corner treatment used throughout iOS system interfaces. Learn more in Apple’s Developer Documentation: RoundedCornerStyle"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: Static illustration of a pink rounded square with a black outline highlighting the nested outer and inner corner curves, used as the reduced-motion alternative to the concentric corners animation. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1f932489f41beb1e5357ccf616be1e590f096f48b.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Concentric corners.\n\nUse Apple’s concentric rectangle APIs when working with nested shapes. Concentric corners automatically adapt to their container’s shape and spacing, helping maintain consistent curvature and visual alignment across layered interface elements. Learn more in Apple’s Developer Documentation: ConcentricRectangle."
+    },
+    {
+      "type": "guideline",
+      "content": "Platform availability.\n\nThese tokens are currently available on web. Guidance for additional platforms will be added in a future release. Style Token Value Small corner-radius-small-default 4 px Medium corner-radius-medium-default 8 px Large corner-radius-large-default 10 px Extra-large corner-radius-extra-large-default 16 px Full no token, calculated with formula: height ÷ 2 --"
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/rounding",
+  "lastUpdated": "2026-08-14",
+  "status": "published",
+  "tags": [
+    "rounding",
+    "corner radius",
+    "nested corners",
+    "concentric corners",
+    "continuous corners"
+  ]
+}

package/guidelines/side-navigation-browsing-context.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/side-navigation-browsing-context.json",
+  "name": "side-navigation-browsing-context",
+  "title": "Browsing context: Side nav",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Browsing context: Side nav" },
+    {
+      "type": "guideline",
+      "content": "Mobile overlay guidance.\n\nUse the overlay variant of the app frame: side navigation (browsing) component for smaller breakpoints. The overlay is triggered via the hamburger menu in the header (rather than a touchpoint at the bottom). Although 768 px is the recommended breakpoint to begin displaying the overlay designs, each product team should determine which breakpoint best suits their needs. View the keyboard focus order of mobile overlays. Image: Example of how the hamburger menu opens the tray and interacting with the close button will close the tray. (source: https://spectrum.adobe.com/foundations/app-frame/media_16c567d1d01f396f2c6c011f24526b656bace9f69.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "End section divider.\n\nThe divider at the bottom of the side navigation is an intentional visual element that separates overflow side navigation items and end section items from the state control icon. The end section is optional and used to contain navigation items in a separate category that is secondary to the main navigation items. Categories, when defined, should readily communicate a clear purpose and be meaningful to users. Items placed here sit on a separate area. When resized to a smaller height, the items should append onto the start section and scroll together. Image: Examples of side navigation using dividers separating the state control from other item. The first has no dividers. The second displays overflow with a divider, where there are too many items and the scrollbar appears. The third has an optional end section with a divider. (source: https://spectrum.adobe.com/foundations/app-frame/media_18ce0e0d2271cf562d8ddde561c4afa7f4a3e72c7.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Minimum width.\n\nThe minimum width is customizable, depending on the number of levels: 1 level: 160 px 2 level: 200 px 3 levels: 240 px Image: 3 examples of side navigation with different minimum widths based on the nested levels. 1 level has 160 pixels, 2 levels has 200 pixels and 3 level has 240 pixels. (source: https://spectrum.adobe.com/foundations/app-frame/media_13383f172d34c1e87b2ba2e342a6baa5a1064fe65.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Support side navigation resizing for user-generated content.\n\nIf the side navigation contains user-generated content (like shortcuts to folders and files), enabling resizing can be a good way to improve usability by respecting user content, without needing to predict the length of labels that users might input. Image: Example of correct usage of side navigation resizing for user-generated content. In the app frame side navigation, a section titled Favorites includes three folders, two folders in an expanded state, Marketing images and Renders. The items include the full names of the items in the folders, and are not truncated. (source: https://spectrum.adobe.com/foundations/app-frame/media_15be684055e900a2c6ee6fa356d3c375babff92a3.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "If drag to resize is enabled, support alternate methods for resizing.\n\nSpectrum is committed to complying with WCAG standards, and dragging interactions require alternate methods. The side navigation width can be dragged to resize the side navigation state control (hamburger icon in the header or panel icon at the bottom of the app frame side navigation panel). This control serves as an equivalent function for dragging interactions and enables the drag area to have a smaller touch target, only when necessary (for example, when a scroll bar is present). Resize behavior should also support keyboard interactions and preserve the user’s preferred width. Image: Example of correct usage of side navigation. When drag to resize is enabled, an affordance appears on the edge of the side navigation. (source: https://spectrum.adobe.com/foundations/app-frame/media_176dab674bd0fcf87df1713de702298636af68e99.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Be concise.\n\nAlong with being descriptive, the labels of navigation items should be succinct. Keep navigation strings to 1 or 2 and no more than 3 concise words (in U.S. English, which is the source locale). Reduce any unnecessary words in order to ensure simplicity. Navigation items should never be so long that they require truncation, except in instances where navigation is user-generated (e.g., folder and file names). Image: Example of incorrect usage of writing side navigation item names. A sample side navigation has item names that are 3 words or more, such as All of your plugins, Learn something brand new, and Check your schedule. (source: https://spectrum.adobe.com/foundations/app-frame/media_13693cda8085152fd72c442c144ce35cbfd2a6eb4.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Be cautious with line breaks.\n\nIf possible, the default width should auto-adjust to the longest string in the navigation in order to accommodate all translations. As a last resort for long strings, specific line breaks can be built into the implementation. These line breaks depend on the content, and requires manual handling by Globalization engineers. Image: Example of correct usage of auto-adjusting the side navigation width to the longest navigation item name, so the word or phrase is all on a single line. (source: https://spectrum.adobe.com/foundations/app-frame/media_1bc3a06d6f0c348a8d0038878b140a0b7752a3508.png?width=750&format=png&optimize=medium) Image: Example of incorrect usage of using line breaks in the side navigation, where a word or phrase wraps to more than one line. (source: https://spectrum.adobe.com/foundations/app-frame/media_1836da01bc7e95b32a6c6978ac515d4efbb27e369.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Put navigation in either the side navigation or the header, not both.\n\nWhen navigation items are shown in both the side navigation and header at the same time, the hierarchy and relationships between them become unclear. If the side navigation is used, don’t put any navigation items in the header. Image: Example of incorrect usage. Navigation is shown in both the side navigation and the header. (source: https://spectrum.adobe.com/foundations/app-frame/media_12848faf1fcf84701f76fe694687f6a062558085e.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Support user customization and preserve user preferences.\n\nSupporting multiple states (default, and partial or fully minimized style) provides users with the option to choose their preferred layout based on their own preferences. In user studies, individual preference is the biggest factor when it comes to whether or not people want to view labels by default. If supporting multiple states, consider showing the side navigation in the expanded state by default, and preserve user preferences across pages and sessions. If minimizing the side navigation is not supported, show the side navigation in the expanded state. Showing labels by default increases recognition and familiarity. Learn more about using the hamburger and panel side navigation state controls. Image: Example of correct usage of supporting user customization and preserving user preferences. Do: support partially minimized (icon-only) and expanded side navigation. (source: https://spectrum.adobe.com/foundations/app-frame/media_1a30c5e39027f0b033923ed20442c2b3eac050c75.png?width=750&format=png&optimize=medium) Image: Example of correct usage of supporting user customization and preserving user preferences. Do: Support fully minimized and expanded side navigation. (source: https://spectrum.adobe.com/foundations/app-frame/media_1aac42ed54f1cd2a44f85a42dcdf4c34d2078bd66.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Always use icons in first level of the app frame side navigation.\n\nThere are some app frame-specific constraints for the side navigation. Icons are required at the parent level. Nested items can have no icon, but the parent level must have an icon. Image: Example of correct usage of icons where all levels have icons. (source: https://spectrum.adobe.com/foundations/app-frame/media_1fbfbce2a07eae1517fe98f347652b3b90a08aa2e.png?width=750&format=png&optimize=medium) Image: Example of correct usage of icons in the first level and no icons in the second level of the app frame side navigation. (source: https://spectrum.adobe.com/foundations/app-frame/media_19c20431d6acf0d34b7b4dfcc5ffbf315e24580e6.png?width=750&format=png&optimize=medium) Image: Example of incorrect usage of no icons in the first level of the app frame side navigation. (source: https://spectrum.adobe.com/foundations/app-frame/media_1706d549610144e763f4b5ca5886e2c55ac4ba71b.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Side navigation examples.\n\nImage: Diagram of two examples of the side navigation for the app frame, browsing context. First example, side navigation with content in the end section. Second example, side navigation with additional content when expanded. (source: https://spectrum.adobe.com/foundations/app-frame/media_182dbe4ece16320dcb41ef46a514ec1346f6bc5ae.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Keyboard interactions (App frame side navigation panel).\n\nKey Interactions Tab Focuses onto or off of the drag area, if enabled. Arrow keys Resizes the drag area incrementally."
+    },
+    {
+      "type": "guideline",
+      "content": "Keyboard interactions (App frame side navigation).\n\nKey Interactions Tab Focuses onto or off of the side navigation. Arrow keys Moves between side navigation items. Space/enter Executes selection of the item and changes the view of the page in the content area. The focus remains on the selected side navigation item."
+    },
+    {
+      "type": "guideline",
+      "content": "Cursor guidelines.\n\nState Cursor Description Hover Arrow Everything else that is not a link."
+    },
+    {
+      "type": "guideline",
+      "content": "Diagram describing notes about the side navigation for the app frame, in the editing context. While toolbars share the same location as the app frame side navigation in a browsing context, toolbars in an editing context serve a different purpose: to readily select commonly used tools, rather than to navigate between pages. The behavior and interaction of toolbars doesn’t need to mirror the side navigation and should instead best serve user needs in an editing context. For example, the option to show and hide tool labels can be an additional customization option and doesn’t need to be controlled by the hamburger menu, which is used to display the application menu in Creative Cloud. Image: Unlabeled image (source: https://spectrum.adobe.com/foundations/app-frame/media_18d3bf036140f0c60608e3a7fbc095f542beeef29.png?width=750&format=png&optimize=medium)"
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/side-navigation-browsing-context",
+  "lastUpdated": "2026-09-04",
+  "status": "published",
+  "tags": ["app frame side navigation", "side nav"]
+}

package/guidelines/spacing-overview.json

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

package/guidelines/states.json

@@ -8,27 +8,32 @@
     { "type": "purpose", "content": "States" },
     {
       "type": "guideline",
-      "content": "In Spectrum 2, some components use a change in size instead of color to communicate a down state. This gives the illusion of objects being pressed-in, and makes interactions more dynamic and responsive."
+      "content": "In Spectrum 2, some components use a change in size instead of color to communicate a down state. This gives the illusion of objects being pressed-in, and makes interactions more dynamic and responsive. Image: Disabled UI components shown in muted gray, including a circular avatar photo, a labeled button, a toggle switch with label, and a checkbox with label. (source: https://spectrum.adobe.com/foundations/behavior/media_1044bea29bf18bd21503482c8c8fafb0102e36a22.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "[Disabled states](https://spectrum.corp.adobe.com/page/states/#Disabled) generally stay the same from Spectrum 1, but there have been some minor updates to specific components. For example, a text field retains the outline style when disabled, to more closely match its default state."
+      "content": "Disabled states generally stay the same from Spectrum 1, but there have been some minor updates to specific components. For example, a text field retains the outline style when disabled, to more closely match its default state. Image: Two checkboxes with 'Label' text: the top one unchecked, the bottom one checked with a black background and white checkmark. (source: https://spectrum.adobe.com/foundations/behavior/media_1517894bfa23af029ad8122c0add356281be4bc2e.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Selected states use a primary style by default, generally through a gray-800 fill. Some have an accent color option that can be used to draw emphasis. This is primarily helpful in contexts with a specific and narrowly-scoped goal (for example, in a dialog), or when there's a single, clear call to action within a page (for example, a \"Create\" button)."
+      "content": "Selected states use a primary style by default, generally through a gray-800 fill. Some have an accent color option that can be used to draw emphasis. This is primarily helpful in contexts with a specific and narrowly-scoped goal (for example, in a dialog), or when there’s a single, clear call to action within a page (for example, a “Create” button). When there’s many groups of controls that require the same amount of attention (such as in a panel) the not emphasized option works best. For more details about this concept, view Attention hierarchy. Image: A list view row being dragged, indicated by a grabbing-hand cursor above it, containing a checked checkbox, a circular avatar placeholder, truncated title text 'List view value with a longer la...', description text, two circular icons, and a chevron. (source: https://spectrum.adobe.com/foundations/behavior/media_133f5d48851a7df5c96e90ea3d60494813467c2bb.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "When there's many groups of controls that require the same amount of attention (such as in a panel) the not emphasized option works best. For more details about this concept, view [Attention hierarchy](https://s2.spectrum.corp.adobe.com/page/attention-hierarchy/)."
-    },
-    {
-      "type": "guideline",
-      "content": "A dragged state has a unique drop shadow to draw attention to the dragged object. Learn more about [drop shadows](https://s2.spectrum.corp.adobe.com/page/object-styles/#drop-shadow)."
+      "content": "A dragged state has a unique drop shadow to draw attention to the dragged object. Learn more about drop shadows."
     }
   ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/states/",
-  "lastUpdated": "2026-02-02",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/behavior/states",
+  "lastUpdated": "2026-08-13",
   "status": "published",
-  "tags": ["designing"]
+  "tags": [
+    "states",
+    "hover",
+    "down",
+    "keyboard focus",
+    "disabled",
+    "selected",
+    "dragged",
+    "drop shadow"
+  ]
 }

package/guidelines/support.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/support.json",
+  "name": "support",
+  "title": "FAQs",
+  "category": "support",
+  "documentBlocks": [
+    { "type": "purpose", "content": "FAQs" },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 is a significant version update — for both design and engineering — of the Spectrum design system. For more information, view the Introduction page."
+    },
+    {
+      "type": "guideline",
+      "content": "The first phase of Spectrum 2 has been focused on the web. If you are working on a product built for a web implementation, you can start using Spectrum 2 today. Remember to work closely with your engineering partners to ensure a smooth implementation. As we progress, we're committed to extending Spectrum 2 to include desktop and mobile platforms with ongoing workshops and to ensure a comprehensive update to our design system."
+    },
+    {
+      "type": "guideline",
+      "content": "Though Spectrum has always made cross-platform design a priority, most emerging products at Adobe have been web-first in recent years. That said, Adobe Design has been collectively working on the future of desktop and mobile. One of the central goals of Spectrum 2 is to make sure that it feels \"at home.\" Both professional desktop and mobile tools have a unique set of requirements, and each will get the attention they require. On mobile, that work now has a home on the Spectrum team: Spectrum iOS and Spectrum Android exist as dedicated implementations of Spectrum 2. Neither is complete, but both are actively building, and we continue to expand their scope as the mobile design language matures. On desktop, we've been partnering with desktop teams and preparing their implementations for Spectrum 2 by using Spectrum's design data. We continue to expand the scope of our partnership as we build out Spectrum 2 and the toolchain to support it."
+    },
+    {
+      "type": "guideline",
+      "content": "Review the Spectrum 2 documentation.\n\nMake sure to regularly review design documentation to keep up-to-date with releases. Familiarize yourself with the changes to components, patterns, styles, and usage guidelines. And most importantly, read the release notes (posted in #spectrum-bulletin ) which explain what’s changed and why."
+    },
+    {
+      "type": "guideline",
+      "content": "Perform an UI audit.\n\nConduct an audit of your existing UI components and patterns, specifically identifying the elements that need updating in order to align to Spectrum 2. Evaluate the design of the overall layouts, interaction patterns, and the level of consistency with the new guidelines."
+    },
+    {
+      "type": "guideline",
+      "content": "Create a transition or migration plan.\n\nPartner with your implementation team to develop a plan that outlines the order and priority of updating the components and foundations (such as color and styling). Prioritize the most frequently used components, then create a transition plan that breaks the implementation down into manageable phases. For example, you could start with core components that are used in multiple areas of your product (like buttons). Given that iterative migration plans are most successful, you should expect S1 and S2 design languages to live side-by-side in the same UIs for some period of time. As long as a full migration plan is committed, temporarily mixing design languages is acceptable."
+    },
+    {
+      "type": "guideline",
+      "content": "Apply Spectrum 2 and replace outdated components.\n\nReview the Spectrum 2 Figma libraries and update your components, typography, and icons, among the other changes. As you update your designs, please work with your implementation team on a migration plan. Especially pay attention to components that have changed between Spectrum 1 and Spectrum 2.. Note any custom components in the UI and work with your engineering team to replace any hard-coded values with a semantic alias."
+    },
+    {
+      "type": "guideline",
+      "content": "Collaborate with engineers.\n\nDepending on your product’s implementation, there may be differences between what’s in Figma and code. Work closely with your engineering partners to ensure a smooth implementation of the updated UI. Communicate any changes or updates clearly, provide them with necessary resources, components, or patterns, and address any questions or concerns they may have."
+    },
+    {
+      "type": "guideline",
+      "content": "Collaborate with content strategists.\n\nWork closely with your content strategy partners to ensure that messaging, voice, and tone are being holistically incorporated into interface updates. Work together to create experiences that support your users and communicate clearly about any design updates."
+    },
+    {
+      "type": "guideline",
+      "content": "Review our Developer overview page for detailed information about developing with Spectrum 2."
+    },
+    {
+      "type": "guideline",
+      "content": "Breaking changes ahead.\n\nThe update to Spectrum 2 may cause breaking changes. Changes will include updates to colors, renamed tokens in the gray system, updates to corner rounding, and increased padding."
+    },
+    {
+      "type": "guideline",
+      "content": "Modify custom component implementations.\n\nIdentify components in your code base that are customized or not using a standard framework implementation, as those will need manual updating to align with Spectrum 2. If you have custom components, be sure to replace hard-coded values with the appropriate semantic alias. Work with your designers to align custom or product-specific components with the Spectrum 2 design language."
+    },
+    {
+      "type": "guideline",
+      "content": "Review the Spectrum 2 documentation.\n\nMake sure to regularly review documentation to keep up-to-date and monitor releases of your Spectrum implementation. Familiarize yourself with the changes to components, patterns, styles, and usage guidelines. If you author custom components that utilize design data (tokens), it may be helpful to read the release notes (posted in #spectrum-bulletin ) which explain what’s changed and why. Especially pay attention to changes in naming conventions, variables, and overall structure. If you build product UI, monitor the release notes for the implementation your product uses and make sure to update to the latest version at regular intervals. Release announcements for implementations are posted in their respective Slack channels. A full list of channels is available on the Contact page."
+    },
+    {
+      "type": "guideline",
+      "content": "Review your existing code base to ensure you’re using the latest version of a Spectrum implementation. Identify any dependencies that might be affected by the changes, and evaluate if your code is heavily customizing Spectrum components. If so, you may experience breaking changes that need to be reviewed. For more details about your implementation, view our Developer overview page. Carve out time to plan for the update and create a migration plan. We recommend breaking down the update process into planned, manageable tasks in order to avoid a need to react to massive changes all at once. Prioritize areas of the code base that directly impact the UI, as well as the code that customizes, overrides, or otherwise changes Spectrum defaults."
+    },
+    {
+      "type": "guideline",
+      "content": "Collaborate with your designers.\n\nWork with your design partners to develop a plan for testing visual changes, to ensure they align with updated designs that use Spectrum 2."
+    },
+    {
+      "type": "guideline",
+      "content": "Breaking changes ahead.\n\nThe update to Spectrum 2 may cause breaking changes. Please plan ahead with your team to prepare."
+    },
+    {
+      "type": "guideline",
+      "content": "Define a project timeline and an implementation roadmap.\n\nWork with both your design and engineering teams to define a project timeline and break down the migration process. Coordinate and align the efforts of both teams to ensure smooth coordination and avoid disruptions in the development workflow. Set realistic deadlines and milestones to track progress and manage expectations. Reach out to the Spectrum team for help working on a plan."
+    },
+    {
+      "type": "guideline",
+      "content": "Review the Spectrum 2 documentation.\n\nMake sure to regularly review documentation to keep up-to-date with releases. Read the release notes (posted in #spectrum-bulletin ) which explain what’s changed and why."
+    },
+    {
+      "type": "guideline",
+      "content": "Test and validate.\n\nCollaborate with your development or QE team to create a testing plan to validate Spectrum 2. Ensure that Spectrum 2 functions as intended and delivers the desired experience. Address any issues or bugs and coordinate with your design and development teams to implement necessary fixes."
+    },
+    {
+      "type": "guideline",
+      "content": "Facilitate cross-functional collaboration.\n\nEncourage collaboration and open communication between your team’s designers and engineers. Create an environment where your team can discuss challenges, exchange ideas, and share knowledge. Arrange regular meetings or workshops to facilitate cross-functional collaboration, allowing teammates to align on their understanding of Spectrum 2 and have the space to clarify any questions or concerns."
+    },
+    {
+      "type": "guideline",
+      "content": "Attend Spectrum shareouts and trainings.\n\nParticipate in the shareouts and training sessions being organized by the Spectrum team to familiarize yourself with Spectrum 2. These will help you understand the updated design principles, guidelines, and components. And, you’ll learn how to use new design assets, style guides, and tools that apply to your area of focus."
+    },
+    {
+      "type": "guideline",
+      "content": "Review existing assets that use Spectrum.\n\nReview your current marketing materials, banners, or social media graphics to identify design elements that need updating (for example, if your product uses screenshots of UI in your marketing materials or home screens). Take note of any iconography, colors, or imagery that may conflict with Spectrum 2. Apply the Spectrum 2 components across all relevant channels to maintain consistency."
+    },
+    {
+      "type": "guideline",
+      "content": "Review the Spectrum 2 documentation.\n\nRead through this website to understand the changes coming to components, patterns, styles, and usage guidelines. Follow the release notes (posted in #spectrum-bulletin ) for updates."
+    },
+    {
+      "type": "guideline",
+      "content": "Provide feedback.\n\nWhen collaborating with your design team and product leaders throughout the transition process, share insights from your perspective to help refine Spectrum 2 or report any inconsistencies you may come across. Learn about how to reach out."
+    },
+    {
+      "type": "guideline",
+      "content": "The Spectrum team manages Spectrum 2 components and styles as Figma libraries. These are available on the Resources page."
+    },
+    {
+      "type": "guideline",
+      "content": "The Spectrum 1 is retired and is no longer supported. The related websites have been in maintenance mode since April 21, 2025. For now, we offer available archived web content for Adobe-internal reference only. Spectrum 1 design documentation archive (VPN required) Spectrum 1 Contributions documentation archive (VPN required)"
+    },
+    {
+      "type": "guideline",
+      "content": "The migration of Spectrum Patterns to the new website is underway. In the meanwhile, the original Spectrum Patterns website remains accessible for reference. If you have questions regarding the content, please contact the corresponding design team that represents your product area or focus."
+    },
+    {
+      "type": "guideline",
+      "content": "For general inquiries, post in #spectrum-general or email the Spectrum team. For specific inquiries, view the Contact page for more information on how to get in touch."
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/support",
+  "lastUpdated": "2026-08-19",
+  "status": "published"
+}

package/guidelines/typography-overview.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/typography-overview.json",
+  "name": "typography-overview",
+  "title": "Typography",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Typography" },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Spectrum is the default font family for Spectrum. It’s based on Adobe Clean, Adobe’s corporate typeface. The Adobe Clean font family includes over 10 typefaces for specific use cases, such as longer reading experiences, displaying code, and supporting a wide range of languages and writing systems. Adobe Clean Spectrum VF is the default typeface for Spectrum on web, iOS, Android, and other supported platforms. It’s a variable font, which means a single font file can support a range of weights and widths. Image: \"Adobe Clean Spectrum VF\" headline shown with style tabs (Default, Italic, Condensed, Origin) and a list of available weights from Light to Black. (source: https://spectrum.adobe.com/foundations/typography/media_1c6efb5d6281ac24cdedf4ce5edd22ad459eb7192.png?width=750&format=png&optimize=medium) Image: \"Crafted for Clarity\" headline above a diagram comparing an upright \"A\" and an italic \"a\" with a 12-degree slant angle indicated. (source: https://spectrum.adobe.com/foundations/typography/media_1012f71e83acb02b7d7c110acece752bc814876bc.png?width=750&format=png&optimize=medium) Image: Typeface specs showing \"24 styles\" with 804 glyphs each, and available formats listed as OTF/TTF. (source: https://spectrum.adobe.com/foundations/typography/media_10d0336241a6832acab947c3064d8b0d17a4bb143.png?width=750&format=png&optimize=medium) Image: List of supported scripts: Latin, Cyrillic, CJK, Greek, Thai, Arabic, Hebrew, and Devanagari. (source: https://spectrum.adobe.com/foundations/typography/media_173290f80e14bbcd13a7a945b5bd8e258fe041266.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Image: Adobe Clean typeface displaying a diacritics set, showing the Polish pangram \"Zażółć gęślą jaźń\" with accented characters. (source: https://spectrum.adobe.com/foundations/typography/media_12e7eb93d7d420154635041f22802af852db129bd.png?width=750&format=png&optimize=medium) Image: Adobe Clean typeface displaying standard ligatures, showing the \"ff\" and \"ft\" letter combinations. (source: https://spectrum.adobe.com/foundations/typography/media_1ab4426a25f6472a0751d5c446d2c1261c576a14c.png?width=750&format=png&optimize=medium) Image: Adobe Clean typeface displaying tabular figures, showing the numerals 0 through 5 in bold weight. (source: https://spectrum.adobe.com/foundations/typography/media_1dda11559e4a0d3cb6dcdef680372b595b81171d1.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Spectrum VF provides two main benefits over the non-variable versions: Improves alignment with UI elements. Adobe Clean Spectrum VF uses updated baseline metrics, which are the measurements that determine how text is positioned. These updated metrics help text align more consistently with other interface elements, such as icons, components, and avatars. Supports future adjustments. Spectrum currently recommends using the default weights and widths. However, the variable font makes it easier to fine-tune typography in future updates. For example, a slightly thinner weight may improve readability in dark mode."
+    },
+    {
+      "type": "guideline",
+      "content": "Jump to.\n\nImage: Icon illustrating \"Typography system,\" showing two \"T\" letterforms in a blue-to-green gradient above a font-size adjustment icon. (source: https://spectrum.adobe.com/foundations/typography/media_1735d74eaa72d8a5b4d22dfa24c63543afc0266e5.png?width=750&format=png&optimize=medium) Typography system Typography system Image: Icon illustrating \"Applying the type system,\" showing two overlapping \"T\" letterforms in a blue-to-teal gradient. (source: https://spectrum.adobe.com/foundations/typography/media_1bfdcea0ca1f5a86d02adde5500e376465c822b02.png?width=750&format=png&optimize=medium) Applying the type system Applying the type system"
+    }
+  ],
+  "sourceUrl": "https://spectrum.adobe.com/foundations/typography/overview",
+  "lastUpdated": "2026-08-13",
+  "status": "published",
+  "tags": [
+    "Typography",
+    "Adobe Clean Spectrum",
+    "Spectrum VF",
+    "variable font",
+    "baseline metrics",
+    "UI alignment",
+    "font family",
+    "readability"
+  ]
+}