# Brand & Identity

ChainRender's brand is built the way ChainRender apps are built: **fully on-chain.** The logo isn't an image file
on a server — it's generated on-chain, deterministically, and rendered from a `view` call. The brand *is* a
demonstration of the product.

## The logo: an on-chain generative mark

The ChainRender logo is an **on-chain gradient identicon** — a symmetric geometric mark computed deterministically
from a brand identity, produced as SVG by an on-chain resolver at render time:

```ts
import { brandLogo } from "@chainrender/flagship/brand"; // (illustrative; see chainc/flagship/brand.ts)

// the logo is a computed image slot bound to the on-chain identicon resolver — grade A, no off-chain image
brandLogo(gradientIdenticonResolver, "chainrender");
```

Properties that matter:
- **Computed provenance (Grade A).** The logo is generated on-chain from a seed — there is no fetched image, no CDN.
- **Deterministic.** The same identity always yields the same mark; it's reproducible by anyone.
- **Data, not code.** A new brand mark is a new *seed*, not new code — additive and expandable by design.

The generative **hero** art follows the same pattern: a deterministic Truchet-tile pattern, pure math (no
script, no GPU), computed on-chain, Grade A.

> This is dogfooding in the truest sense: ChainRender's own brand assets are on-chain ChainRender components. If we
> wouldn't put our own logo on-chain, why would we ask you to put your app there?

## Two marks, one identity

ChainRender uses **two complementary marks**, and the distinction is deliberate:

1. **The on-chain generative identicon (the product mark).** Grade A, computed on-chain, as above. This is the mark
   inside the flagship app and anywhere the point is to *show the thesis* — a logo that is itself a verifiable render.
2. **The interlocking-CR signature (the chrome mark).** A static SVG — a purple→pink **C** interlocking with a
   cyan→blue **R** — used for the *chrome* every project has: nav-bar logo, favicon, social avatars/headers, docs
   masthead. Chrome like a favicon is static on every product on earth; using a fixed signature there costs nothing on
   the floor and gives the site, builder, docs, and X account one recognizable face.

The chrome mark **complements** the on-chain identicon; it does not replace it. Where a surface can afford a live
`view`-call render (the flagship app, showcase heroes), the on-chain identicon stays the mark.

## Palette & type — the ChainRender theme

The public brand is a first-class theme preset, `chainrenderDefaults()`, in `chainc/theme-tokens.ts` — a **fourth
preset** alongside light / dark / high-contrast. Because the token set is the single source that derives *both* the
`--cr-*` CSS variables (chrome + components) and the inlined palette image renderers use, one definition keeps the
site, builder, docs, and on-chain renders uniform. It is **additive** (the existing themes are untouched) and, for
now, **off-chain**; the matching on-chain `ThemeTokens` preset is a separate additive step.

| Token | Value | Use |
|---|---|---|
| `bg` | `#0d1117` → `#241246` (135° gradient) | page background |
| `fg` | `#e6edf3` | body text |
| `mutedFg` | `#9a93ad` | secondary text |
| `surface` / `panel` / `border` | `#191325` / `#120c1e` / `#2c2340` | cards, sidebars, rules |
| `primary` | `#58a6ff` | links, primary actions |
| `accent` | `#bc8cff` | emphasis |
| brand gradient | `#7ee0ff → #bc8cff → #ff7b9c` | wordmark, headings, accents (`--cr-brand-gradient`) |
| success / warning / info | `#3fb950` / `#d29922` / `#7ee0ff` | status |
| chart series | `#58a6ff · #7ee0ff · #bc8cff · #ff7b9c · #3fb950 · #d29922` | data viz |

**Type:** Inter for UI (falls back to `system-ui` where Inter isn't installed — image renders stay identical),
`ui-monospace` for code and hashes.

## Favicon & app chrome

The favicon/app icon is the interlocking-CR mark on a `#0d1117` rounded chip (`favicon.svg`), shared by the builder,
docs, explorer, and site root so every tab reads the same. The wordmark "ChainRender" is set in the brand gradient
(`#7ee0ff → #bc8cff → #ff7b9c`), left-to-right.

## The honesty label

Every flagship ChainRender surface carries an **honesty label** — a small status line that states, plainly, the
real conditions of what you're looking at (e.g. "Sepolia · synthetic liquidity (demo)"). It's a brand element
*because* it's a principle: **marketing must never exceed what the code enforces.** The honesty label is that value
made visible on the product itself.

## Voice & tone

ChainRender's voice is **precise, honest, and unhyped**. We describe exactly what the code does — no more. We name
boundaries plainly (e.g. "the rendered output is trustless; which RPC you read through is your choice"). We prefer
"verifiable" to "trustless-marketing," and we'd rather under-promise and over-deliver than the reverse. If a claim
can't be backed by a contract, it doesn't get made.

## Naming

- **ChainRender** — the system. One word, capital C, capital R.
- **`@chainrender/client`** — the SDK. **`create-chainrender`** — the scaffolder.
- **`chainrender.eth`** — the root name; apps live at subnames (`myapp.chainrender.eth`).

## Using the brand

Because the logo is on-chain and content-addressed, referencing it is a render, not a download — you compose the
brand component and render it like any other. For static contexts, render the identicon SVG once and embed the
output. The mark is a public good; use it to indicate ChainRender compatibility honestly.

## Related
- **[Mission & Vision](./mission-and-vision.md)** · **[Principles & Ethos](../resources/ethos.md)**
- **[Visual & Media Capabilities](../concepts/visual-media.md)** — the generative art the logo is built from.