8i.co.za INTERFACE SYSTEM · HUMANS + AI · V0.1

8i / INTERFACE SYSTEM · HUMANS + AI

One contract.
Readable by agents.

This page is the living visual and content system for 8i.co.za — not a human-only moodboard. AI agents should read it with AI.md, brand-system.md, and design-tokens.json before generating or editing UI.

AI.md (start here) AI contract Tokens JSON

02 / BRAND

Identity with
room to think.

The mark and wordmark should feel calm, exact and spatial. Give them air; never compress them into dense tool chrome.

LIGHT LOCKUPwarm gold + soft shadow
8i8i.co.za
BLUE LOCKUPyellow + light
8i8i.co.za
DARK LOCKUPyellow + light
8i8i.co.za
CLEAR SPACE1× mark aperture
8i.co.za
BRAND RELATIONSHIPvertical model
EPHRAIM.AITHE ILLUMINATING PRINCIPLE8i.co.zaTHE PRACTICE
DO

Use the warm-gold SVG with the specified soft shadow on light surfaces.

AVOID

Outlines, heavy shadows or changing the supplied proportions, blue or gold.

03 / COLOUR

One blue.
Every depth.

#0f0fed is the pigment. Darkness, surfaces, text and light are produced by shading or tinting that blue.

950#02020b
900#030312
850#06062a
800#09094a
700#0c0c78
600#0f0fb9
500#0f0fed
400#4a4af2
300#8585f8
200#b7b7fb
100#e3e3fe
50#f7f7ff
ACCENT 500#f6cd49Illumination · activation · attention
USE

Primary actions, active markers, selected controls and one meaningful phrase.

LIMIT

Keep yellow below 5% of the screen. Never use it as a large page surface or body-text colour.

LIGHT MODEBlue carries structure.
Yellow activates.
DARK MODELight creates depth.
Yellow activates.

Depth

Page backgrounds and recessed layers.

900–950

Interface

Cards, rules and supporting structure.

600–850

Focus

Primary actions and active information.

400–500

Light

Text, icons and illuminated surfaces.

50–300

04 / TYPOGRAPHY

Rounded clarity.
Human precision.

Baloo Chettan 2 carries both expressive headlines and practical interface copy. Weight and space establish hierarchy.

DISPLAY / 600

A higher perspective.

clamp(3.25rem, 7vw, 7rem) · 1.02
HEADING / 600

Knowledge made useful.

clamp(2rem, 4vw, 4.5rem) · 1.08
LEAD / 400

Connect a clear principle to practical work inside the organisation.

1.25rem · 1.5
BODY / 400

Use plain language, short paragraphs and labels that explain the next action.

1rem · 1.6
LABEL / 700

EIGHT ORGANISATIONAL INTELLIGENCES

.75rem · .15em tracking
DATA / MONO

/data/amcoza/START_HERE.txt

.875rem · ui-monospace

05 / LAYOUT & DEPTH

Space is part
of the meaning.

Content stays on a clear reading plane. Depth supports orientation and hierarchy without reducing legibility.

CONTENT PLANE

Readable first.

Use a 12-column desktop grid, generous margins and 65–75 character text measures.

SPACE4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96
RADIUS8 · 12 · 18 · 30 · round
MOTION160 · 240 · 400ms
READING65–75 characters

06 / ACTIONS & NAVIGATION

Every action
has a clear weight.

Use one dominant action per region. Supporting actions become quiet outlines or text links.

BUTTONS
LINKS & TAGS
Text link ↗← Back to overviewPublic dataActiveLive
ICON CONTAINERS
324864
HEADER
8i.co.za
TABS
Selected platform content appears on one stable reading plane.

07 / GUIDED CONTENT

Help people
complete the task.

Guides pair a concise method with ordered steps, copyable content and contextual help.

METHOD

New chat → paste → question → send

  1. 1

    Open your preferred AI chat.

  2. 2

    Copy and paste the connection prompt.

  3. 3

    Add your machine question, then send.

PROMPT · PLAIN TEXT
You help with AM.CO.ZA knowledge.

1. Start with the relevant index.
2. Open one source at a time.
3. Cite the URL used.
4. Never invent stock or prices.
Safe to shareUpdated 08 Sep 2026
PATH A

Connect an AI

For people who want answers from public knowledge.

Open guide →

08 / FORMS & FILTERS

Ask only for
what is needed.

Labels stay visible, help text is specific and focus states are unmistakable.

Answer format

09 / DATA & INDEXES

Dense information.
Calmly organised.

Tables and indexes expose paths, types and status without losing the 8i spatial hierarchy.

15,096 files
FileTitleTypeUpdatedOpen
START_HERE.txtFirst-read map for agentsGuideToday↗
STOCK.txtLive stock access rulesDataToday↗
scenarios/INDEX.txtQuestion-type scenario routerIndexYesterday↗
website-llms/Website knowledge briefsFolder07 Sep↗
Showing 1–4 of 15,096
+
scenariosScenario packs and question routes
26 files→+
stockAvailability rules and latest data
27 files→+
sourcesPublished product and technical material
12,712 files→

10 / SYSTEM STATES

Meaning beyond
colour alone.

Because the palette is monochrome, every state uses a label, icon and structural treatment as well as tone.

✓
SUCCESS

Connection ready

The public knowledge source is available.

!
CHECK

Confirm live stock

Catalog availability is not warehouse quantity.

×
ERROR

Source unavailable

Keep the URL and offer a human route.

LOADING

Reading sources

Open one relevant source at a time.

○
EMPTY

No matching files

Try a product name, code or broader phrase.

11 / AI CONTRACT

Same system.
Agents included.

This section is normative for AI generators. Humans browse specimens above; agents must obey the files below. Start with AI.md, then tokens and brand-system.

DESIGNERS

Compose from the system

  • Use the blue scale and spacing tokens.
  • Keep one clear reading plane.
  • Use depth to explain hierarchy.
  • Design all five system states.
DEVELOPERS

Build accessible primitives

  • Use semantic HTML before custom roles.
  • Keep focus, keyboard and reduced motion support.
  • Reference tokens; avoid one-off values.
  • Make data views responsive.
AI AGENTS

Generate without drifting

  • Inspect existing components first.
  • Reuse names, markup and tokens exactly.
  • Do not invent business claims or live data.
  • Document any new reusable pattern.
MINIMUM AGENT CONTEXT · COPY INTO YOUR PROMPT
You are building or editing 8i.co.za UI.
Canonical sources (read all before inventing UI):
1. https://8i.co.za/guide/style/AI.md
2. https://8i.co.za/assets/docs/brand-system.md
3. https://8i.co.za/assets/data/design-tokens.json
4. https://8i.co.za/guide/style/ (this page)

Rules:
- Primary pigment #0f0fed (blue scale in tokens). Accent #f6cd49 under ~5% of screen.
- Type: Baloo Chettan 2. Absolute asset URLs with domain: https://8i.co.za/assets/... (so downloaded pages still load).
- Reuse existing components/names before inventing patterns.
- Semantic HTML, keyboard focus, AA contrast, touch ≥42px, respect prefers-reduced-motion.
- Always write AM.CO.ZA (never bare "AM"). Never invent prices, stock, or outcomes.
- Permanent public guide URLs must not be renamed after publish.
- Prefer static HTML/MD/JSON. Markdown for AI fetch: text/plain + .txt twins when needed.
- Document any new reusable pattern back into this system.
Copied to clipboard