# Migration from the current web app

What changes when the existing app (frontend/web) moves onto this system.

| Today | New |
| --- | --- |
| Nunito / Nunito Sans (UI) | `ui` — Atkinson Hyperlegible Next |
| Story Script (node titles) | `hand` — Kalam (`node-label`, `node-root`) |
| Playpen Sans (edge labels, hover cards) | `note` — Caveat for edge labels; `ui` for card body text |
| Inter in the marketing site | `ui`, with Haksen `eyebrow`s |
| `--bg-app` #F0EDE6 / #141412 | `canvas` #f6f3ee / #0f1220 |
| `--bg-surface` #FAF8F4 / #1C1C1A | `surface` #ffffff / #171b2b |
| `--color-primary` navy #1B2D4F / rust #BB532D | `action` root-ink #182140 / paper #f6f3ee (one action color per theme, no rust) |
| Blue→pink gradient CTA on the website | Root-ink pill + `SpectrumBar` |
| Edge stroke #000 in both themes | `edge` #2a3048 / #c9cddc |
| Hover summary card (SketchyBoxKonva) | `SemanticPeek` (`FactCard` is a deprecated alias) |
| Semantic-anchor tooltip | `SemanticAnchor` + its `AnchorCard` |
| "Go deeper" button that dives into a layer | **Step inside** — *Go deeper* now opens the `GoDeeper` facets panel |
| Right-side facet panel with emoji headings, "✨ Visualize it!", CREATE A VISUALLI FOR THIS TOPIC | `GoDeeper`: Lucide icons, *Visualize it*, **Map ‹subject›** → Inside this map / As a new Visualli |
| *View source* (`</>`) showing the JSON | **Sources** button → `SourcesPanel` (the material, with passages → ideas); JSON moves to *Export → .visualli file* |
| Global pencil icon edit mode; inline title editor; pencil/trash pair under a node; blanket "may remove semantic anchor highlights" warning | **Edit** toggle (word + icon) → editing bar + `SelectionBar` per construct; rename in place; Delete with confirm for ideas with layers + Undo; the summary editor names only the terms actually dropped |
| Breadcrumb stack, Nunito 9–11px | `DepthTrail`, `ui` 12–13px |
| Sidebar input card + CREATE YOUR VISUALLI | `Composer` at the bottom + `Vault` on the left |
| Toast accents #5BA30E / #C81E1E / #DAA520 / #3B82F6 | `success`, `danger`, `warning`, `info` (+ `-soft`) per theme |

## Node palette
The backend's 15 pastels map onto the 8 topics (for existing files; new files should emit topic names):

| Legacy | Topic | Legacy | Topic | Legacy | Topic |
| --- | --- | --- | --- | --- | --- |
| #fff699 | sun | #b6eea7 | teal | #ffbdfb | iris |
| #fee7c3 | amber | #a6f5d8 | teal | #ffb8cc | berry |
| #ffcfa1 | amber | #b7e7f3 | teal | #bcaea1 | stone |
| #faada5 | coral | #a1c4fc | harbor | #d2c09a | stone |
| #e9ed98 | sun | #d5bcfe | iris | #dddddd | stone |

Kept as-is: the six blob shapes, `getBlobTypeForLayer` (now `shapeForLevel`), the ring recipe, the connector curve and arrowhead, the zoom easing `cubic-bezier(0.2, 0.8, 0.2, 1)`, drill-in at ~500ms, chromatic immersion at 15%.