# Tera Brand Kit

A complete set of brand collateral for Tera Compute Inc. The brand is intentionally minimal: pure typography (Inter Extrabold), pure black + pure paper, no accent color.

## Related brand docs

This file documents the **visual collateral kit**. The full Tera brand system also includes:

| Doc | Covers |
|---|---|
| [`../../BRAND-GUIDELINES.md`](../../BRAND-GUIDELINES.md) | **Canonical entry point** — identity, voice, visual tokens, logo system, applications, all in one place |
| [`../../tera-brand-voice.md`](../../tera-brand-voice.md) | Voice, tone, word lists, "receipts" pattern, social playbook |
| [`../../STYLEGUIDE.md`](../../STYLEGUIDE.md) | Visual style guide (color palette §3, typography §4, forbidden §10 — all universal Tera tokens; §5–§9 are /fund-1 specific) |
| [`./BRAND.md`](./BRAND.md) (this file) | Logo / icon / wordmark / lockup / social cards / favicon usage |

Start with `BRAND-GUIDELINES.md` for the full picture; the other three are deep-dive references.

---

## Quickstart — LinkedIn upload

**Personal profile / company page logo** → upload `mark/tera-icon-black-400.png`
- 400×400 PNG, black rounded square, white "T"
- LinkedIn masks personal photos to a circle — the centered T stays clean inside the mask
- For company pages, the rounded square reads as-is

**Personal LinkedIn cover banner** → upload `social/tera-linkedin-cover-1584x396.png`
- 1584×396, paper bg, wordmark + tagline + brand pillars

**X / Twitter avatar** → `mark/tera-icon-black-400.png` (same square)
**X / Twitter header** → `social/tera-twitter-header-1500x500.png`

---

## Directory map

```
public/brand/
├── BRAND.md                         (this file)
├── mark/                            primary mark (T in rounded square)
│   ├── tera-icon-black.svg          vector master, black bg + white T
│   ├── tera-icon-white.svg          vector master, paper bg + black T
│   ├── tera-icon-black-{256,400,512,800,1024}.png
│   └── tera-icon-white-{256,400,512,800,1024}.png
├── wordmark/                        text mark ("Tera")
│   ├── tera-wordmark-black.svg
│   ├── tera-wordmark-white.svg
│   ├── tera-wordmark-black-{600,1200}.png
│   └── tera-wordmark-white-{600,1200}.png
├── lockup/                          icon + wordmark, horizontal
│   ├── tera-lockup-black.svg
│   ├── tera-lockup-white.svg
│   ├── tera-lockup-black-{800,1600}.png
│   └── tera-lockup-white-{800,1600}.png
├── social/
│   ├── tera-linkedin-cover-1584x396.png    LinkedIn personal banner
│   └── tera-twitter-header-1500x500.png    X / Twitter banner
└── favicon/
    └── tera-favicon-{32,180,192,512}.png   browser tab / PWA / Apple touch
```

In addition, `src/app/icon.png` and `src/app/apple-icon.png` are installed via the Next.js 16 file convention so `tera.gw` serves the new favicon automatically.

---

## Design tokens

### Color palette (Tera Brand — same as STYLEGUIDE.md §3)

| Token | Hex | Use |
|---|---|---|
| `--paper` | `#faf9f7` | All light backgrounds. Never use pure `#ffffff`. |
| `--ink` | `#111111` | Primary text, icons, dark backgrounds, CTA. Never use pure `#000000`. |
| `--ink-soft` | `#555555` | Secondary body text. |
| `--ink-muted` | `#777777` | Tertiary text, captions. |
| `--ink-subtle` | `#999999` | Eyebrow labels, gray accents. |

No accent color. No teal, no copper, no green, no gold. The brand is intentionally restrained.

### Typography

| Use | Font | Weight | Notes |
|---|---|---|---|
| Wordmark + display | Inter | 800 (Extrabold) | Tight letter-spacing: `-10px` at 240px size, scales proportionally |
| Body | Inter | 400 / 500 | line-height 1.7 |
| Eyebrow / caption | Inter | 600 | UPPERCASE, letter-spacing `1.5-2px` |

Inter is loaded via Google Fonts (`https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap`).

### Icon construction

- Canvas: 1:1 square, 1024 master
- Corner radius: 17.6% of side (180/1024) — gives a modern "app icon" feel without being aggressively rounded
- Mark: bold capital "T" in Inter 800, 70% of canvas height, optically centered (slight bottom-bias to account for Inter's metrics)
- Contrast: paper "T" on ink square (primary) or ink "T" on paper square (inverse)

---

## Usage rules

✅ **Do**
- Use the black icon (paper T on ink square) on light backgrounds — it's the primary mark
- Use the white icon (ink T on paper square) only when forced onto a dark background
- Keep clear space around the mark equal to at least the corner radius (≈18% of the icon's side)
- Pair the mark with Inter for any adjacent text — never with serif, condensed, or display fonts

❌ **Do not**
- Recolor the mark — no green, no teal, no gradient
- Add effects (shadows, glows, bevels, embosses)
- Rotate or skew the mark
- Stretch non-proportionally
- Place the mark on photography or busy backgrounds — use one of the social compositions instead

---

## File format guide

| Use case | Recommended file |
|---|---|
| LinkedIn profile / company logo | `mark/tera-icon-black-400.png` |
| LinkedIn personal banner | `social/tera-linkedin-cover-1584x396.png` |
| X / Twitter avatar | `mark/tera-icon-black-400.png` |
| X / Twitter header | `social/tera-twitter-header-1500x500.png` |
| Slack / Discord workspace icon | `mark/tera-icon-black-512.png` |
| Email signature (image) | `lockup/tera-lockup-black-800.png` |
| Slide deck / Keynote | `lockup/tera-lockup-black.svg` (vector, scales infinitely) |
| Print / large-format | any `.svg` from above |
| Browser favicon | already installed via `src/app/icon.png` |
| Mobile home screen | already installed via `src/app/apple-icon.png` |

---

## Regenerating the kit

The brand assets are generated by HTML templates in `/tmp/brand-render/` rendered to PNG via Chrome headless. If you change a template or want to add a size, the render command pattern is:

```bash
CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
"$CHROME" --headless=new --disable-gpu --hide-scrollbars --no-sandbox \
  --default-background-color=00000000 --virtual-time-budget=4000 \
  --window-size=1024,1024 \
  --screenshot=public/brand/mark/tera-icon-black-1024.png \
  "file:///tmp/brand-render/icon-black.html"

# Then downscale with macOS sips:
sips -Z 400 public/brand/mark/tera-icon-black-1024.png \
  --out public/brand/mark/tera-icon-black-400.png
```

SVG masters live in `public/brand/{mark,wordmark,lockup}/*.svg` — edit those directly for vector use; they import Inter via Google Fonts so they render correctly in any browser-based viewer (Figma, Sketch, web).