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

package/guidelines/illustrations.json

@@ -1,111 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/illustrations.json",
-  "name": "illustrations",
-  "title": "Illustrations",
-  "category": "designing",
-  "documentBlocks": [
-    { "type": "purpose", "content": "Illustrations" },
-    {
-      "type": "guideline",
-      "content": "The illustrations and graphics in Spectrum 2 have been completely reworked to reflect the significant update of our design system."
-    },
-    {
-      "type": "guideline",
-      "content": "Spectrum 2 (S2) evolved around the need to bridge the gap between purely professional tools and more consumer-orientated applications, creating updates that prioritize more approachability, a clearer sense of attention hierarchy, and a stronger connection to product branding. Illustrations are a major part of how Spectrum 2 creates such experiences."
-    },
-    {
-      "type": "guideline",
-      "content": "Please note that parts of this illustration system are still in exploration, and will be added to these guidelines once they’re more defined. Animation is also currently being explored."
-    },
-    {
-      "type": "guideline",
-      "content": "Here’s a summary of the main updates that you’ll notice with Spectrum 2 illustrations, compared to the style of Spectrum 1:"
-    },
-    {
-      "type": "guideline",
-      "content": "Linear illustrations are monochromatic. They use the same color token as the icons (S2 / gray 800), and switch colors according to dark and light UI."
-    },
-    {
-      "type": "guideline",
-      "content": "Linear illustrations use the following naming convention:"
-    },
-    {
-      "type": "guideline",
-      "content": "Gradient illustrations are new to our design system with the update to Spectrum 2. Compared to linear illustrations, they’re much bolder. They can help users understand a message more quickly, or motivate them to perform a specific action."
-    },
-    {
-      "type": "guideline",
-      "content": "There are two gradients that can be used for surfaces that show different products, or that are not product-specific. The other gradients are tied to specific products or clouds. For example, blue is tied to the photography and digital imaging category (such as Photoshop, Lightroom, and Fresco), while green represents the 3D category (such as Substance 3D Stager and Substance 3D Designer). It’s essential to use the appropriate illustration colors according to the product categories. If the application is for multiple products, use one of the gradient swatches that incorporate the Adobe brand red."
-    },
-    {
-      "type": "guideline",
-      "content": "Do not use the category gradient sets as semantic colors to communicate meanings like errors (red), warnings (yellow), or successes (green)."
-    },
-    {
-      "type": "guideline",
-      "content": "Gradient illustrations use the following naming convention:"
-    },
-    {
-      "type": "guideline",
-      "content": "Linear illustrations are elements that communicate lower attention, as they blend in well with the rest of the UI. They can be used multiple times in a layout without drawing too much attention."
-    },
-    {
-      "type": "guideline",
-      "content": "Errors or critical messages should only use linear illustrations."
-    },
-    {
-      "type": "guideline",
-      "content": "Gradient illustrations use colors that can be misunderstood as semantic colors (e.g., green for positive, red for negative). They also have an upbeat and inspirational tone, which isn’t appropriate in situations where a user may be frustrated by something that’s an inconvenience or is disruptive to them in accomplishing their work."
-    },
-    {
-      "type": "guideline",
-      "content": "The linear illustration style works well for layouts that feature a number of illustrations together (such as a collection of cards). Linear illustrations draw a lower level of attention and blend in well with the UI, so it’s appropriate to use them in a collection of elements. Gradient illustrations draw a lot of attention in multiples, so they need to be used sparingly and sparsely."
-    },
-    {
-      "type": "guideline",
-      "content": "Don’t scale or resize linear illustrations. The stroke weight and the corner radii are already set to work best in the given canvas sizes."
-    },
-    {
-      "type": "guideline",
-      "content": "Gradient illustrations are high attention elements in the layout. Use them strategically and thoughtfully to draw the user’s attention and to provoke a delightful moment."
-    },
-    {
-      "type": "guideline",
-      "content": "Gradient illustrations draw more attention because they’re very colorful. Using more then one in a given view will make the UI too busy and too loud. Use gradient illustrations sparingly to guide a user’s attention to engaging, high-value actions such as uploads, starting projects, or commenting."
-    },
-    {
-      "type": "guideline",
-      "content": "Gradient illustrations incorporate product category colors, and also include colors that have semantic meanings in Spectrum: red, orange, or green. It creates inconsistency and confusion to have an error message or a critical alert in green (a color has a positive semantic meaning)."
-    },
-    {
-      "type": "guideline",
-      "content": "Use gradient illustrations when you want to emphasize positive actions. Gradient illustrations have an upbeat and inspirational tone, which isn’t appropriate in situations where a user may be frustrated by something that’s an inconvenience or is disruptive to them in accomplishing their work."
-    },
-    {
-      "type": "guideline",
-      "content": "The colors in gradient illustrations are connected to the product categories. For example, an illustration for a Substance 3D product should use the Substance 3D green colors."
-    },
-    {
-      "type": "guideline",
-      "content": "Do not use different colors than those of your product category. Reach out to the Spectrum Brand team for guidance about the appropriate colors for your use case."
-    },
-    {
-      "type": "guideline",
-      "content": "It’s highly recommended to test gradient illustrations as you’re designing your layout. They’re very expressive and colorful, so it’s important to determine how they complement (or don’t) different communication points (e.g., user-generated content, onboarding, feature banners, upsells, and more)."
-    },
-    {
-      "type": "guideline",
-      "content": "If gradient illustrations are making the layout too noisy, use linear illustrations instead."
-    },
-    {
-      "type": "guideline",
-      "content": "Thematic banners are descriptive and represent a specific topic or feature. Similar to the gradient illustrations, they’re either connected to the product brand categories by color, or they use the generic gradient swatches."
-    }
-  ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/illustrations/",
-  "lastUpdated": "2026-02-02",
-  "status": "published",
-  "tags": ["designing"],
-  "related": [{ "ref": "using-icons" }, { "ref": "motion" }]
-}

package/guidelines/object-styles.json

@@ -1,102 +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.json",
-  "name": "object-styles",
-  "title": "Object styles",
-  "category": "designing",
-  "documentBlocks": [
-    {
-      "type": "purpose",
-      "content": "Example of how object styles are combined to communicate different interactions.\n\nIn general, Spectrum 2’s system for rounding is more pronounced and flexible than in Spectrum 1.\n\nIn general, this system of rounding creates a visually balanced gap when nesting smaller objects within larger objects.\n\n\"There are two border widths used within in-product UI contexts:\"\n\n\"The third option is not used within in-product UI contexts:\"\n\nA medium divider separates two action button groups. Note that when dividers are used with visible gaps on both ends, the end caps are fully rounded.\n\nWhile the detailed values are still in progress, the foundational concepts for drop shadows still apply.\n\n\"In Spectrum 2, shadows are composed of three layers: a key shadow, an ambient shadow, and a transition shadow that’s between them.\"\n\nContainers that appear on top of content, such as menus and tooltips, have drop shadows to show elevation."
-    },
-    {
-      "type": "guideline",
-      "content": "Object styles are specific visual shapes or effects that are used to communicate intent or to give cues about an interaction."
-    },
-    {
-      "type": "guideline",
-      "content": "For example, different types of inputs all share styles. Search fields, text fields, and combo boxes use object styles to communicate a primary purpose: 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."
-    },
-    {
-      "type": "guideline",
-      "content": "Example of how object styles are combined to communicate different interactions."
-    },
-    {
-      "type": "guideline",
-      "content": "In general, Spectrum 2’s system for rounding is more pronounced and flexible than in Spectrum 1."
-    },
-    {
-      "type": "guideline",
-      "content": "Larger rounding values give components more expression and personality, and having more rounding options makes it possible to create visual balance across a wide range of contexts."
-    },
-    {
-      "type": "guideline",
-      "content": "In general, this system of rounding creates a visually balanced gap when nesting smaller objects within larger objects."
-    },
-    {
-      "type": "guideline",
-      "content": "Avatars are displayed in circles to draw attention to user content. All other representations, such as groups and products, are displayed in rounded squares."
-    },
-    {
-      "type": "guideline",
-      "content": "In Spectrum 2, rounding for different sized components varies based on a Major Second logarithmic scale. This allows for components to retain a consistent and identifiable shape at all sizes. Desktop and mobile scales share the same base rounding. Note that the values displayed are base values for desktop scale components, and specific corner radius values may vary between components."
-    },
-    {
-      "type": "guideline",
-      "content": "Borders are only used when spacing isn’t enough to show separation. For example, a divider might sometimes be needed to separate two distinct action button groups. Or, an object might have a border to demarcate distinct areas, such as separating a panel or card from the rest of the content on a page."
-    },
-    {
-      "type": "guideline",
-      "content": "There are two border widths used within in-product UI contexts:"
-    },
-    {
-      "type": "guideline",
-      "content": "The third option is not used within in-product UI contexts:"
-    },
-    {
-      "type": "guideline",
-      "content": "A medium divider separates two action button groups. Note that when dividers are used with visible gaps on both ends, the end caps are fully rounded."
-    },
-    {
-      "type": "guideline",
-      "content": "In Spectrum 2, large borders are only used in longform content, such as in documentation pages. Large borders aren’t used within in-product UI contexts."
-    },
-    {
-      "type": "guideline",
-      "content": "A full-width medium divider can be a helpful option for separating two distinct parts of a page, such as dividing a navigation panel from the rest of the content. When deciding whether a divider is needed, consider whether groups of information are still clear without one. Generally, more complex content with a varying alignment of objects will benefit the most from using a divider."
-    },
-    {
-      "type": "guideline",
-      "content": "Similarly to the previous example, a full-width medium divider separates a commenting panel from the rest of the page. The divider is helpful in this context since the commenting panel can have varying content, from an empty state to many layers of nested comments. By creating a clear boundary, this helps set expectations for what content is presented in the panel."
-    },
-    {
-      "type": "guideline",
-      "content": "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content."
-    },
-    {
-      "type": "guideline",
-      "content": "While the detailed values are still in progress, the foundational concepts for drop shadows still apply."
-    },
-    {
-      "type": "guideline",
-      "content": "In Spectrum 2, shadows are composed of three layers: a key shadow, an ambient shadow, and a transition shadow that’s between them."
-    },
-    {
-      "type": "guideline",
-      "content": "Containers that appear on top of content, such as menus and tooltips, have drop shadows to show elevation."
-    },
-    {
-      "type": "guideline",
-      "content": "By default, objects have no drop shadows. When a container is dragged, a drop shadow is used to show elevation in both default and emphasized containers."
-    },
-    {
-      "type": "guideline",
-      "content": "An overlay represents elevation in a different way: it focuses attention on the content above the overlay only. When using an overlay (for example, behind a dialog), no additional drop shadow is applied to the background."
-    }
-  ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/object-styles/",
-  "lastUpdated": "2026-02-02",
-  "status": "published",
-  "tags": ["designing"],
-  "related": [{ "ref": "fonts" }, { "ref": "spacing" }]
-}

package/guidelines/spacing.json

@@ -1,25 +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.json",
-  "name": "spacing",
-  "title": "Spacing",
-  "category": "designing",
-  "documentBlocks": [
-    {
-      "type": "purpose",
-      "content": "Spectrum 2 continues with Spectrum's current guidelines for spacing and responsive grids. More detailed guidelines for responsive design are currently in progress.\n\nThe primary update for Spectrum 2 is that **instead of dividers, spacing is used as the primary way to group and divide content**. Different spacing values establish rhythm and create hierarchy within a page. The [spacing values](https://spectrum.corp.adobe.com/page/spacing/#Spacing-values) themselves remain unchanged from Spectrum 1.\n\nSmaller spacing values should generally be used for objects that are closely related. An example of this would be to use a smaller spacing value in between the components that make up a component group, like in a button group or a group of cards.\n\nLarger spacing values should be used for groups of things that are less closely related. An example of this would be to use a larger spacing value to separate two distinct sections of content. Doing this helps to better organize a page.\n\nIn some contexts, a divider can still be appropriate to define larger areas of a page. View more about [border width](https://s2.spectrum.corp.adobe.com/page/object-styles/#border-width).\n\n### Example\n\nIn this example, the side navigation items use a smaller spacing value (spacing-75) in order to show a closer relationship. The side navigation items are grouped with a combination of a section title and a larger spacing value (spacing-400) to divide two distinct sections.\n\nSimilarly, cards that are part of the same group have a smaller spacing value (spacing-300) between them. Each group of cards has a title and a larger spacing value (spacing-500) to show two that the two groups are distinct.\n\nBy using spacing intentionally, the purpose of page content becomes more readily apparent and information can become easier to parse."
-    },
-    {
-      "type": "guideline",
-      "content": "Spectrum defines density as the spacing between components or UI elements, regardless of their size and scale. Density can be used alongside component size to create a range of layouts, from spacious to dense."
-    },
-    {
-      "type": "guideline",
-      "content": "For example, when creating complex UI layouts, high density is often combined with smaller components and tighter spacing in between elements."
-    }
-  ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/spacing/",
-  "lastUpdated": "2026-02-02",
-  "status": "published",
-  "tags": ["designing"]
-}

package/guidelines/typography-fundamentals.json

@@ -1,142 +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-fundamentals.json",
-  "name": "typography-fundamentals",
-  "title": "Typography fundamentals",
-  "category": "designing",
-  "documentBlocks": [
-    {
-      "type": "purpose",
-      "content": "The variable font (VF) is the default typeface for Spectrum 2 web, iOS, and future desktop explorations.\n\n\"There are two major updates, compared with Adobe Clean:\"\n\n\"In general:\"\n\nUpdated (\\*) means that these sizes didn't follow the Major Second type scale in Spectrum 1 and have now been updated to reflect the accurate values\n\nSpectrum 2 uses type styles to help maintain a consistent semantic meaning and create accessible, legible, and on-brand experiences across platforms.\n\nComponent is the type style that is applied to text within UI components.\n\nCode is a typography component used for text that represents code. The default font for showing code is Source Code Pro.\n\nIn this file browsing example, Heading, Title, Component, and Detail style text are used to create hierarchy throughout the page.\n\nIn this commenting example, Title, Body, Component, and Detail style text are used to create hierarchy within the comments panel."
-    },
-    {
-      "type": "guideline",
-      "content": "The variable font (VF) is the default typeface for Spectrum 2 web, iOS, and future desktop explorations."
-    },
-    {
-      "type": "guideline",
-      "content": "There are two major updates, compared with Adobe Clean:"
-    },
-    {
-      "type": "guideline",
-      "content": "If you need to deviate from the default typeface (Adobe Clean Spectrum VF), you can use Adobe Clean Spectrum Serif VF, Adobe Clean Han, and Source Code Pro:"
-    },
-    {
-      "type": "guideline",
-      "content": "Spectrum ensures that different sizes of text can work together harmoniously, on both desktop and mobile. For Spectrum 2, 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."
-    },
-    {
-      "type": "guideline",
-      "content": "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."
-    },
-    {
-      "type": "guideline",
-      "content": "Updated (\\*) means that these sizes didn't follow the Major Second type scale in Spectrum 1 and have now been updated to reflect the accurate values"
-    },
-    {
-      "type": "guideline",
-      "content": "New (\\*\\*) shows Spectrum 2's new additions: font-size-25 is new to accommodate scaling to the smallest detail and body sizes. Font-size-1400 and -1500 are now available to provide consistent scaling to larger sizes. These are often needed in website design and for marketing scenarios."
-    },
-    {
-      "type": "guideline",
-      "content": "Spectrum 2 offers guidance for a wider range of font weights to help establish visual hierarchy in layouts, including the specific usages of Black, ExtraBold, and Medium weights."
-    },
-    {
-      "type": "guideline",
-      "content": "When used in Adobe Express products, the weight is set to Black in order to align to the Adobe Express brand guidelines. Black weight text should only be used in heading type styles, and never below 18 px font-size, to ensure the text remains legible."
-    },
-    {
-      "type": "guideline",
-      "content": "Select 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. Titles, file names, user names, and button labels all use bold weight."
-    },
-    {
-      "type": "guideline",
-      "content": "In Spectrum 2, some components, like action buttons, badges, and tags, use Medium weight labels in order to maintain balance with Spectrum 2’s icons, which use a 1.5 px stroke."
-    },
-    {
-      "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": "Line height values are updated in Spectrum 2 to better accommodate the baseline shift of the new default font — Adobe Clean Spectrum VF — and to position the text as vertically centered in UI components."
-    },
-    {
-      "type": "guideline",
-      "content": "To ensure that the space between lines of text appears balanced, the default line-height is adjusted from \\~130% at smaller font-sizes to \\~115% at larger font-sizes, and then rounded to whole even numbers to ensure that text within a component will not sit on a half-pixel."
-    },
-    {
-      "type": "guideline",
-      "content": "Body and Code type styles use a more spacious line height multiplier of 1.5x the font-size (line-height-200) to ensure that longform text has more space and is legible. CJK languages use a 1.7x multiplier."
-    },
-    {
-      "type": "guideline",
-      "content": "Spectrum 2 uses type styles to help maintain a consistent semantic meaning and create accessible, legible, and on-brand experiences across platforms."
-    },
-    {
-      "type": "guideline",
-      "content": "Keep in mind that a single product won’t need all of theses sizes, and especially at the same time. As a starting point, use a t-shirt size from each of the type styles (in Figma, these are known as text styles). For example: pair Heading Medium with Title Medium, Body Medium, and Medium t-shirt sized components."
-    },
-    {
-      "type": "guideline",
-      "content": "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."
-    },
-    {
-      "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": "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": "“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."
-    },
-    {
-      "type": "guideline",
-      "content": "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’s also often shown in gray-600 or gray-700 to make it more subdued in terms of visual hierarchy."
-    },
-    {
-      "type": "guideline",
-      "content": "The differences between Detail text, Component text, and Body 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."
-    },
-    {
-      "type": "guideline",
-      "content": "Component is the type style that is applied to text within UI components."
-    },
-    {
-      "type": "guideline",
-      "content": "In Spectrum 1, the “component” line height meant “a line-height applied to text within UI elements.” Spectrum 2 expands on this by having text styles in the Spectrum Figma libraries, 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."
-    },
-    {
-      "type": "guideline",
-      "content": "The Component type style comes in multiple font weights to support its flexibility across components in the design system. For example, the Spectrum 2 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."
-    },
-    {
-      "type": "guideline",
-      "content": "Code is a typography component used for text that represents code. The default font for showing code is Source Code Pro."
-    },
-    {
-      "type": "guideline",
-      "content": "The following are some general examples to show how the Spectrum 2 typography system all comes together, and how type styles can be used together to create visual hierarchy."
-    },
-    {
-      "type": "guideline",
-      "content": "In this file browsing example, Heading, Title, Component, and Detail style text are used to create hierarchy throughout the page."
-    },
-    {
-      "type": "guideline",
-      "content": "In this commenting example, Title, Body, Component, and Detail style text are used to create hierarchy within the comments panel."
-    },
-    {
-      "type": "guideline",
-      "content": "In instances where Spectrum’s typefaces might fail to load properly, there are defined fallback fonts that have been selected based on operating system consistency and similar anatomical relationships."
-    }
-  ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/typography-fundamentals/",
-  "lastUpdated": "2026-02-02",
-  "status": "published",
-  "tags": ["designing"],
-  "related": [{ "ref": "background-layers" }, { "ref": "fonts" }]
-}