Presentation & Theming

Presentation — colors, spacing, fonts, chart dimensions — is a render-time parameter in ChainRender. You can change how an app looks without redeploying it, at zero gas. This page explains how, and why it's separated from the app's immutable identity.

The principle: skin is free, substance is baked

How an app looks doesn't change what it is or does. So presentation is not part of the app's hash — it's supplied when the app renders, via a presentation context:

renderHashWithContext(hash, {
  themeId,          // which on-chain theme (colors/fonts/spacing) to apply
  palette,          // chart/image palette override
  chartW, chartH,   // chart dimensions
})

Change any of these and the same app (same hash) renders differently. No new deployment, no new identity, no gas beyond the read. A developer can iterate on the whole page's look — spacing, font size, colors — instantly and for free, and only commit a chosen theme on-chain once, when it's dialed in.

Why this division exists

Forcing a redeploy for a cosmetic tweak would be wasteful (gas per nudge) and meaningless (a color change doesn't alter what the app does). Worse, it would pressure developers to ship "good enough" rather than iterate to "right," because every iteration would cost. Making presentation render-time removes that friction entirely — which is exactly why the system draws the line here: appearance is presentation (free, render-time); text, structure, and actions are identity (immutable, in the hash).

The token system

Themes are built from design tokens — a W3C-aligned set of semantic values (colors, typography, spacing, sizing, borders, elevation, motion). Components reference tokens (--cr-space-md), not hardcoded values, so a theme change re-flows the whole page. Tokens are drift-locked between the on-chain generator and the SDK, and a contrast invariant ensures every theme meets WCAG AA — a low-contrast theme can't ship.

Three presets ship: light, dark, and high-contrast (WCAG AAA).

Related

• Guides → Theme Without Redeploying — hands-on.
• Content Addressing — why substance is baked.