# Camlin Connect Brand Guidelines

**Version 1.0 — August 2026**
Covers: Nuamedia (company), Camlin Connect (master product brand), the six
sub-brands (Connect, Avatar, Contact, Speech, Insight, Solutions), and the
adjacent product Camlin AgentLink.

---

## 1. Brand architecture

```
Nuamedia  (company — Nuamedia Solutions Pty Ltd, est. 2012)
│         nuamedia.com.au / nuamedia.com — the marketing website
│
├── Camlin Connect  (master product brand — the platform)
│   │   camlinconnect.com.au (AU app) / camlinconnect.com (international app)
│   │   promotion subdomains: avatar.camlinconnect.com.au, etc.
│   │
│   ├── Connect    — the builder / design surface (currently "Architect" in console copy)
│   ├── Avatar     — 3D avatar, lip-sync, live receptionist line
│   ├── Contact    — contact centre (Asterisk, queues, SIP, visual IVR)
│   ├── Speech     — voice AI: ASR, TTS, visemes, sovereignty options
│   ├── Insight    — analytics, audit, evidence
│   └── Solutions  — packaged industry solutions (incl. NuaWorkflow CRM, Sovereign)
│
├── Camlin AgentLink  (adjacent product — pre-release, IP in registration)
│       builder/admin domain: camlin.ai (admin.camlin.ai)
│
└── NuaWorkflow  (application family; its CRM ships as a Camlin Solution)
```

### Rules of the hierarchy

1. **Nuamedia is the maker, Camlin Connect is the product.** Nuamedia appears
   as attribution ("Built by Nuamedia") and on company surfaces (About, legal,
   footer, careers). It never competes with Camlin Connect for hero space on
   product pages.
2. **Sub-brands are never freestanding.** They are always presented inside the
   master brand: *Camlin Connect | Avatar*, never a standalone "Avatar" logo on
   a first-touch surface. On deep pages and app chrome, the sub-brand mark
   alone is fine once the master context is established.
3. **One naming inconsistency to resolve:** the builder surface is called
   **"Architect"** in current site/console copy (e.g. `/connect` page, the
   "architect" schema host) while the sub-brand register calls it **Connect**.
   Both cannot survive. Recommendation: keep **Connect** as the sub-brand
   (matches nav and this package) and treat "Architect" as the name of the
   console *within* Connect ("the Connect Architect console") — or commit to
   Architect everywhere. Decide before rolling out lockups; the lockup file
   `lockup-camlin-connect-connect.svg` is neutral to either outcome.
4. **Biometrics** appears in the site nav with an indigo accent but is not a
   packaged sub-brand in this system. Treat it as a Speech/Contact capability
   page unless it is promoted to a sub-brand later.
5. **AgentLink is quiet.** Until IP registration and release: no promoted
   navigation, no OG images, no social assets. The `/agentlink` page stays
   un-promoted. The mark in this package is for internal decks and the preview
   page only.

---

## 2. The mark: distilling the science motif

### What we learned

The Klein-bottle / Möbius identity experiments (see `MOBIUS_ANIMATION_REDESIGN.md`,
`MOBIUS_EYE_HERO.md`, `TopologyAnchorMark.tsx`, the "Mobius Eye" hero) were the
right *idea* — continuous surfaces, one platform with no seams — executed too
literally: 3D renders, 12-layer animated SVGs, glow filters, and per-product
4D objects (Klein bottle, tesseract, Fibonacci spiral, torus). They were heavy
on the page, illegible at small sizes, impossible to print, and never
stabilised into one recognisable mark.

### The distillation: the Continuum mark

The new master mark keeps exactly one insight from that work: **a Möbius strip,
seen flat, is a loop with one crossing.** The mark is a lemniscate (∞) drawn as
a single continuous stroke with one **over/under crossing** at the centre — the
only remaining trace of the twist.

- It carries the story: *one continuous surface — design it, talk to it, run it
  on every channel* — without rendering topology homework.
- It is flat, single-weight, and legible from 16 px favicon to building signage.
- It inherits the equity of the existing Camlin Connect infinity icon and the
  Nuamedia infinity logo, so the change reads as a refinement, not a rebrand.
- The over/under gap is the family signature. It appears in the master mark,
  the Nuamedia mark, and the AgentLink interlock.

### Construction rules (all marks)

- 96×96 unit grid, 8-unit stroke, round caps and joins.
- The over/under gap = a 17-unit carve under an 8-unit over-stroke
  (≈ 4.5 units of clear space each side of the crossing strand).
- Below 24 px rendered size, use the solid-crossing favicon mark
  (`favicon-mark.svg`) — the gap disappears at that scale anyway.
- Minimum clear space around any mark or lockup: half the mark height.
- Never outline, extrude, rotate to 3D, animate the geometry itself, or apply
  drop shadows. Motion, if any, is a one-time draw-on of the stroke
  (`stroke-dashoffset`), respecting `prefers-reduced-motion`.

### The sub-brand family (final, drafts v7 sign-off; Companion added in v8)

Each sub-brand gets one mark in the **same grammar** (96 grid, 8 stroke, round
caps, flat accent colour):

| Sub-brand | Mark | Accent |
|---|---|---|
| Architect (builder)* | Drafting compass with node hinge sweeping its arc (also reads as a letter "A") | `#0891B2` cyan |
| Avatar | "Embodiment" — one thread in two states: open upper loop descending through the family crossing into a closed lower loop (*avatāra* = descent) | `#9333EA` purple |
| Contact | Spiral (calls routed from the centre out) | `#DB2777` pink |
| Speech | Voice envelope — a soundwave whose amplitude rises and falls like real speech, terminating in signal nodes | `#059669` emerald |
| Insight | Tesseract — the hypercube projected flat, inner cube linked to outer | `#D97706` amber |
| Solutions | Rocket, square silhouette — boxy fuselage, truncated flat nose, and swept angular fins drawn as one strand, with a node window and a loop-tying exhaust thread (launch/deployment) | `#EA580C` orange |
| Companion (embeddable assistant) | "One thread, two figures" — a single stroke travels along and ties two loops side by side, a taller form and a smaller echo beside it (18:13, standing on one ground line): one accompanying the other, drawn by one thread so they are inseparable | `#C026D3` fuchsia |

\* **Naming note:** the builder product is labelled "Connect" in site
navigation and "Architect" in console copy — this naming decision is still
open. Until resolved, the Architect compass is the builder's icon under
whichever label a surface already uses. Do not rename products in copy.

**Chips.** Every sub-brand mark also ships as a "chip" — a shared wrapper
that makes the set read as one product family (like app icons): rounded
square `rx 22` on the 96 grid, 2.5-unit border in the product accent (30 %
opacity light / 35 % dark), accent tint fill (7 % light / 10 % dark), mark
optically scaled and centred. Dark chips recolour mark + wrapper to the
family 400-weight tint (§3.3). Files: `logos/chip-<product>-{light,dark}.svg`;
rebuild with `node branding/logos/build-chips.mjs`.

**Service / industry marks.** The Solutions surfaces (telco, government,
sovereign, transport, professional services, CRM/workflow) carry a middle
identity tier: full thread-mark construction (same grammar as above — one
thread, over/under crossing, node terminals) but **single-accent** like the
feature glyphs, taking the hue of the surface they sit on (`currentColor` in
components). They are surface marks, not products: no chips, no lockups.
Files: `logos/services/service-<name>.svg`; concepts and previews in
`logos/README.md`.

Adjacent marks:

- **Camlin AgentLink** — two separate threads genuinely interlocked (centres
  r√2 apart so the rings cross at 90°, over at one crossing, under at the
  other). Two agents linked — where Camlin Connect is ONE continuous thread.
  Indigo `#6366F1` + cyan `#38BDF8`.
- **Nuamedia** — the **trefoil weave**: one continuous closed thread with
  three alternating woven crossings, styled from the braid feel of the old
  Celtic knot, teal→emerald gradient (`#0D9488` → `#34D399`) honouring the
  teal heritage. The company weaves; the product flows.

Typography and the lockup variant system: `branding/TYPOGRAPHY_AND_LOCKUPS.md`
(Space Grotesk 600 wordmarks, two-tone treatment, arrangement grid A/B/C1/C2
in `logos/lockup-system/` — regenerated with the final marks).

Asset index and usage notes: `branding/logos/README.md`.

### Formal usage rules

Illustrations: `branding/preview/usage-clear-space.png` and
`branding/preview/usage-misuse.png` (mirrored to
`public/assets/brand/usage/` and shown on the design-system logos page).

**Clear space.** Defined in mark-units on the 96 grid: keep **48 units — half
the mark height — free on all sides** of every mark, chip, and lockup. Nothing
enters the zone: no text, no other marks, no taglines, no page edges. At
render size, that is half the rendered mark height.

**Minimum sizes.**

| Asset | Minimum | Below that |
|---|---|---|
| Master / sub-brand mark | 24 px | Use the solid-crossing favicon mark |
| Chip | 24 px | Use the bare mark or favicon mark |
| Horizontal lockup (A/B) | 28 px tall | Use the mark alone |
| Vertical lockup (C1/C2) | 72 px tall | Use a horizontal lockup |
| Nuamedia tagline lockup | 48 px tall (tagline must stay legible) | Use the plain `nuamedia-horizontal` lockup |

**Approved colour pairings.** Only the combinations shipped in the pack:

- Master mark: indigo→cyan gradient on any ground with contrast; mono ink
  `#0F172A` on light; mono white `#FFFFFF` on dark. Never the gradient over
  busy photography.
- Sub-brand marks: the surface primary hex on light (§3.2), the family
  400-weight tint on dark (§3.3). One accent per surface.
- Wordmarks: "Camlin" neutral ink/white; the product word in the accent pair
  from `TYPOGRAPHY_AND_LOCKUPS.md` §2; "nuamedia" always single-tone.
- White-text lockups (`…-white.svg`): pure white wordmark with the mark in
  its own accent — the only approved treatment over photography and coloured
  grounds where the tinted accent word would fail contrast.
- Chips: use the `-light` file on light grounds, `-dark` on dark. Never
  cross them.

**Misuse (never).**

| Misuse | Rule |
|---|---|
| Recoloring | Marks keep their shipped colours — no re-hueing, no matching the mark to campaign colours |
| Outlining / hollowing | The thread is a solid 8-unit stroke; never reduce it to a hairline outline |
| Rotating | Marks and lockups sit level, always |
| Stretching / squashing | Uniform scale only |
| Effects | No drop shadows, glows, bevels, or gradient overrides |
| Wrong chip on wrong ground | Light chip on light ground (or dark on dark) fails contrast — use the paired variant |
| Retypesetting | Never reset wordmarks in another face/weight; use the shipped outlined-path lockups |
| Clear-space violations | Nothing inside the 48-unit zone, including taglines |

---

## 3. Colour

### 3.1 Master brand palette

Extracted from `tailwind.config.js` and `styles/globals.css` — these are the
values already shipping; the brand package canonises them.

| Token | Hex | Source | Use |
|---|---|---|---|
| Brand 500 (primary) | `#6366F1` | `tailwind.config.js` `brand.500`, `--accent-primary` (light) | Master brand, CTAs, links |
| Brand 600 | `#4F46E5` | `brand.600`, `--accent-secondary` (light) | Hover states, secondary accents |
| Brand 400 | `#818CF8` | `brand.400`, `--accent-primary` (dark) | Dark-mode primary |
| Glow cyan | `#38BDF8` | `--accent-glow` | Gradient partner, highlights |
| Warm accent | `#F97316` | `--accent-warm` (light) / `#FB923C` (dark) | Sparing warm counterpoint |
| Ink | `#0F172A` | slate-900 | Monochrome mark, headline text |
| Page (light) | `#F5F7FB` | `--surface-page` light | Light canvas |
| Page (dark) | `#020617` | `--surface-page` dark (slate-950) | Dark canvas |

Full brand scale (`tailwind.config.js`): 50 `#EEF2FF` · 100 `#E0E7FF` ·
200 `#C7D2FE` · 300 `#A5B4FC` · 400 `#818CF8` · 500 `#6366F1` · 600 `#4F46E5` ·
700 `#4338CA` · 800 `#3730A3` · 900 `#312E81`.

**Master gradient:** `#6366F1 → #38BDF8` at ~135°. This is the only gradient
permitted in logo artwork.

### 3.2 Per-surface accent system

The canonical table lives in `components/theme/DesignSystem.tsx`
(`productColors`) and must stay the single source of truth. Hex values:

| Surface | Primary | Secondary | Accent |
|---|---|---|---|
| Connect / builder | `#0891B2` | `#3B82F6` | `#14B8A6` |
| Avatar | `#9333EA` | `#7C3AED` | `#EC4899` |
| Speech | `#059669` | `#0D9488` | `#22C55E` |
| Insight | `#D97706` | `#EA580C` | `#EAB308` |
| Biometrics | `#4F46E5` | `#2563EB` | `#06B6D4` |
| Contact | `#DB2777` | `#E11D48` | `#F87171` |
| Solutions | `#EA580C` | `#D97706` | `#F97316` |
| Companion | `#C026D3` | `#A21CAF` | `#E879F9` |
| Public sector | `#2563EB` | `#0284C7` | `#0891B2` |

Known divergence to fix during rollout: `styles/globals.css` defines a second
per-product set (`--product-*-primary`) at 500-weight hexes (e.g. Avatar
`#8B5CF6`, Contact `#EC4899`, Speech `#10B981`). Treat the table above as
canonical for identity (marks, lockups, text accents) and the CSS variables as
the lighter *tint tier* for backgrounds/glows — or regenerate the CSS
variables from this table so there is one source.

Rules:

- Platform chrome (nav, footer, homepage hero, Contact Sales CTA) always uses
  the master indigo — never a surface accent.
- One accent per page. A page belonging to a surface uses that surface's
  accent for badges, section markers, and its sub-brand mark; everything else
  stays neutral (slate) + master indigo.
- Sub-brand marks are always rendered in their surface **primary** hex, or in
  ink/white monochrome. Never in another surface's colour, and never in the
  master gradient (that is reserved for the master and Nuamedia marks).
- Dark-mode backgrounds tint at ≤ 8% opacity of the surface primary (the
  "soften solutions dark-mode backgrounds" lesson — orange washes read as
  Halloween above that).

### 3.3 Accessibility

Text on light surfaces uses the 600-weight hex or darker of any accent
(all surface primaries above pass 4.5:1 on `#FFFFFF` except Insight amber
`#D97706`, which is 3.5:1 — use it for large text/graphics only, or drop to
`#B45309` for body-size text). On dark `#020617`, use the 400-weight tints.

---

## 4. Typography

Already shipping via `config/fonts.ts` (next/font); the brand package adopts it:

| Role | Face | Usage |
|---|---|---|
| Display / wordmarks | **Space Grotesk** (600) | Headlines, logo lockups, hero copy |
| UI & body | **Inter** | Everything else |
| Mono | **Fira Code** | Code, API examples, terminal proof |

Rules:

- Wordmarks are Space Grotesk SemiBold with -0.5 px tracking at 34 px
  reference size. The SVG lockups use live `<text>` for editability — convert
  to outlines before using anywhere the webfont cannot load (email signatures,
  documents, third-party embeds).
- The "eyebrow" line in sub-brand lockups ("CAMLIN CONNECT") is Inter 600,
  ~13/32 ratio to the sub-brand name, +3 px tracking, slate `#64748B`.
- Never set the brand names in gradient text. Colour belongs to the mark.

Naming orthography: **Camlin Connect** (two words), **Camlin AgentLink**
(camel-case L), **Nuamedia** (one word, capital N; lowercase in the wordmark
only), **NuaWorkflow** (capital W — settled in the July naming pass).

---

## 5. Voice and tone

Distilled from the copy direction that survived contact with the site
(the "no AI talk" passes of March–July 2026):

1. **Demo-led, claim-light.** Lead with something the visitor can do right
   now: call the live avatar receptionist line, run the speech demo, watch the
   15-second clip. State the world-first claim once, then show mechanics.
2. **Concrete product nouns.** Blueprint, Interactions, live mode, agent
   meetings, visual IVR, voice-call sync. Never invent abstractions
   ("premier surface", "moments", "freeze/crystallize").
3. **Honest status.** Shipped things are shown; unshipped things are absent or
   carry an explicit status chip. No "coming soon" theatre.
4. **Sovereignty without name-dropping.** Say private, air-gapped,
   bring-your-own-model, containerised. Don't say Defence, don't cite
   clearances, don't say "multicultural" name recognition.
5. **Plain sentences.** If a paragraph could appear in any AI vendor's
   deck, rewrite it around what Camlin actually does.

Tagline register (from `config/site.ts`, keep):
*"Build the service. Talk to it. Run it everywhere."*

---

## 6. Carrying the science motif forward

Where the science theme lives now:

| Layer | Treatment |
|---|---|
| Logo system | The over/under crossing — the entire Möbius story in one gesture |
| Iconography | Single-stroke geometric marks; the tesseract, spiral, and torus survive as flattened line drawings |
| Backgrounds | Quiet: faint geodesic/contour line patterns at ≤ 6% opacity, static. No animated Möbius fields |
| Motion | One idea: the continuous stroke drawing itself on (hero load, section reveal). Never looping 3D |
| Copy | The motif is implicit ("one continuous platform"), never explained ("like a Klein bottle, our…") |

What is retired: `MobiusEyeHero`-style layered animations, animated
`MobiusBackground` at high density, 3D Klein-bottle renders
(`large-klien-transparent.png`), the "Celtic" logo variants, per-product 4D
glow objects as *logos* (they may survive as illustration inside product
pages, but they are not identity).

---

## 7. Domain and lockup map

| Surface | Lockup | Notes |
|---|---|---|
| nuamedia.com.au / .com header | Master lockup (`camlin-connect-lockup-horizontal[-white].svg`) | Nuamedia wordmark goes to the footer ("Built by Nuamedia") |
| Product pages (/avatar, /speech, …) | Sub-brand lockup in hero or breadcrumb; master lockup stays in nav | |
| camlinconnect.com.au app + tenant subdomains (acme.camlinconnect.com.au) | Master mark + tenant name | |
| avatar.camlinconnect.com.au and other promotion subdomains | Sub-brand lockup (`lockup-camlin-connect-avatar.svg`), favicon = sub-brand mark in accent | Promotion sites are sub-brand-first, master-attributed |
| admin.camlin.ai | Master mark, monochrome white, no lockup | Utility surface |
| AgentLink preview page | `camlin-agentlink-lockup.svg` only | Not before IP clearance |

---

## 8. File index

- `branding/logos/` — all SVG masters (see `branding/logos/README.md`)
- `branding/ICON_AUDIT.md` — inventory of current off-brand assets and where they are referenced
- `branding/REPLACEMENT_PLAN.md` — phased rollout plan
- `branding/export-brand-pack.mjs` — regenerates the public downloadable pack
  at `public/brand-pack/` (SVG + transparent PNG at 1x/2x/512/1024 for every
  mark/chip/lockup, these guidelines, a sha256 `manifest.json`, and the
  `nuamedia-brand-pack.zip` served from `/media`). Re-run it after any change
  to `logos/` or `logos/lockup-system/` and commit the output.

---

## 9. Distribution

This directory is the **design source of truth** for every Camlin surface,
including the product apps in the `camlin-nextgen` monorepo. The monorepo
carries a synced copy at `packages/brand-assets/` (canonical SVGs, the
feature-icon components, app favicons, and a hashed manifest).

To propagate changes made here, run **from the monorepo root**:

```bash
node scripts/sync-brand-assets.mjs        # copies branding/logos + FeatureIcons
node scripts/generate-brand-og.mjs        # regenerates the portal OG images
```

The sync script expects this repo as a sibling checkout
(`../nua-dot-com-nextui`) or via the `BRAND_SOURCE` env var, and records the
source commit hash in `packages/brand-assets/manifest.json`. Never edit the
monorepo copies by hand — fix the asset here and re-sync. App logo components
that inline mark geometry (builder `ArchitectLogo`, admin `BrandLogo`, the
portal `brand.tsx` files) must be updated to match whenever a mark changes;
the manifest diff shows which marks moved.
