added-style-images

src/pages/components/ai-label/style.mdx

@@ -22,35 +22,47 @@ structure, and sizes.
 
 ## Color
 
-<Title>Default</Title>
+### Default color
 
-| State     | Element | Property   | Color token           |
-| --------- | ------- | ---------- | --------------------- |
-| _Enabled_ | Label   | text color | `$text-primary`       |
-|           | Button  | border     | `$border-inverse`     |
-|           |         | background | `transparent`         |
-| _Hover_   | Label   | text color | `$text-inverse`       |
-|           | Button  | border     | `$border-inverse`     |
-|           |         | background | `$background-inverse` |
-| _Focus_   | Button  | border     | `$focus`              |
+| State   | Element | Property   | Color token           |
+| ------- | ------- | ---------- | --------------------- |
+| Enabled | Text    | text color | `$text-primary`       |
+|         | Button  | border     | `$border-inverse`     |
+|         |         | background | `transparent`         |
+| Hover   | Text    | text color | `$text-inverse`       |
+|         | Button  | border     | `$border-inverse`     |
+|         |         | background | `$background-inverse` |
+| Focus   | Button  | border     | `$focus`              |
 
-<br />{' '}
+<Row>
+<Column colLg={8}>
 
-<Title>Inline</Title>
+![Examples of default AI label states](images/style-ai-label-states-default.png)
 
-| State     | Element | Property   | Color token       |
-| --------- | ------- | ---------- | ----------------- |
-| _Enabled_ | Label   | text color | `$text-primary`   |
-|           | Dot     | fill       | `$icon-primary`   |
-|           | Button  | background | `transparent`     |
-| _Hover_   | Label   | text color | `$text-secondary` |
-|           | Button  | border     | `$border-inverse` |
-|           |         | background | `transparent`     |
-| _Focus_   | Button  | border     | `$focus`          |
+</Column>
+</Row>
 
-<br />{' '}
+### Inline color
 
-<Title>Explainability popover</Title>
+| State   | Element | Property   | Color token       |
+| ------- | ------- | ---------- | ----------------- |
+| Enabled | Text    | text color | `$text-primary`   |
+|         | Dot     | fill       | `$icon-primary`   |
+|         | Button  | background | `transparent`     |
+| Hover   | Text    | text color | `$text-secondary` |
+|         | Button  | border     | `$border-inverse` |
+|         |         | background | `transparent`     |
+| Focus   | Button  | border     | `$focus`          |
+
+<Row>
+<Column colLg={8}>
+
+![Examples of inline AI label states](images/style-ai-label-states-inline.png)
+
+</Column>
+</Row>
+
+### Explainability popover color
 
 | Element            | Property               | Color token              |
 | ------------------ | ---------------------- | ------------------------ |
@@ -60,53 +72,65 @@ structure, and sizes.
 | Popover border     | linear-gradient: start | `$ai-border-start`       |
 |                    | linear-gradient: end   | `$ai-border-end`         |
 
-## Typography
+<Row>
+<Column colLg={8}>
+
+![Examples of an explainability popover](images/style-ai-label-explainability.png)
 
-<Title>Default</Title>
+</Column>
+</Row>
 
-| Element             | Font-size (px/rem) | Font-weight    | Type token    |
-| ------------------- | ------------------ | -------------- | ------------- |
-| Label text (xl)     | 20 / 1.25          | SemiBold / 600 | `$heading-03` |
-| Label text (sm–lg)  | 16 / 1             | SemiBold / 600 | `$heading-02` |
-| Label text (2xs–xs) | 12 / 0.75          | SemiBold / 600 | –             |
-| Label text (mini)   | 9 / 0.5625         | SemiBold / 600 | –             |
+## Typography
 
-<br />{' '}
+### Default type
 
-<Title>Inline</Title>
+| Element       | Font-size (px/rem) | Font-weight    | Type token    |
+| ------------- | ------------------ | -------------- | ------------- |
+| Text (xl)     | 20 / 1.25          | SemiBold / 600 | `$heading-03` |
+| Text (sm–lg)  | 16 / 1             | SemiBold / 600 | `$heading-02` |
+| Text (2xs–xs) | 12 / 0.75          | SemiBold / 600 | –             |
+| Text (mini)   | 9 / 0.5625         | SemiBold / 600 | –             |
 
-| Element         | Font-size (px/rem) | Font-weight    | Type token    |
-| --------------- | ------------------ | -------------- | ------------- |
-| Label text (lg) | 16 / 1             | SemiBold / 600 | `$heading-02` |
-| Label text (md) | 14 / 0.875         | SemiBold / 600 | `$heading-01` |
-| Label text (sm) | 12 / 0.75          | SemiBold / 600 | –             |
+### Inline type
 
-<br />{' '}
+| Element   | Font-size (px/rem) | Font-weight    | Type token    |
+| --------- | ------------------ | -------------- | ------------- |
+| Text (lg) | 16 / 1             | SemiBold / 600 | `$heading-02` |
+| Text (md) | 14 / 0.875         | SemiBold / 600 | `$heading-01` |
+| Text (sm) | 12 / 0.75          | SemiBold / 600 | –             |
 
-<Title>Explainability popover</Title>
+### Explainability popover type
 
 | Element | Font-size (px/rem) | Font-weight   | Type token    |
 | ------- | ------------------ | ------------- | ------------- |
-| Label   | 14 / 0.875         | Regular / 400 | `$label-02`   |
+| Text    | 14 / 0.875         | Regular / 400 | `$label-02`   |
 | Title   | 28 / 1.75          | Regular / 400 | `$heading-04` |
 | Body    | 14 / 0.875         | Regular / 400 | `$body-01`    |
 
 ## Structure
 
-<Title>Default</Title>
+### Default structure
+
+| Element | Property | Value    | Spacing token |
+| ------- | -------- | -------- | ------------- |
+| Button  | border   | 1px      | –             |
+| Text    | padding  | centered | –             |
 
-| Element    | Property | Value    | Spacing token |
-| ---------- | -------- | -------- | ------------- |
-| Button     | border   | 1px      | –             |
-| Text label | padding  | centered | –             |
+<div className="image--fixed">
+
+![Structure of default AI labels](images/style-ai-label-structure-default.png)
+
+</div>
 
-<br />{' '}
+<Caption>
+  Recommended structure and spacing measurements for default AI label | px / rem
+</Caption>
 
-<Title>Inline</Title>
+### Inline structure
 
 | Element     | Property                    | px/rem | Spacing token |
 | ----------- | --------------------------- | ------ | ------------- |
-| Text label  | padding-left                | 4px    | `$spacing-02` |
+| Text        | padding-left                | 4px    | `$spacing-02` |
 | Button      | border                      | 1px    | –             |
 |             | padding-left, padding-right | 4px    | `$spacing-02` |
 | Button (sm) | height                      | 16px   | –             |
@@ -116,9 +140,7 @@ structure, and sizes.
 | Button (lg) | height                      | 22px   | –             |
 |             | dot                         | 8px    | –             |
 
-<br />{' '}
-
-<Title>Explainability popover</Title>
+### Explainability popover structure
 
 | Element   | Property | px/rem | Spacing token |
 | --------- | -------- | ------ | ------------- |
@@ -137,7 +159,7 @@ structure, and sizes.
 
 ## Sizes
 
-<Title>Default</Title>{' '}
+### Default sizes
 
 | Default size     | Height (px/rem) |
 | ---------------- | --------------- |
@@ -149,9 +171,7 @@ structure, and sizes.
 | Large (lg)       | 48 / 3          |
 | Extra large (xl) | 64 / 4          |
 
-<br />{' '}
-
-<Title>Inline</Title>
+### Inline sizes
 
 | Inline size | Height (px/rem) |
 | ----------- | --------------- |

src/pages/components/ai-label/usage.mdx

@@ -249,7 +249,9 @@ other icon types.
 #### In data tables
 
 Where the AI label goes inside of a data table depends on which parts of the
-data are AI generated.
+data are AI generated. For more details, see the
+[AI presence](/components/data-table/usage/#ai-presence) section on the data
+table component page.
 
 - If the whole table has an AI presence, then place the AI label in the top
   right of the table header.
@@ -272,7 +274,9 @@ data are AI generated.
 #### In forms
 
 Where the AI label is placed in a form can vary depending on if the AI presence
-is across the whole form or just in certain parts of the form.
+is across the whole form or just in certain parts of the form. For more
+guidance, see the [AI presence](/components/form/usage/#ai-presence) section on
+the form component page.
 
 - If the entire form has an AI presence, then place the AI label in top right of
   the form header.
@@ -293,14 +297,17 @@ The AI label might appear at multiple levels of a page, or it might appear only
 once. The content in the AI explainability popover might be focused on a single
 AI instance or broadly address multiple instances. All scenarios are acceptable
 and possible, but the level of visibility depends on the need for explainability
-and/or the need to distinguish AI content from human content. Use this guide to
-determine what works best for your use case.
+and/or the need to distinguish AI content from human content.
+
+| Visibility level | Usecase                                                       |
+| ---------------- | ------------------------------------------------------------- |
+| _Focused_        | Use for individual occurrences of AI within a section         |
+| _Broad_          | Use for summarization of AI usage across a section of a page. |
 
 #### Use a focused AI label:
 
-- For individual occurrences of AI within a section
-- When the user needs to have an individual AI instance explained
-- When the user needs to distinguish between AI and non-AI content
+- When the user needs to have an individual AI instance explained.
+- When the user needs to distinguish between AI and non-AI content.
 
 <Row>
 <Column colLg={8}>
@@ -316,9 +323,8 @@ determine what works best for your use case.
 
 #### Use a broad AI label:
 
-- For summarization of AI usage across a section of a page
-- When users don’t need specific explanations of AI on a per-instance level
-- When the user doesn’t need to act on AI at an instance level
+- When users don’t need specific explanations of AI on a per-instance level.
+- When the user doesn’t need to act on AI at an instance level.
 
 <Row>
 <Column colLg={8}>
@@ -333,6 +339,15 @@ determine what works best for your use case.
   AI generated.
 </Caption>
 
+#### Using both focused and broad AI label
+
+Use both focused and broad AI label when AI surfaces throughout the experience,
+but:
+
+- Individual AI instances still need to be explained.
+- The user needs to distinguish between AI and non-AI content.
+- The user needs to act on AI at an instance level.
+
 ## Content
 
 ### Localization