MOW Unified Canvas — Design Brief (short)

For Claude Design. Keep it short on purpose (per GPT direction: design agents get a short visual brief + a preview URL, not the full architecture pack).

Preview to improve: https://vps.incomexsaigoncorp.vn/ui-preview/mow/unified-canvas/v1/ Full spec (if needed): knowledge/dev/ui/mow/unified-canvas/spec.md

What this is

A single-frame canvas that shows a business-process hierarchy across six tiers (T6 Lĩnh vực → T1 Task). One UI frame, six data tiers. The static preview is structurally correct but visually plain — your job is to make it beautiful without changing the philosophy or interaction model.

Must keep (do NOT change)

• "MỘT khuôn — SÁU tầng" philosophy; tabs T6→T1; breadcrumb; Proposal Mode + "Đề xuất cải tiến".
• Traffic-light colors and meanings (green/yellow/red/gray/blue/orange).
• No "edit directly" affordance — only propose. No business logic. Desktop-first. Light theme.

Tokens

--accent #639922 · --accent-dark #3b6d11 · --accent-light #eaf3de · --warn #ef9f27 · --danger #e24b4a. Font: Be Vietnam Pro / system-ui. Mono: JetBrains Mono. Mood: clean & dense enterprise SaaS (Linear, Retool) — not airy Notion, not industrial CAD. Card: radius 10px, border 0.5px, white bg.

Please return (design delta)

• High-fidelity polish of 3 states: Normal, Proposal, Instance (+ governance-alert banner).
• Treatments for: card with error (red), proposal transition, empty state, overflow ("··· +N"), large-scale tier (many nodes), SLA countdown + assignee avatar.
• A short list of token / spacing / component changes (a delta), not a rebuild.