# Wordmark typography and the lockup variant system

**Version 1.0 — August 2026.** Companion to `BRAND_GUIDELINES.md` (sections 2–4).
Assets live in `branding/logos/lockup-system/`; previews in
`branding/preview/lockup-system-*.png`.

---

## 1. The wordmark font

**Space Grotesk SemiBold (600) is the official wordmark face for every brand
wordmark** — "Camlin Connect", the six sub-brands ("Camlin Avatar", "Camlin
Speech", …), "Camlin AgentLink", and "nuamedia".

Why Space Grotesk and not an alternative:

- **It already ships.** `config/fonts.ts` loads it via `next/font/google` as
  the site's display face (`--font-display`); every headline on the site is
  already set in it, so the wordmark and the page speak one voice.
- **Freely licensable.** SIL Open Font License 1.1 — embedding, outlining, and
  redistribution in logo artwork are all permitted.
- **Formally right.** A geometric grotesque with slightly squared round forms;
  its curves sit naturally beside the round-cap, single-stroke mark family
  without the sterility of a pure geometric (e.g. Futura) or the blandness of
  a neutral grotesque (e.g. Helvetica).

### Usage rules

| Property | Value |
|---|---|
| Face / weight | Space Grotesk **SemiBold 600** — never Light/Regular/Bold, never italic |
| Tracking | **-0.0147 em** (= -0.5 px at the 34 px reference size), all sizes |
| Kerning / ligatures | Font kerning on, standard ligatures on |
| Case — products | Title case, each word capitalised: **Camlin Connect**, **Camlin Avatar**, **Camlin AgentLink** (camel-case L) |
| Case — company | **nuamedia** all-lowercase *in the wordmark only*; "Nuamedia" (capital N) in running text |
| Never | All-caps wordmarks, gradient text, outlined/stroked text, letter-spacing tweaks per lockup |

**Outlined paths, not live text.** Every SVG in `lockup-system/` carries the
wordmark as outlined vector paths generated from the Space Grotesk 600 font
file. They render identically in any context — email, PDF, third-party embeds,
build pipelines without the webfont. (This fixes the known weakness of the
older lockups, which used live `<text>` and fell back to a system font
wherever Space Grotesk wasn't installed.) For editable text, set it live in
Space Grotesk 600 with the tracking above and re-outline before shipping.

Regenerate the whole set with (`opentype.js` and `@fontsource/space-grotesk`
are devDependencies):

```
node branding/logos/lockup-system/build.mjs
node branding/preview/render-lockup-system.mjs
node branding/export-brand-pack.mjs        # refresh the public download pack
```

---

## 2. Two-tone wordmark treatment

Compound product names split into two tones: **"Camlin" carries the neutral
text colour of the surface; the product word carries the accent.** The mark
keeps its own colour (master gradient or sub-brand accent) on both surfaces.

### Colour pairings

| Wordmark | Light surface (`#FFFFFF` / `#F5F7FB`) | Dark surface (`#020617`) |
|---|---|---|
| Camlin **Connect** (master) | Camlin `#0F172A` ink · Connect `#4F46E5` Brand 600 | Camlin `#FFFFFF` · Connect `#38BDF8` glow cyan |
| Camlin **Avatar** | Camlin `#0F172A` · Avatar `#9333EA` | Camlin `#FFFFFF` · Avatar `#C084FC` |
| Camlin **Speech** | Camlin `#0F172A` · Speech `#059669` | Camlin `#FFFFFF` · Speech `#34D399` |
| nuamedia | `#0F172A` single tone | `#FFFFFF` single tone |

### Rules

1. **"Camlin" is always neutral** — ink `#0F172A` on light, white `#FFFFFF`
   on dark. It never takes an accent.
2. **The product word takes the product's accent** — the surface **primary**
   hex (the canonical `productColors` table in
   `components/theme/DesignSystem.tsx` / `BRAND_GUIDELINES.md` §3.2) on light
   surfaces, and the **400-weight tint of the same family** on dark surfaces
   (the §3.3 accessibility rule). For the master brand the "product word" is
   Connect: Brand 600 `#4F46E5` on light (Brand 500 `#6366F1` is acceptable at
   display sizes; 600 is the default for contrast), glow cyan `#38BDF8` on dark.
3. **Remaining sub-brand pairings**, same derivation (light = surface primary,
   dark = family 400 tint): Connect-builder `#0891B2`/`#22D3EE`, Contact
   `#DB2777`/`#F472B6`, Insight `#D97706`/`#FBBF24` *(large text only on
   light — see §3.3)*, Solutions `#EA580C`/`#FB923C`, Companion
   `#C026D3`/`#E879F9`.
4. **One-word wordmarks stay single-tone.** "nuamedia" is one word; splitting
   it ("nua"+"media") would be a typographic fault line, and its mark already
   carries the teal→emerald colour. Ink on light, white on dark.
5. **Flat colour only.** The two tones are solid fills; gradients remain
   exclusive to the marks (BRAND_GUIDELINES §4).
6. **Monochrome fallback.** Single-colour contexts (engraving, fax, embossing)
   set the whole wordmark in ink or white; the two-tone split simply collapses.

---

## 3. The lockup variant grid

Four arrangements, each in light + dark. All are built on the mark's native
96-unit grid; coordinates below are in those units.

| | Arrangement | Use |
|---|---|---|
| **A** | Horizontal, single line — mark left, "Camlin Connect" on one line | Site header/footer, docs, email signatures. The default. |
| **B** | Horizontal, stacked words — mark left, "Camlin" over "Connect" | Narrow headers, app chrome, badges, favicons-with-name; the compact workhorse. |
| **C1** | Vertical, single line — mark on top, wordmark centred below | Splash screens, hero centrepieces |
| **C2** | Vertical, stacked words — mark on top, two centred lines below | Square placements, app-store tiles, avatars |

### Construction rules

- **Mark size**: the mark always sits on its 96×96 grid, unscaled relative to
  the layout units below.
- **Mark-to-text gap (horizontal A/B)**: wordmark left edge at **x = 110**
  (the mark has ~8 units internal margin, so the optical gap mark-stroke →
  text is ≈ 26 units, a bit more than half the mark's visual height).
- **Type sizes** (per 96-unit mark): single-line horizontal **34**; stacked
  words **30** per line; vertical single-line **27**; vertical stacked **27**.
- **Vertical centring**: single-line wordmarks centre their **cap-height band**
  on the mark's optical centre (y = 48). The lowercase "nuamedia" centres its
  **x-height band** instead. Stacked blocks centre the whole two-line block
  (cap top of line 1 → baseline of line 2) on y = 48.
- **Leading (stacked words)**: baseline-to-baseline = **1.16 em**.
- **Vertical lockups**: wordmark cap top sits 14 units below the mark's
  96-box; everything centred on the mark's vertical axis.
- **Clear space**: half the mark height (48 units) on all sides — same rule
  as the marks (BRAND_GUIDELINES §2).
- **Minimum sizes**: horizontal lockups ≥ **28 px** tall; vertical lockups
  ≥ **72 px** tall. Below that, use the mark alone; below 24 px, the solid-
  crossing favicon mark.
- **Never**: re-colour the mark to match the text, swap arrangement
  proportions, set the wordmark in another weight, or add taglines inside the
  lockup's clear space.

### Sub-brand pattern

Arrangements A and B are built for **all seven products** — Architect,
Avatar, Contact, Speech, Insight, Solutions, Companion — plus the adjacent
**Camlin AgentLink** (internal set only until IP clearance; excluded from the
public brand pack), each with the final canonical marks and the colour
pairings in §2 (Companion = fuchsia `#C026D3`/`#E879F9`, AgentLink = master
indigo `#6366F1`/`#818CF8`).

These "Camlin + product" lockups are a *second register* alongside the
existing eyebrow lockups (`lockup-camlin-connect-avatar.svg`, "CAMLIN CONNECT"
over the product name): use the eyebrow style where the full master brand must
be spelled out (first-touch marketing surfaces), and the two-tone "Camlin
Avatar" style where a compact product identity is wanted (app chrome, docs,
promotion-subdomain headers).

### Nuamedia

`nuamedia-horizontal-{light,dark}.svg` follows arrangement A with the trefoil
weave mark (`nuamedia-mark.svg`), lowercase single-tone wordmark, x-height
centring. Footer, About, legal surfaces.

**Dual-text lockup** `nuamedia-tagline-horizontal-{light,dark,white}.svg`
formalizes the live footer treatment: the wordmark over the company tagline
split onto two lines — **"ENGINEERING THE FUTURE" / "OF CUSTOMER
INTERACTION"** — Space Grotesk Medium 500, +0.24 em tracking, 1.5 em leading,
muted tone (`#475569` light / `#94A3B8` dark / white in the white-text
treatment). The tagline is left-aligned with the wordmark and auto-sized so
its longest line exactly matches the wordmark width (tucked under, never
wider); the three-line block is centred on the mark's optical centre. Use
where the company needs a self-explanatory signature (press, partner decks,
legal footers); minimum height 48 px, else drop to the plain horizontal
lockup. Wording follows the live site footer ("interaction", singular).

---

## 4. File inventory — `branding/logos/lockup-system/`

All generated by `build.mjs` (do not hand-edit the SVGs; edit the script and
re-run). Every wordmark is outlined paths; every file has uniquely-prefixed
internal IDs and can be inlined into a single HTML document without
collisions.

Every arrangement ships in **three fill treatments**:

- `…-light.svg` — ink neutral + surface-primary accent word, for light grounds
- `…-dark.svg` — white neutral + family-400-tint accent word, for dark UI
  surfaces
- `…-white.svg` — pure white wordmark (both words; the mark keeps its own
  accent), for photography and coloured grounds where the tinted accent word
  would vanish

| File (`…-light.svg` / `…-dark.svg` / `…-white.svg`) | Arrangement |
|---|---|
| `camlin-connect-horizontal-*` | A — master, single line |
| `camlin-connect-horizontal-stacked-*` | B — master, stacked words |
| `camlin-connect-vertical-*` | C1 — master, vertical single line |
| `camlin-connect-vertical-stacked-*` | C2 — master, vertical stacked |
| `camlin-<product>-horizontal-*` | A — each of the seven products |
| `camlin-<product>-horizontal-stacked-*` | B — each of the seven products |
| `camlin-agentlink-horizontal[-stacked]-*` | A/B — adjacent brand, internal only |
| `nuamedia-horizontal-*` | A — company, single-tone lowercase |
| `nuamedia-tagline-horizontal-*` | A + tagline — company dual-text |

66 files total (22 arrangements × 3 treatments). Previews (render with
`node branding/preview/render-lockup-system.mjs` from the repo root):

- `branding/preview/lockup-system-grid.png` — all four master arrangements,
  light and dark
- `branding/preview/lockup-system-subbrands.png` — the seven product
  horizontal lockups + AgentLink, light and dark
- `branding/preview/lockup-system-subbrands-stacked.png` — the stacked-word
  variants
- `branding/preview/lockup-system-nuamedia.png` — company lockups including
  the dual-text tagline variant and the white-text treatments
- `branding/preview/lockup-system-white.png` — white-text treatments on a
  coloured ground (their intended use)

The public distribution of this matrix (SVG + transparent PNG at
1x/2x/512/1024, sha256 manifest, zip) is generated by
`node branding/export-brand-pack.mjs` into `public/brand-pack/` and served
from `/media`.
