AI content

Beta

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.

Drafted by AI

Hi Sam, the boiler engineer is booked for Thursday between 9am and 1pm.

Edit Use reply

---

Specifications

LightDark

Anatomy

Drafted by AI

Hi Sam, the boiler engineer is booked for Thursday between 9am and 1pm.

EditUse reply

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

Drafted by AI

Summary text.

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 */

AI content

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

LightDark

Example

Drafted by AI

3 tenancies end in the next 30 days. Two have not been offered a renewal.

States

Generating

Writing

add .at-ai--generating

moving border, stops for reduced motion

aria-busy="true"

Ready

Drafted by AI

Boiler booked for Thursday.

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

---

Usage

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

Drafted by AI

Hi Sam, the engineer is booked for Thursday.

EditUse reply

DoMarked as AI, with a way to edit before it is sent.

Hi Sam, the engineer is booked for Thursday.

Send

Don'tUnmarked AI text that sends in one click.

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.

---

Implementation

HTML

Copy

<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 used

--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.

Related

Inline alert

A message about the whole page or a section: information, success, a warning or an error.

View component

Status tag

A short status label: Paid, Overdue, Draft.

View component

Spinner and skeleton

Show that something is loading.

View component