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:
- 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.
- 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 · Principles & Ethos
- Visual & Media Capabilities — the generative art the logo is built from.