# Social & X Kit

The ChainRender **X (Twitter) launch kit** — profile images, header banners, and launch copy — in three styles to pick
from. It extends [Brand & Identity](./brand.md): same palette (the on-chain card `#0d1117` family), the gradient
mark, and the honest, unhyped voice. Assets are authored as **SVG** (editable, on-ethos — "render once, embed the
output") and rendered to **PNG** for upload.

## The three styles
| Style | Look | Best for |
|---|---|---|
| **A — Terminal** | Dark `#0d1117`, monospace, gradient-identicon mark, Truchet tiles | Developer-native; matches the on-chain resolver cards |
| **B — Gradient / Bold** | Vibrant gradient wordmark, **interlocking CR chain-link mark** (purple C cradling a blue R), capability pills | Highest scroll-stopping / viral punch |
| **C — Blueprint / Minimal** | Blueprint grid, thin-line chain-link mark, typographic list | Premium, precise, understated |

Pick one letter and use its matching header + profile + copy set (don't mix letters).

## Files (`brand/x/`)
```
brand/x/profile/{A-terminal,B-gradient,C-blueprint}-profile.svg   (+ .png)   400×400
brand/x/header/ {A-terminal,B-gradient,C-blueprint}-header.svg    (+ .png)   1500×500
brand/x/chainrender-mark.svg                                      (+ .png)   the interlocking-CR mark, transparent — favicon / logo reuse
brand/x/X-posts.md                                                            launch post + thread, per style
```
Each **header lists what developers can build** with ChainRender (DeFi, RWA, reputation/EFP, cross-chain/CCIP, NFT &
generative art, ENS, charts, 3D) — grounded in the real resolver capabilities.

## Logo & icon set (transparent, all sizes) — `brand/logo/`
The interlocking-CR mark and wordmark lockups, on **transparent** backgrounds, for the site, app, favicon, and docs.
```
brand/logo/chainrender-mark.svg                       vector mark (transparent) — source of truth
brand/logo/png/chainrender-mark-{16,32,48,64,128,180,192,256,512,1024}.png   transparent mark, all sizes
brand/logo/favicon.ico                                multi-size icon (16/32/48) for browsers
brand/logo/chainrender-lockup-dark.svg   (+ png 800/1600)   mark + wordmark, WHITE text — for dark backgrounds
brand/logo/chainrender-lockup-light.svg  (+ png 800/1600)   mark + wordmark, DARK text  — for light backgrounds
brand/logo/chainrender-lockup-stacked-dark.svg (+ png 520/1040)   mark over wordmark (white) — square-ish contexts
```
Size guide: **16/32/48** favicon · **180** apple-touch-icon · **192/512** PWA/manifest · **256/512/1024** general.
All mark PNGs are transparent; regenerate any size from `chainrender-mark.svg`. Use the **dark** lockup on dark
backgrounds, the **light** lockup on light. The mark reads cleanly down to 16px.

## Specs & X placement
- **Profile:** 400×400 (X displays it as a circle — the mark is centered and safe inside the circle).
- **Header:** 1500×500. **Note X's overlaps:** on desktop the profile avatar sits over the lower-left of the header, and
  X crops the top/bottom on some viewports. Each header keeps its wordmark/mark and the capability list in the central
  band and away from the extreme bottom-left, but preview on a real profile before finalizing.

## Rerender PNGs from the SVGs
The SVGs are the source of truth; regenerate PNGs any time (you already have `@resvg/resvg-js`/`sharp` from the
share-card pipeline):
```bash
# with sharp:
node -e "const s=require('sharp'),f=require('fs');['profile/A-terminal-profile:400:400','header/A-terminal-header:1500:500'].forEach(x=>{const[p,w,h]=x.split(':');s(Buffer.from(f.readFileSync('brand/x/'+p+'.svg')),{density:200}).resize(+w,+h).png().toFile('brand/x/'+p+'.png')})"
# or @resvg/resvg-js, or open the SVG in a browser and export.
```
For pixel-perfect brand type, install **Inter** (styles B/C) and a monospace (style A); otherwise the system fallback
renders cleanly but not identically.

## Voice (from brand.md — keep it in replies too)
Precise, honest, unhyped. Describe exactly what the code does. If asked "is it really trustless?", answer with the
**A/B/C grade**, not a slogan. Marketing never exceeds what the code enforces.

## Handle
Handle: **@chain_render** — profile at **https://x.com/chain_render**. Root name `chainrender.eth` is confirmed. Note:
the `@chainrender/client` and `@chainrender/mcp` strings in the copy are **npm package scopes**, not the handle — leave
them exactly as written.

## X account fields (ready to paste)
Verified against X's limits: name ≤ 50, bio ≤ 160, location ≤ 30.

**Name** (≤ 50)
- `ChainRender` — clean, searchable *(11)*
- `ChainRender · Fully On-Chain UIs` — name + one-line what *(33)*

**Bio** (≤ 160) — pick one:
| # | Bio | Chars |
|---|-----|------|
| 1 | Application UIs that live entirely on-chain. Composed, compiled to a hash, rendered from a view call. Verifiable · permanent · ownerless. Build before mainnet. | 160 |
| 2 ⭐ | Your contract is immutable — now your frontend is too. Fully on-chain UIs, rendered from a view call & trust-graded A/B/C. No server, no hosting. | 147 |
| 3 | The on-chain UI framework. compose → grade → compile → render. DeFi · RWA · reputation · identity · cross-chain. Verifiable, ownerless, render-free. | 158 |
| 4 | Fully on-chain application UIs — rendered from a view call, honestly trust-graded, ownerless & permanent. The interface IS its hash. Build with the SDK or AI. | 160 |
| 5 | On-chain frontends as verifiable as the contracts they front. Compose, grade, render — no server, no hosting. Live on Sepolia, Robinhood & Arc testnets. | 154 |

⭐ = recommended for launch (sharpest hook, literally true). Bio 5 is the alternative if you'd rather lead with the
three-testnet proof. Bios 1 and 4 are exactly at the 160 ceiling — re-count if you tweak a word.

**Website** — `https://chainrender.eth` (if the account accepts an ENS/eth.limo URL), else `https://chainrender.org`.

**Location** (optional, ≤ 30) — `on-chain` *(8)* or `rendered from a view call` *(25)*.

**Pinned:** pair the chosen bio with campaign post **01** as the pinned thread head (`brand/x/campaign/img/post-01.png`).

## Related
- **[Brand & Identity](./brand.md)** — the on-chain generative logo, hero, and honesty label.
- **[Mission & Vision](./mission-and-vision.md)** · **[Principles & Ethos](../resources/ethos.md)**