← ALL DELIVERIES

AaaS Canvas · the complete overview

The whole canvas — inventory, live dashboards, the reskin contract, assets & hosting

One shell renders 211 dashboards for any client. This page maps what's inside, shows every distinct dashboard (click a thumbnail to open the live view), gives the 32-token interface agents personalise against, and reads how close the canvas is to a click-and-play asset platform.

19streams
211sub-pages
226kinds
80views
46design-panes
32tokens

First principle

Is "design token" a Claude thing, or just fancy CSS?

Neither Claude-specific nor "just CSS" — a standard design-systems concept that here compiles to CSS.

A design token is a named design decision — accent, surface, radius — stored once and referenced everywhere. The term predates Claude (Salesforce ~2014; there's a W3C Design Tokens spec; Style Dictionary, Figma, Tailwind use them).

The point is indirection: tokens are the semantic layer above raw values and are tool-agnostic. Here they're CSS custom properties (--app-*), so a token is a CSS variable — but the value is the contract: a client swaps 32 values and all 211 dashboards reskin.

Architecture

How a URL becomes a themed dashboard

Every surface resolves through one chain. An agent only ever touches the last box (tokens), never the 226 kinds.

Stream ·19→ SubPage ·211→ Kind ·226→ View ·80→ --app-* tokens ·32

#finances/overview → stream finances → sub-page overview → kind finDashboard → a view (or design-pane) → painted through --app-*. Unknown kind → table fallback, so nothing hard-crashes.

Inventory

The 19 streams & their weight

Sub-pages per stream (from canvas-manifest.json). Ops dominates — it's the admin surface.

Home14
Podcast7
Design11
Content16
Select5
Intelligence9
Services16
Costs13
Finances12
Ops42
Quality21
Marketing18
Product12
Platform10
Workspace1
Automations1
Library1
Review1
Templates1

The reskin interface

The 32-token contract

The entire surface a client's brand plugs into, grouped by role. An agent maps a brand onto these 32 names and never touches component code.

Color · 19
--app-bg--app-surface--app-elevated--app-ink--app-ink-soft--app-ink-faint--app-accent--app-accent-dim--app-accent-glow--app-accent-ink--app-signal--app-signal-dim--app-success--app-warn--app-fail--app-rule--app-rule-soft--app-running--app-glass-bg
Type · 6
--app-font-display--app-font-body--app-font-mono--app-display-weight--app-display-tracking--app-display-transform
Shape · 4
--app-radius--app-radius-sm--app-radius-pill--app-density
Effect · 3
--app-shadow--app-shadow-glow--app-glass-blur

For agents

Reskinning with a client's tokens

The flow

  1. Read canvas-manifest.json → every stream/kind/view + token names.
  2. Map the client brand → one tenant entry in tenants.jsx (a tokens bundle + optional tokensLight).
  3. Build with that tenant → all 211 dashboards reskin. No per-view edits.
  4. Guardrails: tokens:conformance + validate-tenant-manifests + test:rebrand.

A tenant = a brand

// tenants.jsx — the whole reskin
acmeCorp: {
  label: 'Acme',
  tokens: {
    '--app-bg':     '#0a0e14',
    '--app-accent': '#ff5c38',
    '--app-ink':    '#eef',
    // …32 tokens total
  },
}
Bulletproof: the map is generated, not hand-written — tools/generate-canvas-manifest.mjs boots the built canvas headlessly and dumps the live registries → canvas-manifest.json (diff-stable, CI-guarded via npm run canvas:manifest:check). Generated from code = can't drift.

Asset-platform reality

One leg works, three are missing

The GCS pipeline is mature (154 tokenized items) and the hard infra — the 32-token reskin + one live proxy — is done. But "click-and-play, personalise-to-company" needs four legs, and only templates are wired. Build plan: epic #409.

Design templates wired ✓

Live GCS proxy → brand-reskinned iframe preview of all 154 items. Real, tested, deployed. Ceiling: preview-only.

Dashboards manual ✗

46 design-panes are copy-pasted frozen HTML. No automated GCS-handoff → pane pipeline.

Building blocks hardcoded ✗

93-item Asset Catalog is a static array — no backend, no click action.

Per-company libraries dead ✗

ASSET_LIBRARIES plumbing exists but is never populated or read. The backbone to revive.

The four GCS asset sets — gs://aaas-design-pipeline-assets

270
Design assets consumer gap

/assets — social/email/deck handoffs + the 154-row catalogue CSV.

154
Asset catalogue proxied ✓

/library — tokenized entries, indexed by _index/catalog-index.json. Served via Template Library.

42
Canvas dashboards manual ✗

/canvas — handoff zips + standalone HTML. Ported by hand.

1
Building blocks not ingested ✗

/catalogue — building-blocks zip. Mirrored as a hardcoded 93-card array.

Catalogue composition — 154 tokenized assets (marketing/content)

organic-social49
welcome-email18
paid-social12
lifecycle-email12
linkedin12
x12
explainer-email10
announcement-email7
pinterest5
transactional-email4
developer-communities4
snapchat3
whatsapp3
reddit1
chat-platforms1
instagram1

Hosting · the overarching view

Where the full canvas should run

Cloudflare for everything the browser touches, GCP for Python compute + data — a hybrid edge-first split. A Cloudflare Worker + Pages canary already exists in deploy/edge/ (M0), so this is the documented direction, not a new bet.

LayerTodayBest-practice homeWhy
Static canvasCloud Run auth-gateCloudflare PagesFully static build → global CDN, edge-cached, near-zero cost.
Auth / edge gateNode/Express on Cloud RunCloudflare WorkerVerifies the token at the edge. Already written (deploy/edge/src/worker.mjs).
Backend APIPython FastAPI (Cloud Run)Stays Cloud Run, tunnel-frontedWorkers can't run Python. Front it with a cloudflared Tunnel, drop public ingress.
Design assets + catalogueGCS bucketsCloudflare R2 + CDNZero egress fees, S3-compatible, co-located with Workers/Pages.
Data (Firestore)GCPStays GCPData gravity — sits with the Python API.

The one anchor: Python (FastAPI) is why GCP doesn't fully disappear — everything user-facing lives on Cloudflare's edge; the Python brain + data stay on GCP behind a private tunnel.