@adobe/spectrum-design-data 3.3.0 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/accordion.json +32 -102
- package/components/action-bar.json +9 -23
- package/components/action-button.json +52 -92
- package/components/action-group.json +18 -129
- package/components/alert-banner.json +8 -27
- package/components/alert-dialog.json +45 -55
- package/components/avatar-group.json +20 -50
- package/components/avatar.json +44 -123
- package/components/badge.json +66 -160
- package/components/breadcrumbs.json +26 -100
- package/components/button-group.json +32 -63
- package/components/button.json +74 -105
- package/components/calendar.json +8 -67
- package/components/cards.json +31 -46
- package/components/checkbox-group.json +22 -84
- package/components/checkbox.json +33 -96
- package/components/close-button.json +31 -73
- package/components/coach-indicator.json +14 -44
- package/components/coach-mark.json +8 -26
- package/components/color-area.json +20 -93
- package/components/color-handle.json +25 -38
- package/components/color-loupe.json +18 -18
- package/components/color-slider.json +26 -122
- package/components/color-wheel.json +17 -84
- package/components/combo-box.json +56 -188
- package/components/contextual-help.json +87 -126
- package/components/date-picker.json +24 -120
- package/components/divider.json +25 -38
- package/components/drop-zone.json +25 -37
- package/components/field-label.json +22 -59
- package/components/help-text.json +16 -53
- package/components/illustrated-message.json +21 -72
- package/components/in-line-alert.json +13 -53
- package/components/link.json +31 -63
- package/components/list-view.json +15 -73
- package/components/menu.json +51 -180
- package/components/meter.json +35 -76
- package/components/number-field.json +34 -168
- package/components/picker.json +48 -187
- package/components/popover.json +47 -123
- package/components/progress-bar.json +33 -105
- package/components/progress-circle.json +25 -55
- package/components/radio-button.json +14 -67
- package/components/radio-group.json +34 -131
- package/components/rating.json +9 -38
- package/components/search-field.json +40 -125
- package/components/segmented-control.json +27 -69
- package/components/select-box.json +29 -96
- package/components/side-navigation.json +28 -69
- package/components/slider.json +45 -154
- package/components/standard-dialog.json +16 -88
- package/components/status-light.json +51 -133
- package/components/steplist.json +5 -24
- package/components/swatch-group.json +19 -55
- package/components/swatch.json +24 -79
- package/components/switch.json +42 -79
- package/components/table.json +26 -73
- package/components/tabs.json +35 -52
- package/components/tag-field.json +14 -60
- package/components/tag-group.json +22 -55
- package/components/tag.json +27 -77
- package/components/takeover-dialog.json +10 -61
- package/components/text-area.json +55 -204
- package/components/text-field.json +48 -169
- package/components/thumbnail.json +22 -63
- package/components/toast.json +30 -47
- package/components/tooltip.json +37 -84
- package/components/tree-view.json +51 -146
- package/fields/structure.json +1 -2
- package/guidelines/ai-resource-guide.json +42 -0
- package/guidelines/app-frame-overview.json +45 -44
- package/guidelines/applying-the-type-system.json +71 -0
- package/guidelines/attention-hierarchy.json +13 -22
- package/guidelines/background-layers.json +84 -10
- package/guidelines/bi-directionality.json +57 -0
- package/guidelines/border-width.json +70 -0
- package/guidelines/brand.json +24 -12
- package/guidelines/cognitive.json +229 -0
- package/guidelines/colors.json +55 -17
- package/guidelines/component-spacing.json +65 -0
- package/guidelines/contact-us.json +27 -0
- package/guidelines/containers.json +21 -28
- package/guidelines/content-area-browsing-context.json +73 -0
- package/guidelines/creating-bluelines-browsing-context.json +71 -0
- package/guidelines/design-tokens.json +186 -0
- package/guidelines/developer-overview.json +33 -9
- package/guidelines/drop-shadow.json +76 -0
- package/guidelines/faqs.json +100 -9
- package/guidelines/fonts.json +33 -14
- package/guidelines/grammar-and-mechanics.json +276 -0
- package/guidelines/grays.json +17 -44
- package/guidelines/header-browsing-context.json +40 -0
- package/guidelines/icon-fundamentals.json +7 -18
- package/guidelines/illustration.json +120 -0
- package/guidelines/in-product-word-list.json +25 -0
- package/guidelines/inclusive-design.json +101 -0
- package/guidelines/inclusive-ux-writing.json +34 -0
- package/guidelines/internationalization.json +103 -0
- package/guidelines/layout-spacing.json +39 -0
- package/guidelines/manifest.json +280 -16
- package/guidelines/motion.json +18 -13
- package/guidelines/object-styles-overview.json +17 -0
- package/guidelines/principles.json +7 -8
- package/guidelines/resources.json +29 -15
- package/guidelines/rounding.json +85 -0
- package/guidelines/side-navigation-browsing-context.json +74 -0
- package/guidelines/spacing-overview.json +78 -0
- package/guidelines/states.json +16 -11
- package/guidelines/support.json +125 -0
- package/guidelines/typography-overview.json +39 -0
- package/guidelines/typography-system.json +212 -0
- package/guidelines/using-icons.json +32 -47
- package/guidelines/voice-and-tone.json +51 -0
- package/guidelines/whats-new.json +21 -0
- package/guidelines/writing-about-people.json +99 -0
- package/guidelines/writing-for-errors.json +140 -0
- package/guidelines/writing-for-onboarding.json +123 -0
- package/guidelines/writing-for-readability.json +66 -0
- package/guidelines/writing-with-visuals.json +78 -0
- package/package.json +2 -2
- package/tokens/layout.tokens.json +88 -0
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/layout-spacing.json",
|
|
4
|
+
"name": "layout-spacing",
|
|
5
|
+
"title": "Layout spacing",
|
|
6
|
+
"category": "designing",
|
|
7
|
+
"documentBlocks": [
|
|
8
|
+
{ "type": "purpose", "content": "Layout spacing" },
|
|
9
|
+
{
|
|
10
|
+
"type": "guideline",
|
|
11
|
+
"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://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_115ea12e4cac857c4b8d7fccac0293a81ae114447.png?width=750&format=png&optimize=medium)"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"type": "guideline",
|
|
15
|
+
"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://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1a16efb69dea68171c4c4dcbcff449b7c21eaa2ad.png?width=750&format=png&optimize=medium)"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"type": "guideline",
|
|
19
|
+
"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://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."
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"type": "guideline",
|
|
23
|
+
"content": "Use global tokens for layout spacing. Token Value spacing-25 1px spacing-50 2px spacing-75 4px spacing-85 6px spacing-100 8px spacing-200 12px spacing-300 16px spacing-350 20px spacing-400 24px spacing-500 32px spacing-600 40px spacing-700 48px spacing-750 56px spacing-800 64px spacing-900 80px spacing-1000 96px"
|
|
24
|
+
}
|
|
25
|
+
],
|
|
26
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/layout-spacing",
|
|
27
|
+
"lastUpdated": "2026-08-13",
|
|
28
|
+
"status": "published",
|
|
29
|
+
"tags": [
|
|
30
|
+
"layout spacing",
|
|
31
|
+
"global tokens",
|
|
32
|
+
"geometric progression",
|
|
33
|
+
"semantic tokens",
|
|
34
|
+
"8 px grid",
|
|
35
|
+
"linear progression",
|
|
36
|
+
"perceptual spacing",
|
|
37
|
+
"spacing scale"
|
|
38
|
+
]
|
|
39
|
+
}
|
package/guidelines/manifest.json
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"guidelines": [
|
|
3
|
+
{
|
|
4
|
+
"slug": "ai-resource-guide",
|
|
5
|
+
"title": "AI resource guide",
|
|
6
|
+
"category": "support",
|
|
7
|
+
"status": "published",
|
|
8
|
+
"sourceUrl": "https://spectrum.adobe.com/support/ai-resource-guide",
|
|
9
|
+
"file": "guidelines/ai-resource-guide.json"
|
|
10
|
+
},
|
|
3
11
|
{
|
|
4
12
|
"slug": "app-frame-content-area",
|
|
5
13
|
"title": "App frame content area (browsing context)",
|
|
@@ -29,7 +37,7 @@
|
|
|
29
37
|
"title": "App frame",
|
|
30
38
|
"category": "designing",
|
|
31
39
|
"status": "published",
|
|
32
|
-
"sourceUrl": "https://
|
|
40
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/overview",
|
|
33
41
|
"file": "guidelines/app-frame-overview.json"
|
|
34
42
|
},
|
|
35
43
|
{
|
|
@@ -40,12 +48,20 @@
|
|
|
40
48
|
"sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-side-navigation/",
|
|
41
49
|
"file": "guidelines/app-frame-side-navigation.json"
|
|
42
50
|
},
|
|
51
|
+
{
|
|
52
|
+
"slug": "applying-the-type-system",
|
|
53
|
+
"title": "Applying the type system",
|
|
54
|
+
"category": "designing",
|
|
55
|
+
"status": "published",
|
|
56
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/typography/applying-the-type-system",
|
|
57
|
+
"file": "guidelines/applying-the-type-system.json"
|
|
58
|
+
},
|
|
43
59
|
{
|
|
44
60
|
"slug": "attention-hierarchy",
|
|
45
61
|
"title": "Attention hierarchy",
|
|
46
62
|
"category": "designing",
|
|
47
63
|
"status": "published",
|
|
48
|
-
"sourceUrl": "https://
|
|
64
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/attention-hierarchy",
|
|
49
65
|
"file": "guidelines/attention-hierarchy.json"
|
|
50
66
|
},
|
|
51
67
|
{
|
|
@@ -53,47 +69,119 @@
|
|
|
53
69
|
"title": "Background layers",
|
|
54
70
|
"category": "designing",
|
|
55
71
|
"status": "published",
|
|
56
|
-
"sourceUrl": "https://
|
|
72
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/color/background-layers",
|
|
57
73
|
"file": "guidelines/background-layers.json"
|
|
58
74
|
},
|
|
75
|
+
{
|
|
76
|
+
"slug": "bi-directionality",
|
|
77
|
+
"title": "Bi-directionality",
|
|
78
|
+
"category": "designing",
|
|
79
|
+
"status": "published",
|
|
80
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/bi-directionality",
|
|
81
|
+
"file": "guidelines/bi-directionality.json"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"slug": "border-width",
|
|
85
|
+
"title": "Border width",
|
|
86
|
+
"category": "designing",
|
|
87
|
+
"status": "published",
|
|
88
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/border-width",
|
|
89
|
+
"file": "guidelines/border-width.json"
|
|
90
|
+
},
|
|
59
91
|
{
|
|
60
92
|
"slug": "brand",
|
|
61
93
|
"title": "Brand",
|
|
62
94
|
"category": "designing",
|
|
63
95
|
"status": "published",
|
|
64
|
-
"sourceUrl": "https://
|
|
96
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/brand",
|
|
65
97
|
"file": "guidelines/brand.json"
|
|
66
98
|
},
|
|
99
|
+
{
|
|
100
|
+
"slug": "cognitive",
|
|
101
|
+
"title": "Cognitive",
|
|
102
|
+
"category": "designing",
|
|
103
|
+
"status": "published",
|
|
104
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/cognitive",
|
|
105
|
+
"file": "guidelines/cognitive.json"
|
|
106
|
+
},
|
|
67
107
|
{
|
|
68
108
|
"slug": "colors",
|
|
69
109
|
"title": "Colors",
|
|
70
110
|
"category": "designing",
|
|
71
111
|
"status": "published",
|
|
72
|
-
"sourceUrl": "https://
|
|
112
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/color/colors",
|
|
73
113
|
"file": "guidelines/colors.json"
|
|
74
114
|
},
|
|
115
|
+
{
|
|
116
|
+
"slug": "component-spacing",
|
|
117
|
+
"title": "Component spacing",
|
|
118
|
+
"category": "designing",
|
|
119
|
+
"status": "published",
|
|
120
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/component-spacing",
|
|
121
|
+
"file": "guidelines/component-spacing.json"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"slug": "contact-us",
|
|
125
|
+
"title": "Contact us",
|
|
126
|
+
"category": "support",
|
|
127
|
+
"status": "published",
|
|
128
|
+
"sourceUrl": "https://spectrum.adobe.com/support/contact-us",
|
|
129
|
+
"file": "guidelines/contact-us.json"
|
|
130
|
+
},
|
|
75
131
|
{
|
|
76
132
|
"slug": "containers",
|
|
77
133
|
"title": "Containers",
|
|
78
134
|
"category": "designing",
|
|
79
135
|
"status": "published",
|
|
80
|
-
"sourceUrl": "https://
|
|
136
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/containers",
|
|
81
137
|
"file": "guidelines/containers.json"
|
|
82
138
|
},
|
|
139
|
+
{
|
|
140
|
+
"slug": "content-area-browsing-context",
|
|
141
|
+
"title": "Browsing context: Content area",
|
|
142
|
+
"category": "designing",
|
|
143
|
+
"status": "published",
|
|
144
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/content-area-browsing-context",
|
|
145
|
+
"file": "guidelines/content-area-browsing-context.json"
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"slug": "creating-bluelines-browsing-context",
|
|
149
|
+
"title": "Creating bluelines",
|
|
150
|
+
"category": "designing",
|
|
151
|
+
"status": "published",
|
|
152
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/creating-bluelines-browsing-context",
|
|
153
|
+
"file": "guidelines/creating-bluelines-browsing-context.json"
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"slug": "design-tokens",
|
|
157
|
+
"title": "Design tokens",
|
|
158
|
+
"category": "designing",
|
|
159
|
+
"status": "published",
|
|
160
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/design-data/design-tokens",
|
|
161
|
+
"file": "guidelines/design-tokens.json"
|
|
162
|
+
},
|
|
83
163
|
{
|
|
84
164
|
"slug": "developer-overview",
|
|
85
165
|
"title": "Developer overview",
|
|
86
166
|
"category": "developing",
|
|
87
167
|
"status": "published",
|
|
88
|
-
"sourceUrl": "https://
|
|
168
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/developer-overview",
|
|
89
169
|
"file": "guidelines/developer-overview.json"
|
|
90
170
|
},
|
|
171
|
+
{
|
|
172
|
+
"slug": "drop-shadow",
|
|
173
|
+
"title": "Drop shadow",
|
|
174
|
+
"category": "designing",
|
|
175
|
+
"status": "published",
|
|
176
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/drop-shadow",
|
|
177
|
+
"file": "guidelines/drop-shadow.json"
|
|
178
|
+
},
|
|
91
179
|
{
|
|
92
180
|
"slug": "faqs",
|
|
93
181
|
"title": "FAQs",
|
|
94
182
|
"category": "support",
|
|
95
183
|
"status": "published",
|
|
96
|
-
"sourceUrl": "https://
|
|
184
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/faqs",
|
|
97
185
|
"file": "guidelines/faqs.json"
|
|
98
186
|
},
|
|
99
187
|
{
|
|
@@ -101,25 +189,49 @@
|
|
|
101
189
|
"title": "Fonts",
|
|
102
190
|
"category": "designing",
|
|
103
191
|
"status": "published",
|
|
104
|
-
"sourceUrl": "https://
|
|
192
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/fonts",
|
|
105
193
|
"file": "guidelines/fonts.json"
|
|
106
194
|
},
|
|
195
|
+
{
|
|
196
|
+
"slug": "grammar-and-mechanics",
|
|
197
|
+
"title": "Grammar and mechanics",
|
|
198
|
+
"category": "designing",
|
|
199
|
+
"status": "published",
|
|
200
|
+
"sourceUrl": "https://spectrum.adobe.com/content/grammar-and-mechanics",
|
|
201
|
+
"file": "guidelines/grammar-and-mechanics.json"
|
|
202
|
+
},
|
|
107
203
|
{
|
|
108
204
|
"slug": "grays",
|
|
109
205
|
"title": "Grays",
|
|
110
206
|
"category": "designing",
|
|
111
207
|
"status": "published",
|
|
112
|
-
"sourceUrl": "https://
|
|
208
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/color/grays",
|
|
113
209
|
"file": "guidelines/grays.json"
|
|
114
210
|
},
|
|
211
|
+
{
|
|
212
|
+
"slug": "header-browsing-context",
|
|
213
|
+
"title": "Browsing context: Header",
|
|
214
|
+
"category": "designing",
|
|
215
|
+
"status": "published",
|
|
216
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/header-browsing-context",
|
|
217
|
+
"file": "guidelines/header-browsing-context.json"
|
|
218
|
+
},
|
|
115
219
|
{
|
|
116
220
|
"slug": "icon-fundamentals",
|
|
117
221
|
"title": "Icon fundamentals",
|
|
118
222
|
"category": "designing",
|
|
119
223
|
"status": "published",
|
|
120
|
-
"sourceUrl": "https://
|
|
224
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/icons-and-illustrations/icon-fundamentals",
|
|
121
225
|
"file": "guidelines/icon-fundamentals.json"
|
|
122
226
|
},
|
|
227
|
+
{
|
|
228
|
+
"slug": "illustration",
|
|
229
|
+
"title": "Illustration",
|
|
230
|
+
"category": "designing",
|
|
231
|
+
"status": "published",
|
|
232
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/icons-and-illustrations/illustration",
|
|
233
|
+
"file": "guidelines/illustration.json"
|
|
234
|
+
},
|
|
123
235
|
{
|
|
124
236
|
"slug": "illustrations",
|
|
125
237
|
"title": "Illustrations",
|
|
@@ -128,6 +240,38 @@
|
|
|
128
240
|
"sourceUrl": "https://s2.spectrum.corp.adobe.com/page/illustrations/",
|
|
129
241
|
"file": "guidelines/illustrations.json"
|
|
130
242
|
},
|
|
243
|
+
{
|
|
244
|
+
"slug": "in-product-word-list",
|
|
245
|
+
"title": "In-product word list",
|
|
246
|
+
"category": "designing",
|
|
247
|
+
"status": "published",
|
|
248
|
+
"sourceUrl": "https://spectrum.adobe.com/content/in-product-word-list",
|
|
249
|
+
"file": "guidelines/in-product-word-list.json"
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
"slug": "inclusive-design",
|
|
253
|
+
"title": "Inclusive design",
|
|
254
|
+
"category": "designing",
|
|
255
|
+
"status": "published",
|
|
256
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/inclusive-design",
|
|
257
|
+
"file": "guidelines/inclusive-design.json"
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"slug": "inclusive-ux-writing",
|
|
261
|
+
"title": "Inclusive UX writing",
|
|
262
|
+
"category": "designing",
|
|
263
|
+
"status": "published",
|
|
264
|
+
"sourceUrl": "https://spectrum.adobe.com/content/language-and-inclusivity/inclusive-ux-writing",
|
|
265
|
+
"file": "guidelines/inclusive-ux-writing.json"
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"slug": "internationalization",
|
|
269
|
+
"title": "Internationalization",
|
|
270
|
+
"category": "designing",
|
|
271
|
+
"status": "published",
|
|
272
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/inclusivity/internationalization",
|
|
273
|
+
"file": "guidelines/internationalization.json"
|
|
274
|
+
},
|
|
131
275
|
{
|
|
132
276
|
"slug": "introduction",
|
|
133
277
|
"title": "Introduction",
|
|
@@ -136,12 +280,20 @@
|
|
|
136
280
|
"sourceUrl": "https://s2.spectrum.corp.adobe.com/page/introduction/",
|
|
137
281
|
"file": "guidelines/introduction.json"
|
|
138
282
|
},
|
|
283
|
+
{
|
|
284
|
+
"slug": "layout-spacing",
|
|
285
|
+
"title": "Layout spacing",
|
|
286
|
+
"category": "designing",
|
|
287
|
+
"status": "published",
|
|
288
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/layout-spacing",
|
|
289
|
+
"file": "guidelines/layout-spacing.json"
|
|
290
|
+
},
|
|
139
291
|
{
|
|
140
292
|
"slug": "motion",
|
|
141
293
|
"title": "Motion",
|
|
142
294
|
"category": "designing",
|
|
143
295
|
"status": "published",
|
|
144
|
-
"sourceUrl": "https://
|
|
296
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/behavior/motion",
|
|
145
297
|
"file": "guidelines/motion.json"
|
|
146
298
|
},
|
|
147
299
|
{
|
|
@@ -152,12 +304,20 @@
|
|
|
152
304
|
"sourceUrl": "https://s2.spectrum.corp.adobe.com/page/object-styles/",
|
|
153
305
|
"file": "guidelines/object-styles.json"
|
|
154
306
|
},
|
|
307
|
+
{
|
|
308
|
+
"slug": "object-styles-overview",
|
|
309
|
+
"title": "Object styles",
|
|
310
|
+
"category": "designing",
|
|
311
|
+
"status": "published",
|
|
312
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/overview",
|
|
313
|
+
"file": "guidelines/object-styles-overview.json"
|
|
314
|
+
},
|
|
155
315
|
{
|
|
156
316
|
"slug": "principles",
|
|
157
317
|
"title": "Principles",
|
|
158
318
|
"category": "fundamentals",
|
|
159
319
|
"status": "published",
|
|
160
|
-
"sourceUrl": "https://
|
|
320
|
+
"sourceUrl": "https://spectrum.adobe.com/getting-started/principles",
|
|
161
321
|
"file": "guidelines/principles.json"
|
|
162
322
|
},
|
|
163
323
|
{
|
|
@@ -165,9 +325,25 @@
|
|
|
165
325
|
"title": "Resources",
|
|
166
326
|
"category": "support",
|
|
167
327
|
"status": "published",
|
|
168
|
-
"sourceUrl": "https://
|
|
328
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/resources",
|
|
169
329
|
"file": "guidelines/resources.json"
|
|
170
330
|
},
|
|
331
|
+
{
|
|
332
|
+
"slug": "rounding",
|
|
333
|
+
"title": "Rounding",
|
|
334
|
+
"category": "designing",
|
|
335
|
+
"status": "published",
|
|
336
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/rounding",
|
|
337
|
+
"file": "guidelines/rounding.json"
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"slug": "side-navigation-browsing-context",
|
|
341
|
+
"title": "Browsing context: Side nav",
|
|
342
|
+
"category": "designing",
|
|
343
|
+
"status": "published",
|
|
344
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/side-navigation-browsing-context",
|
|
345
|
+
"file": "guidelines/side-navigation-browsing-context.json"
|
|
346
|
+
},
|
|
171
347
|
{
|
|
172
348
|
"slug": "spacing",
|
|
173
349
|
"title": "Spacing",
|
|
@@ -176,14 +352,30 @@
|
|
|
176
352
|
"sourceUrl": "https://s2.spectrum.corp.adobe.com/page/spacing/",
|
|
177
353
|
"file": "guidelines/spacing.json"
|
|
178
354
|
},
|
|
355
|
+
{
|
|
356
|
+
"slug": "spacing-overview",
|
|
357
|
+
"title": "Spacing",
|
|
358
|
+
"category": "designing",
|
|
359
|
+
"status": "published",
|
|
360
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/overview",
|
|
361
|
+
"file": "guidelines/spacing-overview.json"
|
|
362
|
+
},
|
|
179
363
|
{
|
|
180
364
|
"slug": "states",
|
|
181
365
|
"title": "States",
|
|
182
366
|
"category": "designing",
|
|
183
367
|
"status": "published",
|
|
184
|
-
"sourceUrl": "https://
|
|
368
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/behavior/states",
|
|
185
369
|
"file": "guidelines/states.json"
|
|
186
370
|
},
|
|
371
|
+
{
|
|
372
|
+
"slug": "support",
|
|
373
|
+
"title": "FAQs",
|
|
374
|
+
"category": "support",
|
|
375
|
+
"status": "published",
|
|
376
|
+
"sourceUrl": "https://spectrum.adobe.com/support",
|
|
377
|
+
"file": "guidelines/support.json"
|
|
378
|
+
},
|
|
187
379
|
{
|
|
188
380
|
"slug": "typography-fundamentals",
|
|
189
381
|
"title": "Typography fundamentals",
|
|
@@ -192,13 +384,85 @@
|
|
|
192
384
|
"sourceUrl": "https://s2.spectrum.corp.adobe.com/page/typography-fundamentals/",
|
|
193
385
|
"file": "guidelines/typography-fundamentals.json"
|
|
194
386
|
},
|
|
387
|
+
{
|
|
388
|
+
"slug": "typography-overview",
|
|
389
|
+
"title": "Typography",
|
|
390
|
+
"category": "designing",
|
|
391
|
+
"status": "published",
|
|
392
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/typography/overview",
|
|
393
|
+
"file": "guidelines/typography-overview.json"
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"slug": "typography-system",
|
|
397
|
+
"title": "Typography system",
|
|
398
|
+
"category": "designing",
|
|
399
|
+
"status": "published",
|
|
400
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/typography/typography-system",
|
|
401
|
+
"file": "guidelines/typography-system.json"
|
|
402
|
+
},
|
|
195
403
|
{
|
|
196
404
|
"slug": "using-icons",
|
|
197
405
|
"title": "Using icons",
|
|
198
406
|
"category": "designing",
|
|
199
407
|
"status": "published",
|
|
200
|
-
"sourceUrl": "https://
|
|
408
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/icons-and-illustrations/using-icons",
|
|
201
409
|
"file": "guidelines/using-icons.json"
|
|
410
|
+
},
|
|
411
|
+
{
|
|
412
|
+
"slug": "voice-and-tone",
|
|
413
|
+
"title": "Voice and tone",
|
|
414
|
+
"category": "designing",
|
|
415
|
+
"status": "published",
|
|
416
|
+
"sourceUrl": "https://spectrum.adobe.com/content/voice-and-tone",
|
|
417
|
+
"file": "guidelines/voice-and-tone.json"
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
"slug": "whats-new",
|
|
421
|
+
"title": "A new home for Spectrum",
|
|
422
|
+
"category": "fundamentals",
|
|
423
|
+
"status": "published",
|
|
424
|
+
"sourceUrl": "https://spectrum.adobe.com/getting-started/whats-new",
|
|
425
|
+
"file": "guidelines/whats-new.json"
|
|
426
|
+
},
|
|
427
|
+
{
|
|
428
|
+
"slug": "writing-about-people",
|
|
429
|
+
"title": "Writing about people",
|
|
430
|
+
"category": "designing",
|
|
431
|
+
"status": "published",
|
|
432
|
+
"sourceUrl": "https://spectrum.adobe.com/content/language-and-inclusivity/writing-about-people",
|
|
433
|
+
"file": "guidelines/writing-about-people.json"
|
|
434
|
+
},
|
|
435
|
+
{
|
|
436
|
+
"slug": "writing-for-errors",
|
|
437
|
+
"title": "Writing for errors",
|
|
438
|
+
"category": "designing",
|
|
439
|
+
"status": "published",
|
|
440
|
+
"sourceUrl": "https://spectrum.adobe.com/content/writing-for-errors",
|
|
441
|
+
"file": "guidelines/writing-for-errors.json"
|
|
442
|
+
},
|
|
443
|
+
{
|
|
444
|
+
"slug": "writing-for-onboarding",
|
|
445
|
+
"title": "Writing for onboarding",
|
|
446
|
+
"category": "designing",
|
|
447
|
+
"status": "published",
|
|
448
|
+
"sourceUrl": "https://spectrum.adobe.com/content/writing-for-onboarding",
|
|
449
|
+
"file": "guidelines/writing-for-onboarding.json"
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
"slug": "writing-for-readability",
|
|
453
|
+
"title": "Writing for readability",
|
|
454
|
+
"category": "designing",
|
|
455
|
+
"status": "published",
|
|
456
|
+
"sourceUrl": "https://spectrum.adobe.com/content/language-and-inclusivity/writing-for-readability",
|
|
457
|
+
"file": "guidelines/writing-for-readability.json"
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"slug": "writing-with-visuals",
|
|
461
|
+
"title": "Writing with visuals",
|
|
462
|
+
"category": "designing",
|
|
463
|
+
"status": "published",
|
|
464
|
+
"sourceUrl": "https://spectrum.adobe.com/content/language-and-inclusivity/writing-with-visuals",
|
|
465
|
+
"file": "guidelines/writing-with-visuals.json"
|
|
202
466
|
}
|
|
203
467
|
]
|
|
204
468
|
}
|
package/guidelines/motion.json
CHANGED
|
@@ -7,35 +7,40 @@
|
|
|
7
7
|
"documentBlocks": [
|
|
8
8
|
{
|
|
9
9
|
"type": "purpose",
|
|
10
|
-
"content": "Spectrum 2 builds on top of the
|
|
10
|
+
"content": "Spectrum 2 builds on top of the Spectrum 1 motion guidelines for the design system: that motion is always purposeful, intuitive, and seamless. With this update, we also use motion to draw attention to areas where we want to add personality. No matter what, the usage of motion should be adding meaning to an experience. And, motion over large surface areas needs to support browser and system settings for reduced motion. Motion is also an important part of brand expression. Just like tone in language, tone in motion can range from formal and direct to lighthearted and subtle. Motion in Spectrum 2 is categorized into the areas of directional motion, interaction motion, and wayfinding motion. Wayfinding motion is still in development."
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
13
|
"type": "guideline",
|
|
14
|
-
"content": "
|
|
14
|
+
"content": "The directions in which motion happens communicate intentional meanings. There are three basic categories of directional motion, each used for their own purpose."
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
17
|
"type": "guideline",
|
|
18
|
-
"content": "
|
|
18
|
+
"content": "Linear motion indicates forward movement and a sentiment of progress. When emphasizing movement to a different section, page, or item (such as a button or link), the destination is readily clear and minimally disruptive. If you’re creating a custom animation, consider RTL (right-to-left) languages and also how the meaning of motion might differ depending on cultural context. Progress bars communicate forward progression. They work well to show determinate (finite) progress. Image: A labeled progress bar reading \"Progress bar label,\" approximately 60% filled in blue with the remaining portion shown in gray. (source: https://spectrum.adobe.com/foundations/behavior/media_1410ad434da4df2e5f27e65cb39cf6e9dd762b988.png?width=750&format=png&optimize=medium) Image: A labeled progress bar reading \"Progress bar label,\" fully filled in blue from end to end, indicating 100% completion. (source: https://spectrum.adobe.com/foundations/behavior/media_1976d0b4d46d779f561e43f584769fcdb1ee46257.png?width=750&format=png&optimize=medium) In this example of a button, a static arrow icon facing toward the right already indicates forward movement. When linear motion is added to the arrow upon hover, the movement is emphasized. Use this button option with motion sparingly, only on the most important action(s) on a page. Image: A black pill-shaped 'Next' button with a right arrow icon, shown with a cursor positioned just below it, before hover. (source: https://spectrum.adobe.com/foundations/behavior/media_13c1db2becccdae3e3c51faee90f9f0f7223a79ee.png?width=750&format=png&optimize=medium) Image: The same black 'Next' button, now with the cursor positioned directly on top of it in a hover or click state. (source: https://spectrum.adobe.com/foundations/behavior/media_13780e91120d63ef14c91f7ca97c5e88d49481814.png?width=750&format=png&optimize=medium)"
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"type": "guideline",
|
|
22
|
-
"content": "
|
|
22
|
+
"content": "Diagonal motion indicates larger movement, and can be potentially disruptive. This type of motion can be used to emphasize that there’s a switch in context happening, like linking out to a different view or destination. In this example of a link, a static arrow icon facing the top right already indicates a potentially disruptive action. When diagonal motion is added to the arrow on hover, the meaning of the arrow is emphasized. Use this link option with motion sparingly, and only to communicate that there will be a switch in context. Image: Text reading 'For more information, visit the Adobe Help Center' with the link underlined in blue and a diagonal external-link arrow, cursor positioned below the link, before hover. (source: https://spectrum.adobe.com/foundations/behavior/media_16efc4fe0b70604bccaff2a9935bfcd487b64a73e.png?width=750&format=png&optimize=medium) Image: The same 'Adobe Help Center' link, now with the cursor positioned directly on the link text in a hover state. (source: https://spectrum.adobe.com/foundations/behavior/media_1824800b0d2b9ce2e5980fe39e3d526807ab0b7a5.png?width=750&format=png&optimize=medium)"
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
"type": "guideline",
|
|
26
|
-
"content": "
|
|
26
|
+
"content": "Clockwise motion indicates a holding pattern that’s repetitive and doesn’t have clear forward momentum or progress. This is most often used for loading indicators. Progress circles have clockwise motion and work well to show indeterminate (infinite) progress. Image: A circular progress indicator on a light gray background, showing roughly 20% complete in blue against a gray track. (source: https://spectrum.adobe.com/foundations/behavior/media_1113e169705ecbd524e5b138be65b9a4e595aaf6f.png?width=750&format=png&optimize=medium) Image: A circular progress indicator on a light gray background, showing roughly 85% complete in blue against a gray track. (source: https://spectrum.adobe.com/foundations/behavior/media_1aa94bf6842145f9e11edf213d92ede35aeab5324.png?width=750&format=png&optimize=medium)"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"type": "guideline",
|
|
30
|
-
"content": "
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"type": "guideline",
|
|
34
|
-
"content": "In this example, the button scales down on the down state, emphasizing that something — the action of selecting — happened."
|
|
30
|
+
"content": "Motion shows users feedback that, when interacting with the UI, their actions are registering with a system. It’s not the only way to show feedback, but it helps objects to feel more dynamic and responsive. It also can help communicate meaning, or add emphasis that something is happening that requires attention. A microinteraction is a single action (like a click, tap, or swipe) which triggers a response (like a transition or animation). In Spectrum 2, microinteractions offer moments of personality that are reflective of product branding. In this example, the button scales down on the down state, emphasizing that something — the action of selecting — happened. Image: A black pill-shaped button labeled 'Button,' with a cursor positioned below it, before interaction. (source: https://spectrum.adobe.com/foundations/behavior/media_1912db9847e2a13fa026399336088aadc29ab9886.png?width=750&format=png&optimize=medium) Image: The same 'Button' element, slightly larger and darker with a pointer/hand cursor overlapping its bottom edge, indicating a pressed or clicked state. (source: https://spectrum.adobe.com/foundations/behavior/media_16bedff0632adae2a74753d9064814716b15c1265.png?width=750&format=png&optimize=medium)"
|
|
35
31
|
}
|
|
36
32
|
],
|
|
37
|
-
"sourceUrl": "https://
|
|
38
|
-
"lastUpdated": "2026-
|
|
33
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/behavior/motion",
|
|
34
|
+
"lastUpdated": "2026-09-04",
|
|
39
35
|
"status": "published",
|
|
40
|
-
"tags": [
|
|
36
|
+
"tags": [
|
|
37
|
+
"Motion",
|
|
38
|
+
"Directional motion",
|
|
39
|
+
"Linear motion",
|
|
40
|
+
"Diagonal motion",
|
|
41
|
+
"Clockwise motion",
|
|
42
|
+
"Interaction motion",
|
|
43
|
+
"Wayfinding motion",
|
|
44
|
+
"Microinteractions"
|
|
45
|
+
]
|
|
41
46
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/object-styles-overview.json",
|
|
4
|
+
"name": "object-styles-overview",
|
|
5
|
+
"title": "Object styles",
|
|
6
|
+
"category": "designing",
|
|
7
|
+
"documentBlocks": [
|
|
8
|
+
{
|
|
9
|
+
"type": "purpose",
|
|
10
|
+
"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://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://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://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://spectrum.adobe.com/foundations/styles/object-styles/media_17d32a2b3be83c7c4f7541a166559a90e9683c24d.png?width=750&format=png&optimize=medium) Drop shadow Drop shadow"
|
|
11
|
+
}
|
|
12
|
+
],
|
|
13
|
+
"sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/overview",
|
|
14
|
+
"lastUpdated": "2026-08-14",
|
|
15
|
+
"status": "published",
|
|
16
|
+
"tags": ["Object styles", "Rounding", "Border width", "Drop shadow"]
|
|
17
|
+
}
|
|
@@ -8,23 +8,22 @@
|
|
|
8
8
|
{ "type": "purpose", "content": "Principles" },
|
|
9
9
|
{
|
|
10
10
|
"type": "guideline",
|
|
11
|
-
"content": "
|
|
11
|
+
"content": "Spectrum is based on real-world situations. Every component, pattern, and principle is informed by thoughtful consideration of environments, applications, and range of needs that Adobe products serve. Spectrum is not a rigid set of rules for how to build products, but rather a set of adaptable resources for making experiences feel contextual, cohesive, and performant."
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
"type": "guideline",
|
|
15
|
-
"content": "
|
|
15
|
+
"content": "Spectrum places people's needs first. It's deeply committed to a high standard of inclusivity, accessibility, honesty, and respect. Spectrum is adaptable to meet as many user expectations, platform requirements, and product visions as possible. It's always what it needs to be, accommodating a flexible range of expression. It balances the human needs of utility and joy. Image: Aperture/lens icon representing the Focused principle (source: https://spectrum.adobe.com/getting-started/media_1d733c7a6b8739373a7b68306edb74b7c2ffe34b4.png?width=750&format=png&optimize=medium) Image: Two overlapping speech bubbles representing the Collaborative principle (source: https://spectrum.adobe.com/getting-started/media_1289706018f1e7799026af8a56beeec33c163c2ee.png?width=750&format=png&optimize=medium)"
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
18
|
"type": "guideline",
|
|
19
|
-
"content": "
|
|
19
|
+
"content": "Spectrum delivers what's needed, when it's needed. Every decoration is purposeful and meaningful. Every communication touchpoint is relevant. Spectrum experiences are built to a high standard of quality. Everything incorporates attention to details, and that creates experiences that look and feel well-crafted. Things are delightful to use because they balance functionality and expression."
|
|
20
20
|
},
|
|
21
21
|
{
|
|
22
22
|
"type": "guideline",
|
|
23
|
-
"content": "
|
|
23
|
+
"content": "Spectrum belongs to everyone. It's a reflection of an ever-growing community that makes decisions thoughtfully, holistically, and collectively. Spectrum examines from multiple angles, then refines, then repeats. Constantly."
|
|
24
24
|
}
|
|
25
25
|
],
|
|
26
|
-
"sourceUrl": "https://
|
|
27
|
-
"lastUpdated": "2026-
|
|
28
|
-
"status": "published"
|
|
29
|
-
"tags": ["fundamentals"]
|
|
26
|
+
"sourceUrl": "https://spectrum.adobe.com/getting-started/principles",
|
|
27
|
+
"lastUpdated": "2026-09-10",
|
|
28
|
+
"status": "published"
|
|
30
29
|
}
|