Infinite Canvas / Spatial Zoomboard

Figma-like infinite 2D canvas with pan, zoom, spatial sticky notes, and limitless ideation workspace freedom.

Copy CSS :root tokens

Synthesized CSS custom properties derived from this family's dominant surface polarity, highest-contrast WCAG pair, and open-source font stand-ins.

/* Synthesized from Trova family: Infinite Canvas / Spatial Zoomboard (infinite-canvas-zoom) */
/* Evidence base: 2 curated reference(s) · Primary contrast 17:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f9fafb;
  --surface-elevated: #2c2c2c;
  --text-primary: #111827;
  --accent-primary: #1e1e1e;
  --border-hairline: color-mix(in srgb, #111827 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "JetBrains Mono", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}

Copy as DESIGN.md

The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.

# Infinite Canvas / Spatial Zoomboard — style sheet

> Figma-like infinite 2D canvas with pan, zoom, spatial sticky notes, and limitless ideation workspace freedom.

Derived from 2 curated reference(s) in the `infinite-canvas-zoom` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Inter — 2/2
- JetBrains Mono — 2/2

## Color

- `#f9fafb` light neutral — 2/2
- `#111827` dark neutral — 1/2
- `#1e1e1e` dark neutral — 1/2
- `#2c2c2c` dark neutral — 1/2
- `#2563eb` chromatic — 1/2
- `#f24822` chromatic — 1/2
- `#0d99ff` chromatic — 1/2
- `#9ca3af` mid neutral — 1/2

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#111827` / `#f9fafb` — 17:1
- `#1e1e1e` / `#f9fafb` — 16:1
- `#2c2c2c` / `#f9fafb` — 13.4:1
- `#2563eb` / `#f9fafb` — 4.9:1

## Moves

### component pattern

- All chrome collapses into a single bottom-center 48px floating tool dock and a top-right compact style popover, leaving 94% of the viewport as an unobstructed pan-and-zoom surface. — 162-tldraw-infinite-dot-matrix-canvas-floating-tool-dock
- Right-hand properties inspector groups X, Y, W, H, Angle, and Corner Radius into a compact 2×3 scrubbable numeric grid where dragging any label horizontally adjusts the value. — 163-figma-canvas-multiplayer-presence-cursors-zoom-hud

### texture/material

-  radial dot-matrix background scales its grid subdivision dynamically across zoom levels (100% → 25% → 5%) so spatial orientation is preserved without visual moiré. — 162-tldraw-infinite-dot-matrix-canvas-floating-tool-dock

### motion/interaction

- Multiplayer cursors attach a high-contrast colored name pill (`#0d99ff`, `#f24822`) that transforms into a live chat bubble inline when the user presses `/`. — 163-figma-canvas-multiplayer-presence-cursors-zoom-hud

## References

- 162-tldraw-infinite-dot-matrix-canvas-floating-tool-dock — tldraw — Infinite Dot-Matrix Canvas & Floating Tool Dock (exemplar)
- 163-figma-canvas-multiplayer-presence-cursors-zoom-hud — Figma Canvas — Multiplayer Presence Cursors & Zoom HUD

Type

Color

Pairs that read

Steal this.#111827 on #f9fafb · 17:1
Steal this.#1e1e1e on #f9fafb · 16:1
Steal this.#2c2c2c on #f9fafb · 13.4:1
Steal this.#2563eb on #f9fafb · 4.9:1

Moves

component pattern

All chrome collapses into a single bottom-center 48px floating tool dock and a top-right compact style popover, leaving 94% of the viewport as an unobstructed pan-and-zoom surface.
tldraw — Infinite Dot-Matrix Canvas & Floating Tool Dock
Right-hand properties inspector groups X, Y, W, H, Angle, and Corner Radius into a compact 2×3 scrubbable numeric grid where dragging any label horizontally adjusts the value.
Figma Canvas — Multiplayer Presence Cursors & Zoom HUD

texture/material

radial dot-matrix background scales its grid subdivision dynamically across zoom levels (100% → 25% → 5%) so spatial orientation is preserved without visual moiré.
tldraw — Infinite Dot-Matrix Canvas & Floating Tool Dock

motion/interaction

Multiplayer cursors attach a high-contrast colored name pill (`#0d99ff`, `#f24822`) that transforms into a live chat bubble inline when the user presses `/`.
Figma Canvas — Multiplayer Presence Cursors & Zoom HUD