branding

# PipRail branding — brand system, assets & site

The site is **`site/` — Astro 5 + Tailwind v4, static-first** ($0/mo on Netlify).
No React runtime, no SSR adapter, no backend. Three pages: the home (`/`), the
**`@piprail/mcp` setup guide (`/mcp`)**, and the demo (`/demo`). The brand is **dark, minimal,
emerald-accented** ("emerald = paid"). Design working files live in **this skill's
own `design/` folder** (`.claude/skills/branding/design/`); the assets the site
actually serves live in **`site/public/`** (repo). Never confuse the two.

---

## 1. Where everything lives (the asset map)

### `design/` (bundled with this skill) — MASTER + working files
Lives at **`.claude/skills/branding/design/`** — beside this SKILL, so the skill
and its assets travel together and the repo root stays clean. **One strict rule governs it:
every file is SOURCE, PUBLISHED, GALLERY, or RENDER** — read [`design/README.md`](design/README.md),
it's the law for this folder. SOURCE (templates/scripts), PUBLISHED (masters + profile assets), and
GALLERY (a short, named allowlist of example renders) are tracked; every other RENDER a script
generates is gitignored and regenerable.

```
.claude/skills/branding/design/
├── README.md            # the rule (SOURCE / PUBLISHED / GALLERY / RENDER) — read it
├── source/              # ① MASTERS (tracked): logo-source.png · logo-512/256
├── social/              # ② SOCIAL — ALL external/brand imagery; source + gallery tracked, rest ignored
│   ├── CAMPAIGN.md      #    the campaign plan ("one chain a day")
│   ├── profile/         #    PUBLISHED profile deliverables (tracked PNGs): og-github (→ GitHub social
│   │                    #    preview) · x-banner-1500x500 (→ X header) + x-banner.html (its source)
│   ├── chain-cards/     #    per-chain announce cards — render.mjs (template in the script); gallery: solana, base
│   ├── post-cards/      #    themed posts — 5 essential templates (one per layout) + render.mjs; gallery: open, explainer, plan
│   └── launch-cards/    #    4 canonical one-offs (png+html+script): hermes · payai · solana-gasless · multichain
├── video/               # ③ PROMO-VIDEO pipeline — own README; scene.html · capture/genassets/synth
│                        #    (renders gitignored)
└── deck/                # ④ PITCH DECK — the investor/partner deck: a generated, EDITABLE .pptx
                         #    (pptxgenjs + embedded brand fonts). Own README; `npm run all` to build.
```

> **The example gallery** (the `[gallery]` cards above) is the answer to "where are the good cards?"
> — a curated, **named** set of finished renders committed to git via an explicit `!…/*.png` allowlist
> in the repo `.gitignore`, so the best work is never lost locally. Everything else a script renders
> stays gitignored and regenerable. To keep a new card, promote it into the gallery (allowlist line +
> a note in that folder's README); don't `git add -f` strays.

> **`deck/` is the one design pipeline tracked WHOLE** (its own `.gitignore` overrides the
> renders-ignored rule): the deck is a **PUBLISHED, shareable deliverable** — the `.pptx`/`.pdf`
> are committed so partners can download them from GitHub, and its (pure-JS) deps ride along so it
> rebuilds on clone. To regenerate or edit copy/structure, read [`design/deck/README.md`](design/deck/README.md).

> **Why `social/profile/` and not a separate `brand/`?** Everything external-facing (profile headers
> *and* campaign cards) now lives under `social/` — one home for brand imagery. The `profile/`
> subfolder holds the few **permanent, uploaded** deliverables (tracked, even though sibling card
> renders are gitignored — a `.gitignore` exception keeps `social/profile/*.png` in git).

Each pipeline folder (`social/*`, `video/`) has its **own README** with the exact render
commands — read that folder's README before touching it; don't reverse-engineer the scripts.
**Don't dump a finished render into `source/` or `social/profile/`** — if a script made it, it's a
RENDER and stays under its pipeline, gitignored.

### `site/public/` — SHIPPED assets (served verbatim at piprail.com/…)
Only optimized, final files go here. Everything is referenced by absolute path (`/logo.png`).

| File | What | Size |
| --- | --- | --- |
| `logo.png` | header/footer mark | square (≥256) |
| `favicon-16.png` `favicon-32.png` `favicon-48.png` | browser favicons | 16/32/48 |
| `apple-touch-icon.png` | iOS home-screen icon | 180×180 |
| `og.png` | Open Graph / Twitter card (site) | **1200×630** |
| `chains/<chain>.svg` | one logo per built-in chain (filename = lowercase SDK chain key/slug, e.g. `base.svg`, `xrpl.svg`); the set in `site/public/chains/` is the source of truth for the current count | SVG |
| `tokens/<sym>.svg` | one logo per default token (`usdc` `usdt` `eurc` `rlusd`); add one when a new default token ships | SVG |
| `robots.txt` `llms.txt` `llms-full.txt` | crawler/LLM hints | — |

> **Rule:** edit/keep originals in `design/`; export only the final, optimized file into `site/public/`. The GitHub social card (`og-github-1280x640.png`) stays in `design/social/profile/` (the PUBLISHED profile-deliverables folder) — it's uploaded via the GitHub repo UI, not served by the site.

---

## 2. The brand system — THE single source of truth (`site/src/styles/global.css`)

This is the canonical visual identity. **Every PipRail surface — the site, social cards, the promo
video, the GitHub/X profiles — matches THESE tokens.** The site's `global.css` `@theme` block is the
literal source; change a brand value HERE and everything references it. The card/video templates (in
`design/`) and the content studio's media standard (`content-studio/MEDIA.md`) restate the *summary*
below for convenience, but **this section is authoritative — when anything disagrees, this wins.**

### Color — one accent, on a near-black canvas
| Token | Value | Use |
| --- | --- | --- |
| `--color-bg` | `oklch(0.145 0.005 260)` ≈ **`#0a0b0c`** | near-black canvas (true bla