Surface
Web app
The signed-in web app, composed: canvas-first VisualMap with insets, the Vault, the bottom Composer with recent chat turns, canvas chrome and the Comfort dialog. A reference composition, not an export.
Features
13 of 13 features that apply here are UX ready · 2 N/A · Feature matrix for Web app
UX ready 13
VI-002Map: bloom, step inside, depth trail SPECVI-004SemanticPeek (an idea's summary) SPECVI-005SemanticAnchor (term definitions) SPECVI-006Go deeper (facets for an idea or term) PRODUCTVI-007Map it (inside this map / new Visualli) PRODUCTVI-008Movable ideas and Reset layout PRODUCTVI-009Edit mode (ideas, connectors, groups) PRODUCTVI-010Sources panel PRODUCTVI-011Export: single-page PDF, multi-page PDF, .visualli file (no share link) PRODUCTVI-012Chat: Composer and receipts PRODUCTVI-013Vault (library of Visuallis) PRODUCTVI-014Comfort & appearance SPECVI-015Tips in the chat stack (e.g. "Layout saved. Want to edit the content too?") PRODUCT
N/A 2
VI-001Visualize this page (toolbar, right-click) · Open in Visualli PRODUCTPaste a link into the Composer insteadVI-003Touch: tap to peek, tap again to step inside SPECThe same map switches to touch automatically on touch screens (interaction="auto")
Build it
The web app consumes the design system directly from the monorepo.
Install
Add design-system to the root package.json workspaces, then depend on it by name from the app (npm workspaces link it locally):
{ "dependencies": { "@visualli/design-system": "*" } }
Rules for building pages: Building with the system (design-system/AGENTS.md).
Load order
@visualli/design-system/tokens.css— every color, type, space, radius, shadow and motion token as a CSS custom property, for all eight themes.@visualli/design-system/bundle.css— component styles (imports the Google faces).- The components:
import { Button, Composer, VisualMap } from '@visualli/design-system/components'.
Tailwind
tailwind.config.js: presets: [require('@visualli/design-system/tailwind-preset')]. The preset replaces Tailwind's colors, spacing, radii, shadows, fonts, type sizes, z-index and motion with the tokens (as CSS variables), so p-5 = space-5 = 24px, bg-surface, rounded-lg, shadow-float, font-hand, text-body, and off-system classes like text-red-500 don't exist. While migrating an existing config, spread require('@visualli/design-system/tailwind-preset').theme into theme.extend instead.
Theme and comfort
Set the look on <html> before first paint, server-rendered from the saved preference so there is no flash:
<html data-theme="light" data-type="standard" data-motion="full" data-reveal="gradual" data-scale="md">
data-theme is one of light, dark, focus-light, focus-dark, colorsafe-light, colorsafe-dark, contrast-light, contrast-dark. At runtime, call applyComfort(choice). See Comfort modes.
Layout
The whole window is the canvas: Vault left, Composer bottom-center, canvas controls top-right, depth trail top-left. See Surfaces.
Prototype source: components/catalog/AppShell/preview.html · Build notes: docs/platforms/web-app.md