Brand assets
Everything you need to put the TJ Design mark on something — logo files, the exact colours, and the rules that keep it looking like us. Free to use for anyone working with us: printers, sign writers, suppliers, directories and press. No permission needed.
Four lockups, one mark
Pick by background, not by preference. SVG every time if whatever you're using accepts it — it stays sharp at any size, from a business card to a truck. PNG is the fallback for software that won't take SVG.
Primary — horizontal
The default. Transparent background, light marks. Use it on black, on dark photography, or on any dark surface. Don't put it on white — it vanishes.
tj-design-logo-horizontal
Light background — horizontal
Same geometry, inverted. For white or off-white: letterheads, invoices, printed documents, anything on paper. Use this rather than trying to recolour the primary yourself.
tj-design-logo-horizontal-light
Panelled — horizontal
The primary with its own black panel baked in, so it holds up anywhere — a busy photo, a coloured page, a supplier's template you can't control. This is also the file Google reads as our logo in search results.
tj-design-logo-horizontal-dark
Square — profile & avatar
Stacked lockup on a square. Use for any profile picture: Google Business, Facebook, Instagram, LinkedIn, app icons. Works down to about 48px before the bottom line stops being legible.
tj-design-profile
Give it room
Keep clear space around the logo equal to the height of the tall bar — the bone-coloured one. Nothing sits inside that margin: no type, no rules, no edge of a photo.
| Minimum width, screen | 120 px |
| Minimum width, print | 30 mm |
| Minimum size, square mark | 48 px |
| Clear space, all sides | Height of the tall bar |
Below the minimum the KĀPITI COAST · NZ line stops being readable and starts looking like a smudge. If you need it smaller than that, use the square mark instead, or the two bars on their own.
Do and don't
Do
- Use SVG wherever it's accepted
- Match the lockup to the background — dark, light or panelled
- Scale it proportionally, from the corner
- Put a scrim behind it if it has to sit on busy photography
- Ask us if you need a format that isn't here — EPS, PDF, one-colour, embroidery
Don't
- Recolour it, including making it all-white or all-black yourself
- Stretch, squash, rotate or skew it
- Add shadows, outlines, glows or gradients
- Rebuild the wordmark in a different font
- Move the bars, or separate them from the type
- Put the transparent version on a light background
Six colours, and one of them is the point
Near-black and bone do almost all the work. Lime is the accent and it only ever marks one thing at a time — the live link, the primary button, the thing you're meant to look at. The moment it's on two things it stops meaning anything.
One hard rule: never put lime type on paper. It measures 1.06:1 — for practical purposes it's invisible, and it fails accessibility by a mile. On light backgrounds the accent can be a block of colour behind dark type, never the type itself.
Helvetica, and nothing to download
There is no webfont. The stack is
'Helvetica Neue', Helvetica, Arial, sans-serif —
already on every machine, so nothing loads and nothing shifts. That's a deliberate
choice, and a large part of why the site opens in under a second.
| Role | Weight | Treatment |
|---|---|---|
| Headlines & wordmark | 900 | Tight tracking, about −0.03em. Big, heavy, close. |
| Body | 400 | Normal tracking, line-height around 1.7. |
| Small labels | 700 | Uppercase, wide tracking 0.16–0.2em, in grey. |
| Logo subtitle | 300 | Uppercase, very wide tracking. KĀPITI COAST · NZ |
Note the macron on Kāpiti. It is part of the spelling, not an accent you can drop — please keep it in print and in any directory listing.
The whole set
Including the bits that aren't logos — the favicon and the social share image.
| File | Size | What it's for |
|---|---|---|
tj-design-logo-horizontal.svg | 940×260 | Primary, dark backgrounds |
tj-design-logo-horizontal.png | 2820×780 | Same, where SVG isn't accepted |
tj-design-logo-horizontal-light.svg | 940×260 | Light backgrounds, print on paper |
tj-design-logo-horizontal-dark.svg | 940×300 | Panelled, any background |
tj-design-logo-horizontal-dark.png | 2820×900 | Same. Also the Schema.org logo Google reads |
tj-design-profile.svg | 1024×1024 | Square avatar, every platform |
tj-design-profile.png | 2048×2048 | Same, for platforms wanting a raster |
tj-design-facebook-cover.svg | 1640×624 | Facebook cover photo |
tj-design-facebook-cover.png | 3280×1248 | Same at 2× — 552 KB, Facebook re-compresses it |
favicon.svg | 32×32 | Browser tab icon — the two bars alone |
og-image.png | 1200×630 | Preview card when a link is shared |
Download everything (ZIP) All eleven files plus a plain-text summary of these rules.
In writing
| Correct | TJ Design — two capitals, a space, then Design with a capital D |
| Not | TJDesign · tj design · T.J. Design · TJ DESIGN in running text |
| Location | Kāpiti Coast, New Zealand — with the macron |
| Website | tjdesign.co.nz |
| One-liner | A web design studio on the Kāpiti Coast, building custom websites for New Zealand businesses. |