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

package/guidelines/resources.json

@@ -8,52 +8,58 @@
     { "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": "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": "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 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": "These changes are for Spectrum 2 libraries. They do not apply to Spectrum 1."
+      "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": "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": "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": "These changes are for Spectrum 2 libraries and implementations. They do not apply to Spectrum 1 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": "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": "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": "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": "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": "The Adobe Design Brand team has created Spectrum 2-inspired desktop and mobile backgrounds for you to download."
+      "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,61 @@
+{
+  "$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": "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": "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": "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>"
+    },
+    {
+      "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."
+    },
+    {
+      "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": "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": "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. StyleTokenValueSmall corner-radius-small-default 4 pxMedium corner-radius-medium-default 8 pxLarge corner-radius-large-default 10 pxExtra-large corner-radius-extra-large-default 16 pxFull no token, calculated with formula: height ÷ 2 --"
+    }
+  ],
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/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,71 @@
+{
+  "$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."
+    },
+    {
+      "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."
+    },
+    {
+      "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"
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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)."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    { "type": "guideline", "content": "Side navigation examples" },
+    {
+      "type": "guideline",
+      "content": "Keyboard interactions (App frame side navigation panel).\n\nKey Interactions TabFocuses onto or off of the drag area, if enabled.Arrow keysResizes the drag area incrementally."
+    },
+    {
+      "type": "guideline",
+      "content": "Keyboard interactions (App frame side navigation).\n\nKey Interactions TabFocuses onto or off of the side navigation.Arrow keysMoves between side navigation items.Space/enterExecutes 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 HoverArrowEverything 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."
+    }
+  ],
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/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,45 @@
+{
+  "$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 overview",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Spacing overview" },
+    {
+      "type": "guideline",
+      "content": "Rational.\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.\n\nCloser elements are more associated. Distant elements are more independent."
+    },
+    {
+      "type": "guideline",
+      "content": "Boundaries.\n\nConsistent proximity within a group signals that all members are equally related."
+    },
+    {
+      "type": "guideline",
+      "content": "Structure.\n\nThe overall distribution of space shows how content is organized within a layout.. 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. Less negative space creates clutter and increases cognitive load. More negative space creates a calm, focused experience."
+    },
+    {
+      "type": "guideline",
+      "content": "Jump to.\n\nLayout spacing Layout spacing Component spacing Component spacing"
+    }
+  ],
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/spacing/spacing-overview",
+  "lastUpdated": "2026-08-19",
+  "status": "published"
+}

package/guidelines/states.json

@@ -12,23 +12,28 @@
     },
     {
       "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."
     },
     {
       "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."
     },
     {
       "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://main--spectrum-hub--adobe.aem.live/foundations/behavior/states",
+  "lastUpdated": "2026-08-13",
   "status": "published",
-  "tags": ["designing"]
+  "tags": [
+    "states",
+    "hover",
+    "down",
+    "keyboard focus",
+    "disabled",
+    "selected",
+    "dragged",
+    "drop shadow"
+  ]
 }

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. View all Spectrum fonts on the Fonts page. 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."
+    },
+    {
+      "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."
+    },
+    {
+      "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. Learn more about Adobe Clean Spectrum VF in the Spectrum 2 typography guide."
+    },
+    {
+      "type": "guideline",
+      "content": "Jump to.\n\nTypography system Typography system Applying the type system Applying the type system Fonts Fonts"
+    }
+  ],
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/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"
+  ]
+}

package/guidelines/typography-system.json

@@ -0,0 +1,168 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/typography-system.json",
+  "name": "typography-system",
+  "title": "Typography system",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Typography system" },
+    {
+      "type": "guideline",
+      "content": "Typography in Spectrum is aligned to an information hierarchy model, and it also echoes the foundational concept of attention hierarchy. Hierarchy in these type styles can be conveyed through font size, font weight, and font color. Larger-sized, heavier-weight, and darker-colored text draws more attention, and it communicates the most broad ideas (the need-to-know information). Smaller-sized, lighter-weight, and lighter-colored text draws less attention, and it communicates the most specific ideas (the nice-to-know information)."
+    },
+    {
+      "type": "guideline",
+      "content": "ExtraBold.\n\nSpectrum recommends ExtraBold as the heaviest font weight for most use cases. This provides more contrast against the Title type style (which uses Bold), and it's also more in line with contemporary design considerations. In limited cases, products may use the Black font weight to support product-specific branding. For example, Adobe Express uses Black for headings to align with Adobe Express brand guidelines. Black should be reserved for heading type styles and used at 18 px or larger to maintain legibility."
+    },
+    {
+      "type": "guideline",
+      "content": "Bold.\n\nSelect elements in the UI use a Bold font weight. Bold text is often used to accentuate the primary focus on a page or in a container, and in many uses, it's paired with regular body text to create hierarchy. It's also used to directly refer to the names of UI elements in running text. Titles, file names, user names, and button labels all use bold weight."
+    },
+    {
+      "type": "guideline",
+      "content": "Medium is used for specific components that need visual balance with Spectrum's icons, which use a 1.5 px stroke. Action buttons, badges, and tags are examples of components that use Medium weight labels."
+    },
+    {
+      "type": "guideline",
+      "content": "Regular is the default font weight for Spectrum components and body text. It should also be used for any content that's entered by users, is editable, or longer in form (for example, text fields and text areas)."
+    },
+    {
+      "type": "guideline",
+      "content": "Underline is used only for text links (either hover state or default state, depending on the style of the link) and should never be used as a mechanism for adding emphasis."
+    },
+    {
+      "type": "guideline",
+      "content": "Strong can be used for placing importance on part of a sentence, rendering the text as a heavier font weight. This is for semantic formatting, when it's intended to add a tone that conveys importance."
+    },
+    {
+      "type": "guideline",
+      "content": "Emphasis can be used for placing emphasis on part of a sentence, rendering the text as italic (or heavier weight, in CJK languages)."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum ensures that different sizes of text can work together harmoniously, on both desktop and mobile. All font sizes follow the Major Second type scale, which has a ratio of 1.125. This means that each size is multiplied or divided by 1.125 from the previous size, starting with the base size (font-size-100), and rounded to the nearest whole number. Custom text (any non-existing typography styles) or modifications to existing type styles should use a font size from this list. When selecting font sizes to ensure readability, keep in mind that Adobe Clean does not match 1:1 with system font size definitions. It's generally a size smaller than system fonts such as SF Pro, Segoe UI, Roboto, and others. Font sizeValue font-size-25 10 px font-size-50 11 px font-size-75 12 px font-size-100 14 px font-size-200 16 px font-size-300 18 px font-size-400 20 px font-size-500 22 px font-size-600 25 px font-size-700 28 px font-size-800 32 px font-size-900 36 px font-size-1000 40 px font-size-1100 45 px font-size-1200 51 px font-size-1300 58 px font-size-1400 65 px font-size-1500 73 px"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum Web defines default line height values for each font size in the type scale. Heading, Title, Detail, and Component type styles use these values to maintain balanced spacing across a range of text sizes. The default line height gradually decreases from approximately 130% at smaller font sizes to 115% at larger sizes, then rounds to whole even pixel values. This helps maintain consistent visual spacing while avoiding half-pixel rendering within components. Body and Code type styles use a more spacious line height of 1.5× the font size to improve readability for longer passages of text. For Chinese, Japanese, and Korean (CJK) languages, Spectrum uses a 1.7× multiplier to accommodate the visual characteristics of those writing systems. Learn more about the line height calculations, interpolation, and rounding methodology in the Adobe Clean Spectrum Wiki."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum Web defines default line height values for each font size in the type scale. Heading, Title, Detail, and Component type styles use these values to maintain balanced spacing across a range of text sizes. The default line height gradually decreases from approximately 130% at smaller font sizes to 115% at larger sizes, then rounds to whole even pixel values. This helps maintain consistent visual spacing while avoiding half-pixel rendering within components. Body and Code type styles use a more spacious line height of 1.5× the font size to improve readability for longer passages of text. For Chinese, Japanese, and Korean (CJK) languages, Spectrum uses a 1.7× multiplier to accommodate the visual characteristics of those writing systems. Line heightUsed forTokenValueCJK valueDefaultHeading, Title, Detail, Component line-height-font-size-# ~115–130% (varies by size, even values only)150%SpaciousBody, Code line-height-200 150%170%"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum iOS.\n\nBecause iOS calculates line height differently from other platforms, Spectrum iOS recommends using auto or normal for the default line height. This allows the system to apply Apple's built-in text metrics and produce the intended typography."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum Android defines line height using scale-independent pixels (sp), allowing text and vertical spacing to scale together with a user's font size and accessibility preferences. In Figma, equivalent pixel (px) values are used to match the intended visual appearance while maintaining a consistent design-to-engineering workflow across platforms."
+    },
+    {
+      "type": "guideline",
+      "content": "Also known as text styles in Figma, Spectrum uses type styles to help maintain a consistent semantic meaning and create accessible, legible, and on-brand experiences across platforms. The type styles include Heading, Title, Body, Detail, Component, Code, and Monospace numbers. These styles come in a range of t-shirt sizes (such as Small, Medium, and Large) and encompass typography elements like font family, font size, line height, weight, and color. This ensures that all Adobe interfaces can maintain a predictable sense of information hierarchy. Keep in mind that a single product won't need all of these sizes, and especially at the same time. Spectrum's type styles are intentionally comprehensive to allow platform and product teams to selectively choose type styles that accommodate their unique needs. As a starting point, use a t-shirt size from each of the type styles. For example: pair Heading Medium with Title Medium, Body Medium, and Medium t-shirt sized components. If you'd like to override these styles, there's some flexibility for you to define your own typography and hierarchy as long as any customization follows Spectrum guidance for font size and color usage. Use what best fits your context and best supports your users. Explore platform-specific type styles in each platform's Figma library: Spectrum Web typography Spectrum iOS typography Spectrum Android typography"
+    },
+    {
+      "type": "guideline",
+      "content": "Heading text represents the biggest and boldest text on a page, and it draws the most attention. Only the broadest idea, such as the main page title, should use this style."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum Web.\n\nStyleFont sizeLine heightDefault weightLetter spacingHeading XXXXL15001500ExtraBoldNoneHeading XXXL13001300ExtraBoldNoneHeading XXL11001100ExtraBoldNoneHeading XL900900ExtraBoldNoneHeading L700700ExtraBoldNoneHeading M500500ExtraBoldNoneHeading S400400ExtraBoldNoneHeading XS300300ExtraBoldNone"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum iOS.\n\nStyleFont sizeLine heightDefault weightLetter spacingHeading XL900AutoExtraBold900Heading L700AutoExtraBold700Heading M500AutoExtraBold500"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum Android.\n\nStyleFont sizeLine heightDefault weightLetter spacingHeading XL900900BoldNoneHeading L700700BoldNoneHeading M500500BoldNone"
+    },
+    {
+      "type": "guideline",
+      "content": "Title.\n\nWhile the Heading style is for the loudest, most broad message, there are still going to be other important items in an information hierarchy. The Title style is for text that's communicating other need-to-know concepts. It's often set in Bold weight, and it has a range of font sizes that can be paired with Body and Detail sizes to create visual balance. File names, cards, user names, panels, and other high-signal concepts in interfaces use the Title style."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum Web.\n\nStyleFont sizeLine heightDefault weightLetter spacingTitle XXXL600600BoldNoneTitle XXL500500BoldNoneTitle XL400400BoldNoneTitle L300300BoldNoneTitle M200200BoldNoneTitle S100100BoldNoneTitle XS7575BoldNone"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum iOS.\n\nStyleFont sizeLine heightDefault weightLetter spacingTitle XL400AutoBold400Title L300AutoBold300Title M200AutoBold200"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum Android.\n\nStyleFont sizeLine heightDefault weightLetter spacingTitle XL400AutoSemiBoldNoneTitle L300AutoSemiBold0.0075 emTitle M200AutoSemiBold0.015 em"
+    },
+    {
+      "type": "guideline",
+      "content": "Body is the type style that's primarily used for longer-form text that may extend to multiple lines. \"Body text\" is a frequently used term to describe the text that creates the main content on a page, which is where this style gets its name from."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum Web.\n\nStyleFont sizeLine heightDefault weightLetter spacingBody XXXL600150%RegularNoneBody XXL500150%RegularNoneBody XL400150%RegularNoneBody L300150%RegularNoneBody M200150%RegularNoneBody S100150%RegularNoneBody XS75150%RegularNoneBody XXS50150%RegularNone"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum iOS.\n\nStyleFont sizeLine heightDefault weightLetter spacingBody L300AutoRegular300Body M200AutoRegular200Body S100AutoRegular100Body XS75AutoRegular75Body XXS50AutoRegular50"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum Android.\n\nStyleFont sizeLine heightDefault weightLetter spacingBody L300300Regular0.0075 emBody L Emphasized300300SemiBold0.0075 emBody M200200Regular0.015 emBody M Emphasized200200Semibold0.015 emBody S100100Regular0.0225 emBody S Emphasized100100Semibold0.0225 emBody XS7575Regular0.03 emBody XS Emphasized7575Semibold0.03 emBody XXS5050Regular0.03 emBody XXS Emphasized5050Semibold0.03 em"
+    },
+    {
+      "type": "guideline",
+      "content": "Detail text\" is a broad term for any kind of text that communicates ideas that are even more specific than body text. Text using the Detail style acts as supporting context to any other information presented. Detail text often uses Medium weight when paired with iconography, to maintain visual balance with the 1.5 px stroke width of Spectrum 2 icons. It also often uses detail-color (gray-600) to appear more subdued in terms of visual hierarchy."
+    },
+    {
+      "type": "guideline",
+      "content": "Component is the type style that is applied to text within UI components. The Component type style comes in multiple font weights to support its flexibility across components in the design system. For example, the Spectrum button uses the Component type style with bold weight. Action button uses the Component type style with medium weight, and text field uses the Component type style with regular weight. Component styles are supported on Web only. Spectrum offers component text styles in the Spectrum Web Figma library, to let you quickly apply text formatting to any text element in a design. This will help you stay connected to the system without needing to detach or override other text styles like Body or Title. For iOS and Android, use type styles that share corresponding weight and sizes from Title, Body, and Monospace number styles."
+    },
+    {
+      "type": "guideline",
+      "content": "Code is a typography component used for text that represents code. The default font for showing code is Source Code Pro. Code styles are currently supported on Web only."
+    },
+    {
+      "type": "guideline",
+      "content": "Monospace numbers are used for numeric content that benefits from consistent alignment, such as timestamps, counters, and adjustable values. Because each digit occupies the same horizontal space, they reduce visual shifting and make changing values easier to compare and scan. Monospace numbers are currently supported as type styles on iOS and Android only. Learn more about using tabular numbers."
+    },
+    {
+      "type": "guideline",
+      "content": "Comparing body, component, and detail.\n\nThe differences between Body text, Component text, and Detail text are nuanced and often come down to applied semantic meaning. The characteristic differences in Detail text are the default weight, size, letter spacing, all-caps treatment for marketing contexts, and color usage. Detail text defaults to Medium weight, a smaller font size, and lighter shades of gray. It also uses the updated per-font-size line height, while Body text uses the spacious line height multiplier of 1.5x font-size. Note: There are known similarities between the Component and Detail styles, specifically when using these for text such as metadata and labels. There are nuanced semantic differences, but when in doubt, use the Component type style because it is more adaptable."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum defines fallback fonts for situations where Adobe Clean Spectrum isn't available. These fonts are selected to provide a consistent experience across operating systems while maintaining similar typographic characteristics. TypefaceWeb (listed by priority)iOSAndroidAdobe Clean Spectrum VFAdobe Clean, Source Sans Pro, San Francisco, Roboto, Segoe UI, Trebuchet MS, Lucida GrandeSystem defaultsSystem defaults (may vary by device)"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum supports a wide range of non-Latin writing systems. On the web, Spectrum uses dedicated fonts for these scripts, such as Adobe Clean Han for Chinese (Simplified and Traditional), Japanese, and Korean (CJK). On iOS and Android, Spectrum uses the platform's system fonts for non-Latin scripts to reduce app size. Android system fonts may vary by device. Because different typefaces are used across platforms, text metrics may vary. When designing custom layouts, verify that text alignment and spacing remain consistent across localized experiences."
+    },
+    { "type": "guideline", "content": "Spectrum iOS" },
+    {
+      "type": "guideline",
+      "content": "Dynamic type.\n\nSpectrum typography on iOS supports Dynamic Type, Apple's system for scaling text based on a user's preferred reading size. When a user adjusts their text size in accessibility settings, Spectrum typography scales automatically to match. Learn more in Apple's Developer Documentation: Get started with Dynamic Type and WWDC24: Scaling fonts automatically."
+    },
+    { "type": "guideline", "content": "Spectrum Android" },
+    {
+      "type": "guideline",
+      "content": "Font scaling.\n\nSpectrum typography on Android uses scale-independent pixels (sp), which automatically respond to a user's font size preferences. This allows text to scale with Android accessibility settings without additional configuration. Learn more in Android Accessibility: Text scaling and Android 14: Font scaling. Download the Spectrum Android Catalog app to explore available type sizes and see how they respond to accessibility settings. Refer to the installation guide for setup instructions."
+    },
+    {
+      "type": "guideline",
+      "content": "Font scaling.\n\nSpectrum typography on Android uses scale-independent pixels (sp), which automatically respond to a user's font size preferences. This allows text to scale with Android accessibility settings without additional configuration. Learn more in Android Accessibility: Text scaling and Android 14: Font scaling."
+    }
+  ],
+  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/typography-system",
+  "lastUpdated": "2026-08-13",
+  "status": "published",
+  "tags": [
+    "typography",
+    "font weights",
+    "font sizes",
+    "Major Second type scale",
+    "1.125 ratio",
+    "Bold",
+    "ExtraBold"
+  ]
+}