@atlaskit/ads-mcp 1.3.2 → 1.5.0

package/dist/esm/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.js

@@ -3,7 +3,7 @@
  *
  * Structured content utilities from design-system *.docs.tsx files
  *
- * @codegen <<SignedSource::e4f346932028cd8a142bb0610697ed47>>
+ * @codegen <<SignedSource::967196502e12df47cd3e9e9a05dcdaea>>
  * @codegenCommand yarn workspace @af/ads-ai-tooling codegen:atlaskit-utilities
  */
 /* eslint-disable @repo/internal/react/boolean-prop-naming-convention -- not our types */
@@ -211,92 +211,6 @@ export var atlaskitUtilities = [{
   accessibilityGuidelines: [],
   keywords: ['editor', 'editor-plugin-quick-insert', 'atlaskit'],
   category: 'editor',
-  import: {
-    name: 'quickInsertPlugin',
-    package: '@atlaskit/editor-plugin-quick-insert',
-    type: 'named',
-    packagePath: '/Users/khall2/.codex/worktrees/bd80/atlassian-frontend-monorepo/platform/packages/editor/editor-plugin-quick-insert',
-    packageJson: {
-      name: '@atlaskit/editor-plugin-quick-insert',
-      version: '12.0.10',
-      description: 'Quick insert plugin for @atlaskit/editor-core',
-      author: 'Atlassian Pty Ltd',
-      license: 'Apache-2.0',
-      publishConfig: {
-        registry: 'https://registry.npmjs.org/'
-      },
-      atlassian: {
-        team: 'Editor: Lego',
-        singleton: true
-      },
-      repository: 'https://bitbucket.org/atlassian/atlassian-frontend-mirror',
-      main: 'dist/cjs/index.js',
-      module: 'dist/esm/index.js',
-      'module:es2019': 'dist/es2019/index.js',
-      types: 'dist/types/index.d.ts',
-      sideEffects: ['*.compiled.css'],
-      'atlaskit:src': 'src/index.ts',
-      exports: {
-        '.': './src/index.ts',
-        './quick-insert-plugin': './src/entry-points/quick-insert-plugin.tsx',
-        './quick-insert-plugin-type': './src/entry-points/quick-insert-plugin-type.ts'
-      },
-      dependencies: {
-        '@atlaskit/button': 'workspace:^',
-        '@atlaskit/editor-plugin-analytics': 'workspace:^',
-        '@atlaskit/editor-plugin-connectivity': 'workspace:^',
-        '@atlaskit/editor-plugin-metrics': 'workspace:^',
-        '@atlaskit/editor-plugin-type-ahead': 'workspace:^',
-        '@atlaskit/editor-prosemirror': 'workspace:^',
-        '@atlaskit/icon': 'workspace:^',
-        '@atlaskit/modal-dialog': 'workspace:^',
-        '@atlaskit/platform-feature-flags': 'workspace:^',
-        '@atlaskit/tmp-editor-statsig': 'workspace:^',
-        '@atlaskit/tokens': 'workspace:^',
-        '@babel/runtime': 'root:*',
-        '@emotion/react': 'root:*'
-      },
-      peerDependencies: {
-        '@atlaskit/editor-common': 'workspace:^',
-        react: '^18.2.0',
-        'react-dom': '^18.2.0',
-        'react-intl': '^5.25.1 || ^6.0.0 || ^7.0.0'
-      },
-      devDependencies: {
-        '@atlassian/structured-docs-types': 'workspace:^',
-        '@testing-library/react': 'root:*',
-        react: 'root:*',
-        'react-dom': 'root:*',
-        'react-intl': 'root:*',
-        'wait-for-expect': 'root:*'
-      },
-      techstack: {
-        '@atlassian/frontend': {
-          'code-structure': ['editor-plugin'],
-          'import-structure': ['atlassian-conventions'],
-          'circular-dependencies': ['file-and-folder-level']
-        },
-        '@repo/internal': {
-          'dom-events': 'use-bind-event-listener',
-          analytics: ['analytics-next'],
-          'design-tokens': ['color'],
-          theming: ['react-context'],
-          'ui-components': ['lite-mode'],
-          deprecation: 'no-deprecated-imports',
-          styling: ['emotion', 'emotion'],
-          imports: ['import-no-extraneous-disable-for-examples-and-docs']
-        }
-      },
-      'platform-feature-flags': {
-        platform_editor_ease_of_use_metrics: {
-          type: 'boolean'
-        },
-        platform_editor_fix_space_triggering_ai: {
-          type: 'boolean'
-        }
-      }
-    }
-  },
   package: '@atlaskit/editor-plugin-quick-insert',
   examples: [],
   kind: 'function',
@@ -451,47 +365,6 @@ export var atlaskitUtilities = [{
   accessibilityGuidelines: [],
   keywords: ['editor', 'insm', 'atlaskit'],
   category: 'editor',
-  import: {
-    name: 'init',
-    package: '@atlaskit/insm',
-    type: 'named',
-    packagePath: '/Users/khall2/.codex/worktrees/bd80/atlassian-frontend-monorepo/platform/packages/editor/insm',
-    packageJson: {
-      name: '@atlaskit/insm',
-      version: '1.0.11',
-      description: 'INSM tooling measures user-perceived interactivity of a page',
-      author: 'Atlassian Pty Ltd',
-      license: 'Apache-2.0',
-      publishConfig: {
-        registry: 'https://registry.npmjs.org/'
-      },
-      atlassian: {
-        team: 'Editor: Lego'
-      },
-      repository: 'https://bitbucket.org/atlassian/atlassian-frontend-monorepo',
-      main: 'dist/cjs/index.js',
-      module: 'dist/esm/index.js',
-      'module:es2019': 'dist/es2019/index.js',
-      types: 'dist/types/index.d.ts',
-      'atlaskit:src': 'src/index.ts',
-      exports: {
-        '.': './src/index.ts'
-      },
-      dependencies: {
-        '@atlaskit/analytics-listeners': 'workspace:^',
-        '@atlaskit/tmp-editor-statsig': 'workspace:^',
-        '@babel/runtime': 'root:*',
-        'bowser-ultralight': 'root:*'
-      },
-      peerDependencies: {
-        react: '^18.2.0'
-      },
-      devDependencies: {
-        '@atlassian/structured-docs-types': 'workspace:^',
-        react: 'root:*'
-      }
-    }
-  },
   package: '@atlaskit/insm',
   examples: [],
   kind: 'function',

package/dist/esm/tools/get-guidelines/guidelines-structured-content.codegen.js

@@ -3,7 +3,7 @@
  *
  * Structured content for content guidelines from design-system-docs foundations content.
  *
- * @codegen <<SignedSource::f7260b1dc10cf36a78f833788065aca6>>
+ * @codegen <<SignedSource::744810b00561c03e60666df4de7c08ef>>
  * @codegenCommand yarn build structured-docs
  */
 
@@ -32,7 +32,7 @@ export var guidelinesStructuredContent = [{
   content: '<SectionMessage title="">\n\tDate and time formatting is tied to a person’s locale and account settings. Because of this, what\n\ta customer sees could be different from the guidelines on this page.\n</SectionMessage>\n\n## Date and time for internationalization\n\nEach programming language has an i18n (internationalization) library that automatically localizes\ntime and date strings based on a user’s locale settings/preferences. Time and date strings should\nnever be localized manually by a designer, engineer, or translator.\n\nThe Product Internationalization team is responsible for creating app UI content in non-English\nlanguages by localizing externalized code strings provided by our Product Engineers.\n\nEngineers must:\n\n- Ensure date and time references/strings are not hardcoded \n- Reference the programming i18n library API, which will automatically format time and date strings\n  as per a customer’s detected or selected locale.\n\n## Date formats\n\nAtlassian uses US date formatting (for example: January 12, 2028).\n\nWhen you’re handing designs over to engineers, you need to specify which date format length is\nneeded. The i18n library API will use this information to format the date accordingly. Date and time\nformats should not be hardcoded.\n\nThere are 4\n[date format lengths](https://cldr.unicode.org/translation/date-time/date-time-patterns#basic-date-formats):\nfull, long, medium, and short.\n\n### Full date\n\nThe full date format is weekday, month, day, year.\n\n<DoDontGrid>\n\t<DoDont type="do">Sunday, August 14, 2028</DoDont>\n</DoDontGrid>\n\n### Long date\n\nA long date format is month, day, year\n\n<DoDontGrid>\n\t<DoDont type="do">November 8, 2008</DoDont>\n</DoDontGrid>\n\n### Medium date\n\nThe medium date format is abbreviated month, day, year. Only use this format when space is limited.\n\n<DoDontGrid>\n\t<DoDont type="do">Sep 26, 1952</DoDont>\n</DoDontGrid>\n\n#### Abbreviating months and days\n\nIf you need to abbreviate months or days, use the first 3 letters of the month or day.\n\n| Month abbreviation | Month in full |     | Day abbreviation | Day in full |\n| ------------------ | ------------- | --- | ---------------- | ----------- |\n| Jan                | January       |     | Mon              | Monday      |\n| Feb                | February      |     | Tue              | Tuesday     |\n| Mar                | March         |     | Wed              | Wednesday   |\n| Apr                | April         |     | Thu              | Thursday    |\n| May                | May           |     | Fri              | Friday      |\n| Jun                | June          |     | Sat              | Saturday    |\n| Jul                | July          |     | Sun              | Sunday      |\n| Aug                | August        |     |                  |             |\n| Sep                | September     |     |                  |             |\n| Oct                | October       |     |                  |             |\n| Nov                | November      |     |                  |             |\n| Dec                | December      |     |                  |             |\n\n### Short date\n\nShort format dates are written in digits.\n\nIn most cases, avoid short format dates as different countries use the date in a different order,\nwhich can cause confusion and effect readability and usability. In the US, 10-8-2026 is October 8,\n2026, but in Australia and the UK, it’s August 10, 2026.\n\nHowever, short format dates might be suitable for situations like data storage, sorting or\nfiltering, or data export/import. If using, use the ISO 8601 international standard for numerical\ndate format, which is YYYY-MM-DD.\n\n## Ordinal numbers\n\nDon’t use ordinal numbers (1st, 2nd, 3rd, and so on) in dates.\n\n## Date ranges\n\nIf you have a date range, use ‘to’ and not hyphens. For example: ‘2020 to 2024’. Hyphens are read\nout by screen readers as ‘hyphen’, which can lead to confusion.\n\nAn exception is financial years, which use a hyphen without spaces on either side. For example:\nFY2008-09\n\nUse ‘and’ if a range is preceded by ‘between’. For example: He was in Paris between 2025 and 2026.\n\n<DoDontGrid>\n\t<DoDont type="do">2014 to 2015</DoDont>\n\t<DoDont type="dont">2014-15</DoDont>\n</DoDontGrid>\n\n## Time formats\n\nShow time in digits for precision and to give a clearer expression of time.\n\nSpecify to engineers which time format length is needed. The i18n library API will then format the\ntime according to a customer’s account settings. Make sure time is not hardcoded.\n\nUse a colon (:) to separate the hours and minutes (though this might change depending on a user’s\nlocale and account settings).\n\nLike dates, there are 4\n[time format lengths](https://cldr.unicode.org/translation/date-time/date-time-patterns#basic-time-formats):\nfull, long, medium, and short.\n\n### Full time\n\nThe full time format is hour, minutes, seconds, and time zone spelt out.\n\n<DoDontGrid>\n\t<DoDont type="do">3:30:10 p.m. Pacific Standard Time</DoDont>\n</DoDontGrid>\n\n### Long time\n\nThe long time format is hour, minutes, seconds, and the time zone initials.\n\n<DoDontGrid>\n\t<DoDont type="do">11:18:30 p.m. PST</DoDont>\n</DoDontGrid>\n\n### Medium time\n\nThe medium time format is hour, minutes, and seconds.\n\n<DoDontGrid>\n\t<DoDont type="do">8:50:28 a.m.</DoDont>\n</DoDontGrid>\n\n### Short time\n\nThe short time format is hour and minutes.\n\n<DoDontGrid>\n\t<DoDont type="do">2:40 p.m.</DoDont>\n</DoDontGrid>\n\n### 24-hour time\n\nThe 24-hour format is useful for more serious communications, for example in the case of outages and\nsecurity comms. The use of the 24-hour format is mostly system-driven by the i18n library API.\n\nThis format numbers hours from 00:00 hours (midnight) to 23:59 and uses 4 digits: the first 2 digits\nare the hours and the next 2 digits are the minutes. Use a colon (:) to separate the hours and\nminutes, though this might change depending on someone\'s account settings.\n\n## Writing time\n\n### Duration and timestamps\n\nWhen writing timestamps, labels on graphs, or durations, avoid using zeros before the hour. For\nexample: 5:29. not 05:29. Use a colon between the hours and minutes with no spaces on either side.\n\n### Using a.m. and p.m.\n\nFormat time using ‘a.m.’ and ‘p.m.’ when creating content like blogs, manuals, and instructions.\n\n- Lowercase ‘a.m.’ and ‘p.m.’\n- Use periods between the letters\n- Add a space between the time and the ‘a.m.’ or ‘p.m.’. For example: 6:30 a.m. (not 6:30a.m.)\n\n### Time range\n\n- If you have a time range that’s entirely in the morning or evening, use \'a.m.\' or \'p.m.\' only\n  once. For example: 6:30 to 10 p.m.\n- If the time range goes from the morning into the evening (or vice versa), use both. For example:\n  10 a.m. to 2 p.m.\n\n### Noon, midday, and midnight\n\nWhere suitable, use ‘noon’, ‘midday’ or ‘midnight’ instead of ‘12 am’ or ‘12 pm’ as it makes it\neasier for people to differentiate between these times.\n\n### Avoid using ‘fortnightly ‘or ‘bi’ for months and years\n\nAvoid using ‘fortnightly’ and the prefix ‘bi’ to mean either 2 or twice, as these terms can be\nconfusing.\n\nInstead of:\n\n- **Fortnightly**: write ‘every 2 weeks’\n- **Bimonthly**: write ‘twice a month’ or ‘every 2 months’\n- **Biannual**: write ‘twice a year’ or ‘every 2 years’.\n\n<DoDontGrid>\n\t<DoDont type="do">Your sprint will repeat every 2 weeks.</DoDont>\n\t<DoDont type="dont">Your sprint will repeat fortnightly.</DoDont>\n</DoDontGrid>\n\n## Date and time formats\n\nThere are also full, long, medium, and short format lengths when combining date and time.\n\n### Full date and time\n\n<DoDontGrid>\n\t<DoDont type="do">Wednesday, June 12, 2024 at 6:25:59 p.m. Eastern Standard Time</DoDont>\n</DoDontGrid>\n\n### Long date and time\n\n<DoDontGrid>\n\t<DoDont type="do">April 25, 2027 at 9:05:32 p.m. PST</DoDont>\n</DoDontGrid>\n\n### Medium date and time\n\n<DoDontGrid>\n\t<DoDont type="do">Sep 5, 1999, 1:25:59 a.m.</DoDont>\n</DoDontGrid>\n\n### Short date and time\n\n<DoDontGrid>\n\t<DoDont type="do">2028-10-22, 6:25 p.m. </DoDont>\n</DoDontGrid>\n\n## Relative date and time\n\nIn some cases, like when the exact date is less important, the easiest way to describe something\nthat happened very recently is using the ‘ago’ format.\n\nFor future and past events, use approximate time by rounding down to the largest or most recent date\nor time.\n\nYou should always provide a way for people to see the actual timestamp, usually via a tooltip.\n\n### Past\n\n| Description                 | Display                      | Display when limited space     |\n| --------------------------- | ---------------------------- | ------------------------------ |\n| Within the last few seconds | just now                     | now                            |\n| Within the last minute      | a minute ago                 | 1 m                            |\n| Within 59 minutes           | x minutes ago                | X m                            |\n| 60 minutes ago              | 1 hour ago                   | 1 h                            |\n| x hours ago                 | x hours ago                  | X h                            |\n| 1 day ago                   | yesterday                    | 1 d                            |\n| 1 day ago (with time)       | yesterday at 5:05 pm         | n/a                            |\n| 2 days ago < 7 days         | x days ago                   | Use the truncated date (Aug 8) |\n| 7 days ago                  | 1 week ago                   | Use the truncated date (Aug 8) |\n| > 7 days ago                | Date stamp: "August 8, 2018" | Use the truncated date (Aug 8) |\n\n### Future\n\n| Description                   | Display                      | Display when limited space     |\n| ----------------------------- | ---------------------------- | ------------------------------ |\n| Within the next few seconds   | shortly                      | now                            |\n| In the next minute            | In 1 minute                  | in 1 m                         |\n| In the next 60 minutes        | In x minutes                 | in X m                         |\n| In 60 minutes                 | In 1 hour                    | in 1 hr                        |\n| In x hours                    | In x hours                   | in X hr                        |\n| In 1 day (by date, not hours) | tomorrow                     | Use the truncated date (Aug 8) |\n| In 2 to 7 days                | In x days                    |                                |\n| In 7 days                     | In 1 week                    |                                |\n| In > 7 days                   | Date stamp: "August 8, 2018" |                                |\n| > 7 days ago                  | Date stamp: "August 8, 2018" |                                |\n\n## Style and punctuation\n\nStyle and punctuation for dates and time can change depending on locale and is determined by the\ni18n library API.\n\n### Capitalization\n\n- Months and days in English are proper nouns and start with a capital letter.\n- Specific days or periods in history are all proper nouns, so should be capitalized. For example:\n  New Year’s Day, Renaissance, Cold War.\n- Use capital letters for all institutional holidays, religious days, and public events. For\n  example: Ramadan, Yom Kippur, Good Friday, Martin Luther King Jr. Day.\n\n### Apostrophes\n\n- Avoid using apostrophes in UI copy and in developer and support documentation.\n- In more casual writing, you can use an apostrophe to stand in for the missing numerals in the\n  year, such as \'the \'70s’.\n\n## Resources\n\n- [Int.DateTimeFormat constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#try_it) -\n  a JavaScript library that devs can use and where designers can check formatting of date and time.\n- [Date formats](https://cldr.unicode.org/translation/date-time/date-time-patterns#basic-date-formats)\n- [Time formats](https://cldr.unicode.org/translation/date-time/date-time-patterns#basic-time-formats)',
   keywords: ['date', 'time', 'formatting', 'localization', 'datetime', 'content']
 }, {
-  content: 'People care about how apps talk to them. YouTube, GitHub, and Slack all have a distinct voice, tone,\nand personality.\n\nApps engage us, manage to make us feel at home, capture our attention, and earn our loyalty.\n\nPoor messaging contributes to a poor user experience, which leads to dissatisfaction. On the other\nhand, good copy reflects our apps\' voice (personality) and enables us to build a better relationship\nwith our audience.\n\nIn short, good messaging may not be the reason people stay with our apps, but bad messaging could be\nthe reason they decide to leave.\n\n## Choose a message type\n\nUse different types of messages to guide people through their tasks. Each message type has a\nconsistent visual and writing style to help people know what to expect.\n\nUse these guidelines to choose and write the types of messages:\n\n- [Information message](https://atlassian.design/foundations/content/designing-messages/info-messages)\n  — provides additional information to motivate people.\n- [Error message](https://atlassian.design/foundations/content/designing-messages/error-messages) —\n  alerts people of a problem that has occurred and informs them what to do next.\n- [Success message](https://atlassian.design/foundations/content/designing-messages/success-messages)\n  — celebrates success along with the people using our apps.\n- [Warning message](https://atlassian.design/foundations/content/designing-messages/warning-messages)\n  — gives advanced notice of a potential change that may result in loss of data or an error state.\n- [Feature discovery](https://atlassian.design/foundations/content/designing-messages/feature-discovery)\n  — lets people know about a new feature.\n\n## Select the right component\n\nUse the table to identify the right component for your content.\n\nFor example:\n\n- If you want to highlight a new feature to a user, consider a spotlight card, benefits modal, or\n  empty state.\n- If you want to tell someone they\'ve accomplished a task, consider a flag.\n\n| Component                                     | Information message | Success message | Warning message | Error message | Feature discovery |\n| --------------------------------------------- | ------------------- | --------------- | --------------- | ------------- | ----------------- |\n| **Empty state**                               | Yes                 | Yes             |                 |               | Yes               |\n| **Banner**                                    | Yes                 |                 | Yes             | Yes           |                   |\n| **Flag**                                      | Yes                 | Yes             | Yes             | Yes           |                   |\n| **Section message**                           | Yes                 |                 | Yes             | Yes           |                   |\n| **Inline message**                            | Yes                 | Yes             | Yes             | Yes           |                   |\n| **Modal dialog**                              | Yes                 |                 | Yes             |               |                   |\n| **Benefits modal**                            |                     |                 |                 |               | Yes               |\n| **Onboarding (spotlight) and spotlight card** |                     |                 |                 |               | Yes               |\n\n### Empty state\n\nUse empty states to show when there is nothing to display in a view, for example, when a board has\nno tasks, someone clears their inbox, or a search returns no results.\n\nRead guidance on writing effective\n[empty state messages](https://atlassian.design/foundations/content/designing-messages/empty-state).\n\n<img\n\tsrc={messagesEmptyState}\n\talt="Empty state encouraging an admin to add people to a Jira project space."\n/>\n\nAn empty state can appear as a full-screen message or within panels, tables, and other containers.\n\n[Usage guidance for empty state component](https://atlassian.design/components/empty-state/usage).\n\n### Banner\n\nUse banners only for critical system-level messaging for example, warnings about loss of data or\nfunctionality.\n\n<img src={messagesBanner} alt="Banner message example with a red error message." />\n\nBanners appear at the top of the screen and shift the content below them.\n\n[Usage guidance for banner component](https://atlassian.design/components/banner/usage).\n\n### Flag\n\nUse flags for confirmations, alerts, and acknowledgments that require minimal user interaction.\n\n<img\n\tsrc={messagesFlag}\n\talt="Example of a flag message with a green tick icon, the heading \'You are now connected\', and the text describing a group the user is added to."\n/>\n\nFlags are event-driven messages that appear by overlaying content at the bottom left of the screen,\nemerging from the navigation sidebar.\n\n[Usage guidance for flag component](https://atlassian.design/components/flag/usage).\n\n### Section message\n\nUse section messages to alert the user of something that has happened in a specific section of the\nscreen.\n\n<img\n\tsrc={messagesSectionMessages}\n\talt="Example of a section message showing green tick icon, the heading Merged pull request, details of the pull request, and links to the hash and user name, and the time it happened."\n/>\n\nSection messages appear above the affected area (for example, work items in Jira).\n\n[Usage guidance for section message component](https://atlassian.design/components/section-message/usage).\n\n### Inline message\n\nUse inline messages to alert people to a required action or important information.\n\n<img\n\tsrc={messagesInlineDialog}\n\talt="Example of a cursor on a yellow caution icon triggering an inline dialog message."\n/>\n\nInline messages consist of an icon, message, and sometimes secondary text. People can interact with\nthe icon, title, or secondary text to reveal the full inline message.\n\n[Usage guidance for inline message component](https://atlassian.design/components/inline-message/usage).\n\n### Modal dialog\n\nUse modal dialogs to present a short-term task the user needs to perform.\n\n<img\n\tsrc={messagesModal}\n\talt="A modal that presents a task and a dropdown menu, with a clear action."\n/>\n\nModal dialogs display content in a layer above the page.\n\n[Usage guidance for modal dialog component](https://atlassian.design/components/modal-dialog/usage).\n\n### Benefits modal\n\nBenefits modals explain the value of a significant new feature or experience change.\n\nRead guidance on writing effective\n[feature discovery messages](https://atlassian.design/foundations/content/designing-messages/feature-discovery).\n\n<img\n\tsrc={messagesBenefitsModal}\n\talt="A modal for a Jira update that includes the key elements of a benefits modal."\n/>\n\nA benefits modal focuses a person\'s attention on a large or impactful update.\n\n[Usage guidance for benefits modal component](https://atlassian.design/components/onboarding/benefits-modal/usage).\n\n### Onboarding (spotlight) and spotlight card\n\nAn onboarding spotlight introduces new features to users through focused messages or multi-step\ntours. A spotlight card is for onboarding messages that need a more flexible layout, or don\'t\nrequire a dialog.\n\nRead guidance on writing effective\n[feature discovery messages](https://atlassian.design/foundations/content/designing-messages/feature-discovery).\n\n<img\n\tsrc={messagesOnboarding}\n\talt="An example of a spotlight pulse expanded into a spotlight component that encourages people to try the new feature."\n/>\n\n[Usage guidance for onboarding (spotlight) component](https://atlassian.design/components/onboarding/usage)\nand [spotlight card component](https://atlassian.design/components/onboarding/spotlight-card/usage).\n\n## Set the appearance (color and icon)\n\nMessages use colors and icons to help indicate content and urgency.\n\nMake sure you use the right\n[color role for your situation](https://atlassian.design/foundations/color#color-roles). For\nexample, yellow typically implies a warning, while green can imply success.\n\n<img\n\tsrc={colorRolesAndIcons}\n\talt="Icons showing different icons and colors we use in messages. Informative messages use a blue circle icon with an i inside, success is a green check icon, warning is a yelowish triangle icon with an exclamation mark, danger is a red diamond icon with an exclamation mark, and discovery or new is a purple circle with a question mark inside."\n/>\n\nReview [guidelines on using icons](https://atlassian.design/foundations/iconography) and\n[usage guidance for the icon component](https://atlassian.design/components/icon/usage).',
+  content: 'People care about how apps talk to them. YouTube, GitHub, and Slack all have a distinct voice, tone,\nand personality.\n\nApps engage us, manage to make us feel at home, capture our attention, and earn our loyalty.\n\nPoor messaging contributes to a poor user experience, which leads to dissatisfaction. On the other\nhand, good copy reflects our apps\' voice (personality) and enables us to build a better relationship\nwith our audience.\n\nIn short, good messaging may not be the reason people stay with our apps, but bad messaging could be\nthe reason they decide to leave.\n\n## Choose a message type\n\nUse different types of messages to guide people through their tasks. Each message type has a\nconsistent visual and writing style to help people know what to expect.\n\nUse these guidelines to choose and write the types of messages:\n\n- [Information message](https://atlassian.design/foundations/content/designing-messages/info-messages)\n  — provides additional information to motivate people.\n- [Error message](https://atlassian.design/foundations/content/designing-messages/error-messages) —\n  alerts people of a problem that has occurred and informs them what to do next.\n- [Success message](https://atlassian.design/foundations/content/designing-messages/success-messages)\n  — celebrates success along with the people using our apps.\n- [Warning message](https://atlassian.design/foundations/content/designing-messages/warning-messages)\n  — gives advanced notice of a potential change that may result in loss of data or an error state.\n- [Feature discovery](https://atlassian.design/foundations/content/designing-messages/feature-discovery)\n  — lets people know about a new feature.\n\n## Select the right component\n\nUse the table to identify the right component for your content.\n\nFor example:\n\n- If you want to highlight a new feature to a user, consider using spotlight or empty state.\n- If you want to tell someone they\'ve accomplished a task, consider a flag.\n\n| Component           | Information message | Success message | Warning message | Error message | Feature discovery |\n| ------------------- | ------------------- | --------------- | --------------- | ------------- | ----------------- |\n| **Empty state**     | Yes                 | Yes             |                 |               | Yes               |\n| **Banner**          | Yes                 |                 | Yes             | Yes           |                   |\n| **Flag**            | Yes                 | Yes             | Yes             | Yes           |                   |\n| **Section message** | Yes                 |                 | Yes             | Yes           |                   |\n| **Inline message**  | Yes                 | Yes             | Yes             | Yes           |                   |\n| **Modal dialog**    | Yes                 |                 | Yes             |               |                   |\n| **Spotlight**       |                     |                 |                 |               | Yes               |\n\n### Empty state\n\nUse empty states to show when there is nothing to display in a view, for example, when a board has\nno tasks, someone clears their inbox, or a search returns no results.\n\nRead guidance on writing effective\n[empty state messages](https://atlassian.design/foundations/content/designing-messages/empty-state).\n\n<img\n\tsrc={messagesEmptyState}\n\talt="Empty state encouraging an admin to add people to a Jira project space."\n/>\n\nAn empty state can appear as a full-screen message or within panels, tables, and other containers.\n\n[Usage guidance for empty state component](https://atlassian.design/components/empty-state/usage).\n\n### Banner\n\nUse banners only for critical system-level messaging for example, warnings about loss of data or\nfunctionality.\n\n<img src={messagesBanner} alt="Banner message example with a red error message." />\n\nBanners appear at the top of the screen and shift the content below them.\n\n[Usage guidance for banner component](https://atlassian.design/components/banner/usage).\n\n### Flag\n\nUse flags for confirmations, alerts, and acknowledgments that require minimal user interaction.\n\n<img\n\tsrc={messagesFlag}\n\talt="Example of a flag message with a green tick icon, the heading \'You are now connected\', and the text describing a group the user is added to."\n/>\n\nFlags are event-driven messages that appear by overlaying content at the bottom left of the screen,\nemerging from the navigation sidebar.\n\n[Usage guidance for flag component](https://atlassian.design/components/flag/usage).\n\n### Section message\n\nUse section messages to alert the user of something that has happened in a specific section of the\nscreen.\n\n<img\n\tsrc={messagesSectionMessages}\n\talt="Example of a section message showing green tick icon, the heading Merged pull request, details of the pull request, and links to the hash and user name, and the time it happened."\n/>\n\nSection messages appear above the affected area (for example, work items in Jira).\n\n[Usage guidance for section message component](https://atlassian.design/components/section-message/usage).\n\n### Inline message\n\nUse inline messages to alert people to a required action or important information.\n\n<img\n\tsrc={messagesInlineDialog}\n\talt="Example of a cursor on a yellow caution icon triggering an inline dialog message."\n/>\n\nInline messages consist of an icon, message, and sometimes secondary text. People can interact with\nthe icon, title, or secondary text to reveal the full inline message.\n\n[Usage guidance for inline message component](https://atlassian.design/components/inline-message/usage).\n\n### Modal dialog\n\nUse modal dialogs to present a short-term task the user needs to perform.\n\n<img\n\tsrc={messagesModal}\n\talt="A modal that presents a task and a dropdown menu, with a clear action."\n/>\n\nModal dialogs display content in a layer above the page.\n\n[Usage guidance for modal dialog component](https://atlassian.design/components/modal-dialog/usage).\n\n### Spotlight\n\nUse a spotlight to bring attention to a specific part of the UI, such as a button or icon, to\neducate users about key features or workflows.\n\nRead guidance on writing effective\n[feature discovery messages](https://atlassian.design/foundations/content/designing-messages/feature-discovery).\n\n<img\n\tsrc={spotlightSingleStep}\n\talt="Example of a single-step spotlight with content about Jira tasks pointing at a task on a Jira board."\n/>\n\n[Usage guidance for spotlight component](https://atlassian.design/components/spotlight/usage).\n\n## Set the appearance (color and icon)\n\nMessages use colors and icons to help indicate content and urgency.\n\nMake sure you use the right\n[color role for your situation](https://atlassian.design/foundations/color#color-roles). For\nexample, yellow typically implies a warning, while green can imply success.\n\n<img\n\tsrc={colorRolesAndIcons}\n\talt="Icons showing different icons and colors we use in messages. Informative messages use a blue circle icon with an i inside, success is a green check icon, warning is a yelowish triangle icon with an exclamation mark, danger is a red diamond icon with an exclamation mark, and discovery or new is a purple circle with a question mark inside."\n/>\n\nReview [guidelines on using icons](https://atlassian.design/foundations/iconography) and\n[usage guidance for the icon component](https://atlassian.design/components/icon/usage).',
   keywords: ['designing messages', 'messages', 'banner', 'flag', 'section message', 'inline message', 'modal', 'empty state', 'content']
 }, {
   content: "An empty state message appears after someone has completed a task or workflow, or has cleared all\ndata associated with certain functionality. For example, clearing their inbox. These messages are a\nway to celebrate, add energy, and motivate people to get on with their next task.\n\nEmpty states can appear within a particular functionality or as a full-screen message. When crafting\nan empty state message, remember that most people scan text instead of reading everything. Make\nevery word count and avoid irrelevant details.\n\n## Writing best practices\n\n### Titles\n\n- Include an informative, scannable title. Try and limit the number of words as much as possible.\n- Titles are a good place to add wink if it’s appropriate.\n- Write in sentence case and don’t use punctuation unless it's a question.\n- Use the heading to describe the empty state or as an opportunity to tell people what they can do.\n\n### Body copy\n\n- Include the reason for the empty state and where they can go next. If there is nothing for them to\n  do, celebrate finishing a task.\n- Avoid repeating content from the title.\n- Keep messages one to two sentences long. Be considerate of people's time and patience. Be short,\n  to the point, and avoid using jargon.\n- Avoid having people look in another location for more information, but if it can't be avoided, use\n  a link to support content.\n\n### Call to action (CTA)\n\n- When offering an action to perform after an empty state, use imperative verbs such as “Try”,\n  “Remove”, or “Create”, in the CTA to describe what action people will be making instead of vague\n  terms such as “OK”.\n- An option to dismiss or cancel lets people feel reassured that they can opt-out.\n- Limit your CTA to one or two words.\n- Your CTA button should always complement the title of the empty state.\n- Empty states are an opportunity to encourage people to interact further with our apps. While\n  optional they’re a good way to educate people about where they can go next or motivate them to\n  explore.\n\nBe careful of how many call to action buttons are on one page. You don’t want to overwhelm people\nwith too many options.\n\n## Voice and tone\n\nYou want to leave people feeling motivated, supported, and delighted. Convey accurate emotions and\nmake sure people know how to respond. Follow some of the following\n[Atlassian voice and tone principles](https://atlassian.design/foundations/content/voice-tone) to\nbuild your message:\n\n### Motivate by showing possibilities\n\nCompleting a task makes people feel ambitious, inspired, curious. Provide people with the incentive\nand excitement for continued growth in our apps.\n\nShow the possibilities of what can be accomplished by presenting them with next steps, or offer\nopportunities for advanced knowledge. This is always better than leaving people at a dead end.\n\n### Delight with unexpectedly pleasing experiences\n\nWe’re celebrating the success or progress of completing a task. Write to convey excitement. You are\ngiving a pat on the back for a job well done.\n\nBut remember not to overdo it. Timing and repetition are critical. Messages that appear more\nfrequently should be more concise and less delightful, for example clearing notifications. If\nmessages are appearing repeatedly, consider multiple versions. These are low commitment experiences,\nwe want to give flowers not puppies.\n\nMessages that appear after a bigger, optimistic action can be more playful, for example, a modal\ndialog. Remember that depending on the component you use, illustrations can also help to add a wink\nto your message.\n\n## Patterns and UX strategies\n\nIf an empty state has more than one potential cause or solution, try one of the following writing\nstrategies.\n\n### An empty state vs. a blank slate message\n\nAn empty state lets people know when they’ve completed or have cleared a task(s). By contrast, a\nblank slate is a type of message in which people have never come across or tried a new feature\nbefore. Blank slates promote and encourage people to try something new.\n\nUse text, design elements, and visual clues to differentiate where people are in their journeys.",
@@ -65,16 +65,13 @@ export var guidelinesStructuredContent = [{
   content: 'import {\n\tTokenElevationBackgroundChangeExample,\n\tTokenElevationChangeExample,\n} from \'../../../components/interactive-elevations\';\n\n\n\n\n\nElevations are the layered surfaces that form the foundation of the UI. They create a blank canvas\nwhere other UI will be placed, such as text, icons, backgrounds, and borders.\n\n![](./_assets/elevation-layers.png)\n\nMost elevations consist of surfaces and shadows. Together, surfaces and shadows give the impression\nof lift or depth. Elevations can guide focus through layering, or indicate that the UI can be\nscrolled, slid, or dragged.\n\n## Applying elevations\n\nThe elevations use [design tokens](https://atlassian.design/tokens/design-tokens) to apply different\nsurface levels. The highest two elevation surfaces, raised and overlay, are paired with shadows to\ncreate more depth.\n\n![](./_assets/applying-elevations-light.png)\n\n### Elevations in dark theme\n\nShadows can be harder to see in dark mode, so dark mode elevations also rely on different surface\ncolors. Imagine that the surfaces are distantly lit from the front — the higher the elevation, the\nlighter the surface looks.\n\n![](./_assets/applying-elevations-dark-1.png)\n\nRaised and overlay surfaces are still paired with shadows for added depth and consistency in dark\nmode.\n\n![](./_assets/applying-elevations-dark-2.png)\n\n## Types of elevations\n\nThere are four basic elevation levels:\n\n1. [Sunken](#sunken)\n2. [Default](#default)\n3. [Raised](#raised)\n4. [Overlay](#overlay)\n\nThere is also one "[overflow](#overflow)" elevation for special cases.\n\n### Sunken\n\nSunken is the lowest elevation available. The sunken surface creates a backdrop (or well) where\nother content sits. Columns on a Kanban board are a good example of the sunken elevation.\n\nOnly use sunken surfaces on the default surface level. Don’t apply sunken elevations on raised or\noverlay elevations. To differentiate areas of the UI in other ways, use whitespace or borders\ninstead.\n\n![](./_assets/elevation-sunken-1.png)\n\n#### Using `elevation.surface.sunken` vs `color.background.neutral`\n\nAlthough `elevation.surface.sunken` and `color.background.neutral` tokens may appear similar in\nlight mode, they behave differently in dark mode. Here are the main differences between the two:\n\n`elevation.surface.sunken` is an opaque (solid) token that darkens in both light and dark modes. Use\nthis token as a backdrop to group content or elements together (such as a kanban board) on the\ndefault surface.\n\n![](./_assets/elevation-sunken-2.png)\n\n`color.background.neutral` is a token that uses a transparent color. It darkens in light mode and\nlightens in dark mode. Use this token when you need the background to adapt to different elevations,\nwhich is relevant in dark mode since surfaces change depending on what elevation you’re on.\n\n![](./_assets/elevation-sunken-3.png)\n\n### Default\n\nThe default elevation is the baseline with respect to all other layers. It represents a flat UI\nsurface with no visual lift, such as a Confluence page.\n\nUse `elevation.surface` as the starting point for body content when building a UI. To create flat\ncards, pair with a border.\n\n![](./_assets/elevation-surface-1.png)\n\n### Raised\n\nRaised elevations sit slightly higher than default elevations. They are reserved for cards that can\nbe moved, such as Jira and Trello cards. In special circumstances, they can be used for cards as a\nway to provide additional heirarchy or emphasis.\n\nAlways pair `elevation.surface.raised` with `elevation.shadow.raised`. This is particularly\nimportant in dark mode, where raised surfaces are lighter to help differentiate elevations.\n\n![](./_assets/elevation-raised-1.png)\n\n<DoDontGrid>\n\t<DoDont type="do">\n\t\tUse raised elevations intentionally. If using for emphasis, limit to one section or focal point\n\t\tof the screen.\n\t</DoDont>\n\t<DoDont type="dont">\n\t\tRaised elevations can create visual noise, so don’t use to group content when a border or white\n\t\tspace would suffice.\n\t</DoDont>\n</DoDontGrid>\n\n### Overlay\n\nOverlay is the highest elevation available. It is reserved for a UI that sits over another UI, such\nas modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.\n\nAlways pair `elevation.surface.overlay` with `elevation.shadow.overlay`. This is important in dark\nmode, where overlay surfaces are lighter to help differentiate elevations.\n\nOverlays can stack on top of other overlays.\n\n![](./_assets/elevation-overlay-1.png)\n\n### Overflow\n\nOverflow is a shadow indicating content has [scrolled](#scrolled) outside a view. It can be used for\nvertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on\na Confluence page.\n\n![](./_assets/elevation-overflow-1.png)\n\nIf box shadows are not technically feasible, use the combination of\n`elevation.shadow.overflow.spread` and `elevation.shadow.overflow.perimeter` to replicate the\noverflow shadow.\n\n## Interaction states\n\n### Hovered and pressed\n\nElevations use surface color changes to communicate hovered and pressed states. Use the hovered and\npressed elevation tokens to create these visual changes.\n\n![](./_assets/elevation-hovered.png)\n\nTransitions between elevations can be used as an alternative to hovered and pressed tokens, but only\nfor default and raised elevations (not overlays):\n\n- Transition to overlay elevation on hover\n- Transition to raised elevation on press\n\nThis approach should be used sparingly to avoid excessive animation. It should not be used for very\nsmall UI, as elevation changes are harder to see than surface color changes at this size.\n\n<DoDontGrid>\n\t<DoDont type="do">\n\t\tUse the recommended hovered and pressed tokens for interaction states on elevations.\n\t</DoDont>\n\t<DoDont type="dont">\n\t\tDon’t combine elevation transitions and hovered and pressed tokens for interactive states. Use\n\t\tone or the other.\n\t</DoDont>\n</DoDontGrid>\n\n#### Background change example\n\n<TokenElevationBackgroundChangeExample />\n\n#### Elevation change example\n\n<TokenElevationChangeExample />\n\n### Dragged\n\nUse the overlay elevation for any UI that is being dragged. Once moved, it returns to its original\nelevation.\n\n![](./_assets/elevation-dragged-1.png)\n\n### Scrolled\n\nWhen scrollable content exceeds the available area, a border or [overflow](#overflow) shadow can be\napplied at the point the content is cut off to indicate there is hidden content that can be scrolled\nback into view.\n\nA border is the default approach for scrolled content and can be seen in modal sticky headers and\nfooters, and top and side navigation.\n\n![](./_assets/elevation-scrolled.png)\n\n[Overflow](#overflow) shadows are reserved for experiences where a border might be easily missed,\nsuch as in very small UI or tables that use borders to separate cells.\n\nBoth approaches should apply the appropriate surface token where the content is being hidden.\n\n## All elevation tokens and values\n\nFor the full list of elevation design tokens and their values, see our\n[design token reference list](https://atlassian.design/components/tokens/all-tokens). Every token\ncomes with a description to help you ensure you’re using the correct one.\n\n## Best practices\n\n### Follow the recommended surface and shadow pairings\n\nRaised and overlay elevations have dedicated surface and shadow pairings.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: pairingDo, alt: \'\' }}>\n\t\tWhen creating elevations, always pair matching surface and shadow tokens.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: pairingDont, alt: \'\' }}>\n\t\tDon\'t mix different shadow and surface elevation tokens.\n\t</DoDont>\n</DoDontGrid>\n\n### Replace elevation surfaces with background colors only when required\n\nElevation surfaces use our\n[neutral palettes](https://atlassian.design/foundations/color#neutral-colors). If a different color\nis needed, surface tokens can be swapped for any solid background token. When using background\ntokens, align to the behavior of\n[interaction states for color tokens](https://atlassian.design/foundations/color#interaction-states).\n\n![](./_assets/background-colors.png)\n\n### Avoid excessive use of raised and overlay elevations\n\nThe shadows and surfaces of raised and overlay elevations can create busy UI if not applied\nintentionally. Follow the recommended guidance when considering these elevations.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: groupingDo, alt: \'\' }}>\n\t\tLimit the use of overlay elevations by grouping related buttons together in a floating toolbar\n\t\tif they are required to sit over another UI.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: groupingDont, alt: \'\' }}>\n\t\tDon’t have more than one floating button next to each other.\n\t</DoDont>\n</DoDontGrid>\n\n### Check contrast ratios\n\nAlways make sure your elevation and background choices are accessible.\n\n<DoDontGrid>\n\t<DoDont type="do">\n\t\tCheck the contrast ratio for UI on overlay surfaces in dark mode to ensure it meets\n\t\taccessibility requirements.\n\t</DoDont>\n\t<DoDont type="dont">\n\t\tDon\'t assume that because UI is accessible in light mode, it will be in dark mode. Some UI may\n\t\tneed tweaking.\n\t</DoDont>\n</DoDontGrid>\n\n## Z-index\n\nThe z-index determines the stacking order of elements. Elements with a higher z-index always sit in\nfront of elements with a lower z-index.\n\nDifferent UI can have the same elevation style, but each UI should apply a different z-index to\nindicate the layer(s) order in a stack (or where the elements touch).\n\n| Z-index | Example usage                                                                     | Elevation level |\n| ------- | --------------------------------------------------------------------------------- | --------------- |\n| 100     | None                                                                              | None            |\n| 200     | [Atlassian navigation](https://atlassian.design/components/atlassian-navigation/) | Default         |\n| 300     | [Inline dialog](https://atlassian.design/components/inline-dialog/)               | Overlay         |\n| 400     | [Popup](https://atlassian.design/components/popup/)                               | Overlay         |\n| 500     | [Blanket](https://atlassian.design/components/blanket/)                           | None            |\n| 510     | [Modal](https://atlassian.design/components/modal-dialog/)                        | Overlay         |\n| 600     | [Flag](https://atlassian.design/components/flag/)                                 | Overlay         |\n| 700     | [Spotlight](https://atlassian.design/components/onboarding/)                      | Overlay         |\n| 800     | [Tooltip](https://atlassian.design/components/tooltip/)                           | None            |\n\n## Related\n\n- Learn about the basics of [design tokens](https://atlassian.design/tokens/design-tokens).\n- See the list of [all design tokens](https://atlassian.design/components/tokens/all-tokens) for\n  full descriptions and values for all tokens.',
   keywords: ['elevation', 'shadow', 'depth', 'z-index', 'layering', 'design tokens']
 }, {
-  content: '## Grid anatomy\n\nThe layout grid structure has three elements:\n\n- **Columns** divide the page into equal vertical sections, and are used to organise content.\n- **Gutters** are the gaps between the columns, and separate content in a consistent way.\n- **Margins** define the outer edges of the grid, and prevent content from spilling out over the\n  viewable regions.\n\n![](./_assets/grid-anatomy.png)\n\nThis grid documentation is for designers only. Engineers should refer to the\n[page layout](https://atlassian.design/components/page-layout/examples) component.\n\n## Grid types\n\nThere are two types of grid: fluid and fixed. Both grid types use breakpoints to determine whether\nthe layout needs to change between viewport sizes.\n\nMore guidance for [applying grid](https://atlassian.design/foundations/grid-beta/applying-grid/) in\nyour designs.\n\n### Fluid\n\nThe fluid grid stretches across the screen to fill all available space in the main content area.\nThis means the columns and the content placed within them scale and resize to fill the available\nspace.\n\n![](./_assets/grid-fluid.png)\n\nThey are best used for information-dense pages, such as kanban boards, to maximise screen real\nestate. Here’s how a fluid grid is applied in Jira:\n\n![](./_assets/grid-fluid-jira.png)\n\n### Fixed\n\nThe fixed grid applies the ideal maximum width to page containers according to the elements being\ndisplayed. There is both a fixed-narrow and fixed-wide grid, so content can be displayed using the\nmost appropriate width.\n\n![](./_assets/grid-fixed.png)\n\n**Fixed-narrow** grids are best used for content-focused pages, such as blogs and articles, to limit\nline length and improve readability. Some internal elements, such as headers, may break out of the\ngrid to span across the page. Here’s how a fixed-narrow grid is applied in Confluence:\n\n![](./_assets/grid-fixed-narrow.png)\n\n**Fixed-wide** grids are best used for content-dense pages, such as data tables, to balance screen\nreal estate and readability. Internal table columns do not need to align to the grid. Here’s how a\nfixed-wide grid is applied in Atlas:\n\n![](./_assets/grid-fixed-wide.png)\n\n## Breakpoints\n\nEach [breakpoint](https://atlassian.design/components/primitives/responsive/breakpoints/examples) is\nthe threshold at which the website’s layout changes, to ensure optimal user experience. In\nresponsive design, a breakpoint range determines the most appropriate number of columns for that\nviewport size, plus recommended widths for margins and gutters.\n\nOur grid aligns to the 6 Atlassian Design System breakpoints:\n\n<BreakpointsTable />\n\n## Column span and offset\n\n### Column span\n\nOur grid has 12 columns for\n[aligning content](https://atlassian.design/foundations/grid-beta/applying-grid/#step-4-align-content-to-grid).\nContent should span across 3 or more columns, up to a maximum of 12. For flexibility, mix and match\nthe number of columns used to unlock a variety of layouts across different breakpoints.\n\nA 12 column grid with content blocks spanning different numbers of columns, such as 12, 6 and 4\n\n![](./_assets/column-span.png)\n\n### Column offset\n\nContent does not need to span across all 12 columns. It can span a smaller set of columns, resulting\nin a layout with content centered on a 12 column grid.\n\n![](./_assets/column-offset.png)\n\n## Layout anatomy\n\n<SectionMessage title="Caution" appearance="warning">\n\tWe are in the process of building a new{\' \'}\n\t<Link href="https://atlassian.design/components/navigation-system/layout/examples">\n\t\tLayout (Early Access)\n\t</Link>{\' \'}\n\tcomponent which will replace this layout anatomy.\n</SectionMessage>\n\nLayout regions are the building blocks for any web page. They are composed of elements and\ncomponents that share similar functions. Atlassian’s layout grid starts below the top navigation,\nand provides structure to the main content.\n\n![](./_assets/layout-anatomy.png)\n\n### Side navigation and aside\n\nUse an aside to display supporting content on a screen, such as help panels or secondary tasks. The\nlayout grid typically fills the full width of the viewport, but when the side navigation or aside is\npresent, the grid should resize to fit the remaining area of the page.\n\n![](./_assets/aside.png)\n\nSome panels can be manually resized by users. Start with these standard sizes:\n\n<SideNavigationAsideTable />\n\nAsides have two states: default and collapsed.\n\n![](./_assets/aside-state.png)',
+  content: '## Overview\n\nGrid is a system for arranging content consistently within the main content area of an Atlassian\napp.\n\nIn Figma, grids are typically set up using\n[layout guides](https://help.figma.com/hc/en-us/articles/360040450513-Create-layout-guides). In the\nAtlassian Design System, we offer a purpose-built Figma grid for structuring content within the\napp\'s main content area. Engineers implement equivalent layouts using a combination of\n[primitives](/components/primitives/overview) such as box, stack, and inline.\n\nThe [layout](/components/navigation-system/layout) component (in code and Figma) defines everything\naround the main content area, including navigation and panels.\n\n<img\n\tsrc={layoutAnatomy}\n\tsrcDark={layoutAnatomyDark}\n\talt="Layout component anatomy showing the top nav, side nav, main, and panel. Grid sits within main."\n/>\n\n## Grid basics\n\nOur Figma grid has three basic elements:\n\n- **Columns** divide the main content area into 12 equal parts for horizontal structure.\n- **Gutters** are the gaps between columns, providing consistent separation between content.\n- **Margins** are the empty space between the outer columns and the edge of the main content area.\n  They give content breathing room.\n\n<img\n\tsrc={gridAnatomy}\n\tsrcDark={gridAnatomyDark}\n\talt="Figma grid anatomy showing columns, gutters, and margins."\n/>\n\nBy aligning content to the columns, our grid accommodates a variety of layouts within the main\ncontent area.\n\n<img\n\tsrc={columnSpan}\n\tsrcDark={columnSpanDark}\n\talt="Diagram showing content arrangement spanning 12, 6, or 4 grid columns."\n/>\n\nContent in the main content area can also span fewer columns, centered within the grid.\n\n<img\n\tsrc={columnOffset}\n\tsrcDark={columnOffsetDark}\n\talt="Diagram showing content arrangement center-aligned on the grid and spanning 8, 10, or 12 grid columns."\n/>\n\n<DoDontGrid>\n\t<DoDont\n\t\ttype="do"\n\t\timage={{\n\t\t\turl: gridBasicsDo,\n\t\t\turlDarkMode: gridBasicsDoDark,\n\t\t\talt: \'Example of content aligning to the grid columns.\',\n\t\t}}\n\t>\n\t\tAlign content within the app\'s main content area across any number of columns required.\n\t</DoDont>\n\t<DoDont\n\t\ttype="dont"\n\t\timage={{\n\t\t\turl: gridBasicsDont,\n\t\t\turlDarkMode: gridBasicsDontDark,\n\t\t\talt: \'Example of content overflowing into grid gutters and margins, breaking visual alignment.\',\n\t\t}}\n\t>\n\t\tDon\'t allow content to overflow into gutters or margins. This breaks visual alignment and makes\n\t\tlayouts unpredictable.\n\t</DoDont>\n</DoDontGrid>\n\n## Aligning to the grid\n\nWithin the main content area, align content containers to the grid columns. Examples include cards,\nimages, text blocks, tables, and forms.\n\nSmall elements, like buttons and icons, do not need to align to this grid. Use\n[space tokens](/foundations/spacing#space-tokens) to manage the space between and within them\ninstead.\n\n<img\n\tsrc={spacingTokens}\n\tsrcDark={spacingTokensDark}\n\talt="Example showing cards aligned to grid columns. The horizontally placed input field and buttons, as well as the content within the card, do not align to the grid columns and are instead managed with space tokens."\n/>\n\nThe same applies within content containers. Only top-level containers need to align to the grid. Use\nspace tokens for the elements inside them, such as cards and table columns.\n\n<img\n\tsrc={contentContainers}\n\tsrcDark={contentContainersDark}\n\talt="Example showing kanban columns aligned to the grid, but the cards within them using space tokens."\n/>\n\nOverlays like modals, tooltips, and dropdown menus also sit outside the grid, as they float above\nthe page content.\n\n<DoDontGrid>\n\t<DoDont\n\t\ttype="do"\n\t\timage={{\n\t\t\turl: alignContentDo,\n\t\t\turlDarkMode: alignContentDoDark,\n\t\t\talt: \'Example of content containers aligning to the grid columns.\',\n\t\t}}\n\t>\n\t\tAlign content containers to our grid columns, such as cards, images, text blocks, tables, and\n\t\tforms.\n\t</DoDont>\n\t<DoDont\n\t\ttype="dont"\n\t\timage={{\n\t\t\turl: alignContentDont,\n\t\t\turlDarkMode: alignContentDontDark,\n\t\t\talt: \'Example of buttons and icons incorrectly aligned to the grid columns instead of using space tokens.\',\n\t\t}}\n\t>\n\t\tDon\'t align small elements, such as buttons or icons, to the grid. Instead, use space tokens to\n\t\tmanage their spacing.\n\t</DoDont>\n</DoDontGrid>\n\n## Nested grids\n\nSpace tokens are the recommended approach for aligning content within containers, but you can also\napply an internal grid.\n\nThe underlying concepts are the same: columns, gutters, and margins. Our Figma grid is only intended\nfor the main content area. To set up a grid inside a container,\n[create your own](https://help.figma.com/hc/en-us/articles/360040450513-Create-layout-guides) using\nvalues from our [spacing scale](/foundations/spacing#space-tokens).\n\n<img\n\tsrc={nestedGrid}\n\tsrcDark={nestedGridDark}\n\talt="Example showing a card sitting on the main grid. The card has its own nested grid."\n/>\n\n## Grid breakpoints\n\nAt each breakpoint, the gutter width, margin width, and number of columns adjust within the main\ncontent area.\n\n<img\n\tsrc={gridBreakpoints}\n\tsrcDark={gridBreakpointsDark}\n\talt="Example showing how the grid changes across three breakpoint ranges: m to xl, xs to s, and xxs."\n/>\n\nThese are our default values for the grid in the main content area. Check your app or local system\nfor the specific grid values in use, as they may differ.\n\n<BreakpointsTable />\n\n### Designing for multiple breakpoints\n\nDesign for at least 2 screen sizes, preferably more. One of these should be mobile.\n\n| Device  | Breakpoint | Width (px) | Height (px) | Good | Better | Best |\n| ------- | ---------- | ---------- | ----------- | ---- | ------ | ---- |\n| Mobile  | `xxs`      | 320        | 568         | ✓    | ✓      | ✓    |\n| Tablet  | `s`        | 768        | 1024        | -    | -      | ✓    |\n| Desktop | `l`        | 1440       | 900         | -    | ✓      | ✓    |\n| Desktop | `xl`       | 1920       | 1080        | ✓    | ✓      | ✓    |\n\nBreakpoints also affect layout areas like navigation and panels. See the\n[layout component](/components/navigation-system/layout) for details.\n\n## Grid types\n\nThere are two types of grid:\n\n- **Fixed grids** have a maximum width and sit centered in the main content area. This is the\n  default option.\n- **Fluid grids** fill the available space in the main content area. Use fluid grids when content\n  expands horizontally and has no natural maximum width. Use them sparingly. At very large\n  viewports, text lines can become too long and visual relationships between elements may break\n  down.\n\nWhen the main content area is smaller than the maximum width, such as at smaller breakpoints, fixed\ngrids behave the same as fluid grids.\n\n<img\n\tsrc={gridTypes}\n\tsrcDark={gridTypesDark}\n\talt="Side-by-side comparison of fixed and fluid grids on desktop and mobile viewports."\n/>\n\n### Fixed grids\n\nThere are two fixed grid options:\n\n- **Fixed-wide** has a maximum width of 1296px (including margins). Use this as the default for most\n  experiences.\n- **Fixed-narrow** has a maximum width of 864px (including margins). Use this for long-form content\n  to limit line length and increase readability. Some internal elements, such as headers, may break\n  out of the grid to span across the page.\n\n<img\n\tsrc={fixedGridTypes}\n\tsrcDark={fixedGridTypesDark}\n\talt="Side-by-side comparison of fixed-wide and fixed-narrow grids."\n/>\n\n### Choosing a grid type\n\n| Grid type            | Maximum width (margins included) | Use when                                                    | Examples                                |\n| -------------------- | -------------------------------- | ----------------------------------------------------------- | --------------------------------------- |\n| Fixed-wide (default) | 1296px                           | Content benefits from structure but doesn\'t need full width | Dashboards, directories, search results |\n| Fixed-narrow         | 864px                            | Long-form reading is the primary activity                   | Blogs, articles, documentation          |\n| Fluid                | No maximum                       | Content expands horizontally with no natural maximum width  | Kanban boards, whiteboards              |\n\n<DoDontGrid>\n\t<DoDont\n\t\ttype="do"\n\t\timage={{\n\t\t\turl: fixedWideDo,\n\t\t\turlDarkMode: fixedWideDoDark,\n\t\t\talt: \'Example using a fixed-wide grid for a table directory.\',\n\t\t}}\n\t>\n\t\tUse fixed-wide grids for structured content, such as dashboards, search results, and\n\t\tdirectories.\n\t</DoDont>\n\t<DoDont\n\t\ttype="dont"\n\t\timage={{\n\t\t\turl: fixedWideDont,\n\t\t\turlDarkMode: fixedWideDontDark,\n\t\t\talt: \'Example using a fixed-wide grid for long-form content.\',\n\t\t}}\n\t>\n\t\tDon\'t use fixed-wide grids for long-form content like blogs and articles. Long line lengths\n\t\timpair readability.\n\t</DoDont>\n\t<DoDont\n\t\ttype="do"\n\t\timage={{\n\t\t\turl: fixedNarrowDo,\n\t\t\turlDarkMode: fixedNarrowDoDark,\n\t\t\talt: \'Example using a fixed-narrow grid for long-form content.\',\n\t\t}}\n\t>\n\t\tUse fixed-narrow grids for long-form content, such as blogs and articles.\n\t</DoDont>\n\t<DoDont\n\t\ttype="dont"\n\t\timage={{\n\t\t\turl: fixedNarrowDont,\n\t\t\turlDarkMode: fixedNarrowDontDark,\n\t\t\talt: \'Example using a fixed-narrow grid for a kanban board.\',\n\t\t}}\n\t>\n\t\tDon\'t use fixed-narrow grids for content that needs more horizontal space. Use fixed-wide or\n\t\tfluid instead.\n\t</DoDont>\n\t<DoDont\n\t\ttype="do"\n\t\timage={{\n\t\t\turl: fluidDo,\n\t\t\turlDarkMode: fluidDoDark,\n\t\t\talt: \'Example using a fluid grid for a kanban board.\',\n\t\t}}\n\t>\n\t\tUse fluid grids for content that expands horizontally, such as kanban boards and whiteboards.\n\t</DoDont>\n\t<DoDont\n\t\ttype="dont"\n\t\timage={{\n\t\t\turl: fluidDont,\n\t\t\turlDarkMode: fluidDontDark,\n\t\t\talt: \'Example using a fluid grid for a table directory.\',\n\t\t}}\n\t>\n\t\tDon\'t use fluid grids for structured content with a natural width, such as dashboards or\n\t\tdirectories. Elements lose their visual relationship at large viewports.\n\t</DoDont>\n</DoDontGrid>\n\n## Applying grid\n\nThe default grid is already built into the Figma layout component.\n\n1. Select your grid type from the component properties panel.\n2. Choose your breakpoint from the responsive menu in the appearance panel.\n\n<img\n\tsrc={applyingGrid}\n\tsrcDark={applyingGridDark}\n\talt="Screenshot of the Figma layout component with the properties panel showing grid type and responsive selectors."\n/>\n\nYou can also use this grid outside of the layout component. Select it from the assets panel in the\nADS Foundations library, or\n[create your own](https://help.figma.com/hc/en-us/articles/360040450513-Create-layout-guides) using\nyour app\'s values.\n\n**Tip:** Use **Shift + G** (Mac) or **Control + G** (Windows) to show or hide the grid in Figma.\n\n<DoDontGrid>\n\t<DoDont\n\t\ttype="do"\n\t\timage={{\n\t\t\turl: gridSpanDo,\n\t\t\turlDarkMode: gridSpanDoDark,\n\t\t\talt: \'Example of the grid spanning the main content area only.\',\n\t\t}}\n\t>\n\t\tSpan only the main content area. Exclude the side nav and panel.\n\t</DoDont>\n\t<DoDont\n\t\ttype="dont"\n\t\timage={{\n\t\t\turl: gridSpanDont,\n\t\t\turlDarkMode: gridSpanDontDark,\n\t\t\talt: \'Example of the grid spanning the side nav and main area.\',\n\t\t}}\n\t>\n\t\tDon\'t span the grid across navigation or panel areas.\n\t</DoDont>\n\t<DoDont\n\t\ttype="do"\n\t\timage={{\n\t\t\turl: breakpointSettingDo,\n\t\t\turlDarkMode: breakpointSettingDoDark,\n\t\t\talt: \'Screenshot of the Figma responsive setting in the appearance panel.\',\n\t\t}}\n\t>\n\t\tChange the breakpoint from the responsive setting in the appearance panel.\n\t</DoDont>\n\t<DoDont\n\t\ttype="dont"\n\t\timage={{\n\t\t\turl: breakpointSettingDont,\n\t\t\turlDarkMode: breakpointSettingDontDark,\n\t\t\talt: \'Example of manually resizing the grid component.\',\n\t\t}}\n\t>\n\t\tDon\'t change the breakpoint by resizing the grid or layout component. The linked grid styles\n\t\twill map incorrectly.\n\t</DoDont>\n\t<DoDont\n\t\ttype="do"\n\t\timage={{\n\t\t\turl: breakpointViewportDo,\n\t\t\turlDarkMode: breakpointViewportDoDark,\n\t\t\talt: \'Breakpoint set to the full viewport width.\',\n\t\t}}\n\t>\n\t\tSet the grid breakpoint to the full viewport width.\n\t</DoDont>\n\t<DoDont\n\t\ttype="dont"\n\t\timage={{\n\t\t\turl: breakpointViewportDont,\n\t\t\turlDarkMode: breakpointViewportDontDark,\n\t\t\talt: \'Breakpoint set to the content area width only.\',\n\t\t}}\n\t>\n\t\tDon\'t set the breakpoint based on the main content area width. Breakpoints are based on the full\n\t\tviewport width.\n\t</DoDont>\n</DoDontGrid>\n\n## Grid and auto layout\n\nGrid is a layout guide, a visual reference for aligning content to columns. To build layouts that\nadjust as the breakpoint changes, use\n[auto layout](https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout) to\nposition content along the grid columns.\n\n<DoDontGrid>\n\t<DoDont\n\t\ttype="do"\n\t\timage={{\n\t\t\turl: autoLayoutDo,\n\t\t\turlDarkMode: autoLayoutDoDark,\n\t\t\talt: \'Screenshot of Figma auto layout settings.\',\n\t\t}}\n\t>\n\t\tUse auto layout to build responsive layouts that align to the grid.\n\t</DoDont>\n\t<DoDont\n\t\ttype="dont"\n\t\timage={{\n\t\t\turl: autoLayoutDont,\n\t\t\turlDarkMode: autoLayoutDontDark,\n\t\t\talt: \'Example of manually positioning content in Figma.\',\n\t\t}}\n\t>\n\t\tDon\'t use absolute positioning or drag-to-place content without auto layout. Manual placement\n\t\tdoesn\'t adapt to changing breakpoints and breaks responsive layouts.\n\t</DoDont>\n</DoDontGrid>\n\n## Related\n\n- [Layout](/components/navigation-system/layout) is the component that defines the outer structure\n  of an app, including navigation, panels, and the main content area.\n- [Primitives](/components/primitives/overview) are the box, stack, and inline primitives used to\n  build equivalent layouts in code.\n- [Spacing](/foundations/spacing) uses space tokens to ensure consistent alignment and separation\n  between elements.\n- [ADS Figma libraries](/get-started/design/figma-libraries/atlassians) contain the pre-built grid\n  with default Atlassian breakpoint values.\n- [Auto layout in Figma](https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout)\n  is Figma\'s guide to building responsive layouts that align to grid columns.',
   keywords: ['grid', 'layout', 'responsive', 'spacing', 'alignment', 'design system']
-}, {
-  content: '<SectionMessage title="Caution" appearance="warning">\n\tWe are in the process of building a new{\' \'}\n\t<Link href="https://atlassian.design/components/navigation-system/layout/examples">\n\t\tLayout (Early Access)\n\t</Link>{\' \'}\n\tcomponent which will change how you apply grid.\n</SectionMessage>\n\n## Usage guidelines\n\nOur new grid component has inbuilt side panels, including the side navigation and aside, which\nautomatically resizes the grid to cover the main content area. To set up the grid:\n\n1. Determine grid **type**\n2. Select grid **breakpoint**\n3. Configure **sideNavigation** and **aside**\n4. Align content to grid\n\n![](./_assets/grid-figma.png)\n\n## Step 1: Determine grid type\n\nThere are 2 [grid types](https://atlassian.design/foundations/grid-beta/#grid-types):\n\n- **Fluid** grids fill the width of the screen\n- **Fixed** grids stretch to a max-width and then remain centered\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: gridFluidDo, alt: \'\' }}>\n\t\tUse fluid grids for information-dense pages, such as kanban boards, to maximise screen real\n\t\testate.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: gridFluidDont, alt: \'\' }}>\n\t\tDon’t use fluid grids for content-focused pages. Long line lengths impair readability.\n\t</DoDont>\n\t<DoDont type="do" image={{ url: gridFixedDo, alt: \'\' }}>\n\t\tUse fixed grids for content-focused pages, such as blogs and articles, to improve readability.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: gridFixedDont, alt: \'\' }}>\n\t\tDon’t use fixed grids for information-dense pages. Limiting screen space will truncate important\n\t\tcontent.\n\t</DoDont>\n</DoDontGrid>\n\n## Step 2: Select grid breakpoint\n\nThere are 6 [grid breakpoints](https://atlassian.design/foundations/grid-beta/#breakpoints):\n\n- **XXS**, **XS** and **S** for small viewports from 320-1023px\n- **M**, **L** and **XL** for large viewports from 1024+px\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: gridBreakpointSpanDo, alt: \'\' }}>\n\t\tSpan only the main content container. Exclude the side navigation and asides.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: gridBreakpointSpanDont, alt: \'\' }}>\n\t\tDon’t span the entire screen width or include asides. The grid spacing is suitable for main\n\t\tcontent only.\n\t</DoDont>\n\t<DoDont type="do" image={{ url: gridBreakpointWidthDo, alt: \'\' }}>\n\t\tSet the grid breakpoint to the full viewport width.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: gridBreakpointWidthDont, alt: \'\' }}>\n\t\tDon’t set the breakpoint to the container width. The grid spacing is scaled for the full\n\t\tviewport width.\n\t</DoDont>\n\t<DoDont type="do" image={{ url: gridBreakpointChangeDo, alt: \'\' }}>\n\t\tChange the breakpoint using the component variant.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: gridBreakpointChangeDont, alt: \'\' }}>\n\t\tDon’t change the breakpoint by resizing the grid container. The linked grid styles will map\n\t\tincorrectly.\n\t</DoDont>\n\t<DoDont type="do" image={{ url: gridBreakpointDesignsDo, alt: \'\' }}>\n\t\tProvide designs for at least 2 breakpoints, preferably more and for different devices.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: gridBreakpointDesignsDont, alt: \'\' }}>\n\t\tDon’t provide designs for only 1 breakpoint. Engineers need layout guidance for other\n\t\tbreakpoints too.\n\t</DoDont>\n</DoDontGrid>\n\n## Step 3: Configure side navigation and aside\n\nThere are 2 types of panels:\n\n- **Side navigation**: generally on the left, with collapsed and default states\n- **Aside**: generally on the right, with collapsed and default states where widths change at\n  different breakpoints\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: gridAsideDo, alt: \'\' }}>\n\t\tFollow the standard aside widths that are defined in the grid component properties.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: gridAsideDont, alt: \'\' }}>\n\t\tDon’t create custom aside sizes. This leads to inconsistent page layouts.\n\t</DoDont>\n</DoDontGrid>\n\n## Step 4: Align content to grid\n\nThe vast majority of content should align to the grid, but exceptions can be made based on context.\nUse [spacing tokens](https://atlassian.design/foundations/spacing/) and\n[layout primitives](https://atlassian.design/foundations/spacing/primitives/) to structure content\nthat doesn’t align to the grid.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: gridAlignFigmaDo, alt: \'\' }}>\n\t\tUse auto layout in Figma to align content, with appropriate spacing tokens.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: gridAlignFigmaDont, alt: \'\' }}>\n\t\tDon’t manually align content or set custom (non-token) values. This is not scalable and creates\n\t\troom for error.\n\t</DoDont>\n\t<DoDont type="do" image={{ url: gridAlignElementsDo, alt: \'\' }}>\n\t\tAlign large content elements, such as cards to the grid.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: gridAlignElementsDont, alt: \'\' }}>\n\t\tDon’t align small content elements, such as button groups, to the grid. Instead, use layout\n\t\tprimitives.\n\t</DoDont>\n\t<DoDont type="do" image={{ url: gridAlignColumnsDo, alt: \'\' }}>\n\t\tAlign content across any number of columns required.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: gridAlignColumnsDont, alt: \'\' }}>\n\t\tDon’t allow content to overflow into gutters and margins, as this does not align with the grid.\n\t</DoDont>\n</DoDontGrid>',
-  keywords: ['grid usage', 'responsive design', 'breakpoints', 'columns', 'gutters']
 }, {
   content: 'Icons are symbols designed to represent concepts or specific features. A company\'s iconography style\ncan express a lot about a brand and its values.\n\nAtlassian\'s iconography has rounded corners and curves to align with our typography and other\nrounded UI elements, whilst square end terminals add boldness to create a harmonious app expression\nof Atlassian\'s broader design language.\n\n## Iconography principles\n\nFollow these principles to design and use Atlassian icons in a cohesive, useful, and legible way.\n\n**Design for universal understanding**\n\nDesign icons that use widely recognized symbols and established visual metaphors. Ensure icons are\neasily understood by a diverse audience by avoiding specific cultural or language aspects.\n\n**Balance simplicity and detail to create legibility**\n\nCraft icons that are simple enough for quick recognition, yet detailed enough to convey meaning\neffectively, even at small sizes.\n\n**Maintain visual harmony**\n\nEnsure icons work together as a cohesive system by adhering to consistent size, shape, and style\nguidelines across the entire set.\n\n**Use icons intentionally**\n\nIcons are powerful signifiers that can aid comprehension and help with navigation. They can also add\nclutter or confuse people when used poorly. Use text labels to support icons wherever possible, and\navoid using icons where they aren’t necessary.\n\n## Using Atlassian icons\n\nAtlassian icons are available as a component (React), Figma library, and in our documentation:\n\n- [View Atlassian icons](https://atlassian.design/components/icon)\n- [Icon component usage](https://atlassian.design/components/icon/usage)\n- [Icon tile component](https://atlassian.design/components/icon/icon-tile)\n- [Figma library of Atlassian icons (Atlassian employees only)](https://go.atlassian.com/ads-icons-figma)\n\n## Visual style\n\nAtlassian’s icon style has a 1.5px stroke width with shapes that pair rounded corners with sharp\ninterior corners and square line caps.\n\n### Simplicity and metaphor\n\nWherever possible, use [existing icons](https://atlassian.design/components/icon) to maintain\nconsistency and reinforce visual concepts across Atlassian apps so they become familiar to\ncustomers.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: consistencyDo, alt: \'\' }}>\n\t\tUse an existing icon or visual metaphor for consistency and clarity wherever possible.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: consistencyDont, alt: \'\' }}>\n\t\tCreate a new icon if a suitable one already exists to represent the same metaphor.\n\t</DoDont>\n</DoDontGrid>\n\nUse simplified shapes with the minimum detail required to express a metaphor. The goal of an icon is\nto aid clear, quick comprehension — excess detail can distract and do the opposite. The small size\nof icons makes it harder to see fine details, so optimise for simplicity and legibility.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: simplifiedShapesDo, alt: \'\' }}>\n\t\tUse simple shapes with the minimum detail required to express a metaphor with clarity and\n\t\tlegibility.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: simplifiedShapesDont, alt: \'\' }}>\n\t\tDon’t add excess detail. This may distract and be challenging to understand at a small sizes.\n\t</DoDont>\n</DoDontGrid>\n\nWhen creating a new icon, use symbols that clearly represent a concept. Try to use metaphors with\nclear and established associations wherever possible.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: metaphorsDo, alt: \'\' }}>\n\t\tUse familiar symbols with clear and established associations that clearly represent a concept.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: metaphorsDont, alt: \'\' }}>\n\t\tUse caution when creating an icon that isn’t a widely recognized symbol. It may be confused with\n\t\tanother concept or misunderstood.\n\t</DoDont>\n</DoDontGrid>\n\n### Perspective and angles\n\nShapes should appear straight on or from a full 90 degree profile. Don’t use diagonal perspectives\nto create 3D shapes because these can be hard to discern at a glance, especially for people with\nsome cognitive disabilities.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: perspectiveDo, alt: \'\' }}>\n\t\tUse shapes that appear straight on without dimensionality.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: perspectiveDont, alt: \'\' }}>\n\t\tDon’t use diagonal perspectives to create 3D shapes as they can be hard to discern at a glance.\n\t</DoDont>\n</DoDontGrid>\n\n### Size and spacing\n\nSystem icons are drawn within a 16 × 16px bounding box and are available in two sizes:\n\n#### Medium (16px) — use in most cases\n\nMedium icons are 16 × 16px in size and are the **default** size in our system. This size balances\nharmoniously with body text and the density of Atlassian’s apps.\n\n#### Small (12px) — Use sparingly\n\nSmall icons are 12 × 12px in size and are downscaled from their 16px counterpart. This size should\nbe used sparingly as they aren\'t as legible as 16px icons. Limit usage of 12px icons to the\nfollowing uses:\n\n- **Chevrons** — always use 12px chevrons, particularly within buttons, icon buttons, and dropdowns\n  to maintain cohesion with Atlassian\'s visual language.\n\n- **Field validation messaging** — use 12px status icons for information, warnings, and errors.\n\n- **Within small contained elements** — 12px icons balance with small text within tags, badges,\n  statuses, and other similar compact elements.\n\n- **App affiliation** — use 12px icons for "Powered by Atlassian Intelligence" or other Atlassian\n  app affiliations.\n\n- **Secondary actions** — use 12px icons to communicate hierarchy between primary way-finding icons\n  and secondary actions so they don’t compete for attention.\n\n- **Supporting role** — use 12px icons for supporting actions that shouldn\'t draw attention away\n  from important content.\n\n![](./_assets/icon_sizing_options.png)\n\nTo apply spacing around an icon, we recommend placing it within a Box primitive with a padding value\napplied from our spacing system.\n\nWhen larger icons sizes are needed for decorative purposes, consider using an\n[icon tile](https://atlassian.design/components/icon/icon-tile) which places the icon on a colored\nbackground tile. Icon tiles are available in multiple sizes and provides accessible icon and\nbackground color pairings.\n\n### Shapes\n\nIcons use consistent shapes to ensure a consistent look and feel across the set. We’ve designed each\nshape for optical scale and balance, so that taller, thinner shapes don’t feel like a different\nscale from shorter or wider shapes.\n\n![](./_assets/Keyline_shapes.png)\n\nWhen designing new icons, you can use our icon template with built-in keyline shapes to guide your\ndesigns.\n\nReusing existing shapes from other icons can also help with consistency across the set. Make sure to\nuse shapes that best represent the object metaphor you are expressing.\n\n### Corners and curves\n\nCurved edges lend to a friendlier feel, but keep internal edges sharp to maintain clarity.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: cornersDo, alt: \'\' }}>\n\t\tWhere possible, keep internal angles sharp.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: cornersDont, alt: \'\' }}>\n\t\tDon’t apply curves on internal anchor points.\n\t</DoDont>\n</DoDontGrid>\n\n### End caps\n\nEnd points should be squared off, not rounded.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: endPointsDo, alt: \'\' }}>\n\t\tSet end point style to "none" to ensure the path aligns with a pixel edge to prevent blurry\n\t\tresults.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: endPointsDont, alt: \'\' }}>\n\t\tDon’t use "round" or "square" stroke end point styles.\n\t</DoDont>\n</DoDontGrid>\n\n### Color\n\nLike most elements in our system, icons use design tokens for colors. Icons can use icon-specific\ncolor tokens or text color tokens for when you\'re matching an icon and text color. You can set the\ncolor of the icon using the\n[icon component](https://atlassian.design/components/icon/code#UNSAFE_IconNew-color).\n\nBoth icon and text color tokens are designed to have enough color contrast against backgrounds and\nsurfaces in Atlassian apps.\n\n## Contribution and adding new icons\n\nCurrently Atlassian teams can contribute icons to our system for new designs and features.\n\n- Before contributing an icon, look at our existing icon library and consider the following\n  questions:\n- Is the icon I’m contributing very similar to another system icon?\n- Can I use an existing multi-purpose icon?\n- Could my icon be confused with another concept that exists in apps?\n- Does this design really require an icon at all? Would a text label, button, or other approach\n  provide a clearer affordance for customer understanding?\n\nTo contribute a new icon, follow the\n[contribution guide (Atlassian employees only)](https://go.atlassian.com/ads-icon-contribution).\n\n## Related\n\n- Browse all icons and learn how to use them in apps with the\n  [icon component](https://atlassian.design/components/icon).',
   keywords: ['iconography', 'icons', 'visual design', 'symbols', 'brand', 'component design']
 }, {
-  content: 'import {\n\tTypographyHeadingTable,\n\tTypographyBodyTable,\n\tTypographyMetricTable,\n\tTypographyCodeTable,\n} from \'@af/design-system-docs-ui\';\n\n\n\nimport {\n\tAtlassianLogoCard,\n\tAttributionCards,\n\tPropertyCards,\n\tAppCards,\n} from \'./_logo-asset-cards.partial\';\n\n\n\n\n\n\n\n\n\n<SectionMessage title="Download logos" appearance="information">\n\t<Text>\n\t\tThe full set of app (product) logos are available in{\' \'}\n\t\t<Link href="https://orangedam.atlassian.com/">Atlassian Mosaic</Link>\n\t</Text>\n</SectionMessage>\n\nThis page includes downloadable logo files for use in marketing contexts as well as specific usage\nguidance for app or marketing contexts.\n\nIf you want to add logos to app (product) experiences, use the\n[logo component](https://atlassian.design/components/logo/examples).\n\n## Download the logos\n\nEach downloadable file includes variations of color and layout in approved formats and the below\nelements combined together:\n\n- logomarks – the icon portion of a logo\n- wordmarks – the name of the app (product) or property\n- straplines or other secondary text.\n\nAssets for isolated logomarks are also included.\n\n![Annotated graphic of the Atlassian logo, showing the logomark, strapline and wordmark.](./_assets/logo-anatomy.png)\n\n### Our iconic Atlassian logo\n\nOur iconic company logo.\n\nInclude `Atlassian` as the alt-text for the logo in digital experiences.\n\n<AtlassianLogoCard />\n\n#### Atlassian app strapline\n\nThe Atlassian logomark and wordmark can be coupled with a list of app (product) names under it.\nFollow the below guidance when using logos that contain straplines:\n\n- Always centre the app names under the logo and don’t scale the logo below 280px wide.\n- Write Atlassian and the app name in the alt-text in digital experiences.\n\n![Logo strapline with Jira, Confluence, Trello and Bitbucket wordmarks center-aligned beneath the Atlassian logo.](./_assets/logo-centered.png)\n\n### Attribution logos\n\nThe attribution logos are a type of lockup that combine app (product) or property logomarks with the\nAtlassian strapline.\n\nThey create consistency in our portfolio, and help customers connect them with our overall Atlassian\nbrand. Follow the below guidance when using attribution logos:\n\n- Only use attribution logos when the Atlassian context is not clear. For example, in\n  advertisements, videos, and white papers. You don’t need to use them on Atlassian properties like\n  [www.atlassian.com](https://www.atlassian.com) or in app (product) user interfaces.\n- Never compose your own attribution logos or deconstruct the official assets.\n- Write the name of the app (product)/property and Atlassian in the alt-text for in digital\n  experiences.\n\n<AttributionCards />\n\n### Property logos\n\nThe Atlassian program and property logos are a lockup of the Atlassian logomark and wordmark and the\nname in Charlie Sans. Follow the below guidance when using property logos:\n\n- On a white background, the program name is rendered in neutral with the logo in primary blue. On\n  darker backgrounds, both program and logo are white.\n- Write `Atlassian` and the name of the property as the alt-text in digital experiences.\n\n<PropertyCards />\n\n### App (product) logos\n\nWith the Atlassian System of Work and collections framework our primary products, secondary products\nand plaftform features are now referred to as apps.\n\nWe’ve updated our logos to reflect this change, using marks that symbolize functionality, contained\nin a tile. An app’s glyph is chosen based on the apps functionality; its tile color refers to its\ncollection.\n\nThe logomarks are contained by a tile shape, colored with their associated collection. Follow the\nbelow guidance when using App (product) logos:\n\n- Use when the Atlassian context is clear.\n- If you need to connect the app to Atlassian, use an attribution logo instead. For example, in a\n  video or advertisement.\n- Write the name of the apps in the alt-text in digital experiences.\n\nAssets include both isolated logomarks and lockups with wordmarks.\n\n<AppCards />\n\n#### Logomarks\n\nA logomark is a symbol or icon shown without the app (product)/property name or brand workmark. For\nan app (product), this refers to the tile. Follow the below guidance when using logomarks:\n\n- If you’re including the logomark in product experiences, use the\n  [icon](https://atlassian.design/components/logo/examples#icon) variant of the logo component.\n- Only use logomarks on their own when the context is very clear and where possible pair with\n  descriptive text.\n- Write `Atlassian` or the app/property name in the alt-text in digital experiences.\n\n![](./_assets/lockups-nav.png)\n\nLogomarks are paired with native text in top navigations.\n\n![](./_assets/logos-contained-logomarks.png)\n\nLogomarks are suitable when rendering the app name natively in its environment is more legible and\nuser-friendly.\n\n![](./_assets/logos-jira-app-store.png)\n\nLogomarks can be used when environmental restrictions do not allow for proper clearance guidelines\nto be followed for full logos.\n\n#### Logomark shape and size\n\nThe [logo](https://atlassian.design/components/logo) component comes in specific sizes and the\nlogomark has a pre-defined radius. These should not be altered.\n\nThe exception to this is when appearing on external sources such as Apple mobile apps and Google\nMarketplace where specific container shapes need to be used.\n\nLogomarks should never be nested inside additional containers.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: tileRadiusDo, alt: \'\' }}>\n\t\tUse the default radius values that are applied to the backgrounds of app logo icons.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: tileRadiusDont, alt: \'\' }}>\n\t\tDon’t adjust the radius values of the backgrounds of product logo icons.\n\t</DoDont>\n\t<DoDont type="do" image={{ url: containersDo, alt: \'\' }}>\n\t\tAllow breathing room around product logo icons.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: containersDont, alt: \'\' }}>\n\t\tDon’t add unnecessary containers around app logo icons.\n\t</DoDont>\n</DoDontGrid>\n\n### Aligning logos\n\n#### Align logomarks with other elements\n\n- Middle align with the logo mark when the copy is less than the height of the container.\n- Top-align or stack below with center-alignment if it’s taller than the container.\n\n![](./_assets/logos-alignment-ratio.png)\n\n#### Aligning app (product) logos\n\nWhere app (product) logos are arranged in a vertical or horizontal list, use the height or weight of\nthe logomark portion to align.\n\n![](./_assets/tile-align-horizontal.png) ![](./_assets/tile-align-vertical.png)\n\n## Logo clearance\n\nWhen displaying logos outside of an app UI, surround them with clear space free of type, graphics,\nand other elements that might cause visual clutter.\n\n#### Ideal clearance — Atlassian logo\n\n![](./_assets/clearance-horizontal.png) ![](./_assets/clearance-vertical.png)\n\n#### Minimum clearance — Atlassian logo\n\nUse the capital "A" of the Atlassian wordmark to define the minimum clearance around the logo.\n\n![](./_assets/top-bottom-clearance-atlassian.png)\n\n#### Ideal clearance — app (product) logo\n\n![](./_assets/logos-ideal-clearance-app.png)\n\n#### Minimum clearance — app (product) logo\n\nUse the height and width of the logo wordmark to find the minimum clearance around the logo.\n\n![](./_assets/top-bottom-clearance-app.png)\n\n## Color options\n\nLogos are available in three color options to suit different colored environments – Brand, inverse\nand neutral.\n\n![](./_assets/logo-stack-colors.png)\n\nDon’t edit or place logos in ways that reduce the clarity and legibility of the image.\n\n<DoDontGrid>\n\t<DoDont type="dont" image={{ url: colorDont, alt: \'\' }}>\n\t\tDon’t use unapproved color combinations.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: shadowDont, alt: \'\' }}>\n\t\tDon’t use a drop shadow.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: legibilityDont, alt: \'\' }}>\n\t\tDon’t use the logo on top of complex backgrounds.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: outlineDont, alt: \'\' }}>\n\t\tDon’t outline the logo.\n\t</DoDont>\n</DoDontGrid>',
+  content: 'import {\n\tTypographyHeadingTable,\n\tTypographyBodyTable,\n\tTypographyMetricTable,\n\tTypographyCodeTable,\n} from \'@af/design-system-docs-ui\';\n\n\n\nimport {\n\tAtlassianLogoCard,\n\tAttributionCards,\n\tPropertyCards,\n\tAppCards,\n} from \'./_logo-asset-cards.partial\';\n\n\n\n\n\n\n\n\n\n<SectionMessage title="Download logos" appearance="information">\n\t<Stack space="space.100">\n\t\t<Text>\n\t\t\tThe full set of app (product) logos are available in{\' \'}\n\t\t\t<Link href="https://orangedam.atlassian.com/">Atlassian Mosaic</Link>.\n\t\t</Text>\n\t\t<Text>\n\t\t\tLogos used to represent third-party integrations are available in{\' \'}\n\t\t\t<Link href="https://atlaskit.stg.atlassian.com/packages/platform-labs/logo-third-party">\n\t\t\t\tAtlaskit staging (Atlassians only)\n\t\t\t</Link>\n\t\t\t.\n\t\t</Text>\n\t</Stack>\n</SectionMessage>\n\nThis page includes downloadable logo files for use in marketing contexts as well as specific usage\nguidance for app or marketing contexts.\n\nIf you want to add logos to app (product) experiences, use the\n[logo component](https://atlassian.design/components/logo/examples).\n\n## Download the logos\n\nEach downloadable file includes variations of color and layout in approved formats and the below\nelements combined together:\n\n- logomarks – the icon portion of a logo\n- wordmarks – the name of the app (product) or property\n- straplines or other secondary text.\n\nAssets for isolated logomarks are also included.\n\n![Annotated graphic of the Atlassian logo, showing the logomark, strapline and wordmark.](./_assets/logo-anatomy.png)\n\n### Our iconic Atlassian logo\n\nOur iconic company logo.\n\nInclude `Atlassian` as the alt-text for the logo in digital experiences.\n\n<AtlassianLogoCard />\n\n#### Atlassian app strapline\n\nThe Atlassian logomark and wordmark can be coupled with a list of app (product) names under it.\nFollow the below guidance when using logos that contain straplines:\n\n- Always centre the app names under the logo and don’t scale the logo below 280px wide.\n- Write Atlassian and the app name in the alt-text in digital experiences.\n\n![Logo strapline with Jira, Confluence, Trello and Bitbucket wordmarks center-aligned beneath the Atlassian logo.](./_assets/logo-centered.png)\n\n### Attribution logos\n\nThe attribution logos are a type of lockup that combine app (product) or property logomarks with the\nAtlassian strapline.\n\nThey create consistency in our portfolio, and help customers connect them with our overall Atlassian\nbrand. Follow the below guidance when using attribution logos:\n\n- Only use attribution logos when the Atlassian context is not clear. For example, in\n  advertisements, videos, and white papers. You don’t need to use them on Atlassian properties like\n  [www.atlassian.com](https://www.atlassian.com) or in app (product) user interfaces.\n- Never compose your own attribution logos or deconstruct the official assets.\n- Write the name of the app (product)/property and Atlassian in the alt-text for in digital\n  experiences.\n\n<AttributionCards />\n\n### Property logos\n\nThe Atlassian program and property logos are a lockup of the Atlassian logomark and wordmark and the\nname in Charlie Sans. Follow the below guidance when using property logos:\n\n- On a white background, the program name is rendered in neutral with the logo in primary blue. On\n  darker backgrounds, both program and logo are white.\n- Write `Atlassian` and the name of the property as the alt-text in digital experiences.\n\n<PropertyCards />\n\n### App (product) logos\n\nWith the Atlassian System of Work and collections framework our primary products, secondary products\nand plaftform features are now referred to as apps.\n\nWe’ve updated our logos to reflect this change, using marks that symbolize functionality, contained\nin a tile. An app’s glyph is chosen based on the apps functionality; its tile color refers to its\ncollection.\n\nThe logomarks are contained by a tile shape, colored with their associated collection. Follow the\nbelow guidance when using App (product) logos:\n\n- Use when the Atlassian context is clear.\n- If you need to connect the app to Atlassian, use an attribution logo instead. For example, in a\n  video or advertisement.\n- Write the name of the apps in the alt-text in digital experiences.\n\nAssets include both isolated logomarks and lockups with wordmarks.\n\n<AppCards />\n\n#### Logomarks\n\nA logomark is a symbol or icon shown without the app (product)/property name or brand workmark. For\nan app (product), this refers to the tile. Follow the below guidance when using logomarks:\n\n- If you’re including the logomark in product experiences, use the\n  [icon](https://atlassian.design/components/logo/examples#icon) variant of the logo component.\n- Only use logomarks on their own when the context is very clear and where possible pair with\n  descriptive text.\n- Write `Atlassian` or the app/property name in the alt-text in digital experiences.\n\n![](./_assets/lockups-nav.png)\n\nLogomarks are paired with native text in top navigations.\n\n![](./_assets/logos-contained-logomarks.png)\n\nLogomarks are suitable when rendering the app name natively in its environment is more legible and\nuser-friendly.\n\n![](./_assets/logos-jira-app-store.png)\n\nLogomarks can be used when environmental restrictions do not allow for proper clearance guidelines\nto be followed for full logos.\n\n#### Logomark shape and size\n\nThe [logo](https://atlassian.design/components/logo) component comes in specific sizes and the\nlogomark has a pre-defined radius. These should not be altered.\n\nThe exception to this is when appearing on external sources such as Apple mobile apps and Google\nMarketplace where specific container shapes need to be used.\n\nLogomarks should never be nested inside additional containers.\n\n<DoDontGrid>\n\t<DoDont type="do" image={{ url: tileRadiusDo, alt: \'\' }}>\n\t\tUse the default radius values that are applied to the backgrounds of app logo icons.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: tileRadiusDont, alt: \'\' }}>\n\t\tDon’t adjust the radius values of the backgrounds of product logo icons.\n\t</DoDont>\n\t<DoDont type="do" image={{ url: containersDo, alt: \'\' }}>\n\t\tAllow breathing room around product logo icons.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: containersDont, alt: \'\' }}>\n\t\tDon’t add unnecessary containers around app logo icons.\n\t</DoDont>\n</DoDontGrid>\n\n### Aligning logos\n\n#### Align logomarks with other elements\n\n- Middle align with the logo mark when the copy is less than the height of the container.\n- Top-align or stack below with center-alignment if it’s taller than the container.\n\n![](./_assets/logos-alignment-ratio.png)\n\n#### Aligning app (product) logos\n\nWhere app (product) logos are arranged in a vertical or horizontal list, use the height or weight of\nthe logomark portion to align.\n\n![](./_assets/tile-align-horizontal.png) ![](./_assets/tile-align-vertical.png)\n\n## Logo clearance\n\nWhen displaying logos outside of an app UI, surround them with clear space free of type, graphics,\nand other elements that might cause visual clutter.\n\n#### Ideal clearance — Atlassian logo\n\n![](./_assets/clearance-horizontal.png) ![](./_assets/clearance-vertical.png)\n\n#### Minimum clearance — Atlassian logo\n\nUse the capital "A" of the Atlassian wordmark to define the minimum clearance around the logo.\n\n![](./_assets/top-bottom-clearance-atlassian.png)\n\n#### Ideal clearance — app (product) logo\n\n![](./_assets/logos-ideal-clearance-app.png)\n\n#### Minimum clearance — app (product) logo\n\nUse the height and width of the logo wordmark to find the minimum clearance around the logo.\n\n![](./_assets/top-bottom-clearance-app.png)\n\n## Color options\n\nLogos are available in three color options to suit different colored environments – Brand, inverse\nand neutral.\n\n![](./_assets/logo-stack-colors.png)\n\nDon’t edit or place logos in ways that reduce the clarity and legibility of the image.\n\n<DoDontGrid>\n\t<DoDont type="dont" image={{ url: colorDont, alt: \'\' }}>\n\t\tDon’t use unapproved color combinations.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: shadowDont, alt: \'\' }}>\n\t\tDon’t use a drop shadow.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: legibilityDont, alt: \'\' }}>\n\t\tDon’t use the logo on top of complex backgrounds.\n\t</DoDont>\n\t<DoDont type="dont" image={{ url: outlineDont, alt: \'\' }}>\n\t\tDon’t outline the logo.\n\t</DoDont>\n</DoDontGrid>',
   keywords: ['logos', 'brand', 'identity', 'logo usage', 'brand guidelines']
 }, {
   content: '## About radius tokens\n\nRadius tokens standardize corner roundness, ensuring consistency and cohesion throughout all of our\napps. Pair radius tokens with radius focus tokens to bring focus to the selected element. This helps\nusers identify which element is active.\n\n## Radius tokens and usage guidelines\n\nUse radius tokens to apply roundness across different states and use cases.\n\n<Stack space="space.200">\n\t<RadiusTable />\n\t<Text>* Token values are subject to change and should be used as an indication only.</Text>\n</Stack>\n\n## Radius examples and usage\n\n### Extra small\n\nUse the `radius.xsmall` token for extra small detail elements like badges, checkboxes, avatar\nlabels, and keyboard shortcuts.\n\n![Two examples, one of checkboxes and one of keyboard shortcuts in a tooltip, both of which use the "radius.xsmall" token.](./_assets/radius-xsmall.png)\n\n### Small\n\nUse the `radius.small` token for small elements like labels, lozenges, timestamps, tags, dates,\ntooltip containers, imagery inside tables, and compact buttons.\n\n![Examples of lozenges, tooltips, dates and photos in a section that all use the "radius.small" token.](./_assets/radius-small.png)\n\n### Medium\n\nUse the `radius.medium` token for interactive elements like buttons, inputs, text areas, selects,\nnavigation items, and smart links.\n\n![Examples of buttons, smart links, text fields, dropdowns, and navigation menu items all using the "radius.medium" token.](./_assets/radius-medium.png)\n\n### Large\n\nUse the `radius.large` token for elements like cards, in-page containers, floating UIs, and dropdown\nmenus.\n\n![Two examples, one of a progress summary card and one of a Jira work item on a board, both of which use the "radius.large" token.](./_assets/radius-large.png)\n\n### Extra large\n\nUse the `radius.xlarge` token for full-page containers, large containers, modal dialogs, Kanban\ncolumns, and tables.\n\n![Two examples, one of a confirmation dialog and one of a table, both of which use the "radius.xlarge" token.](./_assets/radius-xlarge.png)\n\n### Extra extra large\n\nUse the `radius.xxlarge` token for video players.\n\n![An example of the Loom video player using the "radius.xxlarge" token.](./_assets/radius-xxlarge.png)\n\n### Full\n\nUse the `radius.full` token for avatars, names, user-related UI, and emoji reactions. This token can\nalso be used for dividers and other pill-shaped elements since it results in a fully round radius.\n\n![A mix of circular and pill-shaped examples of avatars, user mentions, and name cursors all using the "radius.full" token.](./_assets/radius-full.png)\n\n### Tile\n\nUse the `radius.tile` token exclusively for tile components, such as icon tile or object tile. This\ntoken should not be used outside of tiles.\n\n![An example of tile objects all using the "radius.tile" token.](./_assets/radius-tile.png)\n\n## Radius token for focus state\n\nA component\'s focus state is critical for accessibility. The corner radius of the focus ring must\nalign visually with the component it surrounds.\n\n### Focus state design specifications\n\n![Diagram showing an interactive element with a blue focus ring offset by 2px. A note explains “Focus ring radius = element radius + 2px,” illustrating how the focus ring\'s corner radius is calculated relative to the component.](./_assets/focus-ring-1.png)\n\nThe focus ring is implemented in two key ways:\n\n1. **Offset**: The focus ring is positioned 2px away from the component\'s bounding box.\n2. **Radius value**: The corner radius of the focus ring is always +2px greater than the component’s\n   base corner radius value.\n\n### How to implement the focus ring for code and design\n\nThe focus ring is managed differently between code and design:\n\n- **In code**: When you’re using interactive design system components, focus rings are automatically\n  applied. When you’re building custom components, use the\n  [focusable component](https://atlassian.design/components/primitives/focusable/examples). The 2px\n  visual offset and the radius calculation (component radius +2px) are automatically handled by the\n  focusable component\'s logic. This means developers never need to apply a separate radius token for\n  the focus state.\n- **In design**: Automatic calculations aren’t possible in design tools, so designers must use a\n  dedicated set of tokens to enforce the correct radius relationship. These tokens mirror the\n  component radius names but carry the calculated +2px value to ensure visual accuracy in design\n  files.\n\n![Diagram of a button showing the base radius of "radius.medium" and its corresponding focus‑state radius token "radius.focus.medium" relationship.](./_assets/focus-ring-2.png)\n\n<Stack space="space.200">\n\t<RadiusFocusTable />\n\t<Text>* Token values are subject to change and should be used as an indication only.</Text>\n</Stack>',