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

package/guidelines/layout-spacing.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/layout-spacing.json",
-  "name": "layout-spacing",
-  "title": "Layout spacing",
-  "category": "designing",
-  "documentBlocks": [
-    { "type": "purpose", "content": "Layout spacing" },
-    {
-      "type": "guideline",
-      "content": "Layout spacing governs object relationships, such as the spacing between components, patterns, and regions of a UI. It’s implemented through global tokens, which follow a geometric progression with values that round to familiar numbers: 2, 4, 8, 16. If you're used to an 8 px grid, these will feel recognizable. The scale provides consistent perceptual difference between adjacent values across its full range. Image: Scale of gray squares increasing in size from left to right, labeled with values 1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, and 96, with a dotted diagonal line showing the growth curve. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_115ea12e4cac857c4b8d7fccac0293a81ae114447.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Global tokens govern object relationships in a layout. They create and distinguish the relationships between the components that make up a product UI. Smaller values create tighter relationships. Larger values create more visual independence. The choice should reflect the actual relationship between the objects being spaced. Image: Screenshot of the Adobe GenStudio interface showing a top navigation bar with a search field, a green table icon with a loading placeholder bar, and a floating toolbar with icons for image approval, comment, \"Cr,\" and a highlighted gold icon; two callouts label the horizontal bands as \"spacing-100\" and \"spacing-250.\" (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1a16efb69dea68171c4c4dcbcff449b7c21eaa2ad.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "A common approach to spacing is to pick a base unit and build all spacing values from its multiples, such as 8, 16, 24, 32. These values are familiar and easy to remember, which is part of their appeal. This approach is called a linear progression. Linear progressions like this work well in many situations, but have two limitations. First, spacing needs to grow with the elements around it. A 4 px gap between an icon and label looks right in a small component, but as the component scales up, the nearest grid values (4 px or 8 px) no longer fit the relationship correctly. Second, linear scales lose differentiation at larger values. The difference between 4 px and 8 px is obvious. The difference between 72 px and 80 px is almost imperceptible. Image: Scale of gray squares increasing in size from left to right beneath a pink upward curve, with a bracket over the first two squares labeled \"100% increase\" and a bracket over the last two squares labeled \"11% increase,\" illustrating a decelerating growth rate. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_10c237cd90839604eca53c6ac170d7cf2f3812435.png?width=750&format=png&optimize=medium)Both of these limitations come down to the same underlying cause: human perception doesn't measure space in fixed increments. Spectrum's spacing system is built around geometric progressions and semantic tokens to address this directly. The next page explains how."
-    },
-    {
-      "type": "guideline",
-      "content": "Use global tokens for layout spacing. TokenValuespacing-251pxspacing-502pxspacing-754pxspacing-856pxspacing-1008pxspacing-20012pxspacing-30016pxspacing-35020pxspacing-40024pxspacing-50032pxspacing-60040pxspacing-70048pxspacing-75056pxspacing-80064pxspacing-90080pxspacing-100096px"
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/layout-spacing",
-  "lastUpdated": "2026-08-13",
-  "status": "published",
-  "tags": [
-    "layout spacing",
-    "global tokens",
-    "geometric progression",
-    "semantic tokens",
-    "8 px grid",
-    "linear progression",
-    "perceptual spacing",
-    "spacing scale"
-  ]
-}

package/guidelines/object-styles-overview.json

@@ -1,17 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/object-styles-overview.json",
-  "name": "object-styles-overview",
-  "title": "Object styles",
-  "category": "designing",
-  "documentBlocks": [
-    {
-      "type": "purpose",
-      "content": "Spectrum’s object styles include rounding, border width, and drop shadow. Object styles are combined with color in different ways to communicate specific cues about interactions, adding a layer of meaning to the style of components. For example, different types of inputs all share styles. Search fields, text fields, and combo boxes use object styles to communicate text input. A search field is often more of a global scope, and has full rounding to add emphasis and differentiation from other types of fields. Action buttons, pickers, and in-field buttons share a fill color to indicate selection. Checkboxes, radio buttons, and switches share object styles to indicate binary selection. Image: Wireframe comparison of three form control categories — Text input (search field, text field, dropdown), Selection (button, dropdown menu, dropdown menu), and Binary selection (radio buttons, checkboxes, toggle switches) — each shown in unselected and selected states. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_17ff0c24745d8692c51ff3e23285f23e24844313c.png?width=750&format=png&optimize=medium)\n\n### Jump to\n\nImage: Four corner brackets arranged in a square formation illustrating corner rounding, with the top-right corner highlighted in a blue-to-teal gradient. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1ca22cd57315c5e0ec18a85ef74211e5c2f683177.png?width=750&format=png&optimize=medium) Rounding Rounding Image: Three horizontal pill-shaped bars illustrating different border width styles: a thin gradient outline, a thicker soft-edged border, and a wide blurred border. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1f2b7a2b6809ec86f7eab36c3ab90fcd7f31bd677.png?width=750&format=png&optimize=medium) Border width Border width Image: A rounded square outline with a soft drop shadow next to a diagonal rounded line in a pink-to-purple gradient, illustrating drop shadow styling. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_17d32a2b3be83c7c4f7541a166559a90e9683c24d.png?width=750&format=png&optimize=medium) Drop shadow Drop shadow"
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/overview",
-  "lastUpdated": "2026-08-14",
-  "status": "published",
-  "tags": ["Object styles", "Rounding", "Border width", "Drop shadow"]
-}

package/guidelines/rounding.json

@@ -1,73 +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": "Image: Diagram of a rounded card with a blue focus ring, labeling outer radius, inner radius, and the gap between the component edge and the focus ring. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1580eaee52110544895d8754b90e30a99e0d27767.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Focus rings use an outer stroke separated from the component by a consistent gap. To maintain visually balanced spacing around every corner radius, Spectrum calculates the focus ring radius using the following formula: <outer radius> - <gap> = <inner radius> Image: Diagram of a rounded card containing a small checkbox and heart icon, labeling the large container radius and the small nested component radius. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1238596e6de27dfab676345a245d99aca9c0a01c0.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Nested components.\n\nSpectrum components are designed so that smaller objects use smaller corner radii and larger objects use larger corner radii. When components are nested, this creates optically balanced corners and spacing while maintaining consistent relationships throughout the design system. Image: Diagram of a dropdown input field, labeling the medium radius of the field and the small radius of the nested chevron button. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_117277faee1a1249b79388f9456db5a94d180aa4b.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Example.\n\nThis example shows how nested corner radii can vary depending on spacing. The thumbnails use a larger gap, so the corner radii are adjusted for optical balance rather than following the formula exactly. The action bar uses a smaller gap, allowing the formula to produce a visually balanced result."
-    },
-    { "type": "guideline", "content": "Spectrum iOS" },
-    {
-      "type": "guideline",
-      "content": "Image: Two pink rounded squares labeled \"Off\" and \"On,\" comparing a standard rounded corner to a smoothed squircle-style corner, used as the reduced-motion alternative to the corner smoothing animation. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1daec0c3ae55113ee136895ff6e8c32f68c1a0c74.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Corner smoothing.\n\nUse Apple’s continuous corner style for rounded shapes, such as rounded rectangles and capsules. Continuous corners create a smooth transition between curved and straight edges and align with the corner treatment used throughout iOS system interfaces. Learn more in Apple’s Developer Documentation: RoundedCornerStyle"
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Static illustration of a pink rounded square with a black outline highlighting the nested outer and inner corner curves, used as the reduced-motion alternative to the concentric corners animation. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1f932489f41beb1e5357ccf616be1e590f096f48b.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Concentric corners.\n\nUse Apple’s concentric rectangle APIs when working with nested shapes. Concentric corners automatically adapt to their container’s shape and spacing, helping maintain consistent curvature and visual alignment across layered interface elements. Learn more in Apple’s Developer Documentation: ConcentricRectangle."
-    },
-    {
-      "type": "guideline",
-      "content": "Platform availability.\n\nThese tokens are currently available on web. Guidance for additional platforms will be added in a future release. 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://preview.spectrum.adobe.com/foundations/styles/object-styles/rounding",
-  "lastUpdated": "2026-08-14",
-  "status": "published",
-  "tags": [
-    "rounding",
-    "corner radius",
-    "nested corners",
-    "concentric corners",
-    "continuous corners"
-  ]
-}

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

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

package/guidelines/spacing-overview.json

@@ -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. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1ea5b08da8cc8d8033723c6725f53f9745fd34db2.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "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. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1280217c360758de76f28044ecf6f9d81b92beed4.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "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. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_160a34223f929bf2e94eee1cb1d58d7ec90ec86a8.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Boundaries.\n\nConsistent proximity within a group signals that all members are equally related. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1201af3d7c478557df34557c19dab71dc46fd9ad8.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Structure.\n\nThe overall distribution of space shows how content is organized within a layout.. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_17a7999c3c47bf695711fccc10e0799cbd6b1957a.png?width=750&format=png&optimize=medium) These three things are connected. Change one, and the others shift too. Spacing decisions are not visual alone, but rather they are structural and meaningful. Spacing also shapes how an interface feels. Negative space (the open areas between and around elements) creates a sense of calm and helps people focus on what matters. It's one of the most effective ways to create visual balance and direct user attention within a layout. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_11265bfff799dcff670349049460f288b6195ee05.png?width=750&format=png&optimize=medium)Less negative space creates clutter and increases cognitive load. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1770c6aefbbcb0ef043022106ea246562c4382558.png?width=750&format=png&optimize=medium)More negative space creates a calm, focused experience."
-    },
-    {
-      "type": "guideline",
-      "content": "Jump to.\n\nImage: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1dc4d2d0898277ca7435184e4ff8df1ba32dcee83.png?width=750&format=png&optimize=medium) Layout spacing Layout spacing Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1caf0d0b7511c185decfdfc268f04fbab079fc024.png?width=750&format=png&optimize=medium) Component spacing Component spacing"
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/spacing-overview",
-  "lastUpdated": "2026-08-19",
-  "status": "published"
-}

package/guidelines/support.json

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

package/guidelines/typography-overview.json

@@ -1,43 +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. Image: \"Adobe Clean Spectrum VF\" headline shown with style tabs (Default, Italic, Condensed, Origin) and a list of available weights from Light to Black. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1c6efb5d6281ac24cdedf4ce5edd22ad459eb7192.png?width=750&format=png&optimize=medium)Image: \"Crafted for Clarity\" headline above a diagram comparing an upright \"A\" and an italic \"a\" with a 12-degree slant angle indicated. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1012f71e83acb02b7d7c110acece752bc814876bc.png?width=750&format=png&optimize=medium)Image: Typeface specs showing \"24 styles\" with 804 glyphs each, and available formats listed as OTF/TTF. (source: https://preview.spectrum.adobe.com/foundations/typography/media_10d0336241a6832acab947c3064d8b0d17a4bb143.png?width=750&format=png&optimize=medium)Image: List of supported scripts: Latin, Cyrillic, CJK, Greek, Thai, Arabic, Hebrew, and Devanagari. (source: https://preview.spectrum.adobe.com/foundations/typography/media_173290f80e14bbcd13a7a945b5bd8e258fe041266.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Image: Adobe Clean typeface displaying a diacritics set, showing the Polish pangram \"Zażółć gęślą jaźń\" with accented characters. (source: https://preview.spectrum.adobe.com/foundations/typography/media_12e7eb93d7d420154635041f22802af852db129bd.png?width=750&format=png&optimize=medium)Image: Adobe Clean typeface displaying standard ligatures, showing the \"ff\" and \"ft\" letter combinations. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1ab4426a25f6472a0751d5c446d2c1261c576a14c.png?width=750&format=png&optimize=medium)Image: Adobe Clean typeface displaying tabular figures, showing the numerals 0 through 5 in bold weight. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1dda11559e4a0d3cb6dcdef680372b595b81171d1.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Adobe Clean Spectrum VF provides two main benefits over the non-variable versions: Improves alignment with UI elements. Adobe Clean Spectrum VF uses updated baseline metrics, which are the measurements that determine how text is positioned. These updated metrics help text align more consistently with other interface elements, such as icons, components, and avatars. Supports future adjustments. Spectrum currently recommends using the default weights and widths. However, the variable font makes it easier to fine-tune typography in future updates. For example, a slightly thinner weight may improve readability in dark mode. Learn more about Adobe Clean Spectrum VF in the Spectrum 2 typography guide."
-    },
-    {
-      "type": "guideline",
-      "content": "Jump to.\n\nImage: Icon illustrating \"Typography system,\" showing two \"T\" letterforms in a blue-to-green gradient above a font-size adjustment icon. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1735d74eaa72d8a5b4d22dfa24c63543afc0266e5.png?width=750&format=png&optimize=medium) Typography system Typography system Image: Icon illustrating \"Applying the type system,\" showing two overlapping \"T\" letterforms in a blue-to-teal gradient. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1bfdcea0ca1f5a86d02adde5500e376465c822b02.png?width=750&format=png&optimize=medium) Applying the type system Applying the type system Image: Icon illustrating \"Fonts,\" showing a stylized italic lowercase \"f\" in a pink gradient. (source: https://preview.spectrum.adobe.com/foundations/typography/media_1d2071b303ba5882b375bbdf5257b1d939c891101.png?width=750&format=png&optimize=medium) Fonts Fonts"
-    }
-  ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/typography/overview",
-  "lastUpdated": "2026-08-13",
-  "status": "published",
-  "tags": [
-    "Typography",
-    "Adobe Clean Spectrum",
-    "Spectrum VF",
-    "variable font",
-    "baseline metrics",
-    "UI alignment",
-    "font family",
-    "readability"
-  ]
-}