name: DeepDive Canvas Design System
description: Collaborative AI workspace interface for canvas nodes, realtime editing, dashboards, and meeting artifacts.
colors:
primary-50: "#F0F7FF"
primary-100: "#E0F0FE"
primary-200: "#BAE0FD"
primary-300: "#7CC8FA"
primary-400: "#36ACF6"
primary-500: "#0C8EE4"
primary-600: "#0270C1"
primary-700: "#03589B"
primary-800: "#084B80"
primary-900: "#0D3F69"
primary-950: "#082946"
primary-foreground: "#FFFFFF"
gray-50: "#F8FAFC"
gray-100: "#F1F5F9"
gray-200: "#E2E8F0"
gray-300: "#CBD5E1"
gray-400: "#94A3B8"
gray-500: "#64748B"
gray-600: "#475569"
gray-700: "#334155"
gray-800: "#1E293B"
gray-900: "#0F172A"
success: "#22C55E"
warning: "#F59E0B"
error: "#EF4444"
info: "#3F3F46"
background: "#FFFFFF"
foreground: "#171717"
card: "#FFFFFF"
border: "#E5E5E5"
input: "#E5E5E5"
muted: "#F5F5F5"
muted-foreground: "#737373"
secondary: "#F4F4F5"
secondary-foreground: "#18181B"
typography:
body: { fontFamily: "Pretendard, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif", fontSize: 14px, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }
dashboardTitle: { fontFamily: "Pretendard, system-ui, sans-serif", fontSize: 16px, fontWeight: 700, lineHeight: 1.2, letterSpacing: 0 }
microBadge: { fontFamily: "Pretendard, system-ui, sans-serif", fontSize: 10px, fontWeight: 700, lineHeight: 1.2, letterSpacing: 0 }
toolbar: { fontFamily: "Pretendard, system-ui, sans-serif", fontSize: 14px, fontWeight: 500, lineHeight: 1.2, letterSpacing: 0 }
spacing:
xs: 4px
sm: 8px
md: 12px
lg: 16px
xl: 20px
xxl: 24px
rounded:
sm: 0.25rem
md: 0.375rem
lg: 0.5rem
xl: 0.75rem
full: 999px
components:
canvasNode: { defaultWidth: 630px, defaultHeight: 680px, minWidth: 300px, minHeight: 400px, shadow: "0 1px 3px rgba(0,0,0,0.1)" }
rootNode: { defaultWidth: 800px, defaultHeight: 300px, minWidth: 400px, minHeight: 150px, accent: "#3B82F6" }
minimizedNode: { width: 180px, height: 40px }
canvasToolbar: { position: "bottom center", background: "rgba(255,255,255,0.95)", radius: 0.75rem, shadow: "0 4px 12px rgba(0,0,0,0.15)" }
workspaceCardGrid: { padding: 20px, radius: 1rem, background: "rgba(255,255,255,0.70)", border: "1px solid rgba(226,232,240,0.60)" }
roleBadge: { fontSize: 10px, fontWeight: 700, radius: 0.375rem, padding: "2px 8px" }Overview
DeepDive Canvas is a collaborative AI workspace built around React Flow nodes, drawing tools, realtime presence, expert personas, Slack import surfaces, translation and slide previews, and a dashboard for canvas or meeting workspaces. The visual system blends precise blueprint grays with a cobalt primary scale and compact collaboration indicators.
The token source is apps/web/tailwind.config.js. Core UI evidence comes from Canvas.tsx, CanvasToolbar.tsx, BaseNode.tsx, and dashboard workspace cards.
Colors
The primary scale is cobalt, with primary-600 as the main action color. The gray scale provides the base UI language: gray-50 and gray-100 for app backgrounds, gray-200 for hairline borders, gray-500 to gray-700 for text, and gray-900 for dense headings.
Semantic colors are explicit: success green, warning amber, error red, and dark gray info. Workspace type badges may use cyan or purple tints, but persistent product identity should remain cobalt plus slate.
Typography
Pretendard is the configured sans font. Dashboard cards use small bold titles and compact metadata. Badges use uppercase 10px text with strong weight and zero letter spacing to keep role, type, and status labels readable inside dense cards.
Canvas node content can include markdown, comments, versions, personas, and generated analysis. Preserve comfortable line height for generated prose while keeping node chrome compact.
Layout
The canvas is full-screen workspace infrastructure, not a framed preview. React Flow owns pan, zoom, selection, edges, node dragging, and fit-view behavior. Standard nodes default to 630px by 680px; root nodes default to 800px by 300px. Minimized nodes collapse to 180px by 40px.
The dashboard supports grid and list workspace cards. Grid cards use 20px padding and place badges, counts, visibility, favorite, archive, and settings actions inside the card without crowding the title.
Elevation & Depth
Canvas toolbar depth uses a white translucent surface, backdrop blur, border, and a shadow. Nodes use the configured node shadows and stronger hover shadows. Presence and chat activity use animated glow states; these effects should communicate collaboration state, not decoration.
Dialogs, popovers, radial menus, expert selectors, translation modals, and slide previews should use visible separation from node content while preserving the canvas as the dominant surface.
Shapes
Tailwind radii are compact: 0.25rem, 0.375rem, and 0.5rem. The canvas toolbar uses a larger 0.75rem shell because it is a floating control cluster. Dashboard cards use larger radii only where current components already do so.
Badges and small controls should keep tight radii. Do not over-round node containers; node resizing and edge handles need geometric clarity.
Components
CanvasToolbar uses icon-only controls for select, hand, pen, eraser, empty node, undo, and redo. The pen option panel includes drawing mode, color swatches, and stroke width controls. Disable states must visibly reduce opacity.
BaseNode is the shared node renderer for root, persona, synthesis, and custom nodes. It must preserve status, AI streaming states, radial action menus, expert selection, node chat indicators, presence, locks, minimization, resizing, version history, regeneration, and deletion flows.
WorkspaceCard supports list and grid variants. Cards show visibility, role, type, node count, member count, updated time, favorite, archive, and settings. Role colors differentiate owner, admin, editor, and viewer without overwhelming the card.
Do's and Don'ts
Do keep canvas interaction controls icon-first and compact.
Do reserve glow animations for active collaboration, chat, or presence states.
Do preserve the node size constraints so edge handles, minimization, and resizing remain predictable.
Don't put the React Flow canvas inside decorative cards.
Don't add new palette families unless they map to workspace type, role, or semantic state.
Don't hide lock, viewer, failed, or streaming states behind subtle styling.