# AI content

Status: beta

Marks text an AI drafted, so managers know to check it before it is used.

AI content marks anything an AI drafted: a reply to a tenant, a summary of a repair, a suggested rent review. It tells managers the text needs checking before it is used, and shows clearly when the AI is still writing.

It uses the discovery colour and a four-pointed star, the Atrium AI mark. Use the same treatment in every app so managers learn to spot AI output anywhere in COHO.

## Example

```html
<div class="at-ai">
  <p class="at-ai__label">Drafted by AI</p>
  <p>Hi Sam, the boiler engineer is booked for Thursday between 9am and 1pm.</p>
  <div class="at-inline">
    <button type="button" class="at-button">Edit</button>
    <button type="button" class="at-button at-button--primary">Use reply</button>
  </div>
</div>
```

## Anatomy

1. **Label (.at-ai__label)**: star mark + "Drafted by AI"; color: var(--at-text-discovery); font-size: var(--at-text-xs) /* 12px */

2. **Content**: the AI output, editable or quoted

3. **Actions**: always a way to edit or discard; the primary action uses the output

4. **Container**: border: 1px solid var(--at-border-discovery); background: var(--at-bg-discovery-subtle); border-radius: var(--at-radius-2)

## Size and spacing

- **Padding**: block: var(--at-space-4) /* 12px */; inline: var(--at-space-5) /* 16px */

- **Label**: margin-bottom: var(--at-space-3) /* 8px */; gap star to text: var(--at-space-2) /* 4px */

## Variants

### AI content

Finished AI output, waiting for a manager to check it.

```html
<div class="at-ai"><p class="at-ai__label">Drafted by AI</p><p>3 tenancies end in the next 30 days. Two have not been offered a renewal.</p></div>
```

| State | Specification |

|---|---|

| Generating | add .at-ai--generating; moving border, stops for reduced motion; aria-busy="true" |

| Ready | border: 1px solid var(--at-border-discovery) |

## When to use

- Any text, summary or suggestion an AI produced.
- While an AI is generating, to show work is happening.

## When not to use

- Content a person wrote or has already approved: remove the marking once it is used.
- Rule-based automation with no AI (a reminder sent on a schedule): that is not AI content.

## Content

- Label finished output "Drafted by AI" and in-progress output "Writing".
- Name the action that uses it: "Use reply", "Add to notes", not "Accept".
- Never present AI output as fact. If it might be wrong, say "Check before sending".

## Do and don't

Do: Marked as AI, with a way to edit before it is sent.

```html
<div class="at-ai"><p class="at-ai__label">Drafted by AI</p><p>Hi Sam, the engineer is booked for Thursday.</p><div class="at-inline"><button type="button" class="at-button">Edit</button><button type="button" class="at-button at-button--primary">Use reply</button></div></div>
```

Don't: Unmarked AI text that sends in one click.

```html
<div class="at-card"><p>Hi Sam, the engineer is booked for Thursday.</p><div class="at-inline"><button type="button" class="at-button at-button--primary">Send</button></div></div>
```

## Do

- Let managers edit or discard every piece of AI output.
- Keep the marking until a manager has used or approved the content.

## Don't

- Send, save or change anything with AI output without a manager pressing a button first.
- Use the discovery colour or star mark for anything that is not AI or new.

## Code

```html
<div class="at-ai">
  <p class="at-ai__label">Drafted by AI</p>
  <p>Hi Sam, the boiler engineer is booked for Thursday between 9am and 1pm.</p>
  <div class="at-inline">
    <button type="button" class="at-button">Edit</button>
    <button type="button" class="at-button at-button--primary">Use reply</button>
  </div>
</div>
```

## Classes

| Class | What it does |

|---|---|

| `at-ai` | Container with the discovery border and background |

| `at-ai__label` | Star mark and label: "Drafted by AI" or "Writing" |

| `at-ai--generating` | Moving border while the AI is still writing |

## Tokens

`--at-border-discovery`, `--at-bg-discovery-subtle`, `--at-text-discovery`, `--at-border-primary`, `--at-text-accent-magenta`

## Accessibility

- The label is real text, so screen readers announce "Drafted by AI" before the content.
- While generating, set aria-busy="true" on the container and announce the result with a status message when it is ready.
- The moving border stops when the manager has turned on reduced motion.