# Capex Check — Brand Guide
### "Highlight" — warm ledger, one orange mark on the money nobody saw

**Created:** 2026-06-26 · **Status:** v0.1 DRAFT (extracted from live capextax.com, then elevated)
**Source of truth for:** the video engine (`brand.ts`), social assets, any Capex Check creative.

---

## 0. The idea in one line

Capextax.com already owns a **warm editorial** look — cream paper, charcoal serif headlines, a
single orange accent. We keep that DNA and give the orange a *job*: it is the **highlighter** that
marks the hidden money — the unclaimed allowance, the number on the invoice nobody circled. One
orange mark per view. Everything else is calm, document-like, trustworthy. That ties the brand
directly to the campaign idea: *you don't know what you don't know — here's the bit you missed.*

---

## 1. Name & architecture  ⚠️ decision flag

| Layer | Name | Where it shows |
|-------|------|----------------|
| **Firm** | **CapEx Associates** | The logo lockup (`capex-logo.png`), legal/HMRC-facing work |
| **Product / marketing brand** | **Capex Check** | The website, the checker, all the messaging, "Book a Demo" |

The current logo says *CapEx Associates*; everything customer-facing says *Capex Check*. **Default
for this content system: lead with "Capex Check"** (the product people are asked to use), with
CapEx Associates as the firm behind it. **Confirm with Shane** which name carries the social/video
brand before we lock lockups.

---

## 2. Logo

**Primary lockup** (`source-assets/capex-logo.png`, 985×423):
- Charcoal-grey wordmark **"CapEx"**, with the **"x" formed by an orange chevron** + a charcoal
  chevron — the signature device.
- A **descending orange + grey pixel-grid** off the top-right — the "data / uncovering" motif.
- **"Associates"** set below in grey, uppercase, letter-spaced.

**Icon / monogram — the data-cluster** (`source-assets/icon-pixelgrid.svg`, PNGs at 32/64/180/512):
the **pixel-grid** lifted straight from the logo's "x" — a quincunx of squares, orange on the
TL–BR diagonal, grey elsewhere. This is the favicon / app icon / avatar. Reads cleanly down to
32px on light or dark. (Supersedes the old favicon "peak" mark.)

**Signature elements we keep (the "equity"):**
1. **Orange chevron** — reuse as an accent device (highlight, arrow-in, the "x").
2. **Pixel-grid descent** — the "revealing hidden data" motif; use sparingly as texture.

**Elevation notes (to produce in build):** clean vector lockups in 4 forms — primary (charcoal
on paper), reverse (white on ink), mono-ink, mono-paper — plus an **orange monogram** variant of
the peak mark. The existing PNG is the reference, not the final art.

**Usage**
- ✅ Clear space = height of the "C" all around. Min wordmark width 120px.
- ❌ Don't recolour the wordmark, stretch it, add shadows, or place the charcoal version on a dark
  field (use reverse).

---

## 3. Colour palette (extracted → roled)

Lifted verbatim from the live site's CSS variables, then assigned brand roles.

### Core
| Role | Name | Hex | Use |
|------|------|-----|-----|
| **Accent (the highlighter)** | Highlight Orange | `#F4892F` | The ONE mark per view — CTA, the highlight, the chevron, the number that matters |
| Accent pressed | Highlight Deep | `#D4711A` | Hover / pressed / underline shadow |
| **Primary text** | Ledger Ink | `#1A1A1A` | Body copy, wordmark on light |
| Dark field | True Black | `#0D0D0D` | Dark sections, video ink backgrounds (`#111` = lift) |
| Muted text | Graphite | `#6B7280` | Secondary text, captions, the "Associates" grey |
| **Warm background** | Paper Cream | `#F5F0EB` | The default "document" surface |
| Cool background | Sage Mist | `#F0F2ED` | Alternate section background |
| Card / raised | White | `#FFFFFF` | Cards, inputs, raised panels |
| Border (light) | Hairline | `#E5E7EB` | Dividers on light |
| Border (dark) | Hairline Dark | `#2A2A2A` | Dividers on dark |

### Functional (keep from site, use only for system states)
| Success `#10B981` · Warning `#F59E0B` · Error `#EF4444` |

**The one rule:** Highlight Orange is precious. **One orange thing per frame / per fold** — it
marks the hidden money. If everything's orange, nothing is highlighted.

---

## 4. Typography

| Role | Typeface | Weights | Notes |
|------|----------|---------|-------|
| **Display / headline** | **Playfair Display** (serif) | 600 / 700, **italic for emphasis** | The brand signature: set the *key phrase* in italic, like the site H1 ("*Find Unclaimed Capital Allowances in 2 Minutes*"). |
| **Body / UI** | **Inter** | 400 / 500 / 600 / 700 | Clean, readable, the FT-explainer workhorse |
| **Label / eyebrow** | **SF Mono** → mono stack | 500 / 600 | UPPERCASE, tracked +0.08–0.16em, for eyebrows & data labels |

**Type scale (semantic tokens, responsive `clamp()` from the live site):**
```
display-xl   clamp(2.25rem, 4.5vw, 3.5rem)   Playfair 700
display-lg   clamp(2rem,   4vw,   3rem)       Playfair 700
headline     clamp(1.75rem, 3.5vw, 2.5rem)    Playfair 600
subhead      1.5rem                           Inter 600
body-lg      1.125–1.25rem                    Inter 400/500
body         1rem                             Inter 400
caption      0.875rem                         Inter 500
xs / label   0.8125rem                        Mono 600, uppercase
```

**Signature move:** Playfair headline + the key phrase marked with a **chunky orange highlighter
block** (ink text on the marker). That's the visual hook on every key asset.

---

## 5. Geometry, depth & spacing (from site)

- **Radius:** sm `8px` · md `16px` · lg `24px` · pill `100px`
- **Shadow:** sm `0 1px 2px #0000000d` · md `0 4px 12px #00000014` · lg `0 12px 32px #0000001f` ·
  xl `0 24px 48px #0000002e`
- **Spacing scale:** 4 / 8 / 16 / 32 / 64 · section `128px` · container `1280px`
- **Ease:** `cubic-bezier(.4, 0, .2, 1)`, 0.15s base

---

## 6. The "Highlight" visual device

The thing that makes Capex Check feel like *itself* and not a generic accountancy brand:

- A calm document (cream/white, charcoal serif) with **one element highlighted in orange** — as
  if someone took a highlighter to the line on a tax return everyone else skimmed past.
- The signature: a **chunky orange highlighter block** marking the key phrase (ink text on the
  marker), the **square eyebrow tick** and **pixel-grid (data-cluster)** accent, all on a **flat
  ink field** (no glow), **left-aligned** "ledger" comps.
- In motion (video): the key phrase is hidden ink on the dark field, then an **orange highlighter
  sweeps across and reveals it** as the voice lands. The reveal = the brand. *(Deliberately NOT
  the thin hand-drawn underline used by aisearch.marketing — see the differentiation note below.)*

---

## 7. Voice & tone (carries from the messaging plan)

- **Curiosity-gap first.** Open a loop ("that counts? I have that"), resolve with *find out if you
  qualify*. Awareness > stats.
- **Technical-but-readable**, FT-Explainer. Plain, precise, a little dry. Confident, never hypey.
- **Outcome / relief leads**; the software is named second.
- **Accuracy is the brand.** It's a tax product — every claim must be true. See the guardrails in
  `brand-video-social-plan.md` §5 (no "overpaid tax / refund", no "the building qualifies", no
  "only new builds", no "must own it", tenants-can-claim-their-own-spend, etc.).
- **No AI tells:** strip em-dashes, hedge openers, "isn't X it's Y" patterns before shipping.

---

## 8. Do / Don't

| ✅ Do | ❌ Don't |
|------|---------|
| Cream/white calm surfaces, charcoal serif headlines | Fill the page with orange |
| One orange highlight = the hidden money | Use orange as a generic "brand colour" everywhere |
| Italic emphasis on the key phrase | Make every word a headline |
| Concrete £ numbers, real outcomes | Round, vague, hypey claims |
| FT-explainer calm | Salesy, exclamation-heavy, emoji-decorated |

---

## 9. Applications in this system
- **Video** (`brand/video/`, Phase 1): charcoal/cream shell, Playfair headline + italic phrase +
  orange highlight draw-on, mono eyebrow, one orange mark per scene, ElevenLabs UK voice.
- **Social** (`content/linkedin/`, Phase 2): post images use the same headline-+-highlight device.
- **Web**: already live — this kit just makes everything else match it.

---

## 10. Provenance / source assets
- `source-assets/capex-logo.png` — live primary lockup (CapEx Associates)
- `source-assets/favicon.svg` — live vector peak monogram
- `source-assets/capex-index.css`, `capex-about.css` — the CSS the palette/type/scale were lifted from
- Tokens mirrored in machine-readable form in **`brand.ts`** (for the video engine)

**Still wanted from Shane:** vector/hi-res master logo, confirmation of the Capex Check vs CapEx
Associates naming for content, and any existing brand guide so we elevate the real thing.