# 8i Interface System — AI agent brief

Version 0.2 — 8 September 2026

**This is a primary source.** `/guide/style/` is written for humans *and* AI agents. Do not treat the HTML page as decoration; treat it as the visual contract. This file is the compact machine brief.

## Canonical sources (read in order)

1. https://8i.co.za/guide/style/AI.md (this file) — also https://8i.co.za/guide/style/AI.txt
2. https://8i.co.za/assets/docs/brand-system.md — implementation contract
3. https://8i.co.za/assets/data/design-tokens.json — colours, type, space, motion, radii
4. https://8i.co.za/guide/style/ — live specimens + component examples
5. https://8i.co.za/ — public experience
6. https://8i.co.za/project/amcoza/ — AM.CO.ZA case study

## What 8i is

8i is the practice layer for organisational intelligence (Around Intelligence × Fulfillment tech). Ephraim.ai is the illuminating principle; 8i.co.za is the practice. Speak as 8i / Around — not as Advanced Machinery. AM.CO.ZA is the first client/pilot.

Product thesis: do **not** sell a foundation model. Organise unique business data and present it to existing AIs so answers match real playbooks.

## Visual system (do not invent)

| Token role | Value / rule |
|---|---|
| Primary pigment | `#0f0fed` and its shade/tint scale in design-tokens.json |
| Accent | `#f6cd49` illumination gold — keep below ~5% of the visible screen; never body text or large surfaces |
| Type | Baloo Chettan 2 — display/headings 600; body 400; labels 700 with wide tracking |
| Assets | Absolute URLs `https://8i.co.za/assets/...` (download-safe; never page-relative `assets/…`) |
| Themes | Light and dark share geometry; switch semantic tokens, not one-off hex. Default = `prefers-color-scheme`; manual choice in `sessionStorage` (`8i-theme`), not cookies |
| Motion | Respect `prefers-reduced-motion`; depth/canvas stay behind content |

## Markup and components

1. Prefer semantic HTML and existing patterns shown on `/guide/style/`.
2. Reuse names, markup, and tokens before inventing a variant.
3. New reusable patterns must be added to the style guide + brand-system.md + tokens **before** product use.
4. Keyboard, focus, AA contrast, and touch targets ≥42px are required.

## Content voice

- Calm, direct, useful. Lead with outcome or next action.
- Always write **AM.CO.ZA** (never bare “AM”) in client-facing copy.
- Formal company line when needed: **AM.CO.ZA / Advanced Machinery (Pty) Ltd (a South African company)**.
- Never invent prices, stock quantities, performance results, or customer outcomes.
- Cite public source URLs for facts. Catalog “In Stock” ≠ live warehouse quantity.
- Human help for AM.CO.ZA: WhatsApp AM.CO.ZA on 060 600 6000.

## Guides (task interfaces)

Each guide should include: outcome title; who it is for; method summary; ordered steps; copyable content; help route; public sources; updated metadata. Prefer tabs/cards for path choices over duplicating the whole guide.

Permanent public URLs: never rename or move published guides after go-live. Prefer pure static HTML/MD/JSON. For AI-fetchable Markdown, publish with `Content-Type: text/plain; charset=utf-8` and `.txt` twins when ChatGPT is a target.

## Page titles (SEO)

Public HTML `<title>` tags must clearly describe the page and be **longer than 60 characters**.

## Minimum agent checklist

```
1. Read AI.md + brand-system.md + design-tokens.json
2. Inspect the closest existing page under /guide/ or /
3. Reuse tokens and components exactly; absolute /assets/ URLs
4. Keep semantic, responsive, keyboard-accessible UI
5. Treat business facts as sourced data only
6. Document any new pattern in the style guide
```

## Asset URLs

Always use absolute URLs with domain, e.g. `https://8i.co.za/assets/8i-logo-accent-dark.svg`, so saved/downloaded HTML still loads CSS/JS/images. Never page-relative `assets/...`. Prefer domain form over root-relative `/assets/...`.