@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.
Files changed (136) hide show
  1. package/components/accordion.json +67 -15
  2. package/components/action-bar.json +30 -9
  3. package/components/action-button.json +92 -39
  4. package/components/action-group.json +137 -18
  5. package/components/alert-banner.json +27 -8
  6. package/components/alert-dialog.json +55 -34
  7. package/components/avatar-group.json +35 -9
  8. package/components/avatar.json +105 -29
  9. package/components/badge.json +163 -56
  10. package/components/breadcrumbs.json +107 -26
  11. package/components/button-group.json +63 -19
  12. package/components/button.json +105 -61
  13. package/components/calendar.json +74 -8
  14. package/components/card.json +13 -0
  15. package/components/cards.json +46 -31
  16. package/components/checkbox-group.json +85 -16
  17. package/components/checkbox.json +97 -27
  18. package/components/close-button.json +75 -20
  19. package/components/coach-indicator.json +44 -14
  20. package/components/coach-mark.json +26 -8
  21. package/components/color-area.json +100 -20
  22. package/components/color-handle.json +46 -25
  23. package/components/color-loupe.json +14 -2
  24. package/components/color-slider.json +129 -26
  25. package/components/color-wheel.json +91 -17
  26. package/components/combo-box.json +189 -50
  27. package/components/contextual-help.json +126 -80
  28. package/components/date-field.json +7 -0
  29. package/components/date-picker.json +127 -24
  30. package/components/divider.json +38 -12
  31. package/components/drop-zone.json +37 -18
  32. package/components/field-label.json +62 -21
  33. package/components/heading.json +7 -0
  34. package/components/help-text.json +53 -16
  35. package/components/illustrated-message.json +85 -21
  36. package/components/in-line-alert.json +53 -13
  37. package/components/link.json +63 -24
  38. package/components/list-view.json +80 -15
  39. package/components/menu.json +181 -45
  40. package/components/meter.json +78 -24
  41. package/components/number-field.json +175 -34
  42. package/components/picker.json +188 -42
  43. package/components/popover.json +126 -37
  44. package/components/progress-bar.json +108 -23
  45. package/components/progress-circle.json +55 -12
  46. package/components/radio-button.json +67 -14
  47. package/components/radio-group.json +132 -28
  48. package/components/rating.json +38 -9
  49. package/components/search-field.json +126 -34
  50. package/components/segmented-control.json +70 -21
  51. package/components/select-box.json +103 -29
  52. package/components/side-navigation.json +69 -28
  53. package/components/slider.json +155 -39
  54. package/components/standard-dialog.json +88 -16
  55. package/components/status-light.json +136 -41
  56. package/components/steplist.json +24 -5
  57. package/components/swatch-group.json +55 -19
  58. package/components/swatch.json +79 -24
  59. package/components/switch.json +79 -31
  60. package/components/table.json +73 -26
  61. package/components/tabs.json +52 -22
  62. package/components/tag-field.json +60 -14
  63. package/components/tag-group.json +56 -16
  64. package/components/tag.json +78 -21
  65. package/components/takeover-dialog.json +61 -10
  66. package/components/text-area.json +205 -49
  67. package/components/text-field.json +170 -42
  68. package/components/thumbnail.json +63 -22
  69. package/components/time-field.json +7 -0
  70. package/components/toast.json +50 -29
  71. package/components/tooltip.json +87 -27
  72. package/components/tree-view.json +147 -45
  73. package/components/user-card.json +7 -0
  74. package/guidelines/app-frame-overview.json +44 -46
  75. package/guidelines/attention-hierarchy.json +22 -13
  76. package/guidelines/background-layers.json +10 -80
  77. package/guidelines/brand.json +12 -32
  78. package/guidelines/colors.json +17 -47
  79. package/guidelines/developer-overview.json +9 -25
  80. package/guidelines/faqs.json +9 -96
  81. package/guidelines/fonts.json +14 -29
  82. package/guidelines/grays.json +44 -17
  83. package/guidelines/icon-fundamentals.json +18 -7
  84. package/guidelines/manifest.json +15 -367
  85. package/guidelines/motion.json +16 -17
  86. package/guidelines/principles.json +8 -7
  87. package/guidelines/resources.json +15 -21
  88. package/guidelines/states.json +11 -16
  89. package/guidelines/using-icons.json +44 -33
  90. package/package.json +2 -2
  91. package/registry/platform-implementations.json +30 -0
  92. package/guidelines/ai-resource-guide.json +0 -50
  93. package/guidelines/applying-the-type-system.json +0 -67
  94. package/guidelines/bi-directionality.json +0 -57
  95. package/guidelines/border-width.json +0 -58
  96. package/guidelines/cognitive.json +0 -197
  97. package/guidelines/component-spacing.json +0 -61
  98. package/guidelines/contact-us.json +0 -67
  99. package/guidelines/content-area-browsing-context.json +0 -65
  100. package/guidelines/content-design-grammar-and-mechanics.json +0 -241
  101. package/guidelines/content-design-voice-and-tone.json +0 -37
  102. package/guidelines/content-grammar-and-mechanics.json +0 -252
  103. package/guidelines/content-language-and-inclusivity-writing-about-people.json +0 -103
  104. package/guidelines/content-language-and-inclusivity-writing-with-visuals.json +0 -70
  105. package/guidelines/content-voice-and-tone.json +0 -47
  106. package/guidelines/creating-bluelines-browsing-context.json +0 -91
  107. package/guidelines/design-tokens.json +0 -158
  108. package/guidelines/drop-shadow.json +0 -68
  109. package/guidelines/grammar-and-mechanics.json +0 -252
  110. package/guidelines/header-browsing-context.json +0 -40
  111. package/guidelines/illustration.json +0 -105
  112. package/guidelines/in-product-word-list.json +0 -29
  113. package/guidelines/inclusive-design.json +0 -101
  114. package/guidelines/inclusive-ux-writing.json +0 -30
  115. package/guidelines/internationalization.json +0 -87
  116. package/guidelines/language-and-inclusivity-writing-about-people.json +0 -85
  117. package/guidelines/language-and-inclusivity-writing-with-visuals.json +0 -61
  118. package/guidelines/layout-and-structure-containers.json +0 -47
  119. package/guidelines/layout-and-structure-spacing-overview.json +0 -66
  120. package/guidelines/layout-spacing.json +0 -39
  121. package/guidelines/object-styles-overview.json +0 -17
  122. package/guidelines/rounding.json +0 -73
  123. package/guidelines/side-navigation-browsing-context.json +0 -74
  124. package/guidelines/spacing-overview.json +0 -45
  125. package/guidelines/support.json +0 -113
  126. package/guidelines/typography-overview.json +0 -43
  127. package/guidelines/typography-system.json +0 -208
  128. package/guidelines/visual-language-containers.json +0 -36
  129. package/guidelines/voice-and-tone.json +0 -47
  130. package/guidelines/whats-new.json +0 -32
  131. package/guidelines/writing-about-people.json +0 -103
  132. package/guidelines/writing-for-errors.json +0 -120
  133. package/guidelines/writing-for-onboarding.json +0 -119
  134. package/guidelines/writing-for-readability.json +0 -54
  135. package/guidelines/writing-with-visuals.json +0 -70
  136. 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/content-grammar-and-mechanics.json",
4
- "name": "content-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. Image: Key example showing how to use active voice. Correct usage, Jess Williams resolved your comment. (source: https://preview.spectrum.adobe.com/content/media_1706dddea38f8c312f12545b5ca2a6358dd83a798.png?width=750&format=png&optimize=medium)Image: Key example showing how not to use active voice. Incorrect usage, Your comment was resolved by Jess Williams. (source: https://preview.spectrum.adobe.com/content/media_1ac444d294f9e2ddb048aab9557e311a70dcd0d18.png?width=750&format=png&optimize=medium)"
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. Image: Key example showing how to use passive voice. Correct usage, Your payment was declined. (source: https://preview.spectrum.adobe.com/content/media_1b0d4b46a20c1877e4c1884a7407eaa36d9517b2a.png?width=750&format=png&optimize=medium)Image: Key example showing how not to use active voice. Incorrect usage, We declined your payment. (source: https://preview.spectrum.adobe.com/content/media_110f3220fa9e7440932803c083d749da5b7e5516f.png?width=750&format=png&optimize=medium)"
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. Image: Key example showing how to reframe a message to avoid passive voice. Two examples of correct usage. Something went wrong. No search results. (source: https://preview.spectrum.adobe.com/content/media_124406739d24c1aa7b19e1b76ca60d27d2c2944a2.png?width=750&format=png&optimize=medium)Image: Key example showing how to reframe a message to avoid passive voice. Two examples of incorrect usage. An error was made. We couldn’t find any search results. (source: https://preview.spectrum.adobe.com/content/media_1c9b028d5db7f69150c78221ca0236f07b90fe2be.png?width=750&format=png&optimize=medium)"
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 Image: Key example showing how to use contractions. Three examples of correct usage. If you can’t. You aren’t connected. This app isn’t available. (source: https://preview.spectrum.adobe.com/content/media_186dcdf3fa9bd8e1f666a888a6dd89282ab8d8f4f.png?width=750&format=png&optimize=medium)Image: Key example showing how not to write, using no contractions. Three examples of incorrect usage. If you cannot. You are not connected. This app is not available. (source: https://preview.spectrum.adobe.com/content/media_1e584a4972cfbb29879c538988a5323046aa8a1a0.png?width=750&format=png&optimize=medium)"
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. Image: Key example showing how to avoid colloquial contractions. Two examples of correct usage. Your account has been disabled. Your document is ready to view. (source: https://preview.spectrum.adobe.com/content/media_1599b52e4acd4ca3509e203f06bc4584e909b9e15.png?width=750&format=png&optimize=medium)Image: Key example showing how to avoid colloquial contractions. Two examples of incorrect usage. Ya’lls account has been disabled. Your document’s ready to view. (source: https://preview.spectrum.adobe.com/content/media_1832965ca906ede089b09a21e1985531d132d5d18.png?width=750&format=png&optimize=medium)"
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. Image: Key example showing how to use simple tenses. Three examples of correct usage. She ran for president. He writes great poetry. Carmen will make the poster. (source: https://preview.spectrum.adobe.com/content/media_10dd8f51f80783ba79e4642cea18ff806d07ced9e.png?width=750&format=png&optimize=medium)Image: Key example showing how to use simple tenses. Three examples of incorrect usage. She was running for president. He is writing great poetry. Carmen will be making the poster. (source: https://preview.spectrum.adobe.com/content/media_11900f31e90557dad3a0a4487fc0acfbd61015192.png?width=750&format=png&optimize=medium)"
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) Image: Key example of writing in sentence case. Two examples of correct usage. Edit your contact information, with only “Edit” capitalized. First, select the Brush tool, with “First” and “Brush” capitalized, and "brush" bolded. (source: https://preview.spectrum.adobe.com/content/media_1ac64435c1910d7366b0a2ba56a729ec6cf77129b.png?width=750&format=png&optimize=medium)Image: Key example of writing in sentence case. Two examples of incorrect usage. Edit Your Contact Information, with all words capitalized. First, select the Brush Tool, with “First” capitalized, and both words in “Brush Tool” capitalized, and "Brush Tool" bolded. (source: https://preview.spectrum.adobe.com/content/media_1e8d01dc2f63b500517fa2b26e771a1b28e00d12f.png?width=750&format=png&optimize=medium)"
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. Image: Key example of when to use all caps. Two examples of correct usage. AEM offers a full set of features, with the acronym “AEM” in all caps. Always save your PSD file, with the acronym “PSD: in all caps. (source: https://preview.spectrum.adobe.com/content/media_13a504ca6181f861b5fccea54a8af9e7f722d72fa.png?width=750&format=png&optimize=medium)Image: Key example of when to use all caps. Two examples of incorrect usage. Aem offers a full set of features, with only the “A” in “AEM” capitalized. ALWAYS save your psd file, with “always” in all caps and “psd” with no capitalization. (source: https://preview.spectrum.adobe.com/content/media_147d6a07176419ea2afd747b311b0ccc45a5c38e0.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using second person language. Three examples of correct usage. You can export your data here. Your profile. Your work. (source: https://preview.spectrum.adobe.com/content/media_1a1dc86d2d85ecbf8cc583a8e7212636def850398.png?width=750&format=png&optimize=medium)Image: Key example of using second person language. Three examples of incorrect usage. I can export my data here. My profile. My work. (source: https://preview.spectrum.adobe.com/content/media_1745352841a7f2a892b86443e923e34c6524a6dd0.png?width=750&format=png&optimize=medium)"
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) Image: Key example of using first person language. One example of correct usage. Yes, I agree to these terms of service. (source: https://preview.spectrum.adobe.com/content/media_12a6956f484c81be0f0f659169779b43d3e522fb8.png?width=750&format=png&optimize=medium)Image: Key example of using first person language. One example of incorrect usage. You agree to these terms of service. (source: https://preview.spectrum.adobe.com/content/media_12d8e4d2705b316213bd66333312781ed260e0fc0.png?width=750&format=png&optimize=medium)"
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 Image: Key example of using a singular they. Two examples of correct usage. Assign them a role. Chris has commented on your post. Read what they wrote. (source: https://preview.spectrum.adobe.com/content/media_1d07b096d6ca8c5c529541b60186e2aadd79e7c66.png?width=750&format=png&optimize=medium)Image: Key example of using a singular they. Two examples of incorrect usage. Assign him/her a role. Chris has commented on your post. Read what (s)he wrote. (source: https://preview.spectrum.adobe.com/content/media_149d6701b4acd4c7da234c3c54d45ea8acf9cd299.png?width=750&format=png&optimize=medium)"
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 Image: Key example of using ampersands. Two examples of correct usage. Digital video and audio, with “and” spelled out. Save your work and restart the app, with “and” spelled out. (source: https://preview.spectrum.adobe.com/content/media_16e93faff4d358502f2a81b0121109f1779d254d1.png?width=750&format=png&optimize=medium)Image: Key example of using ampersands. Two examples of incorrect usage. Digital video & audio, using an ampersand. Save your work & restart the app, using an ampersand. (source: https://preview.spectrum.adobe.com/content/media_101c473ae23d45956b0054753573b5d4767a11ae2.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using apostrophes. Two examples of correct usage. Get everything with Creative Cloud’s “All Apps” plan, with an apostrophe s after the word cloud. Check out our plans pricing, with an apostrophe after the word plans. (source: https://preview.spectrum.adobe.com/content/media_10dd992ca36130e60c95322eb7ec819489539bbcd.png?width=750&format=png&optimize=medium)Image: Key example of using apostrophes. Two examples of incorrect usage. Get everything with Creative Cloud’s All Apps plan, with apostrophes surrounding the phrase All Apps instead of quotation marks. Check out our plans pricing, with an apostrophe s after the word plans. (source: https://preview.spectrum.adobe.com/content/media_1b9d2ede60cc2fc221d8359395c709ec670793434.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using asterisks. Two examples of correct usage. A form field shows a required field using an asterisk, field label Name, entered text Sarah Williams. Written instructions, text Insert a blank keyframe (Insert > Timeline > Blank Keyframe) using the directions in-line, no footnote. (source: https://preview.spectrum.adobe.com/content/media_18f04600a63178654b7870f4a40017544c2ed59c0.png?width=750&format=png&optimize=medium)Image: Key example of using asterisks. Two examples of incorrect usage. A form field shows an optional field using an asterisk, field label Address 2 (optional), entered text Apartment 100,. Written instructions, text Insert a blank keyframe with an asterisk at the end, marking a footnote with directions reading (Insert > Timeline > Blank Keyframe). (source: https://preview.spectrum.adobe.com/content/media_1970a5ddf6840732e69f319eda6b180e56d23df3d.png?width=750&format=png&optimize=medium)"
84
- },
85
- {
86
- "type": "guideline",
87
- "content": "At sign.\n\nDon’t use the at sign (@) in place of the word \"at.\" Image: Key example of using the at sign. Correct usage. Adobe MAX is at the Los Angeles Convention Center, with the word "and" spelled out, no at symbol. (source: https://preview.spectrum.adobe.com/content/media_15b150ce8660db2d8cb5adc0534d576e6584d3c84.png?width=750&format=png&optimize=medium)Image: Key example of using the at sign. Incorrect usage. Adobe MAX is @ the Los Angeles Convention Center, with an at sign used in place of the word "and." (source: https://preview.spectrum.adobe.com/content/media_1262436afaae40ad4ab22a1831e3b4d4dde6f271f.png?width=750&format=png&optimize=medium)"
88
- },
89
- {
90
- "type": "guideline",
91
- "content": "Brackets.\n\nDon’t use brackets ([] {}) in UI copy or running sentences. Instead, use parentheses ( ( ) ). Image: Key example of using parentheses instead of brackets. Correct usage. Downloading… (1 of 2), with parentheses instead of brackets surrounding the “1 of 2” count. (source: https://preview.spectrum.adobe.com/content/media_15afbfa219643ced85ce919989e8ed47eab03a5a1.png?width=750&format=png&optimize=medium)Image: Key example of using parentheses instead of brackets. Incorrect usage. Downloading… [1 of 2], with brackets instead of parentheses surrounding the “1 of 2” count. (source: https://preview.spectrum.adobe.com/content/media_1b3974803e5b3747213962fbd3f1504f786f0cf7c.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using a colon. Two examples of correct usage. Bulleted list, title To merge PDF documents, with a colon at the end of the title. 2 list items, Select the Tools tab, Select Combine Files. Form field, label Name, no colon at the end. Entered text Marta Rodriguez. (source: https://preview.spectrum.adobe.com/content/media_134f0aa53b106bbd6fa820f99f02153e6099d72bf.png?width=750&format=png&optimize=medium)Image: Key example of using a colon. Two examples of inorrect usage. Bulleted list, title To merge PDF documents, with no colon at the end of the title. 2 list items, Select the Tools tab, Select Combine Files. Form field, label Name, colon at the end. Entered text Marta Rodriguez. (source: https://preview.spectrum.adobe.com/content/media_1ca0e1c85a712fd95f22e4d1746da91501c606089.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using commas. Two examples of correct usage. Save file as a JPEG, PNG, or GIF. Export this file as a vector in SVG or AI formats. Or, export as a rasterized image in JPEG, PNG, or GIF formats. (source: https://preview.spectrum.adobe.com/content/media_1a9a113d92ffeaf264ff9775f2d27291e372f48f1.png?width=750&format=png&optimize=medium)Image: Key example of using commas. Two examples of incorrect usage. Save file as a JPEG, PNG or GIF. You can export this file as a vector, in SVG, AI, or other formats, or you can export as a rasterized image in JPEG, PNG, or GIF. (source: https://preview.spectrum.adobe.com/content/media_1a2fcbcdd8de2dc186395cf15efc1f288f4e41fe1.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using ellipsis. An example of correct usage. UI mockup showing a 'Signing out...' heading above a divider line, a 'More actions' button with an ellipsis icon, and an expanded menu below it with three options: Rename (pencil icon), Delete (trash icon), and Share with... (share icon). (source: https://preview.spectrum.adobe.com/content/media_1c710147f2f3f41b5f977dab0de1f9dbf2151d7e5.png?width=750&format=png&optimize=medium)Image: Key example of using ellipsis. An example of incorrect usage. UI mockup showing a 'Go to website...' heading above a divider line, a 'More actions...' button, and an expanded menu below it with three options: Rename (pencil icon), Delete (trash icon), and Share with... (share icon). (source: https://preview.spectrum.adobe.com/content/media_110fd0c4724c98a3ad6b0e79ce89b31db17586b19.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using emoji. Correct usage, text with no emoji included. Welcome to Creative Cloud, Marisa — we’re glad you’re here. (source: https://preview.spectrum.adobe.com/content/media_1cf42549f465ae5403cbb7c203a5f74d8fa680f79.png?width=750&format=png&optimize=medium)Image: Key example of using emoji. Incorrect usage, text including 3 emoji. Waving hand Welcome to Creative Cloud, Marisa! Start exploring below hand pointing down to begin. Party popper. (source: https://preview.spectrum.adobe.com/content/media_1fd3facd815ebabf2d968607ffbddb641779151fd.png?width=750&format=png&optimize=medium)"
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.\" Image: Key example of using equals sign. Correct usage. Campaigns are made up of targeted audiences and the ads we show to them. (source: https://preview.spectrum.adobe.com/content/media_153383389ccf9ec20540a5b290705174dbcf716b8.png?width=750&format=png&optimize=medium)Image: Key example of using equals sign. Incorrect usage. Targeted audiences plus sign ads we show them equals sign campaigns. (source: https://preview.spectrum.adobe.com/content/media_1a61cab2cd0c6004f8e8919ecd583025bd86f86e8.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using exclamation marks. Correct usage, no exclamation mark at the end of the sentence. Welcome to Creative Cloud, Marisa — we’re glad you’re here. (source: https://preview.spectrum.adobe.com/content/media_1cf42549f465ae5403cbb7c203a5f74d8fa680f79.png?width=750&format=png&optimize=medium)Image: Key example of using exclamation marks. Incorrect usage, two exclamation marks at the end of two sentences. Welcome to Creative Cloud, Marisa! We’re glad you’re here! (source: https://preview.spectrum.adobe.com/content/media_1c331cd643764317e2438ffff9fdc857c55d3c902.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using greater than and less than symbols. Three examples of correct usage, no greater than or less than symbols in any text. Bulleted list, 3 items, Go to File, Choose Save as, Rename the file. Use less than the amount you used already. Learn more. (source: https://preview.spectrum.adobe.com/content/media_1d1411fb6e4156c927d6b3f773397f998103e771f.png?width=750&format=png&optimize=medium)Image: Key example of using greater than and less than symbols. Three examples of incorrect usage, with greater than or less than symbols in the text. Go to File greater than symbol choose Save as greater than symbol rename the file. Use less than symbol the amount you used already. Learn more greater than symbol. (source: https://preview.spectrum.adobe.com/content/media_1f5ada9d814f392764bb332dc701b5b93819cb4dd.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using hyphens and dashes. 4 examples of correct usage. Never miss a comment — turn on notifications in Acrobat. Repeat steps 1-4. Campaign was active between 03/01/2020 and 03/31/2020. Turn on auto-update in the Settings panel. (source: https://preview.spectrum.adobe.com/content/media_1eb50e4bbbe68e6a76d3f7b69ee90d7de4d49128c.png?width=750&format=png&optimize=medium)Image: Key example of using hyphens and dashes. 4 examples of incorrect usage. Never miss a comment; turn on notifications in Acrobat. Repeat steps 1 - 4. Campaign was active 03/01/2020-03/31/2020. Turn on auto - update in the Settings panel. (source: https://preview.spectrum.adobe.com/content/media_14278b1f05592b369f25f9772991b096fa70ff3ba.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using minus sign. Correct usage, no minus sign and using the full word instead. Enter the budgeted amount, minus the insertion fee. (source: https://preview.spectrum.adobe.com/content/media_1ce3af052f06885272825237f2b3f9202586ec7e0.png?width=750&format=png&optimize=medium)Image: Key example of using minus sign. Incorrect usage, with minus sign instead of using the full word. Enter the budgeted amount minus sign the insertion fee. (source: https://preview.spectrum.adobe.com/content/media_16bf4aa2730bed2334b5d373575857fcadab9cc18.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using parentheses. Three examples of correct usage, with parentheses to indicate supplemental information. Command-C (Mac) / Control-C (Windows). Insert a blank keyframe (directions, Insert > Timeline > Blank keyframe). Clone Stamp tool (shortcut, S). (source: https://preview.spectrum.adobe.com/content/media_1279b4021a741ec75c2661177ec1d2f8d2b6aacf3.png?width=750&format=png&optimize=medium)Image: Key example of using parentheses. Two examples of incorrect usage, with parentheses not needed or brackets used instead of parentheses. Cloud documents are saved online to Adobe's cloud (collaboration and other features are on the way). Clone Stamp tool [keyboard shortcut, S]. (source: https://preview.spectrum.adobe.com/content/media_1e8e996e2cc9e225730b4279a5ad9dc15ea8c53e5.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using periods. Correct usage, no periods at the end of items in a bulleted list. Bulleted list, 3 items, Legal name, Mailing address, Birthdate. (source: https://preview.spectrum.adobe.com/content/media_1e581e453d8679a15afb5a553de8de59ff321f6ed.png?width=750&format=png&optimize=medium)Image: Key example of using periods. Incorrect usage, periods at the end of items in a bulleted list. Bulleted list, 3 items, Legal name. Mailing address. Birthdate. (source: https://preview.spectrum.adobe.com/content/media_174942c10ff6c52106e7c4b6385e5d765a127f764.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using a plus sign. Correct usage, using the full word "and." Use this app for photography and illustration. (source: https://preview.spectrum.adobe.com/content/media_13dd1cc5a599683e2dbed652914877252a8611df5.png?width=750&format=png&optimize=medium)Image: Key example of using a plus sign. Incorrect usage, using a plus sign instead of the full word "and." Use this app for photography plus sign illustration. (source: https://preview.spectrum.adobe.com/content/media_12db667a2caec37b5160ade9f6ff0d0fb2d42b6be.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using a question mark. Correct usage, question mark at the end of a sentence asking a direct question. What are your skillsets? (source: https://preview.spectrum.adobe.com/content/media_160ec7f3e4f5519cc333d7d72556ecd7e88feb0ac.png?width=750&format=png&optimize=medium)Image: Key example of using a question mark. Incorrect usage, question mark at the end of a sentence asking a rhetorical question. What can't you do with Creative Cloud? (source: https://preview.spectrum.adobe.com/content/media_1f2846a15e1d76ac5255db6ef783845f2b9703646.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using quotation marks. Correct usage, bold the name of an interface element when referring to it directly instead of using quotation marks around the word. Select the Lasso tool to draw a boundary around what you want to move. (source: https://preview.spectrum.adobe.com/content/media_1ddb44a7b91e1a81c81e7ca3a0c96a1475d293c94.png?width=750&format=png&optimize=medium)Image: Key example of using quotation marks. Incorrect usage, putting quotation marks around the name of an interface element instead of bold text. Select the "Lasso tool" to draw a boundary around what you want to move. (source: https://preview.spectrum.adobe.com/content/media_1ada897bb41df80cfa8383d458b8cf5daade0b748.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using semicolons. Correct usage, no semicolon in a sentence but using an em dash to indicate a related thought instead. Never miss a comment — turn on notifications in Acrobat. (source: https://preview.spectrum.adobe.com/content/media_1691ab7e4c0ba2b956e3cf57ccbe19d5fa400084e.png?width=750&format=png&optimize=medium)Image: Key example of using semicolons. Incorrect usage, semicolon in a sentence to indicate a related thought. Never miss a comment; turn on notifications in Acrobat. (source: https://preview.spectrum.adobe.com/content/media_14f5caca9184f4c0daa5b9bfeb684a895af630b05.png?width=750&format=png&optimize=medium)"
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.” Image: Key example of using slashes. Correct usage, no forward slash used to combine words or ideas. This document shows guidances and frameworks for your consideration. (source: https://preview.spectrum.adobe.com/content/media_1072a08fcf03d79f48fe875e40859c1b19effffba.png?width=750&format=png&optimize=medium)Image: Key example of using slashes. Incorrect usage, forward slash used to combine words or ideas. This document shows guidances/frameworks for your consideration. (source: https://preview.spectrum.adobe.com/content/media_1b56a4bf2e61d027f28056b61010d139d7cae30d9.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using a vertical bar. Correct usage, no vertical bar used in running text when blank space is acceptable. Title Share your prototypes. Description XD now lets you create share links to send to stakeholders for feedback. Two links with no vertical bar in between, labels Learn more and Download XD. (source: https://preview.spectrum.adobe.com/content/media_1c21f39d5f9eef60e9b44a5e9fcda53211e58d245.png?width=750&format=png&optimize=medium)Image: Key example of using a vertical bar. Incorrect usage, with vertical bar used in running text when blank space would have been acceptable. Title Share your prototypes. Description XD now lets you create share links to send to stakeholders for feedback. Two links with vertical bar in between, labels Learn more and Download XD. (source: https://preview.spectrum.adobe.com/content/media_111ec27ddb9f5e144baed1c3194728792b9df0161.png?width=750&format=png&optimize=medium)"
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\"). Image: Key example of writing about currency. Two examples of correct usage. Total ad spend: $150.21 USD using the acronym for US dollars. They spend about $10 per month, omitting the cents decimal. (source: https://preview.spectrum.adobe.com/content/media_1f86646f84a9e0a0745a4b32681da8c4064294723.png?width=750&format=png&optimize=medium)Image: Key example of writing about currency. Two examples of incorrect usage. Total ad spend: $150 in US dollars, with “US dollars” spelled out. They spend about $10.00 a month, with the cents decimal included. (source: https://preview.spectrum.adobe.com/content/media_1960880fbf82b1ac76cf0408d32012ab572f49e84.png?width=750&format=png&optimize=medium)"
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. Image: Key example of using numbers in headlines and text. Two examples of correct usage. 1 – 10 possible results, with an en dash used to indicate range. Sign up for two months and save 20% for a year, with “two” spelled out. (source: https://preview.spectrum.adobe.com/content/media_1feb308f24883d0247d0d208d4261d6d898ab8d41.png?width=750&format=png&optimize=medium)Image: Key example of using numbers in headlines and text. Two examples of incorrect usage. One to 10 possible results, with “one” spelled out and “to” used to indicate range. Sign up for 2 months and save $20 for a year, with the numeral “2” used. (source: https://preview.spectrum.adobe.com/content/media_147182676495465433239e1114245af27cda0a986.png?width=750&format=png&optimize=medium)"
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. Image: Key example of writing about time. Four examples of correct usage. Posted at 12:45pm, with “pm” lowercase and without a preceding space. Schedule for 1pm, without the colon. Meeting is at 1:30–2pm, using an en dash to separate the ranges. Seen at 17:16 (source: https://preview.spectrum.adobe.com/content/media_12eaeb13f15c6d8e0959bacffdda4ab64e1e8bcf1.png?width=750&format=png&optimize=medium)Image: Key example of writing about time. Four examples of incorrect usage. Posted at 12:45 PM, with PM in all caps and with a preceding space. Schedule for 1:00pm, indicating the colon. Meeting is from 1:30pm to 2pm, with the word “to” separating the ranges. Seen at 17:16pm, with a “pm” being used for a 24-hour time. (source: https://preview.spectrum.adobe.com/content/media_19149e23f089566ad82635b8923c74c0bd16f4f75.png?width=750&format=png&optimize=medium)"
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 Image: Key example of elapsed time. Three examples of correct usage.1 hour ago, 1 day ago, 3 yrs ago. (source: https://preview.spectrum.adobe.com/content/media_19eafde27d2f935b4ac941b341ba337de5b58cfe3.png?width=750&format=png&optimize=medium)Image: Key example of elapsed time. Three examples of incorrect usage. 60 minutes ago, 1 days ago, 3y ago. (source: https://preview.spectrum.adobe.com/content/media_105eb9ef6d43745267d3814c290f75d2bee858cfe.png?width=750&format=png&optimize=medium)"
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. Image: Key example of remaining time. Three examples of correct usage. About 1 hour remaining, 1 minute remaining, 2 hrs remaining. (source: https://preview.spectrum.adobe.com/content/media_1c2af24ae24b7568c9787fc801651d69e8a4c4ff9.png?width=750&format=png&optimize=medium)Image: Key example of remaining time. Three examples of incorrect usage. About 60 minutes remaining, 1 minutes remaining, 2h remaining. (source: https://preview.spectrum.adobe.com/content/media_18852f54901c425e6d2196a900ed14b2597829290.png?width=750&format=png&optimize=medium)"
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. Image: Key example of timestamps. Two examples of correct usage. Insert marker at 01:12:34.55, skip to 12:51 for instructions. (source: https://preview.spectrum.adobe.com/content/media_126ac3109a2426a7c19ff67332542a00c5ab79d98.png?width=750&format=png&optimize=medium)Image: Key example of timestamps. Two examples of incorrect usage. Insert marker: 1hr 12 min 34.55sec, skip to 12 min and 51 sec. (source: https://preview.spectrum.adobe.com/content/media_19b093d1a3cdf95a3173121dde0ac6e49d3153135.png?width=750&format=png&optimize=medium)"
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.” Image: Key example of time zones. An example of correct usage. Yesterday at 4:58pm Eastern. (source: https://preview.spectrum.adobe.com/content/media_1ace27ed4c9fa99fc2ef035e56cf4a32f2bb622ba.png?width=750&format=png&optimize=medium)Image: Key example of time zones. An example of incorrect usage. Yesterday at 4:58pm UTC-5. (source: https://preview.spectrum.adobe.com/content/media_12e4731e9a747b9f29901ab0f5fd9c01178517a21.png?width=750&format=png&optimize=medium)"
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. Image: Key example of introductory phrases. An example of correct usage. You can choose: small, medium, large. (source: https://preview.spectrum.adobe.com/content/media_19e17dd8af3d33ef152a281adb96aa9334d3f1789.png?width=750&format=png&optimize=medium)Image: Key example of introductory phrases. An example of incorrect usage. Choose one. Small, medium, large. (source: https://preview.spectrum.adobe.com/content/media_1d962dd0655205855f33493c60ac60c51d50f8175.png?width=750&format=png&optimize=medium)"
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. Image: Key example of be consistent and use parallel construction. An example of correct usage. It's happening in cities in: Indiana, Illinois, Ohio. (source: https://preview.spectrum.adobe.com/content/media_171f288bc5d803d0e060960d43c79d41ec368b5a3.png?width=750&format=png&optimize=medium)Image: Key example of be consistent and use parallel construction. An example of incorrect usage. It's happening in: Cities in Indiana, Illinois, and in Ohio, too. (source: https://preview.spectrum.adobe.com/content/media_15d026fc4a1781007a820ace2c0307b66d46d6b72.png?width=750&format=png&optimize=medium)"
232
- },
233
- {
234
- "type": "guideline",
235
- "content": "Capitalize each list item.\n\nCapitalize the first letter of each list item and use sentence case. Image: Key example of capitalize each list item. An example of correct usage. Ice cream flavors: Vanilla bean, Mint chocolate chip, Mocha. (source: https://preview.spectrum.adobe.com/content/media_1806caaa5d1e4fde15502475caaae41720614c02e.png?width=750&format=png&optimize=medium)Image: Key example of capitalize each list item. An example of incorrect usage. Ice cream flavors: Vanilla Bean, mint chocolate chip, Mocha. (source: https://preview.spectrum.adobe.com/content/media_13b10371af23c120417abc5ea57795a801aec3289.png?width=750&format=png&optimize=medium)"
236
- }
237
- ],
238
- "sourceUrl": "https://preview.spectrum.adobe.com/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,103 +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/content-language-and-inclusivity-writing-about-people.json",
4
- "name": "content-language-and-inclusivity-writing-about-people",
5
- "title": "Writing about people",
6
- "category": "designing",
7
- "documentBlocks": [
8
- { "type": "purpose", "content": "Writing about people" },
9
- {
10
- "type": "guideline",
11
- "content": "The goal of all UX content is to be understandable to all — not just to the people paying for something or for those in a certain industry — and to accommodate the many ways that people use products. When creating content for product experiences, think and write by centering the person you’re writing to or about in a way that’s compassionate, inclusive, and respectful. Work to grasp the perspective of underrepresented groups, and avoid writing in a way that may view or treat someone as intrinsically different from yourself. You can use methods like co-designing and UX research. Keep the following best practices in mind when writing:"
12
- },
13
- {
14
- "type": "guideline",
15
- "content": "Use neutral, precise, relevant descriptions.\n\nOnly include personal qualities if they’re relevant and important. Write what you mean, then look back at what you wrote and think about whom you’re centering with your words. Doing this can reveal which people you’re leaving out. What’s the sentiment behind your words?"
16
- },
17
- {
18
- "type": "guideline",
19
- "content": "Choose words carefully and understand historical significance.\n\nBe cautious of appropriating terms from marginalized communities. In this guide, we say “underrepresented groups.” You can also reference 3rd-party sources such as Wikipedia’s list of which words to use and which to avoid."
20
- },
21
- {
22
- "type": "guideline",
23
- "content": "Be clear and avoid stereotypes.\n\nBe on the lookout for proxy questions and statements, which appeal to generalizations and stereotypes. For example, saying, “just buy more storage” is a proxy statement on economic status, while “view additional storage options” doesn’t make those assumptions. Communicate from a place of equality, not condescension, and think about the worst-case interpretation of your words. Clear intent excludes fewer people and reduces bias."
24
- },
25
- {
26
- "type": "guideline",
27
- "content": "Account for machine learning and AI.\n\nWhen collecting user data in app or web experiences, first think about whether that information is actually needed, and then if it really is, communicate why. Allow for both common and custom responses, self-identification, multiple selections, and the option to opt out of responding. Artificial intelligence learns only from the information we provide to it, so our inherent biases can easily become included in training data. If content allows for variable and AI-provided information, consider the ways that may affect any copy."
28
- },
29
- {
30
- "type": "guideline",
31
- "content": "Use neutral, precise, relevant descriptions.\n\nPerson-first language centers the person, not their qualities, by using those qualities as modifiers: “Design Adobe apps for people who use assistive technology.” But for identity-first language, which some communities and individuals prefer instead, language highlights the disability: “Design Adobe apps for deaf people.” No group unilaterally chooses one over the other, so when you’re writing about someone, ask them how they want to be identified. Avoid euphemisms like “differently abled,” which are regarded as condescending, and descriptors used as nouns, like “the disabled” or “the blind.” These tend to present a group of individuals as a monolith and suggests a lack of individual diversity within the group. Image: Example of a do guideline. Placeholder variable. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_1a388ca91b3dac07b8b9d41e693a811e0a4f3cbd5.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. Dummy variable. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_12215c42c43588b7fd9a9105f6e3f6345bfdb485a.png?width=750&format=png&optimize=medium) Preferred Avoid Disabled person or person with disabilities Differently abled or the disabled Blind person or person who is blind The blind Some phrases in common parlance that imply negativity are based on slurs against people with disabilities, such as “crazy” or “lame.” Never imply that a person is “suffering” from a disability or is a “victim” of a condition. Avoid appropriating terms from the disability community. Preferred Avoid Ridiculous or unpredictable Crazy Inconsiderate Tone-deaf Incompetent or bad Dumb or lame Keyanna has autism.Keyanna is suffering from autism. Placeholder variable Dummy variableAmir uses a wheelchair.Amir is confined to a wheelchair."
32
- },
33
- {
34
- "type": "guideline",
35
- "content": "Be clear and avoid stereotypes.\n\nWith imagery and language, avoid implying that a person has to look a certain way, be a certain size, or have a certain cognitive ability to do something. Depict more types of people as typical. Image: Example of a do guideline. This tutorial teaches cropping and usually takes 5 minutes. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_124bc820debd47d09f5906d12389717f1a10e28c1.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. Follow this fast, easy tutorial. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_19f42ceaff4d200a149259d1997cfae3e1638808f.png?width=750&format=png&optimize=medium) Preferred Avoid This tutorial teaches cropping and usually takes 5 minutes.Follow this fast, easy tutorial.This feature works best when you zoom out to 75%.This feature isn’t for the vision-impaired."
36
- },
37
- {
38
- "type": "guideline",
39
- "content": "Avoid appropriating terms from underrepresented groups.\n\nBe aware of how words that are often associated with physical and mental health are often used as metaphors to describe interactions and product functionality. Image: Example of a do guideline. Coherence check. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_1b0a570fd23357daed6ee5e264ec5b8326414be6f.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. Sanity check. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_111b67af622d45a34e944d58d16912287e1b2e2ad.png?width=750&format=png&optimize=medium) Preferred Avoid Unavailable or locked or turned off or deactivated Grayed out Coherence check Sanity check Organize or organized OCD"
40
- },
41
- {
42
- "type": "guideline",
43
- "content": "Account for machine learning and AI.\n\nEnter metadata with caution. For example, don’t tag a photograph of a child with words like “crazy” or “weird.” Image: Example of a don't guideline. UI mockup showing a form with a large placeholder image area, a 'Tags' label, and a text input field containing a single tag chip labeled 'Crazy' with an active text cursor. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_190b76647c472a96e68eb4a2a396895832da538a7.png?width=750&format=png&optimize=medium)"
44
- },
45
- {
46
- "type": "guideline",
47
- "content": "Use neutral, precise, relevant descriptions.\n\nLet’s say you’re writing a persona. When describing a person's country of origin or race, be as descriptive as possible as to not generalize any race or ethnicity. Race is only pertinent to biographical and announcement-related content that involves significant, groundbreaking, or historical events. For capitalization, Adobe follows AP Stylebook guidelines: capitalize nationalities, peoples, races (all except white), and tribes."
48
- },
49
- {
50
- "type": "guideline",
51
- "content": "Choose words carefully and understand historical significance.\n\nAdobe’s Inclusive Engineering Terminology Standard covers a set of established software terms to avoid, such as “whitelist,” “blacklist,” “master,” and “slave.” Don’t use terms assigning good or bad values to racial characteristics, such as “dark pattern.” (Terms like \"dark mode,\" \"light theme,\" or \"black screen\" literally refer to color and brightness and don't assign good or bad values, so continue using them.) Image: Example of a do guideline. Legacy. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_18351e9324b727a617022c4fa7a520fa10bf6179b.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. Grandfather clause. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_164ef15d2cd8f0f5b55809dd2abb240ba5b5766db.png?width=750&format=png&optimize=medium)"
52
- },
53
- {
54
- "type": "guideline",
55
- "content": "Choose words carefully and understand historical significance.\n\nAdobe avoids using software terms such as “whitelist,” “blacklist,” “master,” and “slave.” Don’t use terms assigning value to racial characteristics, such as “dark pattern.” (Terms like \"dark mode,\" \"light theme,\" or \"black screen\" literally refer to color and brightness and don't assign good or bad values, so continue using them.) Image: Example of a do guideline. Legacy. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_18351e9324b727a617022c4fa7a520fa10bf6179b.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. Grandfather clause. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_164ef15d2cd8f0f5b55809dd2abb240ba5b5766db.png?width=750&format=png&optimize=medium) Preferred Avoid Use this format to provide contextual clarity: ( Result in past participle form ) ( object ) Examples: Shared domains, approved people, targeted sites For coding constructs: Allowlist Whitelist Use this format to provide contextual clarity: ( Result in past participle form ) ( object ) For coding constructs: Blocklist Blacklist Legacy Grandfather clause Futile undertaking or a project destined to fail Death march Primary or main or source (e.g., “ main track ”)“ Master ” descriptors Primary / secondary Master / slave"
56
- },
57
- {
58
- "type": "guideline",
59
- "content": "Be clear and avoid stereotypes.\n\nIf you want to use a certain idiomatic or casual phrase, research its history before doing so. For example, imperfect spellings or pronunciations of words can imply pejorative associations with an accent. Be on the lookout for proxy questions, such as relating postal codes to ethnicity in rejecting job candidates, or making pricing or marketing decisions based on the average income of postal codes."
60
- },
61
- {
62
- "type": "guideline",
63
- "content": "Use plain language.\n\nSince English isn’t everyone’s first language, it’s best to write using clear, plain language — as well as avoid idioms and phrases that might be complicated for non-English speakers to understand. Plain language is more widely understood and, therefore, avoids alienating people. It especially avoids alienating people in ways that specifically belittle non-English speakers. For example, the conversational and casual phrases “long time no see” and “no can do” were originally used to belittle Native Americans. Image: Example of a do guideline. Sorry, something went wrong. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_19592eaedc34900d2aa16d15a70386bb9ccd17148.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. No can do. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_18e9557448586e8ad2d413900937f8932099077ea.png?width=750&format=png&optimize=medium) Preferred Avoid Welcome backLong time no see2-step processWax on, wax offSorry, something went wrongNo can do"
64
- },
65
- {
66
- "type": "guideline",
67
- "content": "Depict more types of people as typical.\n\nWe must focus on building successful experiences for all users. That means writing and designing in a way that depicts all skin types, names, and cultures as typical. We cannot keep centering white-skinned, Western cultures in our designs. Image: Example of a do guideline. UI mockup titled 'Introducing coediting' (step 1 of 2), showing four overlapping circular avatar photos in different colored rings (purple, blue, yellow, green), with a cursor hovering over the first avatar and a tooltip displaying the name 'Ayesha Wilson,' connected by a curved line indicating a hover interaction. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_173561d2b0362bcca77aeaba6586133cb79fb99c6.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. UI mockup titled 'Introducing coediting' (step 1 of 2), showing four overlapping circular avatar photos in different colored rings (purple, blue, yellow, green), with a cursor hovering over the first avatar and a tooltip displaying the name 'John Smith,' connected by a curved line indicating a hover interaction. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_10a9a65e9b14def281e2185bac817af10dff0ce3a.png?width=750&format=png&optimize=medium) Preferred Avoid Dark brown or beige or tan or peach, etc. Skin or flesh or nude (referring to color swatch) Critics Peanut gallery A broad range of name examples within a product experience (e.g., Ayesha, Ibrahim, Vignesh, Quynh) Only culturally white name examples within a product experience (e.g., John, Bill, Karen, Amy)"
68
- },
69
- {
70
- "type": "guideline",
71
- "content": "Be cautious of appropriating terms from underrepresented groups.\n\nHere’s a list of preferred words that are alternatives to common technology industry jargon. Image: Example of a do guideline. Expert. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_1cb3343dbe99abbdf43db13cf6c7bd826bacb904f.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. Guru. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_19045f2f94103c9130a672b9359d61145623e217f.png?width=750&format=png&optimize=medium) Preferred Avoid Native to the operating system or built-in feature Native Meeting Pow wow or circle the wagons Vision statement or strategic statement or value proposition Zen statement or Zen garden Role model or kindred spirit Spirit animal Guide Sherpa Authority or expert Guru or ninja"
72
- },
73
- {
74
- "type": "guideline",
75
- "content": "Be clear and avoid gendered language and stereotypes.\n\nRather than “he” or “she,” if you don’t know a person’s pronouns, make the phrase plural and use “they” instead. Use of “they” to describe one person is also accepted, although the syntax remains plural (e.g., “they are” = “that person is”). It’s also best to avoid using roles or stereotypes that have gendered roots (e.g., “businessman\" or “waitress”). Image: Example of a do guideline. They can fill out this form. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_11f4fc44c503c2e74074d1314b59e3ba53534177b.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. He/she can fill out this form. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_14eb1213b292de728d3ae57bcee81ffeb5ca4f012.png?width=750&format=png&optimize=medium) Preferred Avoid Server Waitress Businessperson Businessman Flight attendant Stewardess They He/she or (S)he A group of people or a group of women Guys or girls or ladies Parents Moms"
76
- },
77
- {
78
- "type": "guideline",
79
- "content": "Choose words carefully and understand historical significance.\n\nUse gender and sexuality descriptors as modifiers, not nouns (e.g., “transgender woman” rather than “a transgender,” “bisexual person” rather than “a bisexual”). A person’s pronouns are not opinion or preference, even if they may change over time (view Spectrum’s guidelines on pronouns ). All of this helps us emphasize every person’s humanity, and keeps us from alienating people who aren’t cisgender and heterosexual. Image: Example of a do guideline. What are your pronouns? (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_168e25aded8844c4098a3e13fa36e868c505a615b.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. What are your preferred pronouns? (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_1d210ed4b5a99533380b6da0bd2af860b88029994.png?width=750&format=png&optimize=medium) Preferred Avoid Transgender people or trans people Transgendered people or transgenders or the transgendered or transexuals Trans women Trans-women A transgender man A transman Alejandra, a lesbian woman Alejandra is a lesbian Jing, a non-binary person Jing is a non-binary Saadi is cis Saadi is CIS What are your pronouns?What are your preferred pronouns?Jamal’s pronouns are he/him/his. Jamal prefers he/him pronouns. Wholehearted or impassioned Hysterical"
80
- },
81
- {
82
- "type": "guideline",
83
- "content": "Be specific and kind.\n\nKnow the difference between sex (male/female) and gender (man/woman). When collecting personal data from users, consider if it is really necessary to ask for a person’s gender. Data collection and forms, while useful to product builders, can feel intrusive when asking about gender. When you really do need the information, allow for both common and custom responses, self-identification, multiple selections, and the option to opt out of responding. Avoid asking proxy questions, for example, asking for someone’s gender when the information that is actually needed is their bike size. Image: Example of a do guideline. UI mockup of a 'Gender' dropdown field, open to show four options: Man, Woman (currently selected, indicated by a checkmark), Prefer not to answer, and Prefer to self-describe. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_104a2fe5be94e7d900c6368f6cc24d20f85d0012f.png?width=750&format=png&optimize=medium)Image: Example of a don't guideline. UI mockup of a 'Gender' dropdown field, open to show three options: Male, Female (currently selected, indicated by a checkmark), and Other. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_11fde27c76debb0ef7dbc1bd67858fa6c2cf5c569.png?width=750&format=png&optimize=medium) Preferred Avoid Prefer to self-describe and Prefer to not respond Other"
84
- },
85
- {
86
- "type": "guideline",
87
- "content": "Account for machine learning and AI.\n\nPeople globally identify with many genders and sexualities, so it's important to teach AI exactly that. It wasn’t until June 2018 that the World Health Organization (WHO) declassified being transgender as a mental illness, so even though humans have adjusted this perspective, machine learning and AI can still perpetuate these biases. Don’t use AI or machine learning to guess genders based on image recognition, text analysis, or anything else."
88
- }
89
- ],
90
- "sourceUrl": "https://preview.spectrum.adobe.com/content/language-and-inclusivity/writing-about-people",
91
- "lastUpdated": "2026-09-04",
92
- "status": "published",
93
- "tags": [
94
- "writing",
95
- "inclusive design",
96
- "neutral language",
97
- "person-first language",
98
- "identity-first language",
99
- "avoid stereotypes",
100
- "self-identification",
101
- "AI bias"
102
- ]
103
- }
@@ -1,70 +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/content-language-and-inclusivity-writing-with-visuals.json",
4
- "name": "content-language-and-inclusivity-writing-with-visuals",
5
- "title": "Writing with visuals",
6
- "category": "designing",
7
- "documentBlocks": [
8
- { "type": "purpose", "content": "Writing with visuals" },
9
- {
10
- "type": "guideline",
11
- "content": "Try different ways of organizing information.\n\nOrganize thoughts chronologically, not spatially. If interfaces are organized around time instead of position (e.g., “before” and “after” instead of “above” and “below”), it alleviates a major pain point for people with visual impairments who rely on screen readers (audio or braille devices) or magnifiers (for example, an interface may be too zoomed-in for it to be apparent that person is in a modal). Doing this also avoids confusion for people with learning disabilities that make it hard to understand directional language. Create content that can be presented in different ways without losing information or structure, sometimes called “modular content.” Perhaps the layout can be simplified, or the order of content can be switched around. Image: Key example showing the correct usage of organizing your writing for comprehension. Heading, Learn how to crop images. Description, take this hands-on tutorial now. Call-to-action button, label Start. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_1c1dc4df379f4d4000b519df4a8df3be19adff5d4.png?width=750&format=png&optimize=medium)Image: Key example showing the incorrect usage of organizing your writing for comprehension. Heading, Ready to learn? Description, Or are you ready to dig in? How about both? Call-to-action button, label Start tutorial. Secondary button, label Go back. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_1f6fc9881e0884994e76ad4b606dced6c500a3f89.png?width=750&format=png&optimize=medium) Preferred Avoid This article describes linking in more detail.Click here to learn more about linking. Learn how to crop images Take this hands-on tutorial now. [ Start ] This is modular content; all the content pieces could stand alone or be rearranged. Ready to learn? Or are you ready to dig in? How about both? [ Start tutorial / Go back ] This is more traditional content; the content pieces depend on each other in a certain order to make sense. Update your information (step 1 of 3)Confirm your information"
12
- },
13
- {
14
- "type": "guideline",
15
- "content": "Avoid directional language.\n\nOrganize interfaces around time (chronologically) instead of position (spatially) to ensure that you don’t use directional language to describe how to accomplish a task. Image: An example of correct usage. In the menu bar. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_110ca6da0114667ec40138d1c6ae7ba8c33b69950.png?width=750&format=png&optimize=medium)Image: An example of correct usage. On the left. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_162ff93be0b03bb073e96c26e715cf375769de4ce.png?width=750&format=png&optimize=medium) Preferred Avoid FirstAboveNextBelowIn the menu barOn the leftFinallyAt the bottom"
16
- },
17
- {
18
- "type": "guideline",
19
- "content": "Prevent errors before correcting them.\n\nHelp people avoid and correct mistakes by writing in a predictable and consistent way, and make screens look and act the way people expect. Consistent navigation and identification of components across products and surfaces will aid in this. Especially in forms, label and instruct sufficiently. If an error occurs, describe the problem in text without relying on icons or colors alone. Image: Key example of correctly preventing errors. Required text field showing help text. Label, Password. Help text description, Password must be at least 8 characters. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_11376671b0abc29eb2039aa53218afc5aa9b279c4.png?width=750&format=png&optimize=medium)"
20
- },
21
- {
22
- "type": "guideline",
23
- "content": "Avoid naming things.\n\nEvery new name is a new concept that a person must learn, which increases cognitive load. But when naming is unavoidable, be consistent. Name actions across experiences and products the same, or at least predictably. Describe and define the name before mentioning it in UI content."
24
- },
25
- {
26
- "type": "guideline",
27
- "content": "Describe what’s happening.\n\nProvide titles to describe a situation, such as in coach marks or a stepped flow, and keep them consistent within the same situation. This helps all people navigate, find content, and determine where they are. If visual content is time-based media, like a tutorial video, text provides descriptive identification and ideally offers an alternative to the visual, such as a transcript, closed captioning, or a step-by-step written guide."
28
- },
29
- {
30
- "type": "guideline",
31
- "content": "Write about actions and their effects.\n\nTake a step back to think about the interaction you’re writing about. Then, write about what controls and buttons do, not what they look like, in the interaction. Control type (e.g., “button” or “slider”) is coded separately, so screen readers will already pick up what it’s called. Give each a name that describes its purpose. Focus your attention on results and UI words, not how people should physically interact with a control. Each person’s accessibility tech will describe the correct interaction for them. Image: Key example of writing about an action and its effect. Correct usage in a coach mark. Title, Edit. Step 1 of 14. Description, You can make changes to your post at any time with the Edit tool. Primary button, label Next. Secondary button, label Skip tour. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_191b4e8a624329ecde87f67128da614a530e691f4.png?width=750&format=png&optimize=medium)Image: Key example of writing about an action and its effect. Incorrect usage in a coach mark. Title, Edit. Step 1 of 14. Description, Click to edit. Primary button, label Next. Secondary button, label Skip tour. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_128dece0b359eaaed84cdf64e529620307e27c8ff.png?width=750&format=png&optimize=medium) Preferred Avoid Enter emailType email addressSaveThe \"Save\" buttonZoom inPinch the trackpadCancelCloseOn/offSwitch/toggle, activateMenuSide drawerEditThe pencil iconSelect, go toClick, tap"
32
- },
33
- {
34
- "type": "guideline",
35
- "content": "Don’t rely only on color or icons.\n\nAdding words to an interface is better than relying on color or icons as the only way of conveying information, indicating an action, prompting a response, or distinguishing a visual element. If you use links in text, make the purpose of each link clear from the link text alone. Screen readers usually inform the reader if a word is a hyperlink, so the words “click here” or “link” get in the way. Additionally, screen readers can’t differentiate between the many times “click here” can appear in one view. Image: Key example of correct usage of adding words to an interface to supplement color and icons. Required text field in an error state with red outline and error icon, label Password. Error message, Create a password with at least 8 characters. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_12b83bac79712fd24e6b1888a6fcd5f6ebd6a1bb6.png?width=750&format=png&optimize=medium)Image: Key example of incorrect usage of adding words to an interface to supplement color and icons. Required text field in an error state with red outline and error icon, label Password. No error message text. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_1e2ca96cc7adf7e30732122a616f952c3acfd8f5f.png?width=750&format=png&optimize=medium)"
36
- },
37
- {
38
- "type": "guideline",
39
- "content": "Don’t rely on visuals alone to communicate.\n\nThe visual metaphors of emoji and icons can have a wide variety of interpretations, especially across cultures. Describe the interface in terms of actions and tasks, not component color or visual design. Image: An example of correct usage. Secure site. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_17c3e920a6440c98e2cb7c5e4b31f20f3cac0b7df.png?width=750&format=png&optimize=medium)Image: An example of incorrect usage. A lock icon. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_1731ab8abc7bbac6a3f64aef590d145e560ff877f.png?width=750&format=png&optimize=medium) Preferred Avoid Secure site🔒Saved to the cloud☁️The number you entered isn’t in our system.❌The Go buttonThe green button"
40
- },
41
- {
42
- "type": "guideline",
43
- "content": "Provide alt text.\n\nAlt text — short strings that describe the function of interface elements and describe images — improves understanding and clarity for everybody using a product, not only people using assistive technology. For example, if you were to hover your mouse over the “search” magnifying glass icon on Adobe.com, it would reveal the alt text “Search Adobe.com.” This provides more context about the available action. Alt text for any non-text content allows it to be changed into other forms that people need, such as large print, braille, speech, symbols, or simpler language. It makes visual cues, like icons and images, legible to people with low vision using assisted services (e.g., Voiceover on iOS, Talkback on Android ). Talk with engineers about providing alt text, hints, and traits for components. For example, an icon-only button that doesn’t have a text label needs to still communicate its purpose using text. Spectrum’s documentation has detailed guidance about building accessible interfaces, and the W3C also has a list of resources and tutorials about alt text that offer a more comprehensive introduction. For alt text for images, view our writing guide. Preferred Avoid alt=”Chicago Bulls player Michael Jordan making his first of 38 points against the Utah Jazz on their home court, despite widespread speculation that he had the flu.”alt=”Basketball player making a basket at an arena”alt=”Animation showing how to use the touch shortcut. Take the tutorial for more info.”alt=”Animation showing the touch shortcut used with the shape tool to create a shape with a constrained aspect ratio”"
44
- },
45
- {
46
- "type": "guideline",
47
- "content": "Photographs and stock images.\n\nIn general, just speak to what something is. One way to approach this is to imagine that you’re describing the image to someone over the phone. Image: Tibetan monk wearing a red robe walking across a bridge covered with multicolor prayer flags. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_136dd5563938c3103ef68fb95063e79458395957e.png?width=750&format=png&optimize=medium)Tibetan monk wearing a red robe walking across a wooden bridge covered with multicolor prayer flags."
48
- },
49
- {
50
- "type": "guideline",
51
- "content": "Images that show or function as UI.\n\nMention all parts of the UI and what the content is for each part, if applicable. Write in the order of how a screen reader would read the components in the actual UI. When an image functions as a UI component — for example, an icon-only button or an image being used as a button — use verbs to describe the action instead of the appearance of the iconography. Image: Two examples of images of UI from the Spectrum website. Meters and an icon-only button. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_1a22871ce2657f1384c883cbc027b73ecbf320c7c.png?width=750&format=png&optimize=medium)First example: 2 meters showing positive status. First meter labeled Tutorials completed, 2 of 8. Second meter labeled Storage space, 15%. Second example: Send message (Not: “paper airplane in motion”)."
52
- },
53
- {
54
- "type": "guideline",
55
- "content": "Images that describe usage notes or guidelines.\n\nDescribe any specific examples of how to apply (or not to apply) a concept or guideline that has been outlined in other text. Be sure to include any text that’s part of the image. Image: Key example showing how to use simple tenses. Three examples of correct usage. She ran for president. He writes great poetry. Carmen will make the poster. (source: https://preview.spectrum.adobe.com/content/language-and-inclusivity/media_10dd8f51f80783ba79e4642cea18ff806d07ced9e.png?width=750&format=png&optimize=medium)3 key examples showing correct usage of writing in simple tense. She ran for president. He writes great poetry. Carmen will make the poster."
56
- }
57
- ],
58
- "sourceUrl": "https://preview.spectrum.adobe.com/content/language-and-inclusivity/writing-with-visuals",
59
- "lastUpdated": "2026-09-04",
60
- "status": "published",
61
- "tags": [
62
- "writing",
63
- "inclusive imagery",
64
- "modular content",
65
- "directional language",
66
- "screen readers",
67
- "consistent navigation",
68
- "error prevention"
69
- ]
70
- }
@@ -1,47 +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/content-voice-and-tone.json",
4
- "name": "content-voice-and-tone",
5
- "title": "Voice and tone",
6
- "category": "designing",
7
- "documentBlocks": [
8
- { "type": "purpose", "content": "Voice and tone" },
9
- {
10
- "type": "guideline",
11
- "content": "Rational.\n\nClear and understandable Ensure decisions about grammar and mechanics are research-informed and tested. Avoid language that’s overly opinionated, funny, or trendy."
12
- },
13
- {
14
- "type": "guideline",
15
- "content": "Human.\n\nFriendly, honest, and responsible Vary sentence style and structure for readability and relatability. Acknowledge and account for users’ emotions."
16
- },
17
- {
18
- "type": "guideline",
19
- "content": "Focused.\n\nConcise and simple Describe only what’s needed, without unnecessary decoration. Avoid creating new concepts and only name things when necessary."
20
- },
21
- {
22
- "type": "guideline",
23
- "content": "Brand guidelines.\n\nThe Adobe Style Guide's \"Voice\" section defines the principles of our brand voice. This guide also contains a glossary with branded terms and information about applying branding guidelines in a variety of different customer-facing situations."
24
- },
25
- {
26
- "type": "guideline",
27
- "content": "Tone Spectrum.\n\nThe right tone depends on a user’s contextual needs and corresponding emotions for that experience, as well as how involved and emotional we need to be in the process. Think of the tone for any given experience as being on a spectrum: Image: Unlabeled image (source: https://preview.spectrum.adobe.com/content/media_12f84ec54da70f6105c953de2d8d0e1ab408de467.png?width=750&format=png&optimize=medium)Tone can fall on a spectrum going from motivational to helpful, helpful to instructive, instructive to reassuring, reassuring to supportive."
28
- },
29
- {
30
- "type": "guideline",
31
- "content": "Tone guide.\n\nThe tone spectrum acts as a sliding scale for considering which of our attitudes and expressions are appropriate for different experiences. ToneAttitudeFrequency Motivational Positive and encouraging We're looking out for you and cheering you on. You've got this!Rarely Helpful Polite and respectful We know you're busy, so we'll make this brief.Occasionally Instructive Neutral and direct Here is the information you need.Often Reassuring Professional and reliable We know you're worried about this issue, and we're here to help.Occasionally Supportive Concerned and empathetic Something bad has happened and we understand how you feel. We want to inform, guide, and support you through this.RarelyThe points on this spectrum aren't necessarily binary. For example, the right tone for an experience could be either motivational or helpful, or it could exist somewhere between those points."
32
- }
33
- ],
34
- "sourceUrl": "https://preview.spectrum.adobe.com/content/voice-and-tone",
35
- "lastUpdated": "2026-09-14",
36
- "status": "published",
37
- "tags": [
38
- "voice",
39
- "tone",
40
- "brand guidelines",
41
- "Adobe Style Guide",
42
- "language guidelines",
43
- "readability",
44
- "user experience",
45
- "tone spectrum"
46
- ]
47
- }