@adobe/spectrum-design-data 3.3.0-beta.2 → 3.3.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 +67 -15
- package/components/action-bar.json +30 -9
- package/components/action-button.json +92 -39
- package/components/action-group.json +137 -18
- package/components/alert-banner.json +27 -8
- package/components/alert-dialog.json +55 -34
- package/components/avatar-group.json +35 -9
- package/components/avatar.json +105 -29
- package/components/badge.json +163 -56
- package/components/breadcrumbs.json +107 -26
- package/components/button-group.json +63 -19
- package/components/button.json +105 -61
- package/components/calendar.json +74 -8
- package/components/card.json +13 -0
- package/components/cards.json +46 -31
- package/components/checkbox-group.json +85 -16
- package/components/checkbox.json +97 -27
- package/components/close-button.json +75 -20
- package/components/coach-indicator.json +44 -14
- package/components/coach-mark.json +26 -8
- package/components/color-area.json +100 -20
- package/components/color-handle.json +46 -25
- package/components/color-loupe.json +14 -2
- package/components/color-slider.json +129 -26
- package/components/color-wheel.json +91 -17
- package/components/combo-box.json +189 -50
- package/components/contextual-help.json +126 -80
- package/components/date-field.json +7 -0
- package/components/date-picker.json +127 -24
- package/components/divider.json +38 -12
- package/components/drop-zone.json +37 -18
- package/components/field-label.json +62 -21
- package/components/heading.json +7 -0
- package/components/help-text.json +53 -16
- package/components/illustrated-message.json +85 -21
- package/components/in-line-alert.json +53 -13
- package/components/link.json +63 -24
- package/components/list-view.json +80 -15
- package/components/menu.json +181 -45
- package/components/meter.json +78 -24
- package/components/number-field.json +175 -34
- package/components/picker.json +188 -42
- package/components/popover.json +126 -37
- package/components/progress-bar.json +108 -23
- package/components/progress-circle.json +55 -12
- package/components/radio-button.json +67 -14
- package/components/radio-group.json +132 -28
- package/components/rating.json +38 -9
- package/components/search-field.json +126 -34
- package/components/segmented-control.json +70 -21
- package/components/select-box.json +103 -29
- package/components/side-navigation.json +69 -28
- package/components/slider.json +155 -39
- package/components/standard-dialog.json +88 -16
- package/components/status-light.json +136 -41
- package/components/steplist.json +24 -5
- package/components/swatch-group.json +55 -19
- package/components/swatch.json +79 -24
- package/components/switch.json +79 -31
- package/components/table.json +73 -26
- package/components/tabs.json +52 -22
- package/components/tag-field.json +60 -14
- package/components/tag-group.json +56 -16
- package/components/tag.json +78 -21
- package/components/takeover-dialog.json +61 -10
- package/components/text-area.json +205 -49
- package/components/text-field.json +170 -42
- package/components/thumbnail.json +63 -22
- package/components/time-field.json +7 -0
- package/components/toast.json +50 -29
- package/components/tooltip.json +87 -27
- package/components/tree-view.json +147 -45
- package/components/user-card.json +7 -0
- package/guidelines/app-frame-overview.json +44 -46
- package/guidelines/attention-hierarchy.json +22 -13
- package/guidelines/background-layers.json +10 -80
- package/guidelines/brand.json +12 -32
- package/guidelines/colors.json +17 -47
- package/guidelines/developer-overview.json +9 -25
- package/guidelines/faqs.json +9 -96
- package/guidelines/fonts.json +14 -29
- package/guidelines/grays.json +44 -17
- package/guidelines/icon-fundamentals.json +18 -7
- package/guidelines/manifest.json +15 -367
- package/guidelines/motion.json +16 -17
- package/guidelines/principles.json +8 -7
- package/guidelines/resources.json +15 -21
- package/guidelines/states.json +11 -16
- package/guidelines/using-icons.json +44 -33
- package/package.json +2 -2
- package/registry/platform-implementations.json +30 -0
- package/guidelines/ai-resource-guide.json +0 -50
- package/guidelines/applying-the-type-system.json +0 -67
- package/guidelines/bi-directionality.json +0 -57
- package/guidelines/border-width.json +0 -58
- package/guidelines/cognitive.json +0 -197
- package/guidelines/component-spacing.json +0 -61
- package/guidelines/contact-us.json +0 -67
- package/guidelines/content-area-browsing-context.json +0 -65
- package/guidelines/content-design-grammar-and-mechanics.json +0 -241
- package/guidelines/content-design-voice-and-tone.json +0 -37
- package/guidelines/content-grammar-and-mechanics.json +0 -252
- package/guidelines/content-language-and-inclusivity-writing-about-people.json +0 -103
- package/guidelines/content-language-and-inclusivity-writing-with-visuals.json +0 -70
- package/guidelines/content-voice-and-tone.json +0 -47
- package/guidelines/creating-bluelines-browsing-context.json +0 -91
- package/guidelines/design-tokens.json +0 -158
- package/guidelines/drop-shadow.json +0 -68
- package/guidelines/grammar-and-mechanics.json +0 -252
- package/guidelines/header-browsing-context.json +0 -40
- package/guidelines/illustration.json +0 -105
- package/guidelines/in-product-word-list.json +0 -29
- package/guidelines/inclusive-design.json +0 -101
- package/guidelines/inclusive-ux-writing.json +0 -30
- package/guidelines/internationalization.json +0 -87
- package/guidelines/language-and-inclusivity-writing-about-people.json +0 -85
- package/guidelines/language-and-inclusivity-writing-with-visuals.json +0 -61
- package/guidelines/layout-and-structure-containers.json +0 -47
- package/guidelines/layout-and-structure-spacing-overview.json +0 -66
- package/guidelines/layout-spacing.json +0 -39
- package/guidelines/object-styles-overview.json +0 -17
- package/guidelines/rounding.json +0 -73
- package/guidelines/side-navigation-browsing-context.json +0 -74
- package/guidelines/spacing-overview.json +0 -45
- package/guidelines/support.json +0 -113
- package/guidelines/typography-overview.json +0 -43
- package/guidelines/typography-system.json +0 -208
- package/guidelines/visual-language-containers.json +0 -36
- package/guidelines/voice-and-tone.json +0 -47
- package/guidelines/whats-new.json +0 -32
- package/guidelines/writing-about-people.json +0 -103
- package/guidelines/writing-for-errors.json +0 -120
- package/guidelines/writing-for-onboarding.json +0 -119
- package/guidelines/writing-for-readability.json +0 -54
- package/guidelines/writing-with-visuals.json +0 -70
- package/registry/platform-extensions/web-components-states.json +0 -58
|
@@ -1,252 +0,0 @@
|
|
|
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/grammar-and-mechanics.json",
|
|
4
|
-
"name": "grammar-and-mechanics",
|
|
5
|
-
"title": "Grammar and mechanics",
|
|
6
|
-
"category": "designing",
|
|
7
|
-
"documentBlocks": [
|
|
8
|
-
{ "type": "purpose", "content": "Grammar and mechanics" },
|
|
9
|
-
{
|
|
10
|
-
"type": "guideline",
|
|
11
|
-
"content": "We use Associated Press (AP) style for in-product UX writing, with any exceptions noted on this page."
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
"type": "guideline",
|
|
15
|
-
"content": "Active voice.\n\nIn an active sentence, it's clear who's doing what. The actor is the subject, and the subject of the sentence is doing something."
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
"type": "guideline",
|
|
19
|
-
"content": "Passive voice.\n\nAt times, active voice can come across too harshly. In these cases, use passive voice. This separates the actor from the action enough to soften a sentence. In a passive sentence, action is being taken upon the subject."
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
"type": "guideline",
|
|
23
|
-
"content": "Avoid passive voice by reframing the focus.\n\nYou can usually reframe a message to focus on the object, or on the actions someone could take, as another way to avoid passive voice."
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
"type": "guideline",
|
|
27
|
-
"content": "Common contractions.\n\nUse commonly understood contractions to keep sentences from feeling out-of-touch, robotic, or overly formal. Some common contractions: What's We'll You'll You're You've We're They're Doesn't Didn't Isn't Aren't Can't"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"type": "guideline",
|
|
31
|
-
"content": "Contraction considerations.\n\nAvoid contracting nouns with is, does, has, or was. This might make it look like the noun is possessive. Don’t use uncommon or old-fashioned contractions (e.g., would’ve or tweren't ). Don’t use colloquial contractions (e.g., ain't, y'all, yinz ). Be mindful of how many contractions you use in a sentence. Too many contractions can make things difficult to read. Avoid using contractions when dealing with legal concerns, payment processing, and account security. Casual isn’t always the best style when handling sensitive information."
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
"type": "guideline",
|
|
35
|
-
"content": "Why we use simple verb tenses.\n\nThere are a number of reasons why we use simple verb tenses for in-product writing: They use fewer words and are more concise. They can make content easier to scan and faster to read. Fewer words and simpler phrases mean better readability. According to the latest U.S. Census, more than 20% of people living in the U.S. speak a language other than English at home. For more people, simple verb tenses are easier to understand. Present tense improves readability scores."
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
"type": "guideline",
|
|
39
|
-
"content": "What's not simple tense.\n\nIf any of the following comes before the verb in a sentence, it’s not simple tense: Was/wasn’t, were, weren’t Has/hasn’t, have/haven’t Is/isn’t, are/aren’t Be If the verb in a sentence ends in “-ing,” it’s not simple tense."
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"type": "guideline",
|
|
43
|
-
"content": "Sentence case.\n\nUse sentence case for all aspects of designing or re-designing Adobe product experiences, including titles and UI elements (e.g., tooltips, tabs, menu items). This transition will take time for older products, and temporary inconsistency is fine. Writing in sentence case has been proven to be easier for users to read and comprehend, it sounds more friendly and less formal, and it helps better identify proper nouns and branded terms that need to be capitalized. When to use sentence case: Only capitalize the first word in a phrase, title, or UI reference (e.g., Adjust borders tool) Always capitalize proper nouns and branded terms (e.g., Adobe Help Center) Capitalize acronyms (e.g., XD, AEM)"
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
"type": "guideline",
|
|
47
|
-
"content": "Title case.\n\nUse title case only when it clarifies that we’re speaking about a specific, official entity (such as a title or name). Title case is often a marker of formality in English, and overuse can cause users stress by implying formality or officialness where it doesn’t exist."
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
"type": "guideline",
|
|
51
|
-
"content": "All caps.\n\nUse all caps sparingly. When to use all caps: Acronyms, such as accepted product names on second attribution (e.g., Adobe Experience Manager (AEM)) Names of file extensions (e.g., TIF, ZIP, or PSD files) All caps should never be used to emphasize a point."
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"type": "guideline",
|
|
55
|
-
"content": "Branded terms.\n\nUse title case to reference branded terms, such as names and features. This includes the names of Adobe products, like Adobe Photoshop or Advertising Cloud. Here are some common branded terms: Creative Cloud Photoshop Lightroom Illustrator Premiere Pro XD Adobe Stock Document Cloud Fill & Sign Magic Heal Adobe Sensei Experience Cloud Advertising Cloud Analytics Audience Manager Campaign Experience Manager Commerce Cloud Marketo Engage Adobe Acrobat Adobe Sign"
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"type": "guideline",
|
|
59
|
-
"content": "Referring to the user.\n\nIn UX content, we want to talk about what’s happening rather than who or what is making something happen. We avoid speaking as our users. In nearly all situations, we aim to be conversational and talk to the user — not as them. Any exceptions depend on situational needs for sensitivity and clarity."
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
"type": "guideline",
|
|
63
|
-
"content": "Second person.\n\nMost of the time, use second person ( you, your, you’re ) to address users and services."
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
"type": "guideline",
|
|
67
|
-
"content": "First person.\n\nUse first person ( me, I, my ) only in these situations: Someone responds to the interface or answers a question they've been asked directly When additional sensitivity is necessary, or to indicate privacy When there's a legal need to use first person to ask for consent (e.g., “I agree to these terms and conditions”) On rare occasions, it can be appropriate to use we or us to mean “Adobe”: \"We're sorry\" (for a critical error) \"Help us improve this feature\" (requesting feedback)"
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"type": "guideline",
|
|
71
|
-
"content": "Singular they.\n\nIn most situations, Adobe doesn't need to know or assume the gender of our users. So when we refer to users, we use singular they. We don’t use “he/she” or “(s)he” — those are clunky and they exclude users who identify outside of the male/female binary. Use any of these variants of they in their proper grammatical contexts: They Them Their Theirs Themselves Themself"
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
"type": "guideline",
|
|
75
|
-
"content": "Ampersand.\n\nDon’t use ampersands (&) in UI copy. Instead, spell out the word “and.” Using the word “and” is more inclusive, localizable, and readable: It’s more widely known and understood for people who are non-fluent English speakers It translates more easily into many languages Spelled-out words require less mental and cognitive effort to read Ampersands bring attention to the conjunction in a phrase which is the least important part of the sentence The ampersand symbol can be distracting, since it’s taller than many letters and is an unusual shape"
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
"type": "guideline",
|
|
79
|
-
"content": "Apostrophe.\n\nDon’t use apostrophes (') in place of quotation marks. When pluralizing singular and plural words, add apostrophe-\"s\" when there’s no \"s\" at the end. For plural nouns that end with \"s,\" add only an apostrophe. For any other specifics on possessive apostrophes, refer to the AP style handbook."
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
"type": "guideline",
|
|
83
|
-
"content": "Asterisk.\n\nUse asterisks ( * ) or \"(required)\" to establish form fields as required. Don’t use asterisks to denote anything as optional. Make sure to use the Spectrum asterisk icon that comes built in with the design components — not the text form of an asterisk within the label string. Don’t use asterisks in running text or labels when parentheses or a tooltip would suffice."
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
"type": "guideline",
|
|
87
|
-
"content": "At sign.\n\nDon’t use the at sign (@) in place of the word \"at."
|
|
88
|
-
},
|
|
89
|
-
{
|
|
90
|
-
"type": "guideline",
|
|
91
|
-
"content": "Brackets.\n\nDon’t use brackets ([] {}) in UI copy or running sentences. Instead, use parentheses ( ( ) )."
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
"type": "guideline",
|
|
95
|
-
"content": "Colon.\n\nTry to simplify a complex sentence into multiple sentences first, but if you can’t, try a colon (:). Colons are helpful when introducing lists of items or steps in a workflow. The lists and steps should be introduced on new lines. They’re also useful for high-level headlines or marketing-sounding UI content. Don’t use a colon at the end of a label for a form field. The design component should already communicate the relationship between the label and the input."
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
"type": "guideline",
|
|
99
|
-
"content": "Comma.\n\nWhen listing things, use the serial comma (also known as the Oxford comma). This means providing a comma before the word “and” when listing multiple items in a sentence. If you’re having to use a lot of commas in a sentence, consider whether you can split the sentence up with periods or em dashes."
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
"type": "guideline",
|
|
103
|
-
"content": "Ellipsis.\n\nUse ellipses (…) when truncating text in small spaces. Use an ellipsis at the end of the text to communicate the progress of something that is in process, such as a waiting or loading state. In general, avoid using an ellipsis in a button. If a button will take a user to a completely different or more complicated view (such as going from a dialog to a settings panel), it can be acceptable to include an ellipsis at the end of the label text to communicate that there's more action needed beyond the button's initial interaction. For prompt text in a picker, use an ellipsis at the end of the text to communicate that a user can select an option (e.g., “Select category…”). If your product uses a menu pattern native to an operating system (OS), follow the company’s guidelines. If it uses Spectrum’s Menu component, see Ellipses in menu commands. If you need to directly refer to a UI element whose name ends with an ellipsis (e.g., “ Find… “) in running text, drop the ellipsis: “Use Find to search the database.” Use the more icon (not an ellipsis as a string of text) when designing a More menu."
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
"type": "guideline",
|
|
107
|
-
"content": "Emoji.\n\nDon’t use emoji in any interface language. Emoji often convey tones that may be inappropriate in certain contexts. They’re also difficult to localize, and tend to diminish readability and comprehension. When writing about emoji, you can have one emoji or multiple emoji. The spelling is the same for both the singular and plural noun forms."
|
|
108
|
-
},
|
|
109
|
-
{
|
|
110
|
-
"type": "guideline",
|
|
111
|
-
"content": "Equals sign.\n\nDon’t use an equals sign (=) in place of the word \"equals,\" and don’t use this as shorthand for \"meaning,\" \"means,” or \"is."
|
|
112
|
-
},
|
|
113
|
-
{
|
|
114
|
-
"type": "guideline",
|
|
115
|
-
"content": "Exclamation mark.\n\nDon’t use exclamation marks (!) since they are difficult to localize and easy to overuse."
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
"type": "guideline",
|
|
119
|
-
"content": "Greater than and less than.\n\nWhen communicating navigation, such as in breadcrumbs, use the \"chevron\" icon built into the component, not the greater than symbol. Don’t use the greater than and less than symbols to communicate steps in a flow — use bulleted or numbered lists instead. Don’t use these symbols to replace the words \"greater than\" or \"less than.\" And don’t use them to accent or decorate a word."
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
"type": "guideline",
|
|
123
|
-
"content": "Hyphen and dash.\n\nUse em dashes (—) to separate distinct but related thoughts. Include spaces before and after the em dash. Use en dashes (–) for number ranges and lengths of time, with no spaces before or after the en dash. Don’t use them when paired with the words “from” or “between.” When needing to show gaps in data in a table, use an en dash to represent null, unavailable, or inapplicable values. Use hyphens (-) between words, and with no spaces before or after the hyphen."
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
"type": "guideline",
|
|
127
|
-
"content": "Minus sign.\n\nDon’t use the minus sign (-) in place of the word “minus,” “without,” “less,” “negative,” or other words related to subtraction."
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
"type": "guideline",
|
|
131
|
-
"content": "Parentheses.\n\nUse parentheses ( ( ) ) to provide supplementary context. Don’t use parentheses in simple tooltips. In rich tooltips, they can indicate keyboard shortcuts. Don’t use brackets in place of parentheses."
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
"type": "guideline",
|
|
135
|
-
"content": "Period.\n\nIn general, if your text is a full sentence, add a period to the end. If it's a short, direct phrase — either standalone, or within a UI component like a toast or alert banner — don't add a period. In the majority of cases, don’t use periods (.) or any other punctuation on the end of bulleted or numbered lists. If one list item is a complete sentence, then it would end with a period (or question mark). In this case, use periods at the end of all items. Don’t use periods in headers or buttons."
|
|
136
|
-
},
|
|
137
|
-
{
|
|
138
|
-
"type": "guideline",
|
|
139
|
-
"content": "Plus sign.\n\nDon’t use plus signs (+) in place of the word \"and,\" bullet points, or as any other design elements. Don’t use plus signs when indicating there is more of something available."
|
|
140
|
-
},
|
|
141
|
-
{
|
|
142
|
-
"type": "guideline",
|
|
143
|
-
"content": "Question mark.\n\nWhen writing titles, questions marks (?) are the only acceptable punctuation mark to include. Avoid using question marks to ask rhetorical questions."
|
|
144
|
-
},
|
|
145
|
-
{
|
|
146
|
-
"type": "guideline",
|
|
147
|
-
"content": "Quotation mark.\n\nIn UI copy, only use quotation marks (“”) when quoting someone’s words or when referring to a file or asset name. Always use smart quotation marks (also called “curly” or “directional”), except when showing code. Smart quotation marks are easier to read because they better match the other characters in a typeface. Straight quotes may also be confused with prime symbols, which are used for measurements. Don’t use quotation marks when directly referring to interface elements. View the Typography page for guidance on using bold text to do so."
|
|
148
|
-
},
|
|
149
|
-
{
|
|
150
|
-
"type": "guideline",
|
|
151
|
-
"content": "Semicolon.\n\nDon’t use semicolons (;). If you need a break in a sentence, use periods, commas, or occasionally em dashes. While semicolons are useful for connecting two related thoughts, they add a formal and academic tone to text and have shown to negatively affect user comprehension in UX writing."
|
|
152
|
-
},
|
|
153
|
-
{
|
|
154
|
-
"type": "guideline",
|
|
155
|
-
"content": "Slash.\n\nDon’t use backward slashes, and don’t use a forward slash ( / ) to combine words or ideas. This comes across as noncommittal, and affects comprehension and clarity. Instead, use the words “and” or “or.” Don’t use “and/or.”"
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
"type": "guideline",
|
|
159
|
-
"content": "Vertical bar.\n\nDon’t use the vertical bar (|) in running text. Avoid using it to divide information in places other than webpage titles tags and footer info. It shouldn’t be used for purely stylistic or decorative purposes when blank space between items is sufficient. When you use the vertical bar, use an icon and not its text form. Additionally, make sure you change its name in JAWS to “Pause” for proper accessibility."
|
|
160
|
-
},
|
|
161
|
-
{
|
|
162
|
-
"type": "guideline",
|
|
163
|
-
"content": "Amounts.\n\nUse K for thousands, M for millions, B for billions, capitalized, no periods. Include a space between the number and the unit of measurement (e.g., \"71 M records found\")."
|
|
164
|
-
},
|
|
165
|
-
{
|
|
166
|
-
"type": "guideline",
|
|
167
|
-
"content": "Measurements and dimensions.\n\nFor full sentences where measurements or other numbers are present, use AP style and spell out the unit of measurement (e.g., 2 points, 2 picas, 2 pixels, 2 megabytes). Similarly, use AP style when abbreviating measurements or time. Make sure there’s a space between the number and the unit of measurement (e.g., 2 pt, 2 MB, 2 min, 2 hr)."
|
|
168
|
-
},
|
|
169
|
-
{
|
|
170
|
-
"type": "guideline",
|
|
171
|
-
"content": "Months.\n\nUse Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec (no periods)."
|
|
172
|
-
},
|
|
173
|
-
{
|
|
174
|
-
"type": "guideline",
|
|
175
|
-
"content": "Days.\n\nUse Sun, Mon, Tue, Wed, Thu, Fri, Sat (no periods)."
|
|
176
|
-
},
|
|
177
|
-
{
|
|
178
|
-
"type": "guideline",
|
|
179
|
-
"content": "Time.\n\nUse sec, min, hr as singular, no periods, no comma, and with a space in between the number and the unit of time (e.g., 1 hr 21 min). Use lowercase am and pm indicators without a preceding space, unless you’re describing 24-hour time (e.g., 17:15)."
|
|
180
|
-
},
|
|
181
|
-
{
|
|
182
|
-
"type": "guideline",
|
|
183
|
-
"content": "Currency.\n\nUse the numerical form of $1.00 when formality is needed, or when the number is dynamic and might include cents. Use the number form of $1 when you need a more casual, neutral tone or if there is a space constraint and you can round off to the nearest dollar. Use the international abbreviation for the currency when you need to disambiguate types of currency (e.g., \"$100 USD equals $138.21 SGD\")."
|
|
184
|
-
},
|
|
185
|
-
{
|
|
186
|
-
"type": "guideline",
|
|
187
|
-
"content": "Large numbers.\n\nUse a comma to offset groups of three digits, for readability: 10 100 1,000 10,000 100,000 1,000,000 But for the best readability, when citing large, round numbers, spell out the word: 4 thousand 81 million 2.5 billion"
|
|
188
|
-
},
|
|
189
|
-
{
|
|
190
|
-
"type": "guideline",
|
|
191
|
-
"content": "Numerals.\n\nIn running text, write out the words zero through nine, then start using the number for 10 and higher. When telling time, presenting a series or range, or providing a timestamp, use the number forms: 0 through 9. You can adjust how you format numerals if you feel it’s appropriate for your situation. Using a number adds more emphasis than spelling out the word. For example, if you were to say “Compare two files and see the changes,” the emphasis is on the comparison, not on the number of files. \"Read all eight comments\" focuses on the availability of comments; \"Read all 8 comments\" focuses on the number of comments. If you’re mentioning currency or time alongside other types of numbers, spell out the number to make the currency or time more prominent."
|
|
192
|
-
},
|
|
193
|
-
{
|
|
194
|
-
"type": "guideline",
|
|
195
|
-
"content": "Percentages.\n\nUse the percent symbol (%) instead of spelling out the word \"percent."
|
|
196
|
-
},
|
|
197
|
-
{
|
|
198
|
-
"type": "guideline",
|
|
199
|
-
"content": "Dates.\n\nDate formatting is contextual, and it will depend on your product and use case. Different kinds of date formatting can be used for standalone strings in running text or for strings in more data-rich views. Some experiences might require the full format, where others might require something more compact: Full: Monday, August 21, 2017 at 3:07pm Compact: Mon, Aug 21, 2017, 3:07pm Additionally, dates are often localized. For example, in Europe and the U.K., the previous date example would be written: Full: Monday, 21 August at 15:07 Compact: Mon, 21 Aug, 15:07 For U.S. English, you can also format dates as MM-DD-YYYY, using the numeral for the month instead of the word. Use a 2-digit format (including a 0, even with single digit months and days). The 2-digit format also helps make it easier to parse and compare multiple dates, especially in tables or lists: 02/24/2000 04/01/2015 Work with a localization expert to localize dates and times for your product’s specific cases. Learn more about the formatting for abbreviating dates (months and days) in the Abbreviations section."
|
|
200
|
-
},
|
|
201
|
-
{
|
|
202
|
-
"type": "guideline",
|
|
203
|
-
"content": "Time.\n\nDo not use:00 with whole numbers When presenting a range of time, use an en dash without spaces in between, and do not include am or pm on the first time if it’s the same as the last When translating to 24-hour time, do not include am and pm (e.g., 17:15) Learn more about the formatting for abbreviating time (hours, minutes, seconds, and am and pm indicators) in the Abbreviations section."
|
|
204
|
-
},
|
|
205
|
-
{
|
|
206
|
-
"type": "guideline",
|
|
207
|
-
"content": "Relative time is either used to convey the amount of time elapsed since an event (such as how long since a project was last saved or edited), or the amount of time remaining in an ongoing process (such as how much longer an asset will take to render or download). Use words like “hour,” “day,” and “month” and their respective abbreviations once the time has reached that threshold for measurement. Such as: 1 hour (rather than 60 minutes) 1 day (rather than 24 hours) 1 month (rather than 30 days) 1 year (rather than 365 days) The usage of relative time is contextual, and will depend on your product and use case (for example, timestamps and locale style or standards). If you’re not building in U.S. English, partner with a localization expert for your product’s specific considerations."
|
|
208
|
-
},
|
|
209
|
-
{
|
|
210
|
-
"type": "guideline",
|
|
211
|
-
"content": "Elapsed time.\n\nWhen describing elapsed time, break it down as follows: Just now 1 minute ago X minutes ago 1 hour ago X hours ago 1 day ago X days ago 1 month ago X months ago 1 year ago X years ago"
|
|
212
|
-
},
|
|
213
|
-
{
|
|
214
|
-
"type": "guideline",
|
|
215
|
-
"content": "Remaining time.\n\nWhen showing remaining time, use the following pattern: X hours remaining X minutes remaining X seconds remaining For describing an estimated or uncertain amount of remaining time, use the word \"about\" at the beginning of the string."
|
|
216
|
-
},
|
|
217
|
-
{
|
|
218
|
-
"type": "guideline",
|
|
219
|
-
"content": "Timestamps.\n\nFor a timestamp in a video editor where precision is needed, go by hour, then minute, then second, following this formula: HHSS. In a tutorial playlist, for example, less detail is needed. If the video is less than an hour long, omit the hours."
|
|
220
|
-
},
|
|
221
|
-
{
|
|
222
|
-
"type": "guideline",
|
|
223
|
-
"content": "Time zones.\n\nAvoid time zones unless absolutely necessary — if possible, dynamically convert to the user’s time zone. If the time zone is absolute, use the common name, like Pacific Time, or India Standard Time. Don’t use UTC formulas. If space is constrained, use a time zone's acronym (e.g., PST, EST), but make sure you provide extra context to your localization team if doing so. For relative time and clarity, say “in your time zone.”"
|
|
224
|
-
},
|
|
225
|
-
{
|
|
226
|
-
"type": "guideline",
|
|
227
|
-
"content": "Introductory phrases.\n\nUse an introductory phrase with a colon to lead into the list, and write each list item so it works with that phrase."
|
|
228
|
-
},
|
|
229
|
-
{
|
|
230
|
-
"type": "guideline",
|
|
231
|
-
"content": "Be consistent and use parallel construction.\n\nPhrase your list items to be consistent with each other as much as possible. This helps with comprehension and readability. Some things to keep in mind when writing lists: Capitalize the first letter of each list item. Generally, don’t use terminal punctuation in list items, unless it’s a complete sentence or sentences. If the list includes action items (as in a series of instructions), the entire list should follow the same format, with the verb first. If it’s a list of nouns, all items on the list should include nouns."
|
|
232
|
-
},
|
|
233
|
-
{
|
|
234
|
-
"type": "guideline",
|
|
235
|
-
"content": "Capitalize each list item.\n\nCapitalize the first letter of each list item and use sentence case."
|
|
236
|
-
}
|
|
237
|
-
],
|
|
238
|
-
"sourceUrl": "https://main--spectrum-hub--adobe.aem.live/content/grammar-and-mechanics",
|
|
239
|
-
"lastUpdated": "2026-09-04",
|
|
240
|
-
"status": "published",
|
|
241
|
-
"tags": [
|
|
242
|
-
"UX writing",
|
|
243
|
-
"AP style",
|
|
244
|
-
"Active voice",
|
|
245
|
-
"Passive voice",
|
|
246
|
-
"Contractions",
|
|
247
|
-
"Contraction considerations",
|
|
248
|
-
"Verb tenses",
|
|
249
|
-
"Readability",
|
|
250
|
-
"Localization"
|
|
251
|
-
]
|
|
252
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
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/header-browsing-context.json",
|
|
4
|
-
"name": "header-browsing-context",
|
|
5
|
-
"title": "Browsing context: Header",
|
|
6
|
-
"category": "designing",
|
|
7
|
-
"documentBlocks": [
|
|
8
|
-
{ "type": "purpose", "content": "Browsing context: Header" },
|
|
9
|
-
{
|
|
10
|
-
"type": "guideline",
|
|
11
|
-
"content": "Limit the number of call-to-action (CTA) buttons.\n\nAs a general rule, only use one call-to-action (CTA) button, aside from any buttons used to log in or log out, as defined in the universal nav. When too many CTAs are shown at once, the messages compete for attention and dilute the ability for a focused attention hierarchy. If there are multiple actions, consider combining them into a single menu or use other button types. The button should represent the most important CTA across the product; for example, “Share” and “Get desktop app” are common CTAs. Image: Example of correct usage of using limited call-to-action buttons. One button, label Get desktop app. An icon-only button appears to the right, visible label on hover, Join the Discord. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_16fd8edfc024330c607cbc6d5c94ca4c187ed6276.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage of including too many call to action buttons. First button, label Get desktop app. Second button, label Join the Discord. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1bdd7c92cc1e26fcf2c5d56a39f4c284c077d040c.png?width=750&format=png&optimize=medium)"
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
"type": "guideline",
|
|
15
|
-
"content": "Examples.\n\nImage: Diagram showing various examples of the app frame header. First example, side navigation with a search field. Second example, side navigation with a minimized search field. Third example, header navigation without search. Fourth example, header navigation with a minimized search field. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1d6bc2d88c41f9828a0793f7d75b219f595af6868.png?width=750&format=png&optimize=medium)"
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
"type": "guideline",
|
|
19
|
-
"content": "Keyboard interactions.\n\nIf a “skip to main content” button is enabled, it appears only on keyboard focus as the first item in the focus order. View details and examples of keyboard interactions documentation. Key Interactions TabFocuses onto or off of the header.Arrow keysMoves between header navigation items.Space/enterExecutes selection of the item and changes the view of the page in the content area. The focus remains on the selected header item."
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
"type": "guideline",
|
|
23
|
-
"content": "Cursor guidelines.\n\nState Cursor Description HoverPointer Product icon and name is a link and should use a pointer.HoverArrowEverything else that is not a link."
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
"type": "guideline",
|
|
27
|
-
"content": "Diagram with notes about the app frame header in the editing context. If there’s a menu represented by a hamburger icon, such as the application menu in Creative Cloud, it should be shown to the left of the product logo for continuity with the browsing context. The product name can be hidden in the editing context in order to provide more room for other actions. The height of the header should be the same as in the browsing context (56 px). Image: Diagram with notes about the app frame header in the editing context. If there’s a menu represented by a hamburger icon, such as the application menu in Creative Cloud, it should be shown to the left of the product logo for continuity with the browsing context. The product name can be hidden in the editing context in order to provide more room for other actions. The height of the header should be the same as in the browsing context (56 px). (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_14ef38e0e7935f59101fd8204c21d2ea38023bc05.png?width=750&format=png&optimize=medium)"
|
|
28
|
-
}
|
|
29
|
-
],
|
|
30
|
-
"sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/header-browsing-context",
|
|
31
|
-
"lastUpdated": "2026-09-04",
|
|
32
|
-
"status": "published",
|
|
33
|
-
"tags": [
|
|
34
|
-
"App frame header",
|
|
35
|
-
"Top App Bar (TAB)",
|
|
36
|
-
"Product lock-up",
|
|
37
|
-
"Navigation",
|
|
38
|
-
"Universal nav"
|
|
39
|
-
]
|
|
40
|
-
}
|
|
@@ -1,105 +0,0 @@
|
|
|
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/illustration.json",
|
|
4
|
-
"name": "illustration",
|
|
5
|
-
"title": "Illustration",
|
|
6
|
-
"category": "designing",
|
|
7
|
-
"documentBlocks": [
|
|
8
|
-
{ "type": "purpose", "content": "Illustration" },
|
|
9
|
-
{
|
|
10
|
-
"type": "guideline",
|
|
11
|
-
"content": "Comparing Spectrum 1 and Spectrum 2.\n\nHere’s a summary of the main updates that you’ll notice with Spectrum 2 illustrations, compared to the style of Spectrum 1: Similar to icons and text, all linear illustrations now use Spectrum gray 800 instead of gray 500. This meets accessibility standards by ensuring visibility regardless of the background color. These illustrations have a much closer connection to the icon metaphors and forms, for a consistent and cohesive visual language. Linear illustrations feature rounder and friendlier forms, making them feel more approachable. The compositions are also less cluttered and more clear, to promote focus and scaleability. The S2 illustrations come in three sizes: S (48×48 px), M (96×96 px), and L (160×160 px). These sizes are in line with the spacing tokens, and provide more flexibility for layouts. With the introduction of gradient illustrations, there's now an option for illustrations with more color. Color creates more expressiveness and brand integration, as well as supports multiple levels of attention hierarchy. Image: A diagram showing a comparison of the illustration styles in Spectrum 1 to Spectrum 2. Linear illustrations have been updated, evolved from the Spectrum 1 outline style. Gradient illustrations replace the Spectrum 1 filled illustration style. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_13eea667b3b4871c800862488c41d418e3980dc9f.png?width=750&format=png&optimize=medium)"
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
"type": "guideline",
|
|
15
|
-
"content": "Spectrum 2 illustrations have two styles: linear (monochromatic) and gradient (color). Both have specific use cases. If you’re not sure about which style is appropriate for your use case, please reach out to the Spectrum Brand team for support. Do not create your own illustrations, or use 3rd-party assets. Illustrations are very visible parts of our design system that drive the consistent look and feel to our products, so they need to be used strategically and thoughtfully."
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
"type": "guideline",
|
|
19
|
-
"content": "Sizes.\n\nLinear illustrations come in three sizes: small (48×48 px), medium (96×96 px), and large (160×160 px). Small and medium are the most commonly used sizes; large is not used as often. For most use cases, the medium size works well across mobile, tablet, and desktop. Image: Comparison of the three different sizes of the linear illustrations, and examples of those same sizes in different components: empty states and a drag and drop state. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1b2b3bd8b3cf1fc8a4402bc506a62335dec3844f2.png?width=750&format=png&optimize=medium)"
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
"type": "guideline",
|
|
23
|
-
"content": "Color.\n\nThe linear illustrations use Spectrum gray 800, and switch between light and dark UI. For production, the SVGs in the A4U libraries use embedded tokens, similar to the structure of the icons. This ensures that they can programmatically switch depending on UI brightness or color theme. The components in the Figma library use the S2 / Variables tokens. Image: Example of the same linear illustration in light and dark UI, showing the color values and a snippet of the code block in the SVG asset that controls the fill color. In light UI, a paper airplane illustration uses the token Gray 800, hex 292929. In dark UI, it uses Gray 800, hex DBDBDB. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_161598787a4fc6bd5eb836f1803997f872a4a2b86.png?width=750&format=png&optimize=medium)"
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
"type": "guideline",
|
|
27
|
-
"content": "Naming convention.\n\nLinear illustrations use the following naming convention: Prefix identifies it as part of a larger group of assets: in this case, S2 (Spectrum 2). Type is the type of the asset: lin for linear illustration. Illustration name is in camel case, and there are no empty spaces or individual characters allowed. Illustration size is stated in pixels at @1x. Filetype suffix indicates the asset format, like SVG or PNG. Image: A breakdown of the correct linear illustration naming convention: prefix, type, illustration name, size, and filetype suffix. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_18d304a08e374f9964e12890ec38c9bba85567f79.png?width=750&format=png&optimize=medium)"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"type": "guideline",
|
|
31
|
-
"content": "Use cases.\n\nLinear illustrations are straightforward and clear UI illustrations for a variety of use cases, such as empty states or error messages. They support calls to action — like a drop zone illustration, or an empty state illustration — that explain the next steps for how to use the interface in order to get started or move forward. A good example of a use case for a linear illustration is with the illustrated message component. Image: Example of a linear illustration used in the illustrated message component, in both light and dark UI. A lock illustration, with text This album is private. You can create a link to share it with others. Two buttons, main action Create link, secondary action Not now. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1f87c9768563bddfd65060b06d1e681715feb80c7.png?width=750&format=png&optimize=medium)"
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
"type": "guideline",
|
|
35
|
-
"content": "Sizes.\n\nGradient illustrations come in the same sizes as the linear illustrations: small (48×48 px), medium (96×96 px), and large (160×160 px). For most use cases, the medium size works well across mobile, tablet, and desktop. Image: Diagram comparing the three different sizes of the gradient illustrations, small, medium, and large, and their pixel measurements. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1c75bf06101012a147b3e64b1ae8dae81b87bd15d.png?width=750&format=png&optimize=medium)"
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
"type": "guideline",
|
|
39
|
-
"content": "Colors.\n\nThe colors of the gradient illustrations use Spectrum’s 6.0.0 color system. They're tied to the different Adobe product categories and individual products. There are two gradients that can be used for surfaces that show different products, or that are not product-specific. The other gradients are tied to specific products or clouds. For example, blue is tied to the photography and digital imaging category (such as Photoshop, Lightroom, and Fresco), while green represents the 3D category (such as Substance 3D Stager and Substance 3D Designer). It’s essential to use the appropriate illustration colors according to the product categories. If the application is for multiple products, use one of the gradient swatches that incorporate the Adobe brand red. Do not use the category gradient sets as semantic colors to communicate meanings like errors (red), warnings (yellow), or successes (green). Image: Colorful gradient speech bubble icons representing Adobe products, grouped by categories like Creative Cloud, Experience Cloud, and Document Cloud. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1f1087412344f583f6cf99cba255acea92ff13593.png?width=750&format=png&optimize=medium)"
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"type": "guideline",
|
|
43
|
-
"content": "Naming convention.\n\nGradient illustrations use the following naming convention: Prefix identifies it as part of a larger group of assets: in this case S2 (Spectrum 2). Type is the type of the asset: fill for gradient illustration. Illustration name is in camel case, and there are no empty spaces or individual characters allowed. Category differentiates the different gradient fill colors. The categories include: allproduct1, allproduct2, 3D, DC, drawing, DVA, express, EC, photo, and print. Illustration size is stated in pixels at @1x. Filetype suffix indicates the asset format, like SVG or PNG. Image: A breakdown of the correct gradient illustration naming convention: prefix, type, illustration name, product category, size, and filetype suffix. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_176dfbbc5046d16e2b1322c5bb5b3a1e6bbb62ed3.png?width=750&format=png&optimize=medium)"
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
"type": "guideline",
|
|
47
|
-
"content": "Illustrations and attention hierarchy.\n\nThe different styles of illustrations are connected to the Spectrum 2 concept of attention hierarchy. Linear illustrations are elements that communicate lower attention, as they blend in well with the rest of the UI. They can be used multiple times in a layout without drawing too much attention. Gradient illustrations are high attention elements that should be used sparingly and selectively. Only one illustration, element, or group of elements should have high attention on a page. Learn more about this with the Spectrum 2 attention hierarchy guidelines. Image: Photoshop welcome screen with options to upload an image, quick actions, start from scratch, and set document size. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_15590169166eda531bea9081c8216c90570e96b7c.png?width=750&format=png&optimize=medium)Image: Photoshop welcome screen with options: Quick actions, Start from scratch, Start with a prompt, Document size, and Drop a file. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_15b4ef4b67fc664c934cf0106875d1f23c7551d8a.png?width=750&format=png&optimize=medium)"
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
"type": "guideline",
|
|
51
|
-
"content": "Use linear illustrations for errors or critical messages.\n\nErrors or critical messages should only use linear illustrations. Gradient illustrations use colors that can be misunderstood as semantic colors (e.g., green for positive, red for negative). They also have an upbeat and inspirational tone, which isn’t appropriate in situations where a user may be frustrated by something that’s an inconvenience or is disruptive to them in accomplishing their work. Image: Example of the correct way to use a linear illustration. An error message alongside with a linear illustration to supplement the text. Example text, Browser not supported. Google Chrome is currently the only browser that supports this site. Make sure you are running the latest version of Chrome and try again. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1909bc87fc71510c164fd1a8688537bd3c0097ce1.png?width=750&format=png&optimize=medium)"
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"type": "guideline",
|
|
55
|
-
"content": "Use linear style when showing several illustrations together.\n\nThe linear illustration style works well for layouts that feature a number of illustrations together (such as a collection of cards). Linear illustrations draw a lower level of attention and blend in well with the UI, so it’s appropriate to use them in a collection of elements. Gradient illustrations draw a lot of attention in multiples, so they need to be used sparingly and sparsely. Image: Example of the correct way to use several linear illustrations at once, one in each card, in a group of three cards. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_19bfd79664ef916477bd94eaec0e9aaf6af20c954.png?width=750&format=png&optimize=medium)"
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"type": "guideline",
|
|
59
|
-
"content": "Don’t resize illustrations.\n\nDon’t scale or resize linear illustrations. The stroke weight and the corner radii are already set to work best in the given canvas sizes. Image: Example of incorrect way of using linear illustrations. Sizes and scales are not using the pre-determined standards, and are too large, too small, or their outlines are too thick or too thin. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_11865922d8a74adaf2dfd62332e4393aa2233919a.png?width=750&format=png&optimize=medium)"
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
"type": "guideline",
|
|
63
|
-
"content": "Don’t create your own linear illustrations.\n\nIt’s essential to have consistency in tone and metaphors across all Adobe products. Don’t create your own linear illustrations or alter existing ones. If you need a new linear illustration, make a request using Workfront. Image: Examples of the correct and incorrect way to use linear illustrations, through an illustration of a camera. Correct way, using an existing illustration. Incorrect way, creating your own for the exact same metaphor. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1b48ab458f55ea7bf1c36445f7579a26fadedbc63.png?width=750&format=png&optimize=medium)"
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
"type": "guideline",
|
|
67
|
-
"content": "Don’t recolor illustrations.\n\nAlways use gray 800 for the illustration color. Using semantic colors (red, orange, green, blue) can help reinforce meaning, but should be considered on a case-by-case basis. Image: Example of the correct way to use color in linear illustrations. Semantic color of green is only used in an illustration of a checkmark, to reinforce the meaning of the “success” semantic. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1ba96a91ade65c30aec9dd769e5b3b8552f611923.png?width=750&format=png&optimize=medium)Image: Example of the incorrect way to use color in linear illustrations. A collection of 3 linear illustrations that all use various colors and gradients, when they should only be monotone. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1eb0cebc9e7fb6ac19aa296f4b9584b3926a2b180.png?width=750&format=png&optimize=medium)"
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"type": "guideline",
|
|
71
|
-
"content": "Use gradient illustrations thoughtfully.\n\nGradient illustrations are high attention elements in the layout. Use them strategically and thoughtfully to draw the user’s attention and to provoke a delightful moment. Image: Adobe Lightroom interface showing an empty photo library with a prompt to drag and drop files. Sidebar menu and search bar visible. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1d2f8dd7d12147ec4f5f09c7a608d5a2064e1d4aa.png?width=750&format=png&optimize=medium)"
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
"type": "guideline",
|
|
75
|
-
"content": "Don’t show more than one gradient illustration at a time.\n\nGradient illustrations draw more attention because they’re very colorful. Using more then one in a given view will make the UI too busy and too loud. Use gradient illustrations sparingly to guide a user’s attention to engaging, high-value actions such as uploads, starting projects, or commenting. Image: Example of the incorrect way to use gradient illustrations. Several gradient illustrations are being used at the same time, one in each card in a group of three cards. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_12ee1bcd102ca17d661adbfe3c89b9c8372bb88d7.png?width=750&format=png&optimize=medium)"
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
"type": "guideline",
|
|
79
|
-
"content": "Don’t use gradient illustrations for error or critical messages.\n\nGradient illustrations incorporate product category colors, and also include colors that have semantic meanings in Spectrum: red, orange, or green. It creates inconsistency and confusion to have an error message or a critical alert in green (a color has a positive semantic meaning). Use gradient illustrations when you want to emphasize positive actions. Gradient illustrations have an upbeat and inspirational tone, which isn’t appropriate in situations where a user may be frustrated by something that’s an inconvenience or is disruptive to them in accomplishing their work. Image: Example of an incorrect way to use a gradient illustration. An error message alongside with a gradient illustration to supplement the text. The illustration uses a green gradient, which doesn’t match what it’s communicating in the text. Text, Browser not supported. Google Chrome is currently the only browser that supports this site. Make sure you are running the latest version of Chrome and try again. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1e3e4893c0094c98dbb653518d0a7a24cb8c0f7eb.png?width=750&format=png&optimize=medium)"
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
"type": "guideline",
|
|
83
|
-
"content": "Don’t create your own gradient illustrations.\n\nIt’s essential to have consistency in tone and metaphors across all Adobe products. Don’t create your own gradient illustrations or alter existing ones. If you need a new gradient illustration, make a request using Workfront. Image: Examples of the correct and incorrect way to use gradient illustrations, through an illustration of a camera. Correct way, using an existing illustration with the correct gradient for the product. Incorrect way, creating your own gradient with incorrect colors for the product, as well as a different illustration style. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1c4ab820dc40eeee3ba200b37d9d213b60a2bc1fd.png?width=750&format=png&optimize=medium)"
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
"type": "guideline",
|
|
87
|
-
"content": "Use the correct colors for your product.\n\nThe colors in gradient illustrations are connected to the product categories. For example, an illustration for a Substance 3D product should use the Substance 3D green colors. Do not use different colors than those of your product category. Reach out to the Spectrum Brand team for guidance about the appropriate colors for your use case. Image: Two icons compared: a blue chat bubble marked incorrect with a red \"X,\" and a green chat bubble marked correct with a green checkmark. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_1e017c1f9e39fcbf65abdaa277f2018d2363d1b59.png?width=750&format=png&optimize=medium)"
|
|
88
|
-
},
|
|
89
|
-
{
|
|
90
|
-
"type": "guideline",
|
|
91
|
-
"content": "Test if gradient illustrations work well in your layout.\n\nIt’s highly recommended to test gradient illustrations as you’re designing your layout. They’re very expressive and colorful, so it’s important to determine how they complement (or don’t) different communication points (e.g., user-generated content, onboarding, feature banners, upsells, and more). If gradient illustrations are making the layout too noisy, use linear illustrations instead."
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
"type": "guideline",
|
|
95
|
-
"content": "Thematic banners are descriptive and represent a specific topic or feature. Similar to the gradient illustrations, they’re either connected to the product brand categories by color, or they use the generic gradient swatches. These banners use the same shapes, metaphors, and elements as the linear illustrations, but they have a distinct style that is combined with the gradients and colors of the gradient illustrations. With their size, usage of color, and high editorial quality, thematic banners are high on the attention hierarchy scale. In layout, they work best when used to promote positive and high-impact moments, such as announcing new features. Because of this, they should be used sparingly. Thematic banners are created on a case-by-case basis by the Spectrum Brand team. You can request thematic banners through this Workfront request form. There is no asset library for thematic banners because they have unique needs for each product use case. Image: Premiere Pro UI with semantic search banner, \"Start something new\" options for timeline, blank document, and preset dimensions. (source: https://preview.spectrum.adobe.com/foundations/visual-language/media_19ee2981afc4939c4ce4ba256e53603324443b9e7.png?width=750&format=png&optimize=medium)"
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
"type": "guideline",
|
|
99
|
-
"content": "Before you work with these illustrations, please familiarize yourself with the usage guidelines here. You’ll especially need to understand the differences in how to use the linear and gradient illustrations. For new or existing illustrations, please submit a request through this Workfront form. You can also reach out to the Spectrum Brand team with any questions on Slack in #product-branding or by email. To view existing S2 Illustrations, visit the S2 / Illustrations library in Figma. The assests from this library are also available in A4U for production and engineering assets (VPN access required)."
|
|
100
|
-
}
|
|
101
|
-
],
|
|
102
|
-
"sourceUrl": "https://preview.spectrum.adobe.com/foundations/visual-language/illustration",
|
|
103
|
-
"lastUpdated": "2026-08-19",
|
|
104
|
-
"status": "published"
|
|
105
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
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/in-product-word-list.json",
|
|
4
|
-
"name": "in-product-word-list",
|
|
5
|
-
"title": "In-product word list",
|
|
6
|
-
"category": "designing",
|
|
7
|
-
"documentBlocks": [
|
|
8
|
-
{ "type": "purpose", "content": "In-product word list" },
|
|
9
|
-
{
|
|
10
|
-
"type": "guideline",
|
|
11
|
-
"content": "Consistent language builds user trust and strengthens their knowledge that a product is meeting their needs. Using inconsistent vocabulary across Adobe’s apps and products can be confusing to users, and it makes it harder for those creating education and documentation. Below is a list of words that we either recommend using, or suggest avoiding. Some words are noted as internal-only jargon at Adobe. We’ve still included these in this list because, while we may use them internally when we work on or talk about our products, they occasionally appear in user-facing content in ways that aren’t clear, intuitive, or appropriate. For capitalization guidance, view the Grammar and mechanics page for the UX writing style guide. Keep in mind that some terms are branded and follow Adobe Brand Guidelines for styling and usage. This list is regularly updated and is by no means complete. If you have words you’d like to submit for consideration, please fill out this suggestion form. The Adobe Design Content Strategy team reviews suggestions once a quarter, and will get in touch if they need more information."
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
"type": "guideline",
|
|
15
|
-
"content": "Consistent language builds user trust and strengthens their knowledge that a product is meeting their needs. Using inconsistent vocabulary across Adobe’s apps and products can be confusing to users, and it makes it harder for those creating education and documentation. Below is a list of words that we either recommend using, or suggest avoiding. For capitalization guidance, view the Grammar and mechanics page for the UX writing style guide. Keep in mind that some terms are branded and follow Adobe Brand Guidelines for styling and usage. This list is regularly updated and is by no means complete. If you have any questions or seek clarity on any words on this list, you can email us. Word or Phrase Status Usage Notes addUse with caution In Creative Cloud products, to add is to bring already existing assets into a certain browser or view. In Experience Cloud products, this word is reserved for images. For example: Add PNG Add images, fonts, styles, and more to a library to keep what you need nearby. Avoid using the word add for the action of inviting people to a document or other shareable resource. affordanceAvoidInternal jargon used as a word to describe a feature or a control. Do not use the word affordance in UI copy, and refer to the action that a component is used for instead.appPreferred App is preferred over application for the sake of brevity, simplicity, and because app is so widely used now to describe both desktop and mobile software applications.applicationUse with caution App is preferred over application for the sake of brevity, simplicity, and because app is so widely used now to describe both desktop and mobile software applications.assetUse with caution Jargon for any file, element, or content that a user needs to complete their goal, as well as the output of completing that goal. At Adobe, this includes things such as desktop-synced files, mobile creations, Creative Cloud libraries, images, fonts, colors, gradients, or CSS information. Asset is a generic word and has multiple meanings which can be conflicting or ambiguous. For example, there are assets that are part of a creative agency workflow, and there are assets to describe a generic grouping of disparate items. Try to avoid using this word if possible. Instead, be more specific and describe what something is, such as a video or an illustration. If you can’t, proceed with asset. auto / auto-Use with caution For feature names and UI labels, use the adjective form (e.g., Auto tag, Auto crop, Auto analyze, Auto save ). New names and labels that use auto require the Brand team’s approval. In general references, use the combining form (e.g., auto-tag, auto-crop, auto-analyze, auto-save ). When describing how UI elements with auto labels work, generally spell out automatic or automatically. available / not availablePreferred Use not available to describe an app, service, or control that temporarily can’t be accessed or used (e.g., an app is taken down for maintenance). View also supported / not supported. beginPreferredPreferred for descriptive text. For a call-to-action, use start.blacklistAvoid This word has roots in racism and oppression. Replace it with this format to provide contextual clarity: (Action)(object) For example: Blocked users Prohibited IP addresses buttonPreferred When referring to a specific button in an interface, try to refer to the action (e.g, undo, edit ) rather than naming the button. If you need to refer to the interface element directly, capitalize and bold the name of the button but not the word button itself (e.g., Undo button, Edit button ). clickAvoid Avoid instructing a user to click or tap. Instead, use a call-to-action and the right design component to imply the interaction. View select. When you need to refer to the result of clicking on something, use the same words as the call-to-action. closePreferred Use close as a catchall term for a dismissal action. It can also reference OS-specific patterns. Whenever possible, use workflow-specific verbs (e.g., publish, export, delete ) to reinforce the action being taken, instead of the more generic close, finish, or OK. cloud docsAvoid Internal-only jargon. View cloud documents. Amended guidance to come on the rare exception to this rule. Abbreviate as cloud docs in English on mobile when called for due to space constraints. cloud documentsPreferred Use across Creative Cloud products, experiences, and messaging as a functional name, and not as a branded feature of Creative Cloud. Do not capitalize cloud documents on its own. For product UI, align to the interface style specific to the design component (e.g., if all caps, use all caps; if title case, use title case). Only attribute this to relevant apps such as XD or Photoshop, and never to Creative Cloud. (e.g., XD cloud document, not: Adobe Creative Cloud cloud document ). Do not shorten to cloud docs or documents in product UI, marketing, or messaging. Translate this where other functional names are also translated. Amended guidance to come on the rare exception to this rule. Abbreviate as cloud docs in English on mobile when called for due to space constraints. continue / cancelPreferredUse continue and cancel as dual actions in workflows where there is only one way to move forward and it’s not possible to skip or go back steps.courseUse with cautionUse sparingly to describe a sequential arrangement of multiple tutorials that form a cohesive learning experience. Use words like tutorial, tutorials, or tutorial series instead.createUse with caution Create should only be used descriptively (e.g., Use everyday language to create extraordinary results with generative AI ). Do not use create as a UI action in the context of generative AI technology, where content is generated rather than created. creditsUse with cautionView generative credits current version / previous versionAvoidWhen referring to apps, latest version / older version is preferred.custom modelsRequired A model that has been trained on a unique style (e.g., Firefly custom models). Do not use title case. This is not a branded term. dismissAvoid Avoid using dismiss as an action to signify acknowledgement or completion. Use OK instead. This word can be acceptable in rare cases of when the action being taken is a “hard dismiss,” or the equivalent of a user communicating that they do not want to be shown something ever again. If possible, show an icon-only close affordance (typically, a cross icon) if appropriate to the component, to indicate dismissal. documentPreferred Documents is commonly used in Document Cloud to refer to files in general, of any file format. In Creative Cloud, use the word file for a local document, to better distinguish from cloud documents. While all cloud documents are files, not all files are cloud documents. Similarly, all documents are files, but not all documents are cloud documents. doneUse with caution Close and finish are preferred over done for a dismissal call to action. In general, stick to verbs (like close ) over adjectives (like done ) to label actions — verbs more clearly reflect whatever action the user is taking. Use done as an acknowledgment or call to action for a standalone button in a modal, dialog, or overlay when it wouldn’t make sense for the context to use finish, close, or OK. Done conveys finality, allowing users to signal that they no longer want to interact with a given element. downloadPreferred When writing instructional copy, word choice should mirror that of the OS. Otherwise, use download only when referring to the transfer of assets or files from a server onto a device. When guiding users through an installation or update flow, be explicit about the different steps they will take. View also install. drag and dropUse with cautionInstructions for interactions should use the same words that the OS does.edit inAvoidSee open in.embedPreferred Placing an embedded file means that it is no longer connected to the original source file. This saves a static copy of the file’s content into the destination file. For example: Embed a PDF as an image layer in Fresco Place an image as an embedded object to save a copy right here in your Photoshop file. Place as embedded enable / disableAvoidThese terms are needlessly technical to convey the more straightforward on / off. Use turn on / turn off to refer to the actions of activating and deactivating a capability or mode.entitlementUse with cautionInternal-only jargon, along with entitlement-aware, to describe access to a particular app or program.exportPreferredUse export when a file will be saved in a different format than it was created in. If the file will be opened as-is in a different app than it was created in, use open in.fail, failureUse with caution Fail and failure are vague technical terms with a strong negative connotation. Avoid using these words in error messaging when you can be specific about what the problem was. View also success, successful, successfully. featureUse with cautionA single, outcome-oriented functionality of a product or service. Determining if something is a feature happens through a partnership between product, marketing, and branding. This word should not be used to mean “everything in a product.”file namePreferredTwo words. Use instead of one word, filename, in user-facing content. A filename is the technical name that a file system creates (and includes the file type extension). The file name is the name for the file that a user creates.file typePreferred Two words. Use instead of one word, filetype, to refer to file formats such as PNG, JPEG, PDF, PSD, AI, PSDC, etc. Do not abbreviate file types unless there is a character constraint. View JPEG. finishPreferred Use finish in headlines, body copy, or metadata to describe the completion of a user-invoked process or flow. Finish can be used for the last step of interactive learning experiences. Use it strategically in user-driven experiences, not for things that launch automatically. freeUse with caution When using free to describe to an Adobe offering, the offering and all of its features must: cost nothing not require a credit card or subscription for download or use Use free trial to refer to both trials that require payment information and trials that do not. View also freemium. free trialPreferred Free trial is the legally required term for trials with payment, which require a credit card to start the free trial and then automatically convert to a paid subscription after the trial period is over. It is also the preferred way of referring to trials without payment. In the initial call to action for trials with payment, it is required to use one of the following: Start free trial Free trial Start free trial to subscribe Agree and start free trial freemiumAvoid Do not use the word freemium in UI copy. A freemium app is internal jargon for an app that is free to use but requires a credit card payment if the user wants to access its premium features. In the initial call to action for a freemium app, use one of the following: Start for free Download for free Start now Download Get started For actions within a freemium app that do not require a credit card payment or subscription, use “free to try” or “free to edit.” gen techAvoidDo not use gen tech to describe generative AI or other kinds of AI.generateRequired Use generate as a UI action in the context of generative AI technology across the Adobe product ecosystem, where content is generated rather than created. Generate is the initial action as well as the action any time an existing prompt is modified or changed in some way. It is also used where variations are replaced/destructive (formerly refresh ). generate againRequired Not common. Use generate again instead of generate where a single variation is replaced (whether destructive or not) and the use of generate isn't clear enough (e.g., the generative extend feature in Premiere Pro). Use generate more for sets of multiple variations. generate moreRequiredUse generate more instead of load more where variations are stacked (formerly load more ).generate similarRequiredUse generate similar instead of show similar.generationsUse with caution Use generation or generations as a noun to refer to the act of producing output in the context of a Creative Cloud plan or feature. For example: This feature uses 100 credits per generation. Each generation outputs 4 images. Your complimentary generations have been used. generative AIRequiredDo not use GenerativeAI, GenAI, Gen AI, or other shorthand for generative AI.generative creditsPreferredUse to describe Creative Cloud generative credits. OK to shorten to credits on second mention only, if the generative credits context is clear.got itAvoid Got it is overly colloquial. Use OK instead.importUse with caution In most Creative Cloud products, this word means to convert a file to a different format to open it in an application. For Adobe’s video products, import has a broader definition, encompassing add and place. This is because people using these products collect files of different formats into a single view, and then those are converted or “ingested” as links to improve machine performance. For example: Learn more about the supported file formats you can import in Premiere Pro. Go to File > Import to open a Sketch file in XD. In Experience Cloud products, import can refer to adding data sources to a view. View add. in the cloudPreferred Use in the cloud (not on the cloud ) to describe a process that is part of the cloud or deployed using cloud software, like cloud storage and cloud rendering. Do not use with the cloud except in phrasing like “software with cloud services.” View also to / from the cloud. installPreferred When writing instructional copy, word choice should mirror that of the OS. Otherwise, use install (verb) or installation (noun) to describe the process of adding and making software usable on a device. When guiding users through an installation or update flow, be explicit about the different steps involved. For example, don’t use an Install call to action if the user will be redirected to a store or website. View also download. intelligentAvoidDo not use intelligent in naming any UI element.JPEGPreferredUse the full form JPEG, not JPG.latest version / older versionPreferredPreferred over current version / previous version when referring to apps.launchAvoidWhen referring to apps or services or an aspect thereof (e.g., a new window), open is the preferred action.lessonAvoidThe Learn team does not use this term at all. Avoid in UI content.linkPreferred Placing a linked file turns it into a reference to the original source file. Changes made to the placed content in the destination file or to the original source file will be reflected and updated automatically in both locations. For example: Go to File > Place > Linked object to make changes to the Photoshop file from here. Place a linked PDF if you want it to be updated automatically when you edit the PDF. loadUse with caution Preferred for messages like Loading…, Loading {appName}…, Can’t load page, or similar. Use open as an action in reference to an app or service or an aspect thereof (e.g., Open {appName}, Open a new window ). load moreUse with cautionView generate more lock / unlockPreferred To lock something is to freeze it at the current moment in time and prevent changes to its contents. When something is locked, objects associated with it can’t be selected or altered. To unlock something allows a user to select and edit it. These actions are usually represented in the interface via an open or closed padlock icon. long pressUse with cautionInstructions for interactions should use the same words that the OS does.magicAvoidDo not use magic in naming any UI element.masterAvoid Master is an established software term that has roots in bigotry and oppression. Do not use master descriptors to mean primary, main, or source (e.g., main track or source graphic ). Do not use master to describe hierarchy, (e.g., master and slave servers). Instead, describe hierarchical relationships as primary, secondary, tertiary, etc. More menuPreferred In interface language, try not to directly refer to the ellipsis (“…”) contextual menu that provides more options. If you need to refer to it directly, call it the More menu. Bold the word More and capitalize it; menu is lowercase, not bolded. namePreferredAnother word for file. Do not use title to mean name.next / backPreferredUse next and back in workflows (e.g., tours, tasks) where someone would be going back and forth in the flow.next / previousPreferredUse next and previous for pagination (e.g., pages of search results).OKPreferred Use OK as a primary action for acknowledgement if taking that action will not impact a user in a negative way. Style in all-caps no matter the interface element, not as Ok, ok, Okay, or okay. Avoid using dismiss as an action. Be mindful of using OK as an action in flows that involve a user agreeing to options that require payment, or for giving consent. Instead, use more specific verbs and explicitly communicate what someone is acknowledging or agreeing to. on the cloudAvoidView in the cloud and to / from the cloud.one-of-a-kind XAvoidDo not describe generative AI content as one-of-a-kind. We cannot guarantee that all generated content will be 100% one-of-a-kind unique.openPreferredUse open as an action in reference to file, app, service, or an aspect thereof (e.g., Open a new window ).open inPreferred Open in is preferred over edit in, view in, comment in or similar because it is secondary action-agnostic and doesn’t guess at what the user might want to do (e.g., edit, view, review, comment). Secondary actions can be referenced in supporting copy if necessary for a particular flow or context (e.g., “This file is view only on web. To make edits or leave comments, open it in the desktop app”). If the app context is clear (e.g., the user is in Photoshop web and wants to open something on Photoshop desktop), it’s preferred to say, Open in {surface} app (e.g., “Open in desktop app”) for the call to action. If the app context will change (e.g., the user is in Photoshop web and wants to open something on Illustrator desktop), it’s preferred to say, Open in {appName} {surface} and drop app (e.g., “Open in Illustrator desktop”) for the call to action. OSPreferredAbbreviation of operating system. It's also acceptable to spell out the full term, if needed for extra clarity.panelUse with caution Avoid referring to the names of interface elements in UI content unless absolutely necessary; describe the action, rather than the interaction. You can describe something as a panel if it’s a centralized collection of multiple tools, options, or other controls that has a fixed placement and could be collapsible as a navigational element (as opposed to being a temporary view). pinchUse with cautionInstructions for interactions should use the same words that the OS does.placePreferred Placing brings content (e.g., images, other files) from an original source into a destination file. For example: You can place an Illustrator file into your XD layout. One way to bring an image into your Photoshop file is to go to File > Place. Things can be placed as linked or embedded files. platformUse with caution A platform is a technology or group of technologies that are used as a base upon which other applications, processes, technologies, or even other platforms are developed. This word is used to communicate the concept of a centralized, foundational infrastructure (as opposed to a system, which is a grouping of things that work together in the same place). Usage of this word is extremely dependent on context. It can describe where something appears, where something is stored, or a product itself: A tech framework (e.g., UXP) Hardware and devices (e.g., mobile, tablet, desktop) Operating systems (e.g., Android, iOS) Adobe products (e.g., Adobe Experience Platform) playlistUse with cautionUse series to refer to a list of tutorials in a sequence (e.g., “Select the second tutorial in the series”).pleasePreferredUse in an instructional way, and in error messages when asking a user to do an action that requires significant effort or time (e.g., Please provide feedback, Please reload the page ).pluginPreferredOne word, with no hyphen (not: plug-in ).preferencesUse with caution For both web and mobile apps, treat preferences as a subset of settings and in menu names, call out the type of settings (e.g., Preferences may be found under App settings or Account settings ). A user can customize, choose, or select preferences for various things within a settings menu rather than setting their preferences. pressUse with cautionInstructions for interactions should use the same words that the OS does.productUse with caution Internal-only jargon. Use sparingly to describe a self-contained experience that provides a user with a specific benefit (e.g., Creative Cloud is a collection of products ). To those outside of Adobe, a product is often thought of as a name-branded thing that is a countable unit of sale that may be downloaded to a device (e.g., one Adobe Photoshop subscription ). Use the word app to describe this concept. programAvoidUse app instead.promptUse with cautionOK to use prompt consistently in your product if approved by Content Strategy, Brand, and Legal. Eventually we may all move to something like input.quitAvoid Avoid this word especially as a call-to-action because it is platform-specific. While you can quit on MacOS, you can exit or close on Windows. Quit can be used generally as a reference to this action on MacOS. railAvoid Internal-only jargon used to describe the UI element that spans the top or the bottom of a screen. To make accessible products, this word should not be used in UI content. Instead, be more directive. If you need to refer to this design element in your product, try to write around describing its appearance and instead talk about its function. For example, talk about the actions or the feature names inside the rail, rather than the rail itself. recalledAvoid Whenever possible, use generic language such as not supported or not available to describe an app or service that can’t be used. Words like revoked, recalled, or rescinded have negative connotations, often making users feel like they’re being scolded or fearful of losing work. Instead of getting into the reason for an error, guide users to a resolution. View also the Spectrum Writing for errors page. recommend, recommendationPreferred Use recommend (verb) and recommendation (noun) for when a human is doing the action (e.g., “We recommend backing up your work before sharing”). To suggest or make a suggestion is the preferred way to describe when AI or other technology is doing the action. redlineAvoid Redline is a common design term that has roots in racism and oppression. To refer to the details, parameters, or attributes of a design that are communicated to engineers for implementation, use specifications or specs instead.reference XRequiredWhen using a reference to generate content (e.g., an image), use reference X to label or refer to this element (e.g., reference image ).refreshPreferredUse refresh as the action to view page or screen updates, or to fix issues (e.g., “Refresh this page and contact support if the issue persists”).regenerateAvoidDo not use regenerate. View Generate, Generate again, Generate more, Generate similar.relaunchAvoid Restart is the preferred action for any hardware, process, app, or service, regardless of desktop, mobile, or web surface context.reloadUse with cautionThere may be a technical reason why we’d want to use reload, but for most use cases we can say things like Refresh this page, Restart the app, and so on.rescindedAvoid Whenever possible, use generic language such as not supported or not available to describe an app or service that can’t be used. Words like revoked, recalled, or rescinded have negative connotations, often making users feel like they’re being scolded or fearful of losing work. Instead of getting into the reason for an error, guide users to a resolution. View also the Spectrum Writing for errors page. restartPreferredUse restart as an action in reference to an app, service, device, process, or workflow.resultsUse with caution Avoid results as a label or description of generated content in generative AI creative modules, features, or tools. View variations. OK to use in things like tooltips to describe an effect (e.g., move an object for a desired result ). revokedAvoid Whenever possible, use generic language such as not supported or not available to describe an app or service that can’t be used. Words like revoked, recalled, or rescinded have negative connotations, often making users feel like they’re being scolded or fearful of losing work. Instead of getting into the reason for an error, guide users to a resolution. View also the Spectrum Writing for errors page. runUse with cautionUse run to describe scenarios where a machine or system is the actor rather than the user (e.g., run a report, run a script, or run a simulation ).scrollUse with cautionInstructions for interactions should use the same words that the OS does.seeAvoidIn order to be more inclusive, avoid using the word see. Use the word view instead. For example, instead of See all results, say View all results.selectPreferred Select is the preferred gestural word over click or tap for several reasons: It’s device-agnostic, meaning that it’s not necessary to write a new string for different devices. It’s more inclusive because many people using assistive technology aren’t clicking or tapping to take an action. It guards against future design changes and surface migrations. For example, if a UI element stops being clickable and instead uses a slider, the word select would still work for both cases. send toAvoidUse open a copy or open a copy in instead. View also open in.seriesPreferred Series refers to a list of tutorial videos. Use sparingly, such as a tutorial series or series of tutorials. Preferred over playlist.servicePreferred Describes content, components, data, and/or dynamic features. At Adobe, this word is used contextually across many things (e.g., plugins, cloud storage, search, help) to describe “something that Adobe offers.” A service may be something that is contained to a single product or experience, or something that is available across multiple offerings. It’s often designed for a use case that relies on the functionality of a platform. settingsPreferredIn menu names, describe the type of settings (e.g., App settings, Account settings ). See also preferences.show similarUse with cautionView generate similar skipPreferredOK to use as a call-to-action in stepped flows, such as a coach mark series.smartAvoidDo not use smart in naming any UI element.softwareUse with cautionPrograms and other services that are used by a device. Only use software when the words app, service, or product are not sufficient for the use case.solutionUse with caution Jargon. Solution is often used interchangeably with app or product, and can describe something that integrates into a larger whole. It’s often used to talk about something descriptively in terms of its use case (instead of its product or feature name) as a way to achieve a goal or complete an intent. However, people may feel excluded by this word; if something is described as a solution and it doesn’t work for someone, they could feel that they themselves are the “problem.” Instead of using the noun solution, frame the message using active verb phrases such as solve, help solve, try to solve, or helps (someone) do (something). sorryUse with cautionOnly use the word sorry in error messaging scenarios where the error causes a major interruption and inconvenience for a user (e.g., needing to restart their device, if work they had saved was lost).spacePreferred The amount of room available. Space refers to this concept on a local machine or device (e.g., “You don’t have enough space on your computer to save this file”). Storage is the word for this in the cloud (e.g., “Your Creative Cloud storage is full”). startPreferredPreferred over begin for calls-to-action. Variations on this call-to-action using the word start are also acceptable (e.g., Start tour ).startPreferredUse start as an action in reference to a device, process, or workflow.storagePreferred The amount of room available. Storage refers to this concept in the cloud (e.g., Your Creative Cloud storage is full ). Space is the word for this on a local machine or device. (e.g., You don’t have enough space on your computer to save this file ). stuffAvoidThis word is a U.S.-centric colloquialism used to describe things without specificity, and is difficult to accurately localize. Do not use the word stuff in UI copy, and refer to items directly instead (e.g., files, not your stuff ).submitPreferred Submit is the preferred word for the action of sending data in a form. When asking users to share feedback, use Submit as the call-to-action, not Share. success, successful, successfullyAvoidAdding success, successful, or successfully to a message is usually redundant and unnecessary. For example, say “Your password was reset” instead of “Your password has been reset successfully.”suggest, suggestionPreferred Use suggest (verb) or suggestion (noun) for when AI or other technology — not a human — is doing the action. To recommend or make a recommendation is the preferred way to describe when a human is doing the action. supported / not supportedPreferred Use not supported or no longer supported as a catch-all descriptor for an app or service that permanently can’t be accessed or used (e.g., an outdated or unauthorized app version). View also available / unavailable. surfaceAvoidInternal-only term for a consumer-facing framework that delivers content or services to a user. A product may have multiple surfaces (e.g., Adobe.com, Creative Cloud desktop, mobile, and web).swipeAvoidInstructions for interactions should use the same words that the OS does. Reserving swipe actions for intuitive actions in-line with the mobile OS should make it unnecessary to use this word in UI copy.switch on / switch offUse with caution Turn on / turn off is preferred over switch on / switch off because it's a more general and accessible way of referring to the actions of activating and deactivating a capability or mode. Only use switch on / switch off when there is a need to refer to a switch UI component directly in interface copy. In these rare cases, the action/verb should closely match the component/noun. The phrase “switch between modes” is OK to use. tabPreferredWhen referring to a specific tab in an interface, respect the capitalization of the name of the tab as it appears in the UI but don’t capitalize the word “tab.” Bold the name of the tab but not the word tab (e.g., Learn tab, Your Work tab, Apps tab ).tapUse with caution If at all possible, avoid instructing a user to tap or click. Instead, use a call-to-action and the right design component to imply the interaction. View select. When referring to the result of tapping on something, use the same word(s) as the call-to-action. There are some instances where using the word tap can't be avoided because of device mechanics, such as selecting points on a tablet. templatePreferredA template is a document that has been pre-formatted or contains pre-formatted elements so that a user doesn’t have to start from scratch. Use template rather than starter file or other jargon for templates.titleAvoidFor field labels, name is the preferred word for a file name or for the name of another kind of entity. Do not use title to mean name.to / from the cloudPreferred Files are uploaded (or backed up) to the cloud and downloaded from the cloud. View also in the cloud. toggleAvoid Jargon used as a verb to describe the action of switching between two modes, or used as a noun to describe the button or switch for going between two modes. To make accessible products, do not reference UI elements. If you need to refer to this design element or what it does in your product, write around describing its appearance and instead talk about its function. View turn on / turn off. toolPreferredWhen referring to a specific tool in an interface, respect the capitalization of the name of the tool as it appears in the UI but do not capitalize the word tool. Bold the name of the tool but not the word “tool” (e.g., Zoom tool, Pen tool, Undo tool ).touch and holdAvoidInstructions for interactions should use the same words that the OS does.trialAvoidSee free trial.turn on / turn offPreferredUse turn on / turn off to refer to the actions of activating and deactivating a capability or mode.tutorialPreferredCan be used to describe a single tutorial, or a series of two or more tutorials.unique XAvoidDo not describe generative AI content as unique (e.g., unique images ). We cannot guarantee that all generated content will be 100% one-of-a-kind unique.updatePreferredUnlike an upgrade, an update does not usually require payment (e.g., Update your browser, Update your app ).updatePreferred Use update (verb) to refer to the act of replacing software with a new version of itself that brings the system up to date or includes improvements. Use update (noun) to refer to the replacement software version. When guiding users through an update flow, be explicit about the different steps involved. For example, don’t use an Update call to action if the user will be redirected to a store or website. update laterUse with cautionUse Update later as a call to action when presenting the user with the option to defer updating an app or to have an app update automatically when certain installation criteria ( e.g., quitting or restarting) are met. View Update now.update nowUse with cautionUse Update now as a call to action only when the user can choose between updating later and taking the necessary steps to begin updating immediately. View update later.upgradePreferredUnlike an update, an upgrade usually requires payment (e.g., Upgrade your plan, Upgrade to the full version of Photoshop ).User GuidelinesRequired When referring to the Adobe Generative AI User Guidelines, it is always title case User Guidelines on both first and second mention. Do not use other terms or shorthand in place of User Guidelines (e.g., GenAI User Guidelines, GenAI Terms, terms ). variationsRequiredUse variations to label or describe generated content in generative AI creative modules, features, or tools (e.g., Your prompt will generate four variations, AI Assistant generated four image variations in its response ). Avoid results.videoUse with caution Use this word sparingly as a lightweight alternative to describe a standalone tutorial, tutorial series, or course (e.g., “Learn Illustrator step by step in our series of short videos”). Video is a preferred word to use when talking generically about the type of media (e.g., video and audio, video files, video assets ). viewPreferredTo be more inclusive, view is preferred over the word see. For example, say View all results instead of See all results.watermark, watermarkingPreferredUse watermark (noun) to refer to a logo, text, or signature that is superimposed onto an asset. Watermarking (verb) is used for identifying the artist behind the asset, copyright protection, preventing unlicensed usage, or marketing.whitelistAvoid This word has roots in racism and oppression. Replace it with this format to provide contextual clarity: (Action)(object) For example: Shared domains Approved users Targeted sites wifiPreferredAll lowercase, no hyphen or space."
|
|
16
|
-
}
|
|
17
|
-
],
|
|
18
|
-
"sourceUrl": "https://preview.spectrum.adobe.com/content/in-product-word-list",
|
|
19
|
-
"lastUpdated": "2026-09-04",
|
|
20
|
-
"status": "published",
|
|
21
|
-
"tags": [
|
|
22
|
-
"UX writing",
|
|
23
|
-
"in-product language",
|
|
24
|
-
"Adobe Brand Guidelines",
|
|
25
|
-
"internal jargon",
|
|
26
|
-
"app vs application",
|
|
27
|
-
"asset terminology"
|
|
28
|
-
]
|
|
29
|
-
}
|