# 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--{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-.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 `` 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.