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

package/guidelines/rounding.json

@@ -1,61 +0,0 @@
-{
-  "$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

@@ -1,71 +0,0 @@
-{
-  "$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

@@ -1,45 +0,0 @@
-{
-  "$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/typography-overview.json

@@ -1,39 +0,0 @@
-{
-  "$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

@@ -1,168 +0,0 @@
-{
-  "$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"
-  ]
-}

package/guidelines/visual-language-containers.json

@@ -1,36 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/visual-language-containers.json",
-  "name": "visual-language-containers",
-  "title": "Containers",
-  "category": "designing",
-  "documentBlocks": [
-    {
-      "type": "purpose",
-      "content": "In Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific contexts. Containers are used across Spectrum 2 interfaces in multiple ways, but the commonality they share is that they group related concepts together into distinct areas. Some usages of containers have more detailed guidelines. For example, a card uses a container and inherits its properties, but it can only represent a distinct object (such as an individual asset or product). A block of marketing material containing multiple concepts (like subscription information plus actions to take) is grouped together in a container, but is not considered a card. Whether broad or specific, a user should be able to readily tell the purpose of a container. Separation of containers is marked through a clear visual change, such as contrast in a background color or through spacing. All containers share a common set of rules for styles, padding, and emphasis. Examples of containers: two cards with different sizes and layout options, and a select box. Examples of containers: two cards with different sizes and layout options, and a select box.\n\n### Example\n\nCards and select boxes share container styles. In this example, both use the emphasized style. Cards also have additional options that select boxes do not, like t-shirt size and layout."
-    },
-    {
-      "type": "guideline",
-      "content": "All containers share a set of defined styles. Background color By default, containers are visually distinguished through a change in background color. Learn more about this in background layers. Emphasized In some situations, drop shadows are used to provide emphasis to a container or group of containers, like in a set of related cards. Emphasized containers should be used sparingly. View more about container emphasis. Border Borders can also be used around objects as an alternate style to a background color, and should be used without a fill. Vertical, full-width dividers can also be used to create separation for larger sections of content, like in a panel. View more about border width. Spacing This is the container style with the least emphasis. Instead of using a visible border, spacing is used to create separation between concepts. View more about spacing."
-    },
-    {
-      "type": "guideline",
-      "content": "Example.\n\nThis medium card uses spacing-300 for internal padding."
-    },
-    {
-      "type": "guideline",
-      "content": "Example.\n\nIn this group of containers — each representing a product — different container styles can be used to draw attention to a specific item. In this case, the emphasized container is paired with a badge, and contrasts against the more subdued containers with filled (gray) backgrounds."
-    },
-    {
-      "type": "guideline",
-      "content": "States of interactive, emphasized containers.\n\nIf the whole container is interactive, hover is shown through a slightly more prominent drop shadow. When dragged, a much more prominent shadow is shown in order to bring focus to the dragged item and show elevation above the rest of the UI. Note that specific components might have different options and states."
-    },
-    {
-      "type": "guideline",
-      "content": "A consistent app frame helps create a sense of brand unity and helps users feel comfortable and familiar with our products. Predictable navigation is also especially helpful for users who work across multiple applications, and it makes it easier to learn how to use new products. The Spectrum 2 app frame framework provides a consistent visual style and navigation. It offers foundational structures and guidelines that product teams can adapt to their own contexts. View more details about the S2 app frame. The main content area is defined by a unique container style that's used only in the app frame. It has a subtle drop shadow to provide separation from the navigation. View more about using container styles to divide content within content areas. Example of an app frame with a side navigation. Example of an app frame with a side navigation."
-    }
-  ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/visual-language/containers",
-  "lastUpdated": "2026-08-19",
-  "status": "published"
-}

package/guidelines/voice-and-tone.json

@@ -1,47 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/voice-and-tone.json",
-  "name": "voice-and-tone",
-  "title": "Voice and tone",
-  "category": "designing",
-  "documentBlocks": [
-    { "type": "purpose", "content": "Voice and tone" },
-    {
-      "type": "guideline",
-      "content": "Rational.\n\nClear and understandable Ensure decisions about grammar and mechanics are research-informed and tested. Avoid language that’s overly opinionated, funny, or trendy."
-    },
-    {
-      "type": "guideline",
-      "content": "Human.\n\nFriendly, honest, and responsible Vary sentence style and structure for readability and relatability. Acknowledge and account for users’ emotions."
-    },
-    {
-      "type": "guideline",
-      "content": "Focused.\n\nConcise and simple Describe only what’s needed, without unnecessary decoration. Avoid creating new concepts and only name things when necessary."
-    },
-    {
-      "type": "guideline",
-      "content": "Brand guidelines.\n\nThe Adobe Style Guide's \"Voice\" section defines the principles of our brand voice. This guide also contains a glossary with branded terms and information about applying branding guidelines in a variety of different customer-facing situations."
-    },
-    {
-      "type": "guideline",
-      "content": "Tone Spectrum.\n\nThe right tone depends on a user’s contextual needs and corresponding emotions for that experience, as well as how involved and emotional we need to be in the process. Think of the tone for any given experience as being on a spectrum: Tone can fall on a spectrum going from motivational to helpful, helpful to instructive, instructive to reassuring, reassuring to supportive."
-    },
-    {
-      "type": "guideline",
-      "content": "Tone guide.\n\nThe tone spectrum acts as a sliding scale for considering which of our attitudes and expressions are appropriate for different experiences. ToneAttitudeFrequency Motivational Positive and encouraging We're looking out for you and cheering you on. You've got this!Rarely Helpful Polite and respectful We know you're busy, so we'll make this brief.Occasionally Instructive Neutral and direct Here is the information you need.Often Reassuring Professional and reliable We know you're worried about this issue, and we're here to help.Occasionally Supportive Concerned and empathetic Something bad has happened and we understand how you feel. We want to inform, guide, and support you through this.RarelyThe points on this spectrum aren't necessarily binary. For example, the right tone for an experience could be either motivational or helpful, or it could exist somewhere between those points."
-    }
-  ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/voice-and-tone",
-  "lastUpdated": "2026-09-14",
-  "status": "published",
-  "tags": [
-    "voice",
-    "tone",
-    "brand guidelines",
-    "Adobe Style Guide",
-    "language guidelines",
-    "readability",
-    "user experience",
-    "tone spectrum"
-  ]
-}

package/guidelines/writing-about-people.json

@@ -1,103 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/writing-about-people.json",
-  "name": "writing-about-people",
-  "title": "Writing about people",
-  "category": "designing",
-  "documentBlocks": [
-    { "type": "purpose", "content": "Writing about people" },
-    {
-      "type": "guideline",
-      "content": "The goal of all UX content is to be understandable to all — not just to the people paying for something or for those in a certain industry — and to accommodate the many ways that people use products. When creating content for product experiences, think and write by centering the person you’re writing to or about in a way that’s compassionate, inclusive, and respectful. Work to grasp the perspective of underrepresented groups, and avoid writing in a way that may view or treat someone as intrinsically different from yourself. You can use methods like co-designing and UX research. Keep the following best practices in mind when writing:"
-    },
-    {
-      "type": "guideline",
-      "content": "Use neutral, precise, relevant descriptions.\n\nOnly include personal qualities if they’re relevant and important. Write what you mean, then look back at what you wrote and think about whom you’re centering with your words. Doing this can reveal which people you’re leaving out. What’s the sentiment behind your words?"
-    },
-    {
-      "type": "guideline",
-      "content": "Choose words carefully and understand historical significance.\n\nBe cautious of appropriating terms from marginalized communities. In this guide, we say “underrepresented groups.” You can also reference 3rd-party sources such as Wikipedia’s list of which words to use and which to avoid."
-    },
-    {
-      "type": "guideline",
-      "content": "Be clear and avoid stereotypes.\n\nBe on the lookout for proxy questions and statements, which appeal to generalizations and stereotypes. For example, saying, “just buy more storage” is a proxy statement on economic status, while “view additional storage options” doesn’t make those assumptions. Communicate from a place of equality, not condescension, and think about the worst-case interpretation of your words. Clear intent excludes fewer people and reduces bias."
-    },
-    {
-      "type": "guideline",
-      "content": "Account for machine learning and AI.\n\nWhen collecting user data in app or web experiences, first think about whether that information is actually needed, and then if it really is, communicate why. Allow for both common and custom responses, self-identification, multiple selections, and the option to opt out of responding. Artificial intelligence learns only from the information we provide to it, so our inherent biases can easily become included in training data. If content allows for variable and AI-provided information, consider the ways that may affect any copy."
-    },
-    {
-      "type": "guideline",
-      "content": "Use neutral, precise, relevant descriptions.\n\nPerson-first language centers the person, not their qualities, by using those qualities as modifiers: “Design Adobe apps for people who use assistive technology.” But for identity-first language, which some communities and individuals prefer instead, language highlights the disability: “Design Adobe apps for deaf people.” No group unilaterally chooses one over the other, so when you’re writing about someone, ask them how they want to be identified. Avoid euphemisms like “differently abled,” which are regarded as condescending, and descriptors used as nouns, like “the disabled” or “the blind.” These tend to present a group of individuals as a monolith and suggests a lack of individual diversity within the group. Preferred Avoid Disabled person or person with disabilities Differently abled or the disabled Blind person or person who is blind The blind Some phrases in common parlance that imply negativity are based on slurs against people with disabilities, such as “crazy” or “lame.” Never imply that a person is “suffering” from a disability or is a “victim” of a condition. Avoid appropriating terms from the disability community. Preferred Avoid Ridiculous or unpredictable Crazy Inconsiderate Tone-deaf Incompetent or bad Dumb or lame Keyanna has autism.Keyanna is suffering from autism. Placeholder variable Dummy variableAmir uses a wheelchair.Amir is confined to a wheelchair."
-    },
-    {
-      "type": "guideline",
-      "content": "Be clear and avoid stereotypes.\n\nWith imagery and language, avoid implying that a person has to look a certain way, be a certain size, or have a certain cognitive ability to do something. Depict more types of people as typical. Preferred Avoid This tutorial teaches cropping and usually takes 5 minutes.Follow this fast, easy tutorial.This feature works best when you zoom out to 75%.This feature isn’t for the vision-impaired."
-    },
-    {
-      "type": "guideline",
-      "content": "Avoid appropriating terms from underrepresented groups.\n\nBe aware of how words that are often associated with physical and mental health are often used as metaphors to describe interactions and product functionality. Preferred Avoid Unavailable or locked or turned off or deactivated Grayed out Coherence check Sanity check Organize or organized OCD"
-    },
-    {
-      "type": "guideline",
-      "content": "Account for machine learning and AI.\n\nEnter metadata with caution. For example, don’t tag a photograph of a child with words like “crazy” or “weird.”"
-    },
-    {
-      "type": "guideline",
-      "content": "Use neutral, precise, relevant descriptions.\n\nLet’s say you’re writing a persona. When describing a person's country of origin or race, be as descriptive as possible as to not generalize any race or ethnicity. Race is only pertinent to biographical and announcement-related content that involves significant, groundbreaking, or historical events. For capitalization, Adobe follows AP Stylebook guidelines: capitalize nationalities, peoples, races (all except white), and tribes."
-    },
-    {
-      "type": "guideline",
-      "content": "Choose words carefully and understand historical significance.\n\nAdobe’s Inclusive Engineering Terminology Standard covers a set of established software terms to avoid, such as “whitelist,” “blacklist,” “master,” and “slave.” Don’t use terms assigning good or bad values to racial characteristics, such as “dark pattern.” (Terms like \"dark mode,\" \"light theme,\" or \"black screen\" literally refer to color and brightness and don't assign good or bad values, so continue using them.)"
-    },
-    {
-      "type": "guideline",
-      "content": "Choose words carefully and understand historical significance.\n\nAdobe avoids using software terms such as “whitelist,” “blacklist,” “master,” and “slave.” Don’t use terms assigning value to racial characteristics, such as “dark pattern.” (Terms like \"dark mode,\" \"light theme,\" or \"black screen\" literally refer to color and brightness and don't assign good or bad values, so continue using them.) Preferred Avoid Use this format to provide contextual clarity: ( Result in past participle form ) ( object ) Examples: Shared domains, approved people, targeted sites For coding constructs: Allowlist Whitelist Use this format to provide contextual clarity: ( Result in past participle form ) ( object ) For coding constructs: Blocklist Blacklist Legacy Grandfather clause Futile undertaking or a project destined to fail Death march Primary or main or source (e.g., “ main track ”)“ Master ” descriptors Primary / secondary Master / slave"
-    },
-    {
-      "type": "guideline",
-      "content": "Be clear and avoid stereotypes.\n\nIf you want to use a certain idiomatic or casual phrase, research its history before doing so. For example, imperfect spellings or pronunciations of words can imply pejorative associations with an accent. Be on the lookout for proxy questions, such as relating postal codes to ethnicity in rejecting job candidates, or making pricing or marketing decisions based on the average income of postal codes."
-    },
-    {
-      "type": "guideline",
-      "content": "Use plain language.\n\nSince English isn’t everyone’s first language, it’s best to write using clear, plain language — as well as avoid idioms and phrases that might be complicated for non-English speakers to understand. Plain language is more widely understood and, therefore, avoids alienating people. It especially avoids alienating people in ways that specifically belittle non-English speakers. For example, the conversational and casual phrases “long time no see” and “no can do” were originally used to belittle Native Americans. Preferred Avoid Welcome backLong time no see2-step processWax on, wax offSorry, something went wrongNo can do"
-    },
-    {
-      "type": "guideline",
-      "content": "Depict more types of people as typical.\n\nWe must focus on building successful experiences for all users. That means writing and designing in a way that depicts all skin types, names, and cultures as typical. We cannot keep centering white-skinned, Western cultures in our designs. Preferred Avoid Dark brown or beige or tan or peach, etc. Skin or flesh or nude (referring to color swatch) Critics Peanut gallery A broad range of name examples within a product experience (e.g., Ayesha, Ibrahim, Vignesh, Quynh) Only culturally white name examples within a product experience (e.g., John, Bill, Karen, Amy)"
-    },
-    {
-      "type": "guideline",
-      "content": "Be cautious of appropriating terms from underrepresented groups.\n\nHere’s a list of preferred words that are alternatives to common technology industry jargon. Preferred Avoid Native to the operating system or built-in feature Native Meeting Pow wow or circle the wagons Vision statement or strategic statement or value proposition Zen statement or Zen garden Role model or kindred spirit Spirit animal Guide Sherpa Authority or expert Guru or ninja"
-    },
-    {
-      "type": "guideline",
-      "content": "Be clear and avoid gendered language and stereotypes.\n\nRather than “he” or “she,” if you don’t know a person’s pronouns, make the phrase plural and use “they” instead. Use of “they” to describe one person is also accepted, although the syntax remains plural (e.g., “they are” = “that person is”). It’s also best to avoid using roles or stereotypes that have gendered roots (e.g., “businessman\" or “waitress”). Preferred Avoid Server Waitress Businessperson Businessman Flight attendant Stewardess They He/she or (S)he A group of people or a group of women Guys or girls or ladies Parents Moms"
-    },
-    {
-      "type": "guideline",
-      "content": "Choose words carefully and understand historical significance.\n\nUse gender and sexuality descriptors as modifiers, not nouns (e.g., “transgender woman” rather than “a transgender,” “bisexual person” rather than “a bisexual”). A person’s pronouns are not opinion or preference, even if they may change over time (view Spectrum’s guidelines on pronouns ). All of this helps us emphasize every person’s humanity, and keeps us from alienating people who aren’t cisgender and heterosexual. Preferred Avoid Transgender people or trans people Transgendered people or transgenders or the transgendered or transexuals Trans women Trans-women A transgender man A transman Alejandra, a lesbian woman Alejandra is a lesbian Jing, a non-binary person Jing is a non-binary Saadi is cis Saadi is CIS What are your pronouns?What are your preferred pronouns?Jamal’s pronouns are he/him/his. Jamal prefers he/him pronouns. Wholehearted or impassioned Hysterical"
-    },
-    {
-      "type": "guideline",
-      "content": "Be specific and kind.\n\nKnow the difference between sex (male/female) and gender (man/woman). When collecting personal data from users, consider if it is really necessary to ask for a person’s gender. Data collection and forms, while useful to product builders, can feel intrusive when asking about gender. When you really do need the information, allow for both common and custom responses, self-identification, multiple selections, and the option to opt out of responding. Avoid asking proxy questions, for example, asking for someone’s gender when the information that is actually needed is their bike size. Preferred Avoid Prefer to self-describe and Prefer to not respond Other"
-    },
-    {
-      "type": "guideline",
-      "content": "Account for machine learning and AI.\n\nPeople globally identify with many genders and sexualities, so it's important to teach AI exactly that. It wasn’t until June 2018 that the World Health Organization (WHO) declassified being transgender as a mental illness, so even though humans have adjusted this perspective, machine learning and AI can still perpetuate these biases. Don’t use AI or machine learning to guess genders based on image recognition, text analysis, or anything else."
-    }
-  ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/writing-about-people",
-  "lastUpdated": "2026-09-04",
-  "status": "published",
-  "tags": [
-    "writing",
-    "inclusive design",
-    "neutral language",
-    "person-first language",
-    "identity-first language",
-    "avoid stereotypes",
-    "self-identification",
-    "AI bias"
-  ]
-}