@adobe/spectrum-design-data 0.4.0 → 0.7.0

package/guidelines/brand.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/brand.json",
+  "name": "brand",
+  "title": "Brand",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Brand" },
+    {
+      "type": "guideline",
+      "content": "Product logos, app icons, and lockups.\n\nA product logo or tile color does not change, even if the background is dark. One-color product logos are for usage as workflow icons. You can find app icons within the [App Icons library](https://www.figma.com/file/8or0zCnGc5fiTnQ1NeIRnh/Product-App-icons?type=design\\&node-id=501%3A685\\&mode=design\\&t=BCgDXidUN5VZiBwu-1)."
+    },
+    {
+      "type": "guideline",
+      "content": "Loading screens include desktop splash screens, mobile loading screens, and web loaders.\n\nDesktop splash screens celebrate artwork from the Adobe community and are updated at least once a year. All desktop products that have a loading time of longer than 2 seconds, or don't open instantaneously, are required to have a splash screen. This is so a user can understand that there's a loading process happening.\n\nFollow OS-specific conventions for mobile loading screens. View more information about using [Android loading screens](https://wiki.corp.adobe.com/display/AdobeDesign/Android+Launch+Screens)."
+    },
+    {
+      "type": "guideline",
+      "content": "File type and folder illustrations.\n\nOn desktop, product folder icons are branded to help users find any product-related settings. For web and mobile, folders use Spectrum colors to fit better in the experience.\n\nPrimary file types always utilize brand colors, since they're often file formats proprietary to the product (for example, PSD to Photoshop, or AEP to AE). Secondary filetypes are shared across many products, so they take a neutral palette using Spectrum 1 colors.\n\nThe Brand team creates desktop versions of these icons in ICNS (for Mac) and ICO (for Windows) files, while web versions are delivered most often as SVGs. Desktop folders and file types can be found on the [Brand wiki](https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=AdobeDesign\\&title=Adobe+Design+Brand) under individual product delivery pages. View [web folders and file types](https://wiki.corp.adobe.com/pages/viewpage.action?pageId=1994851879)."
+    },
+    {
+      "type": "guideline",
+      "content": "Creative Cloud uses Adobe red and six product-specific colors, each with corresponding light and dark values."
+    },
+    {
+      "type": "guideline",
+      "content": "Document Cloud's colors align to Spectrum. There's three primary product colors plus Adobe red, as well as six secondary colors."
+    },
+    {
+      "type": "guideline",
+      "content": "Experience Cloud's colors align to Spectrum. The foundational apps use cool colors, while the functional apps use warm colors."
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Express uses three colors. Indigo is used for a fill accent color and for highlighting main metaphors. Spectrum gray is the main stroke color."
+    },
+    {
+      "type": "guideline",
+      "content": "Premium and Generative AI gradients.\n\n\\[See embedded content on website]"
+    },
+    {
+      "type": "guideline",
+      "content": "Request assets from the Brand team.\n\nBrand considerations are highly strategic, and coherence is a priority. Don't make your own illustrations, colors, gradients, logos, or other assets. The Brand team will work with you to create assets that align to your product's strategy and timing.\n\nAny new Spectrum 2 assets must be requested directly from the Brand team. It's very important that you do not create your own.\n\nTo view existing S2 Illustrations, visit the [S2 / Illustrations library](https://www.figma.com/design/xGhSI7y1ewp2fEiX5eNOKv/S2-%2F-Illustrations?node-id=1508-8563\\&t=T5G2KGbuUHuqGUnA-0) in Figma. If you need a new illustration, [make a request using Workfront](https://experience.adobe.com/#/@wfadoberm/so:adoberm-Production/workfront/requests/new?activeTab=tab-new-helpRequest\\&projectID=6780593b001a3fa9fe20195fcec6c39a\\&path=)."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/brand/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"]
+}

package/guidelines/colors.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/colors.json",
+  "name": "colors",
+  "title": "Colors",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Once the color scale is determined, lightness stops are input for each color in order to get aliased colors.\n\nWe also needed a couple of darker shades to work for our data visualization palettes (available soon)."
+    },
+    {
+      "type": "guideline",
+      "content": "This update to the color palette improves how colors appear on the solid white primary background, includes brand colors in the palette, and makes our data visualization colors more color vision deficiency-safe."
+    },
+    {
+      "type": "guideline",
+      "content": "The 6.0.0 color system didn’t account for any Adobe product brand colors, despite the colors being so close in hue and saturation. With the Spectrum 2 color update, we’ve shifted some previous colors to be able to include brand colors in the new palette."
+    },
+    {
+      "type": "guideline",
+      "content": "The Leonardo tool generated the color palette by using several key colors, including brand colors. Most color scales are not a single hue key color. Leonardo tends to darken and lighten on either end of the gradient by adding black and white to the key colors, so some are included to ensure a high degree of saturation in the palette. In other cases, some key colors shift the actual hue in order to keep colors bright or recognizable, or shift them to help most users avoid confusion with adjacent colors."
+    },
+    {
+      "type": "guideline",
+      "content": "Once the color scale is determined, lightness stops are input for each color in order to get aliased colors."
+    },
+    {
+      "type": "guideline",
+      "content": "Brand colors are used to generate the Spectrum colors, but brand colors aren’t used one-to-one in the Spectrum palette. Branding is not strictly tied to using Spectrum colors, despite this alignment for Spectrum 2."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 2, colors have shifted blue to be more indigo. This is so we can continue using “blue” aliases but can have an updated, more approachable blue hue that leans more indigo. Moving forward, all products will use blue for the informative and accent semantics. This will help better unify all of Adobe’s products, including Adobe Express."
+    },
+    {
+      "type": "guideline",
+      "content": "This change works nicely with the new integration with brand colors. For example, Photoshop’s blue is somewhere in between the current Spectrum blue and cyan. Pushing blue to be more indigo creates space for cyan to lean more blue and accommodate Photoshop’s blue. Similarly, pushing blue more indigo also means pushing indigo to be more purple, which allows for After Effect’s purple to fit nicely in the new indigo range."
+    },
+    {
+      "type": "guideline",
+      "content": "The lightest shades of yellow and chartreuse were extra-saturated in Spectrum 6.0.0 colors, despite being the same 1.08:1 contrast with all the other colors. The Spectrum 2 update for colors desaturates these shades to keep them more uniform in style."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 now uses solid white as the primary background for light UI. There’s also new variants of components, like the in-line alert, that use color-100 as the background. Having this lighter background introduced the need for a lighter shade for components, so the contrast of the lightest value (color-100) was lowered from 1.08:1 to 1.06:1."
+    },
+    {
+      "type": "guideline",
+      "content": "We also needed a couple of darker shades to work for our data visualization palettes (available soon)."
+    },
+    {
+      "type": "guideline",
+      "content": "The color update for Spectrum 2 also aimed to fix some general issues with the previous color palette. Colors have become brighter and more saturated, contrast has been lightened where possible, and some shades like orange, yellow, and chartreuse have been fixed to appear less muddy."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/colors/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing", "design-tokens", "color"],
+  "related": [{ "ref": "grays" }, { "ref": "background-layers" }]
+}

package/guidelines/containers.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/containers.json",
+  "name": "containers",
+  "title": "Containers",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Examples of containers: two cards with different sizes and layout options, and a select box.\"\n\nAll containers share a set of defined styles.\n\nInternal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns.\n\nThis medium card uses spacing-300 for internal padding.\n\nNote that specific components might have different options and states.\n\nExample of an app frame with a side navigation."
+    },
+    {
+      "type": "guideline",
+      "content": "Containers separate concepts with distinct purposes."
+    },
+    {
+      "type": "guideline",
+      "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."
+    },
+    {
+      "type": "guideline",
+      "content": "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."
+    },
+    {
+      "type": "guideline",
+      "content": "Examples of containers: two cards with different sizes and layout options, and a select box."
+    },
+    {
+      "type": "guideline",
+      "content": "All containers share a set of defined styles."
+    },
+    {
+      "type": "guideline",
+      "content": "Internal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns."
+    },
+    {
+      "type": "guideline",
+      "content": "This medium card uses spacing-300 for internal padding."
+    },
+    {
+      "type": "guideline",
+      "content": "In 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": "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."
+    },
+    {
+      "type": "guideline",
+      "content": "Example of an app frame with a side navigation."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/containers/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [{ "ref": "states" }, { "ref": "s2-app-frame" }]
+}

package/guidelines/developer-overview.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/developer-overview.json",
+  "name": "developer-overview",
+  "title": "Developer overview",
+  "category": "developing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Developer overview" },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 offers a new look and feel that your team will want to adopt for your product. You’ll probably have questions, like “How do we get started?” “How do we migrate?” or “How do we roll this out?”"
+    },
+    {
+      "type": "guideline",
+      "content": "On this page, we’ve addressed some common questions from product developers as Spectrum 2 has rolled out. For more specific, detailed, and up-to-date information about working with a particular implementation, visit its documentation site."
+    },
+    {
+      "type": "guideline",
+      "content": "As of May 2025, Spectrum is in the process of staffing a team to design and build an implementation of Spectrum for Android. Once onboarding wraps up and development begins, the team will begin communication about the status of the new library."
+    },
+    {
+      "type": "guideline",
+      "content": "If your team uses design data (like design tokens or CSS custom properties from Spectrum CSS) in any customizations or overrides in your project, you’ll want to keep track of updates to the implementation or design data resource you’re using and plan for time to verify any breaking changes."
+    },
+    {
+      "type": "guideline",
+      "content": "The most important thing you can do — as noted above — is to limit your usage of hard-coded values, direct usage of global tokens, or overriding global tokens via CSS properties/override APIs. Using the correct aliases ensures that components will continue to point to sensible values. In some cases, you may not even notice the change!"
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/developer-overview/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["developing"],
+  "related": [{ "ref": "motion" }, { "ref": "action-bar" }]
+}

package/guidelines/faqs.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/faqs.json",
+  "name": "faqs",
+  "title": "FAQs",
+  "category": "support",
+  "documentBlocks": [
+    { "type": "purpose", "content": "FAQs" },
+    {
+      "type": "guideline",
+      "content": "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, the majority of emerging products at Adobe have been web-first in recent years."
+    },
+    {
+      "type": "guideline",
+      "content": "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."
+    },
+    {
+      "type": "guideline",
+      "content": "In the meantime, we’ve been partnering with both desktop and mobile 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": "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."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/faqs/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["support"],
+  "related": [{ "ref": "steplist" }, { "ref": "contact" }]
+}

package/guidelines/fonts.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/fonts.json",
+  "name": "fonts",
+  "title": "Fonts",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Fonts" },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Spectrum VF is Spectrum's primary typeface and an update to Adobe Clean, with more modern metrics for usage in UI and product design. It can be used for Latin-based languages as well as Greek and Cyrillic scripts.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/EovtJyyD70JGnU6GAFB39a8B0igit__I1kwIOdOQmRdZRg?e=5PaJvw)"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Spectrum Serif VF is a companion font to Adobe Clean Spectrum VF, for usage in UI and product design. It can be used for Latin-based languages as well as Greek and Cyrillic scripts.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/EtGh4hIaNC5BplE0Fpd42aMBucEzpj85P3-uwnQoSS56Zg?e=7rkwnp)"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean is Adobe's corporate typeface. It can be used for Latin-based languages as well as Greek and Cyrillic scripts.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/EtE69FE1M5NNssssA8MUktcB69v3tyM8x9mz-Qs9sHmG3g?e=cbftOo)"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Serif is a companion font family to Adobe Clean. It covers most Latin-based languages as well as Greek and Cyrillic scripts.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/Ej0pcVTelONCqghOsr5W4EwBWX-tOlQl4jx8iuHPHHatIQ?e=wvXNfq)"
+    },
+    {
+      "type": "guideline",
+      "content": "Source Code Pro is used to display code snippets, either inline with another typeface or as a standalone block.\n\n[Download from Github](https://github.com/adobe-fonts/source-code-pro)"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Han is a version of Adobe Clean supporting ideographic scripts – Chinese (Simplified and Traditional), Japanese, and Korean.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/EsY41oy5pZxNlTrUwlEw-iYBthO9_oR9e1mzSSr_pFLCuw?e=d2Pd6m)"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Thai is used for setting the Thai script, in both looped and loopless styles.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/ErsoedmOVINBqpzUC1CTu8gBfZrAeEQ1pKq6gwHHYIN7Dg?e=8GtE7b)"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Arabic is used for the Arabic language, as well as other languages using the Arabic script, such as Persian.\n\n[Download font](https://adobe.sharepoint.com/sites/Spectrum/Design%20files/Forms/AllItems.aspx?id=%2Fsites%2FSpectrum%2FDesign%20files%2FSpectrum%20fonts%2FAdobe%20Clean%20Arabic\\&p=true\\&ga=1)"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Hebrew is used for modern Hebrew typesetting.\n\n[Download font](https://adobe.sharepoint.com/sites/Spectrum/Design%20files/Forms/AllItems.aspx?id=%2Fsites%2FSpectrum%2FDesign%20files%2FSpectrum%20fonts%2FAdobe%20Clean%20Hebrew\\&p=true\\&ga=1)"
+    },
+    {
+      "type": "guideline",
+      "content": "Adobe Clean Devanagari supports the Devanagari script, which is used for Hindi and Marathi languages.\n\n[Download font](https://adobe.sharepoint.com/sites/Spectrum/Design%20files/Forms/AllItems.aspx?id=%2Fsites%2FSpectrum%2FDesign%20files%2FSpectrum%20fonts%2FAdobe%20Clean%20Devanagari\\&p=true\\&ga=1)"
+    },
+    {
+      "type": "guideline",
+      "content": "These resources are [restricted fonts](https://www.adobe.com/products/type/font-licensing/restricted-fonts.html) for the exclusive use of Adobe products and software. They should only be used through Adobe Fonts (not self-hosted). For instructions, view [Using Adobe Fonts at Adobe](https://wiki.corp.adobe.com/display/fonts/Using+Adobe+Fonts+at+Adobe)."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/fonts/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"]
+}

package/guidelines/grays.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/grays.json",
+  "name": "grays",
+  "title": "Grays",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Adding an extra shade in the low range allowed for us to make more incremental steps between background grays.\n\nThis update affects the layering system. The primary, secondary, and tertiary layers now use grays 25-75 instead of grays 50-100.\n\nField borders are currently the only objects that stay gray-300 in the default state."
+    },
+    {
+      "type": "guideline",
+      "content": "Gray-100 was previously the default background color. With Spectrum 2, gray-25 is the new default background color, which makes the UI brighter and have higher contrast than before."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 includes two new grays — gray-25 and gray-1000 — plus an update to the rest of the 11 grays. This means that there are 13 grays total in the system."
+    },
+    {
+      "type": "guideline",
+      "content": "The Spectrum team collected feedback from product teams across Adobe and determined that the 6.0.0 color system for light UI had an issue with the steps between gray-50 and gray-75. The difference between these two was so slight it was almost imperceivable, making it so that gray-75 was not very useful. Also, the grays from -100 to -400 had too much contrast between each step, making it so that each component state appeared too harsh. Gray-900 was solid black, which was too high of a contrast to be used in text components. Reading solid black text on a solid white background is not ideal; it creates optical strain for a significant number of users."
+    },
+    {
+      "type": "guideline",
+      "content": "Adding two new grays also allowed us to keep a solid black (in light UI) and solid white (in dark UI) without having to keep gray-900 so bright. Now gray-1000 can be used for borders with opacities."
+    },
+    {
+      "type": "guideline",
+      "content": "Adding an extra shade in the low range allowed for us to make more incremental steps between background grays."
+    },
+    {
+      "type": "guideline",
+      "content": "With the 6.0.0 gray system, users working in apps that support dark theme felt the colors were too light and muddy. And, users working in apps that support darkest theme felt the UI was too high-contrast, which makes it difficult to view the screen comfortably for long periods of time. The Spectrum 2 update addresses both issues by combining the dark and darkest themes into a new theme, with brightness values that are between the two existing themes."
+    },
+    {
+      "type": "guideline",
+      "content": "This update affects the layering system. The primary, secondary, and tertiary layers now use grays 25-75 instead of grays 50-100."
+    },
+    {
+      "type": "guideline",
+      "content": "There are no current WCAG or W3C guidelines about if every fill and stroke in every component of every state needs to be 3:1 in contrast. Another thing to consider is that it’s irresponsible to approach the topic of contrast with a “one-size-fits-all” approach: every user has different needs, and design should account for user preference and customization. While one user may need interfaces to be higher contrast to be able to more clearly read and interact with the content, others may prefer interfaces to be lower in contrast (for example, people who are prone to getting migraines)."
+    },
+    {
+      "type": "guideline",
+      "content": "Because of this, Spectrum designs all active states of UI components to be at least 3:1 in contrast in some way with the background (such as a text field’s active state border). And, all objects within components, such as icons, drag handles, and text, are also compliant with the 3:1 or 4.5:1 requirement. Other graphical objects also always use at least 3:1 contrast and are accompanied by textual descriptions. Products using Spectrum should be built in such a way that the interface contrast, coloring, sizing, motion, and more can all be adjustable by the user to fit their own specific needs."
+    },
+    {
+      "type": "guideline",
+      "content": "The Spectrum 2 color update changed gray-900 (which is used by most heading or title text) to slightly lower contrast in both dark and light UI to ensure improved readability for as many users as possible."
+    },
+    {
+      "type": "guideline",
+      "content": "Color updates are breaking changes, so you’ll need to use the following information to responsibly migrate to Spectrum 2 colors. If this isn’t done correctly, backgrounds and components will appear extra dark."
+    },
+    {
+      "type": "guideline",
+      "content": "Field borders are currently the only objects that stay gray-300 in the default state."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/grays/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [{ "ref": "attention-hierarchy" }, { "ref": "colors" }]
+}

package/guidelines/icon-fundamentals.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/icon-fundamentals.json",
+  "name": "icon-fundamentals",
+  "title": "Icon fundamentals",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "### Icons designed to balance personality with function\n\nSpectrum 2 icons are crisp, modern, and clean. They have more personality in the form of rounder corners and motion, and use more playful but modern metaphors when there's the need to have more brand expression (for example, in feature onboarding, marketing, and Learn content). The updated icon style picks up the clean and irreducible style of Spectrum and supports the efforts to bring a unified experience to all Adobe products.\n\n### What's been updated?\n\nMost noticeably, there's been a switch to an outline style from the previous style of icons as being filled. There's also an updated priority for using meaningful metaphors consistently, focusing on content, and helping users navigate across interfaces. This combines into a cohesive theme: **icons signal familiarity**. In a product portfolio as complex as Adobe's, this familiarity is expressed through a consistent and cohesive usage of UI elements, colors, patterns, and icon metaphors.\n\nThe purpose of the updated icon style isn't just about functionality or the Adobe brand: it's about how many intricate details add up to make a big difference in the user experience. Using icon metaphors consistently makes Adobe's products usable."
+    },
+    {
+      "type": "guideline",
+      "content": "How the Spectrum 2 icon set was developed.\n\nSeveral teams collaborated on the overall Spectrum 2 design language updates. One goal for iconography was to build out the current style into a unified icon language, to more closely align with our multi-platform design approach and to look and feel cohesive with the iOS and Android iconography systems. Previous testing and the launch of the outline icon style for Acrobat Modern Viewer and Adobe Express provided insights that informed style refinements."
+    },
+    {
+      "type": "guideline",
+      "content": "Why is this icon set intentionally different?\n\nThis updated icon style aims to connect with a wider audience and a younger user base by pairing a more modern look with a simplified but functional approach. Being mostly monochrome allows for colored accents in badges."
+    },
+    {
+      "type": "guideline",
+      "content": "The Spectrum 2 icon style aligns with contemporary UI and icon trends and is optimized for where the icons are viewed: displays across desktop and mobile. With a bigger focus on high-res screens, we've prioritized spacing and contrast for a more expressive range — leaving behind the problem of pixel-perfect snapping."
+    },
+    {
+      "type": "guideline",
+      "content": "We're also aligning the stroke weight into 4 subdivisions inside the pixel unit to create balanced stroke rendering with a 1.5 px stroke weight. This weight has been proven to work well with mobile retina screens, and it allows for a stronger appearance of the line renderings of icon shapes."
+    },
+    {
+      "type": "guideline",
+      "content": "Icons are outlined. They're mostly monochrome to allow for colored accents in badges for status updates like alerts, information, and notifications. Some icons also use fill and a stroke to illustrate a concept more clearly (for example, the favorite star rating, or third-party logos)."
+    },
+    {
+      "type": "guideline",
+      "content": "Occasionally, there are duotone icons to indicate a perceived change of direction, exclusion, transition, or speed (like in flip horizontal/vertical)."
+    },
+    {
+      "type": "guideline",
+      "content": "Characteristics.\n\nAdobe products often have complex controls, so our icon metaphors are **clear**, **functional**, and **additive to experiences**. They describe tools and topics as simply and accurately as possible. Icons that attempt to relay too much information often become busy and don't read well at small sizes.\n\nThe shapes of the icons themselves are based on predefined **key shapes** to ensure a balanced look and feel across interfaces."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/icon-fundamentals/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"]
+}

package/guidelines/illustrations.json

@@ -0,0 +1,111 @@
+{
+  "$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/introduction.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/introduction.json",
+  "name": "introduction",
+  "title": "Introduction",
+  "category": "fundamentals",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Introduction" },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 came about from the general need for Adobe products to start thinking beyond being purely \"professional\" tools, and from a decision that Adobe should have one design system (not multiple) that is adaptable and flexible enough to support diverse products with diverse users."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum is approachable, friendly, and for the next generation of Adobe products. There's updated colors, icons, states, styles, and more. And, there's even more detailed guidance on design fundamentals like typography and layout."
+    },
+    {
+      "type": "guideline",
+      "content": "Here's an example of how a Spectrum action button has changed over design language updates:"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum is Adobe's design system. It belongs to all of us, and is shaped according to our customers' needs. We'd like to thank everyone who participated in shaping and testing Spectrum 2 for their hard and thoughtful work."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/introduction/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["fundamentals"],
+  "related": [{ "ref": "home" }, { "ref": "principles" }]
+}