Branch G — Claude Design Handoff (visual brief)

Audience: Claude Design only. Visual goal, references, primitives, tokens, theme, a11y, responsive, do-not-change, components to design, expected output. No backend detail overload — for data/DOTs/permissions see doc 08 (Claude Code handoff). You design the look and behavior of components; you do not invent data shapes or business rules.

---

1. Visual goal

A clean, dense, enterprise-SaaS control surface for navigating tens of thousands of business processes across six tiers in one frame. Reference feel: Linear / Retool (NOT spacious/Notion, NOT industrial/CAD). The screen makes a non-technical operator able to answer "how many processes, how automated, where are the errors" at a glance, and propose improvements without touching the database.

The governing law of the visual: "MỘT khuôn, SÁU tầng. Dữ liệu thay đổi khi đổi tầng, khuôn không thay đổi." — one frame renders all six tiers; you design one card/grid/breadcrumb system, not six.

2. Screenshot / prototype references (Cowork, on Drive)

Ref	What it shows	Status	Use as
PHU-LUC-A MOW interface	tier tabs, breadcrumb, horizontal workflow blocks (170px), child-list (max 3 + "··· +N thêm"), proposal pills	LOCKED	ground-truth layout
PHU-LUC-C proposal flow	toggle switch, add/edit/delete forms, queue note, mode colors	LOCKED	proposal-mode reference
PHU-LUC-E TreeView	left 280px tree panel + right content panel, stats cards, wf-cards	DRAFT	tree-list variant
PHU-LUC-D MOT Task Card	4 zones, 9-state badges, MOIT form / MOUT table / guide	DRAFT — refactor to 4-level progressive disclosure	task surface
v1 handoff pack	tokens, CanvasNode contract, 6 components	superseded by this pack	token source

3. Layout primitives (design these once, reuse everywhere)

1. Tier tab bar — pill tabs [T6][T5][T4][T3][T2][T1], active highlighted, badge = item count. Labels: Lĩnh vực / Công ty / Phòng ban / Chuyên môn / Nhiệm vụ / Công việc.
2. Breadcrumb — A > B > C > (current bold) + trailing tier-label chip.
3. Card grid — virtualized; card = số thứ tự + title + metrics + traffic-light + child-preview(≤3, then "··· +N thêm") + action chips (Mở chi tiết, Đề xuất cải tiến).
4. Proposal-mode overlay — per-card sửa/xóa pill, green "+" between cards, "+ Thêm" at end; mode-colored forms.
5. Split tree-list — 280px left tree (toggle/icon/health-dot/count-badge) + right content (breadcrumb, 4 stat cards, wf-card list with status badges + actions Xem/Thiết kế).
6. Task card — 4-level progressive disclosure (see §8).
7. Filter sidebar — status / owner / deadline window / severity / search (all backend-filtered; you design the control, not the query).
8. Governance cockpit panels — problem-first queue, severity chips, T6→T1 heatmap, SLA trend, gate light.

4. Design tokens (CANONICAL — do not invent new colors)

/* Incomex brand */
--accent:        #639922;   /* Incomex green — primary */
--accent-dark:   #3b6d11;
--accent-light:  #eaf3de;
/* status */
--warn:    #ef9f27;  --warn-bg:   #fff8ee;   /* yellow */
--danger:  #e24b4a;  --danger-bg: #fff0f0;   /* red */
/* neutrals */
--neutral-50:#f9f9f9; --neutral-100:#f0f0f0; --neutral-200:#e8e8e8;
--neutral-300:#ddd;   --neutral-500:#aaa;    --neutral-700:#555; --neutral-900:#111;
/* radius */
--radius-sm:6px; --radius-md:10px; --radius-lg:14px;
/* type */
font: system-ui / "Be Vietnam Pro";   mono: "JetBrains Mono";  /* for code/IDs */
/* icons */ Tabler Icons (ti ti-*) OR Linear/GitHub/Jira-style — do NOT self-invent icons

Card: border-radius 10px, 0.5px border, white bg. Mode colors (proposal forms): add #639922, edit #BA7517, delete #A32D2D.

5. Traffic-light style (color + icon + text triplet — never color-alone)

Two reconciled scales (doc 03):

• 4-state nav rollup (canvas cards): green / yellow / red / gray.
• 9-state floor + 2 derived (instances / task badges): not_started(gray ○), ready(green-pale ▶), in_progress(green ►/blue), waiting(yellow ⏳), blocked(yellow-dark→red ⚠), overdue(red-pale ⏰), failed(red ✕), cannot_complete(red-dark ⛔), completed(green-deep ✓), paused(yellow-dark, derived), cancelled(red-dark, derived, terminal).
• 6-color chip set the UI maps onto: green / yellow / red / gray + blue (assigned / waiting_for_input #3b6dd8) + orange (waiting_for_approval #f07820).
• Each token declares fg / bg / contrast_ratio + high_contrast.fg/bg + shape_token. Shapes must differ (cross ✕ vs check ✓ vs triangle ⚠) so color-blind users distinguish by shape. Always color + icon + text (vi label).

Vietnamese status labels (verbatim): Chưa bắt đầu / Sẵn sàng / Đang thực hiện / Đang chờ / Bị chặn / Trễ hạn / Thất bại / Không thể hoàn tất / Hoàn thành / Tạm dừng / Đã hủy.

6. Dark / light theme — DECISION REQUIRED

The Cowork prototypes are a light Incomex-green theme (body bg #f5f5f5/#f0f0f0, text #111). The campaign brief names a dark theme direction. These conflict — this is a design decision for Claude Design to make explicit, not a silent change. Recommended: deliver both, driven by the token pairs:

• Keep the light theme as the locked default (matches prototypes).
• Provide a dark variant by inverting neutrals and using the high_contrast.fg/bg token pairs (the state tokens already carry them). Activate on theme toggle or prefers-contrast:more.
• Do NOT change the brand accent #639922 or the 6 status colors in either theme.

7. Accessibility

• WCAG 2.1 AA contrast; color + icon + text triplet on every status; color-blind-safe shapes.
• Full keyboard nav (tabs → breadcrumb → filters → roving-tabindex grid); Enter=drill, Space=toggle pill.
• aria-labels on status/action chips; screen-reader announces tier + card position.
• Visible focus rings; no information conveyed by color alone.

8. Components to design

Component	Notes
<MowHierarchyCanvas> (<MOWCanvas>)	one frame, six tiers; tabs+breadcrumb+virtual grid+proposal overlay
<MowTreeList>	split tree (280px) + content panel + stat cards + wf-card list
<MOTCard> (Task Card)	refactor PHU-LUC-D to 4-level progressive disclosure: L1 name+countdown+9-state badge+main action → L2 MOIT form → L3 MOUT table → L4 guide(IU)+audit
<ProposalOverlay>	toggle, sửa/xóa pills, green-+, mode-colored add/edit/delete/reorder/comment/audio forms (reorder + comment/audio are new — design them)
<TrafficLightChip>	4-state + 9+2-state variants, triplet, both themes
<GovernanceCockpit> panels	problem-first queue, severity chips, T6→T1 heatmap, gate light, SLA trend
<VirtualGrid>	shared virtualization primitive (scales to 10k+); also used by <WorkflowGraph>
<WorkflowGraph>	Standard Process View: nodes + edges, parallel=horizontal swimlanes, sub-workflow=collapsed, zoom/pan/mini-map/critical-path for 100–500+ steps

9. Do-NOT-change constraints (hard)

• Do NOT change the one-frame-six-tier philosophy.
• Do NOT drop tab nav, breadcrumb, or the "Đề xuất cải tiến" proposal entry.
• Do NOT add a "Sửa trực tiếp" (direct edit) button — only "Đề xuất" (proposal) is allowed.
• Do NOT change the traffic-light colors (keep green/yellow/red/gray/orange/blue).
• Do NOT hardcode workflow/task/tier names into the design — use placeholder data.
• Do NOT put business logic in the prototype.
• Do NOT design mobile-responsive before the desktop layout is complete.
• Resolve the T1 label conflict (Task vs Công việc) — pick one canonically (recommend Công việc).

10. Expected output from Claude Design

1. High-fidelity wireframes/mockups for the 8 components above (light theme locked; dark variant via token pairs).
2. A finalized token sheet (light + dark) extending §4 — exact hex for every state in both themes.
3. The 4-level progressive-disclosure Task Card redesign.
4. New designs for the reorder and comment/audio proposal interactions (the two gaps).
5. The Governance Cockpit panel layout (problem-first).
6. An a11y annotation layer (focus order, aria, contrast pairs).
7. No code, no backend assumptions — components must be data-shape-agnostic, fed by the doc-03 contract.

11. Design handoff verdict

READY (separated, visual-only). Visual goal, references, primitives, canonical tokens, traffic-light style, explicit theme decision, a11y, responsive rule, 8 components, do-not-change constraints, and expected outputs are all specified with no backend overload. Two design gaps (reorder, comment/audio) and one decision (dark theme, T1 label) are called out explicitly.