@adobe/spectrum-design-data 0.3.0 → 0.6.0

package/guidelines/typography-fundamentals.json

@@ -0,0 +1,145 @@
+{
+  "$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", "kind": "guideline" },
+    { "ref": "fonts", "kind": "guideline" }
+  ]
+}

package/guidelines/using-icons.json

@@ -0,0 +1,110 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/using-icons.json",
+  "name": "using-icons",
+  "title": "Using icons",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Using icons" },
+    {
+      "type": "guideline",
+      "content": "Workflow icons are graphical metaphors or symbols that users interact with to navigate and manipulate objects. They maintain a consistent size and style within each platform to ensure visual harmony and usability. While consistency is key, it is now fairly common to combine different icon scales to support hierarchy and context."
+    },
+    {
+      "type": "guideline",
+      "content": "UI icons are atomic pieces — like arrows, crosses, or chevrons — that are part of a component. They aren’t metaphorical per se, but they’re an indication of how users interact with a component (for example, what happens when you click on a disclosure chevron or drag handle in a panel). Unlike workflow icons, UI icons come in assorted sizes."
+    },
+    {
+      "type": "guideline",
+      "content": "Status badges are indicators that communicate a variety of statuses or states, such as presence, validity, completeness, and more. Premium badges indicate that a feature is only available to paying customers."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 workflow icons come in two sizes per platform, but with one stroke weight: 1.5 px."
+    },
+    {
+      "type": "guideline",
+      "content": "The primary size for Desktop/Web is a canvas of 20 px with the icon being \\~18 px. There’s a secondary size for UI areas — like a layers panel, lists, or cards — which require smaller versions and come in a 16 px canvas with the icon being \\~14 px."
+    },
+    {
+      "type": "guideline",
+      "content": "The equivalent for Mobile is the primary size of the canvas at 24 px with the icon being \\~22 px. The secondary size canvas is 20 px with the icon being \\~18px."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum components, workflow icons scale up or down slightly when they’re used. For example: a 20 px icon in a medium-sized component will be slightly larger in a large-sized component, and smaller in a small-sized component. UI icons come in their respective size range, since Spectrum components treat these differently."
+    },
+    {
+      "type": "guideline",
+      "content": "“S2” is the prefix for Spectrum 2 icons."
+    },
+    {
+      "type": "guideline",
+      "content": "Here’s a breakdown of each part of the icon naming convention:"
+    },
+    {
+      "type": "guideline",
+      "content": "An example of the naming convention for Spectrum 2 (S2) icons."
+    },
+    {
+      "type": "guideline",
+      "content": "Keeping one stroke weight consistent within a size range helps to balance out and contrast the visual weight. For Web and Desktop platforms, icons are designed at a 20 px canvas as default with a 1.5 px stroke, resulting in a 1.64 px stroke when sized up to 24 px for mobile. This helps keep a unified look, and it builds icons efficiently since it’s not necessary to redraw them for each platform."
+    },
+    {
+      "type": "guideline",
+      "content": "All icons with angles get a 1.5 px rounding treatment to achieve a rounder appearance. Inner corners are slightly rounded, and all stroke ends have rounded end caps. By default, the corner radius can be decreased in case a metaphor requires pointy edges."
+    },
+    {
+      "type": "guideline",
+      "content": "Icon designs include a safe area to ensure there’s flexibility for finding the best positioning and balance in a layout. The main shape should be centered, and modifier placement is primarily at the bottom right corner of the canvas. Notification dots appear at the top right corner (these are mostly added programmatically)."
+    },
+    {
+      "type": "guideline",
+      "content": "The intersections of badge/modifier placement."
+    },
+    {
+      "type": "guideline",
+      "content": "The vertical spacing between icons and text is adjusted to create balance."
+    },
+    {
+      "type": "guideline",
+      "content": "For example: in a medium-sized component, shifting the text box 1 px up and the icon box 1 px down inside a button better balances out the appearance and refines the relationship with text in Adobe Clean Medium."
+    },
+    {
+      "type": "guideline",
+      "content": "An example of icon and text alignment in a button."
+    },
+    {
+      "type": "guideline",
+      "content": "An example of a quiet action button with a 16 px icon."
+    },
+    {
+      "type": "guideline",
+      "content": "The new SVG native format for icons allows for automatic tinting to match different states (hover, selected, etc.) and can programmatically switch depending on UI brightness or color theme. It’s not about tinting the whole SVG in one color, but tinting single elements inside the SVG. To do this, the new SVGs use named CSS variables to set color values for every element. There will be Spectrum tokens for this, so automatic tinting will work out-of-the-box in any product using Spectrum CSS."
+    },
+    {
+      "type": "guideline",
+      "content": "For other apps, it will be easier to add the needed color information to their own CSS. Transparencies will be used to achieve tints of the primary icon color, making it easy to use at least the gray tone when it’s not possible to work with CSS variables."
+    },
+    {
+      "type": "guideline",
+      "content": "Example of SVG code. The highlighted sections show that two dynamic colors will be changed programmatically, and that there's a white exclamation mark which should always be displayed in white."
+    },
+    {
+      "type": "guideline",
+      "content": "If you diverge from Spectrum colors, you’ll need to make sure that your design has enough contrast between the icon and the background. Use subtle fills in light and dark themes to maintain legibility without overpowering the UI. Make sure that the icons remain legible and distinguishable across varied backgrounds and themes."
+    },
+    {
+      "type": "guideline",
+      "content": "The library currently only includes a subset of icons, and are for mock-up purposes only. If you need to create a mock-up with an icon that isn’t available yet, just use a placeholder icon. Don’t use unapproved icons in your work (for example, downloaded from Noun Project, or icons you’ve created yourself)."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/using-icons/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [
+    { "ref": "icon-fundamentals", "kind": "guideline" },
+    { "ref": "illustrations", "kind": "guideline" }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-design-data",
-  "version": "0.3.0",
+  "version": "0.6.0",
   "description": "Spectrum design tokens in cascade format — the canonical source of truth for @adobe/spectrum-tokens",
   "type": "module",
   "repository": {
@@ -22,6 +22,8 @@
     "./components/*": "./components/*.json",
     "./fields/*": "./fields/*.json",
     "./mode-sets/*": "./mode-sets/*.json",
+    "./guidelines/manifest.json": "./guidelines/manifest.json",
+    "./guidelines/*": "./guidelines/*.json",
     "./registry/sizes.json": "./registry/sizes.json",
     "./registry/states.json": "./registry/states.json",
     "./registry/variants.json": "./registry/variants.json",
@@ -54,13 +56,14 @@
     "components/",
     "fields/",
     "mode-sets/",
+    "guidelines/",
     "registry/",
     "README.md"
   ],
   "devDependencies": {
     "ajv": "^8.12.0",
     "ajv-formats": "^3.0.1",
-    "@adobe/design-data-spec": "2.2.0"
+    "@adobe/design-data-spec": "2.4.0"
   },
   "scripts": {}
 }