@adobe/spectrum-design-data 3.2.3 → 3.3.0-beta.1
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 +15 -54
- package/components/action-bar.json +9 -23
- package/components/action-button.json +39 -79
- package/components/action-group.json +18 -129
- package/components/alert-banner.json +8 -27
- package/components/alert-dialog.json +34 -48
- package/components/avatar-group.json +9 -28
- package/components/avatar.json +29 -92
- package/components/badge.json +56 -150
- package/components/breadcrumbs.json +26 -100
- package/components/button-group.json +19 -50
- package/components/button.json +61 -92
- package/components/calendar.json +8 -67
- package/components/cards.json +31 -46
- package/components/checkbox-group.json +16 -78
- package/components/checkbox.json +27 -90
- package/components/close-button.json +20 -62
- 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 +2 -6
- package/components/color-slider.json +26 -122
- package/components/color-wheel.json +17 -84
- package/components/combo-box.json +50 -182
- package/components/contextual-help.json +80 -119
- package/components/date-picker.json +24 -120
- package/components/divider.json +12 -25
- package/components/drop-zone.json +18 -30
- package/components/field-label.json +21 -62
- 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 +24 -56
- package/components/list-view.json +15 -73
- package/components/menu.json +45 -174
- package/components/meter.json +24 -65
- package/components/number-field.json +34 -168
- package/components/picker.json +42 -181
- package/components/popover.json +37 -113
- package/components/progress-bar.json +23 -95
- package/components/progress-circle.json +12 -42
- package/components/radio-button.json +14 -67
- package/components/radio-group.json +28 -125
- package/components/rating.json +9 -38
- package/components/search-field.json +34 -119
- package/components/segmented-control.json +21 -63
- package/components/select-box.json +29 -96
- package/components/side-navigation.json +28 -69
- package/components/slider.json +39 -148
- package/components/standard-dialog.json +16 -88
- package/components/status-light.json +41 -123
- package/components/steplist.json +5 -24
- package/components/swatch-group.json +19 -55
- package/components/swatch.json +24 -79
- package/components/switch.json +31 -72
- package/components/table.json +26 -73
- package/components/tabs.json +22 -39
- package/components/tag-field.json +14 -60
- package/components/tag-group.json +16 -49
- package/components/tag.json +21 -71
- package/components/takeover-dialog.json +10 -61
- package/components/text-area.json +49 -198
- package/components/text-field.json +42 -163
- package/components/thumbnail.json +22 -63
- package/components/toast.json +29 -50
- package/components/tooltip.json +27 -74
- package/components/tree-view.json +45 -140
- package/guidelines/ai-resource-guide.json +50 -0
- package/guidelines/app-frame-overview.json +44 -50
- package/guidelines/applying-the-type-system.json +63 -0
- package/guidelines/attention-hierarchy.json +12 -21
- package/guidelines/background-layers.json +44 -10
- package/guidelines/bi-directionality.json +57 -0
- package/guidelines/border-width.json +42 -0
- package/guidelines/brand.json +30 -10
- package/guidelines/cognitive.json +197 -0
- package/guidelines/colors.json +35 -17
- package/guidelines/component-spacing.json +49 -0
- package/guidelines/contact-us.json +67 -0
- package/guidelines/content-area-browsing-context.json +65 -0
- package/guidelines/creating-bluelines-browsing-context.json +91 -0
- package/guidelines/design-tokens.json +122 -0
- package/guidelines/developer-overview.json +25 -9
- package/guidelines/drop-shadow.json +56 -0
- package/guidelines/faqs.json +96 -9
- package/guidelines/fonts.json +29 -14
- package/guidelines/grammar-and-mechanics.json +252 -0
- package/guidelines/grays.json +17 -44
- package/guidelines/header-browsing-context.json +37 -0
- package/guidelines/icon-fundamentals.json +7 -18
- package/guidelines/illustration.json +109 -0
- package/guidelines/in-product-word-list.json +29 -0
- package/guidelines/inclusive-design.json +93 -0
- package/guidelines/inclusive-ux-writing.json +30 -0
- package/guidelines/internationalization.json +87 -0
- package/guidelines/introduction.json +2 -2
- package/guidelines/layout-and-structure-containers.json +47 -0
- package/guidelines/layout-spacing.json +39 -0
- package/guidelines/manifest.json +252 -60
- package/guidelines/motion.json +17 -16
- package/guidelines/object-styles-overview.json +17 -0
- package/guidelines/principles.json +2 -2
- package/guidelines/resources.json +21 -15
- package/guidelines/rounding.json +61 -0
- package/guidelines/side-navigation-browsing-context.json +71 -0
- package/guidelines/spacing-overview.json +45 -0
- package/guidelines/states.json +15 -10
- package/guidelines/typography-overview.json +39 -0
- package/guidelines/typography-system.json +168 -0
- package/guidelines/using-icons.json +33 -44
- package/guidelines/visual-language-containers.json +36 -0
- package/guidelines/voice-and-tone.json +47 -0
- package/guidelines/writing-about-people.json +103 -0
- package/guidelines/writing-for-errors.json +120 -0
- package/guidelines/writing-for-onboarding.json +119 -0
- package/guidelines/writing-for-readability.json +54 -0
- package/guidelines/writing-with-visuals.json +70 -0
- package/package.json +1 -1
- package/guidelines/app-frame-content-area.json +0 -81
- package/guidelines/app-frame-creating-bluelines.json +0 -58
- package/guidelines/app-frame-header.json +0 -72
- package/guidelines/app-frame-side-navigation.json +0 -138
- package/guidelines/containers.json +0 -62
- package/guidelines/illustrations.json +0 -111
- package/guidelines/object-styles.json +0 -102
- package/guidelines/spacing.json +0 -25
- package/guidelines/typography-fundamentals.json +0 -142
package/guidelines/manifest.json
CHANGED
|
@@ -1,51 +1,35 @@
|
|
|
1
1
|
{
|
|
2
2
|
"guidelines": [
|
|
3
3
|
{
|
|
4
|
-
"slug": "
|
|
5
|
-
"title": "
|
|
6
|
-
"category": "
|
|
7
|
-
"status": "published",
|
|
8
|
-
"sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-content-area/",
|
|
9
|
-
"file": "guidelines/app-frame-content-area.json"
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
"slug": "app-frame-creating-bluelines",
|
|
13
|
-
"title": "Creating bluelines (browsing context)",
|
|
14
|
-
"category": "designing",
|
|
15
|
-
"status": "published",
|
|
16
|
-
"sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-creating-bluelines/",
|
|
17
|
-
"file": "guidelines/app-frame-creating-bluelines.json"
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
"slug": "app-frame-header",
|
|
21
|
-
"title": "App frame header (browsing context)",
|
|
22
|
-
"category": "designing",
|
|
4
|
+
"slug": "ai-resource-guide",
|
|
5
|
+
"title": "AI resource guide",
|
|
6
|
+
"category": "support",
|
|
23
7
|
"status": "published",
|
|
24
|
-
"sourceUrl": "https://
|
|
25
|
-
"file": "guidelines/
|
|
8
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/ai-resource-guide",
|
|
9
|
+
"file": "guidelines/ai-resource-guide.json"
|
|
26
10
|
},
|
|
27
11
|
{
|
|
28
12
|
"slug": "app-frame-overview",
|
|
29
13
|
"title": "App frame",
|
|
30
14
|
"category": "designing",
|
|
31
15
|
"status": "published",
|
|
32
|
-
"sourceUrl": "https://
|
|
16
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/overview",
|
|
33
17
|
"file": "guidelines/app-frame-overview.json"
|
|
34
18
|
},
|
|
35
19
|
{
|
|
36
|
-
"slug": "
|
|
37
|
-
"title": "
|
|
20
|
+
"slug": "applying-the-type-system",
|
|
21
|
+
"title": "Applying the type system",
|
|
38
22
|
"category": "designing",
|
|
39
23
|
"status": "published",
|
|
40
|
-
"sourceUrl": "https://
|
|
41
|
-
"file": "guidelines/
|
|
24
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/applying-the-type-system",
|
|
25
|
+
"file": "guidelines/applying-the-type-system.json"
|
|
42
26
|
},
|
|
43
27
|
{
|
|
44
28
|
"slug": "attention-hierarchy",
|
|
45
29
|
"title": "Attention hierarchy",
|
|
46
30
|
"category": "designing",
|
|
47
31
|
"status": "published",
|
|
48
|
-
"sourceUrl": "https://
|
|
32
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/attention-hierarchy",
|
|
49
33
|
"file": "guidelines/attention-hierarchy.json"
|
|
50
34
|
},
|
|
51
35
|
{
|
|
@@ -53,47 +37,111 @@
|
|
|
53
37
|
"title": "Background layers",
|
|
54
38
|
"category": "designing",
|
|
55
39
|
"status": "published",
|
|
56
|
-
"sourceUrl": "https://
|
|
40
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/background-layers",
|
|
57
41
|
"file": "guidelines/background-layers.json"
|
|
58
42
|
},
|
|
43
|
+
{
|
|
44
|
+
"slug": "bi-directionality",
|
|
45
|
+
"title": "Bi-directionality",
|
|
46
|
+
"category": "designing",
|
|
47
|
+
"status": "published",
|
|
48
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/bi-directionality",
|
|
49
|
+
"file": "guidelines/bi-directionality.json"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"slug": "border-width",
|
|
53
|
+
"title": "Border width",
|
|
54
|
+
"category": "designing",
|
|
55
|
+
"status": "published",
|
|
56
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/border-width",
|
|
57
|
+
"file": "guidelines/border-width.json"
|
|
58
|
+
},
|
|
59
59
|
{
|
|
60
60
|
"slug": "brand",
|
|
61
61
|
"title": "Brand",
|
|
62
62
|
"category": "designing",
|
|
63
63
|
"status": "published",
|
|
64
|
-
"sourceUrl": "https://
|
|
64
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/brand",
|
|
65
65
|
"file": "guidelines/brand.json"
|
|
66
66
|
},
|
|
67
|
+
{
|
|
68
|
+
"slug": "cognitive",
|
|
69
|
+
"title": "Cognitive",
|
|
70
|
+
"category": "designing",
|
|
71
|
+
"status": "published",
|
|
72
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/cognitive",
|
|
73
|
+
"file": "guidelines/cognitive.json"
|
|
74
|
+
},
|
|
67
75
|
{
|
|
68
76
|
"slug": "colors",
|
|
69
77
|
"title": "Colors",
|
|
70
78
|
"category": "designing",
|
|
71
79
|
"status": "published",
|
|
72
|
-
"sourceUrl": "https://
|
|
80
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/colors",
|
|
73
81
|
"file": "guidelines/colors.json"
|
|
74
82
|
},
|
|
75
83
|
{
|
|
76
|
-
"slug": "
|
|
77
|
-
"title": "
|
|
84
|
+
"slug": "component-spacing",
|
|
85
|
+
"title": "Component spacing",
|
|
78
86
|
"category": "designing",
|
|
79
87
|
"status": "published",
|
|
80
|
-
"sourceUrl": "https://
|
|
81
|
-
"file": "guidelines/
|
|
88
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/spacing/component-spacing",
|
|
89
|
+
"file": "guidelines/component-spacing.json"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"slug": "contact-us",
|
|
93
|
+
"title": "Contact us",
|
|
94
|
+
"category": "support",
|
|
95
|
+
"status": "published",
|
|
96
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/contact-us",
|
|
97
|
+
"file": "guidelines/contact-us.json"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"slug": "content-area-browsing-context",
|
|
101
|
+
"title": "Browsing context: Content area",
|
|
102
|
+
"category": "designing",
|
|
103
|
+
"status": "published",
|
|
104
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/content-area-browsing-context",
|
|
105
|
+
"file": "guidelines/content-area-browsing-context.json"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"slug": "creating-bluelines-browsing-context",
|
|
109
|
+
"title": "Creating bluelines",
|
|
110
|
+
"category": "designing",
|
|
111
|
+
"status": "published",
|
|
112
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/creating-bluelines-browsing-context",
|
|
113
|
+
"file": "guidelines/creating-bluelines-browsing-context.json"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"slug": "design-tokens",
|
|
117
|
+
"title": "Design tokens",
|
|
118
|
+
"category": "designing",
|
|
119
|
+
"status": "published",
|
|
120
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/design-data/design-tokens",
|
|
121
|
+
"file": "guidelines/design-tokens.json"
|
|
82
122
|
},
|
|
83
123
|
{
|
|
84
124
|
"slug": "developer-overview",
|
|
85
125
|
"title": "Developer overview",
|
|
86
126
|
"category": "developing",
|
|
87
127
|
"status": "published",
|
|
88
|
-
"sourceUrl": "https://
|
|
128
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/developer-overview",
|
|
89
129
|
"file": "guidelines/developer-overview.json"
|
|
90
130
|
},
|
|
131
|
+
{
|
|
132
|
+
"slug": "drop-shadow",
|
|
133
|
+
"title": "Drop shadow",
|
|
134
|
+
"category": "designing",
|
|
135
|
+
"status": "published",
|
|
136
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/drop-shadow",
|
|
137
|
+
"file": "guidelines/drop-shadow.json"
|
|
138
|
+
},
|
|
91
139
|
{
|
|
92
140
|
"slug": "faqs",
|
|
93
141
|
"title": "FAQs",
|
|
94
142
|
"category": "support",
|
|
95
143
|
"status": "published",
|
|
96
|
-
"sourceUrl": "https://
|
|
144
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/faqs",
|
|
97
145
|
"file": "guidelines/faqs.json"
|
|
98
146
|
},
|
|
99
147
|
{
|
|
@@ -101,63 +149,127 @@
|
|
|
101
149
|
"title": "Fonts",
|
|
102
150
|
"category": "designing",
|
|
103
151
|
"status": "published",
|
|
104
|
-
"sourceUrl": "https://
|
|
152
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/fonts",
|
|
105
153
|
"file": "guidelines/fonts.json"
|
|
106
154
|
},
|
|
155
|
+
{
|
|
156
|
+
"slug": "grammar-and-mechanics",
|
|
157
|
+
"title": "Grammar and mechanics",
|
|
158
|
+
"category": "designing",
|
|
159
|
+
"status": "published",
|
|
160
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/grammar-and-mechanics",
|
|
161
|
+
"file": "guidelines/grammar-and-mechanics.json"
|
|
162
|
+
},
|
|
107
163
|
{
|
|
108
164
|
"slug": "grays",
|
|
109
165
|
"title": "Grays",
|
|
110
166
|
"category": "designing",
|
|
111
167
|
"status": "published",
|
|
112
|
-
"sourceUrl": "https://
|
|
168
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/grays",
|
|
113
169
|
"file": "guidelines/grays.json"
|
|
114
170
|
},
|
|
171
|
+
{
|
|
172
|
+
"slug": "header-browsing-context",
|
|
173
|
+
"title": "Browsing context: Header",
|
|
174
|
+
"category": "designing",
|
|
175
|
+
"status": "published",
|
|
176
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/header-browsing-context",
|
|
177
|
+
"file": "guidelines/header-browsing-context.json"
|
|
178
|
+
},
|
|
115
179
|
{
|
|
116
180
|
"slug": "icon-fundamentals",
|
|
117
181
|
"title": "Icon fundamentals",
|
|
118
182
|
"category": "designing",
|
|
119
183
|
"status": "published",
|
|
120
|
-
"sourceUrl": "https://
|
|
184
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/icons-and-illustrations/icon-fundamentals",
|
|
121
185
|
"file": "guidelines/icon-fundamentals.json"
|
|
122
186
|
},
|
|
123
187
|
{
|
|
124
|
-
"slug": "
|
|
125
|
-
"title": "
|
|
188
|
+
"slug": "illustration",
|
|
189
|
+
"title": "Illustration",
|
|
190
|
+
"category": "designing",
|
|
191
|
+
"status": "published",
|
|
192
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/visual-language/illustration",
|
|
193
|
+
"file": "guidelines/illustration.json"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"slug": "in-product-word-list",
|
|
197
|
+
"title": "In-product word list",
|
|
198
|
+
"category": "designing",
|
|
199
|
+
"status": "published",
|
|
200
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/in-product-word-list",
|
|
201
|
+
"file": "guidelines/in-product-word-list.json"
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"slug": "inclusive-design",
|
|
205
|
+
"title": "Inclusive design",
|
|
126
206
|
"category": "designing",
|
|
127
207
|
"status": "published",
|
|
128
|
-
"sourceUrl": "https://
|
|
129
|
-
"file": "guidelines/
|
|
208
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/inclusive-design",
|
|
209
|
+
"file": "guidelines/inclusive-design.json"
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"slug": "inclusive-ux-writing",
|
|
213
|
+
"title": "Inclusive UX writing",
|
|
214
|
+
"category": "designing",
|
|
215
|
+
"status": "published",
|
|
216
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/inclusive-ux-writing",
|
|
217
|
+
"file": "guidelines/inclusive-ux-writing.json"
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
"slug": "internationalization",
|
|
221
|
+
"title": "Internationalization",
|
|
222
|
+
"category": "designing",
|
|
223
|
+
"status": "published",
|
|
224
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/inclusivity/internationalization",
|
|
225
|
+
"file": "guidelines/internationalization.json"
|
|
130
226
|
},
|
|
131
227
|
{
|
|
132
228
|
"slug": "introduction",
|
|
133
229
|
"title": "Introduction",
|
|
134
230
|
"category": "fundamentals",
|
|
135
231
|
"status": "published",
|
|
136
|
-
"sourceUrl": "https://
|
|
232
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/getting-started/introduction",
|
|
137
233
|
"file": "guidelines/introduction.json"
|
|
138
234
|
},
|
|
235
|
+
{
|
|
236
|
+
"slug": "layout-and-structure-containers",
|
|
237
|
+
"title": "Containers",
|
|
238
|
+
"category": "designing",
|
|
239
|
+
"status": "published",
|
|
240
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/containers",
|
|
241
|
+
"file": "guidelines/layout-and-structure-containers.json"
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
"slug": "layout-spacing",
|
|
245
|
+
"title": "Layout spacing",
|
|
246
|
+
"category": "designing",
|
|
247
|
+
"status": "published",
|
|
248
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/spacing/layout-spacing",
|
|
249
|
+
"file": "guidelines/layout-spacing.json"
|
|
250
|
+
},
|
|
139
251
|
{
|
|
140
252
|
"slug": "motion",
|
|
141
253
|
"title": "Motion",
|
|
142
254
|
"category": "designing",
|
|
143
255
|
"status": "published",
|
|
144
|
-
"sourceUrl": "https://
|
|
256
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/behavior/motion",
|
|
145
257
|
"file": "guidelines/motion.json"
|
|
146
258
|
},
|
|
147
259
|
{
|
|
148
|
-
"slug": "object-styles",
|
|
260
|
+
"slug": "object-styles-overview",
|
|
149
261
|
"title": "Object styles",
|
|
150
262
|
"category": "designing",
|
|
151
263
|
"status": "published",
|
|
152
|
-
"sourceUrl": "https://
|
|
153
|
-
"file": "guidelines/object-styles.json"
|
|
264
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/overview",
|
|
265
|
+
"file": "guidelines/object-styles-overview.json"
|
|
154
266
|
},
|
|
155
267
|
{
|
|
156
268
|
"slug": "principles",
|
|
157
269
|
"title": "Principles",
|
|
158
270
|
"category": "fundamentals",
|
|
159
271
|
"status": "published",
|
|
160
|
-
"sourceUrl": "https://
|
|
272
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/getting-started/principles",
|
|
161
273
|
"file": "guidelines/principles.json"
|
|
162
274
|
},
|
|
163
275
|
{
|
|
@@ -165,40 +277,120 @@
|
|
|
165
277
|
"title": "Resources",
|
|
166
278
|
"category": "support",
|
|
167
279
|
"status": "published",
|
|
168
|
-
"sourceUrl": "https://
|
|
280
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/resources",
|
|
169
281
|
"file": "guidelines/resources.json"
|
|
170
282
|
},
|
|
171
283
|
{
|
|
172
|
-
"slug": "
|
|
173
|
-
"title": "
|
|
284
|
+
"slug": "rounding",
|
|
285
|
+
"title": "Rounding",
|
|
286
|
+
"category": "designing",
|
|
287
|
+
"status": "published",
|
|
288
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/rounding",
|
|
289
|
+
"file": "guidelines/rounding.json"
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
"slug": "side-navigation-browsing-context",
|
|
293
|
+
"title": "Browsing context: Side nav",
|
|
294
|
+
"category": "designing",
|
|
295
|
+
"status": "published",
|
|
296
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/side-navigation-browsing-context",
|
|
297
|
+
"file": "guidelines/side-navigation-browsing-context.json"
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"slug": "spacing-overview",
|
|
301
|
+
"title": "Spacing overview",
|
|
174
302
|
"category": "designing",
|
|
175
303
|
"status": "published",
|
|
176
|
-
"sourceUrl": "https://
|
|
177
|
-
"file": "guidelines/spacing.json"
|
|
304
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/layout-and-structure/spacing/spacing-overview",
|
|
305
|
+
"file": "guidelines/spacing-overview.json"
|
|
178
306
|
},
|
|
179
307
|
{
|
|
180
308
|
"slug": "states",
|
|
181
309
|
"title": "States",
|
|
182
310
|
"category": "designing",
|
|
183
311
|
"status": "published",
|
|
184
|
-
"sourceUrl": "https://
|
|
312
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/behavior/states",
|
|
185
313
|
"file": "guidelines/states.json"
|
|
186
314
|
},
|
|
187
315
|
{
|
|
188
|
-
"slug": "typography-
|
|
189
|
-
"title": "Typography
|
|
316
|
+
"slug": "typography-overview",
|
|
317
|
+
"title": "Typography",
|
|
318
|
+
"category": "designing",
|
|
319
|
+
"status": "published",
|
|
320
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/overview",
|
|
321
|
+
"file": "guidelines/typography-overview.json"
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"slug": "typography-system",
|
|
325
|
+
"title": "Typography system",
|
|
190
326
|
"category": "designing",
|
|
191
327
|
"status": "published",
|
|
192
|
-
"sourceUrl": "https://
|
|
193
|
-
"file": "guidelines/typography-
|
|
328
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/typography-system",
|
|
329
|
+
"file": "guidelines/typography-system.json"
|
|
194
330
|
},
|
|
195
331
|
{
|
|
196
332
|
"slug": "using-icons",
|
|
197
333
|
"title": "Using icons",
|
|
198
334
|
"category": "designing",
|
|
199
335
|
"status": "published",
|
|
200
|
-
"sourceUrl": "https://
|
|
336
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/icons-and-illustrations/using-icons",
|
|
201
337
|
"file": "guidelines/using-icons.json"
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"slug": "visual-language-containers",
|
|
341
|
+
"title": "Containers",
|
|
342
|
+
"category": "designing",
|
|
343
|
+
"status": "published",
|
|
344
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/visual-language/containers",
|
|
345
|
+
"file": "guidelines/visual-language-containers.json"
|
|
346
|
+
},
|
|
347
|
+
{
|
|
348
|
+
"slug": "voice-and-tone",
|
|
349
|
+
"title": "Voice and tone",
|
|
350
|
+
"category": "designing",
|
|
351
|
+
"status": "published",
|
|
352
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/voice-and-tone",
|
|
353
|
+
"file": "guidelines/voice-and-tone.json"
|
|
354
|
+
},
|
|
355
|
+
{
|
|
356
|
+
"slug": "writing-about-people",
|
|
357
|
+
"title": "Writing about people",
|
|
358
|
+
"category": "designing",
|
|
359
|
+
"status": "published",
|
|
360
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/writing-about-people",
|
|
361
|
+
"file": "guidelines/writing-about-people.json"
|
|
362
|
+
},
|
|
363
|
+
{
|
|
364
|
+
"slug": "writing-for-errors",
|
|
365
|
+
"title": "Writing for errors",
|
|
366
|
+
"category": "designing",
|
|
367
|
+
"status": "published",
|
|
368
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/writing-for-errors",
|
|
369
|
+
"file": "guidelines/writing-for-errors.json"
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"slug": "writing-for-onboarding",
|
|
373
|
+
"title": "Writing for onboarding",
|
|
374
|
+
"category": "designing",
|
|
375
|
+
"status": "published",
|
|
376
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/writing-for-onboarding",
|
|
377
|
+
"file": "guidelines/writing-for-onboarding.json"
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
"slug": "writing-for-readability",
|
|
381
|
+
"title": "Writing for readability",
|
|
382
|
+
"category": "designing",
|
|
383
|
+
"status": "published",
|
|
384
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/writing-for-readability",
|
|
385
|
+
"file": "guidelines/writing-for-readability.json"
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"slug": "writing-with-visuals",
|
|
389
|
+
"title": "Writing with visuals",
|
|
390
|
+
"category": "designing",
|
|
391
|
+
"status": "published",
|
|
392
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/language-and-inclusivity/writing-with-visuals",
|
|
393
|
+
"file": "guidelines/writing-with-visuals.json"
|
|
202
394
|
}
|
|
203
395
|
]
|
|
204
396
|
}
|
package/guidelines/motion.json
CHANGED
|
@@ -7,35 +7,36 @@
|
|
|
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": "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
|
|
14
|
+
"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.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."
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
17
|
"type": "guideline",
|
|
18
|
-
"content": "Diagonal motion indicates larger movement, and can be potentially disruptive. This type of motion can be used to emphasize that there
|
|
18
|
+
"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."
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"type": "guideline",
|
|
22
|
-
"content": "Clockwise motion indicates a holding pattern that
|
|
22
|
+
"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."
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
"type": "guideline",
|
|
26
|
-
"content": "Motion shows users feedback that, when interacting with the UI, their actions are registering with a system. It
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
"type": "guideline",
|
|
30
|
-
"content": "A [microinteraction](https://www.nngroup.com/articles/microinteractions/) 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."
|
|
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."
|
|
26
|
+
"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."
|
|
35
27
|
}
|
|
36
28
|
],
|
|
37
|
-
"sourceUrl": "https://
|
|
38
|
-
"lastUpdated": "2026-
|
|
29
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/behavior/motion",
|
|
30
|
+
"lastUpdated": "2026-09-04",
|
|
39
31
|
"status": "published",
|
|
40
|
-
"tags": [
|
|
32
|
+
"tags": [
|
|
33
|
+
"Motion",
|
|
34
|
+
"Directional motion",
|
|
35
|
+
"Linear motion",
|
|
36
|
+
"Diagonal motion",
|
|
37
|
+
"Clockwise motion",
|
|
38
|
+
"Interaction motion",
|
|
39
|
+
"Wayfinding motion",
|
|
40
|
+
"Microinteractions"
|
|
41
|
+
]
|
|
41
42
|
}
|
|
@@ -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.\n\n### Jump to\n\nRounding Rounding Border width Border width Drop shadow Drop shadow"
|
|
11
|
+
}
|
|
12
|
+
],
|
|
13
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/overview",
|
|
14
|
+
"lastUpdated": "2026-08-14",
|
|
15
|
+
"status": "published",
|
|
16
|
+
"tags": ["Object styles", "Rounding", "Border width", "Drop shadow"]
|
|
17
|
+
}
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"content": "Collaborative.\n\nSpectrum belongs to everyone. It's a reflection of an ever-growing community that makes decisions thoughtfully, holistically, and collectively.\n\nSpectrum examines from multiple angles, then refines, then repeats. Constantly."
|
|
24
24
|
}
|
|
25
25
|
],
|
|
26
|
-
"sourceUrl": "https://
|
|
27
|
-
"lastUpdated": "2026-
|
|
26
|
+
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/getting-started/principles",
|
|
27
|
+
"lastUpdated": "2026-09-17",
|
|
28
28
|
"status": "published",
|
|
29
29
|
"tags": ["fundamentals"]
|
|
30
30
|
}
|