# 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**:

```ts
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](../guides/theme-without-redeploy.md)** — hands-on.
- **[Content Addressing](./content-addressing.md)** — why substance is baked.