⚠️ Alpha · testnets only. ChainRender is in active alpha and deployed on testnets only — Ethereum Sepolia, the Robinhood Chain Testnet, and the Circle Arc Testnet — not on any mainnet. Contracts, addresses, and APIs may change. Do not use with real funds or production assets.
About

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:

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