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 eyebrows |
--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%.