Hệ thống Thiết kế Gmind

🏷ds:hub:overview-001

Mỗi screen là một showcase tương tác riêng biệt với 6 trạng thái (Mặc định / Đang tải / Trống / Lỗi / Ngoại tuyến / Cấm). Click để khám phá.

💻🏷ds:screen:terminal-001

Terminal

Cửa sổ terminal — title bar, ANSI colors, cursor blink, mosaic layout

🌿🏷ds:screen:git-graph-001

Đồ thị Git

Trực quan nhánh Git — SVG commit graph, branch colors, tag badges

📋🏷ds:screen:kanban-001

Kanban Board

Bảng quản trị dự án — drag columns, card stack, WIP limits

🧠🏷ds:screen:knowledge-graph-001

Knowledge Graph

Đồ thị tri thức Sigma.js — force-directed, PRD → Task → Commit

✅🏷ds:screen:approval-001

Phê duyệt & RTM

Approval Panel, Requirements Traceability Matrix, Coverage Heatmap

📅🏷ds:screen:timeline-001

Timeline

Nhật ký hoạt động — event feed, File Lease, alternating timeline

🧩🏷ds:screen:components-001

Components

Thành phần cơ bản — Card, Button, Badge, Modal, Accordion, DataTable

📄🏷ds:screen:doc-viewer-001

Doc Viewer

File browser kiểu GitHub — duyệt PRDs, ADRs, Spikes với Beads ID links

🔍🏷ds:screen:explorer-001

Gmind Explorer

Tìm kiếm thống nhất — docs, commits, tasks, ADR, agent chats

🔗🏷ds:screen:beads-traversal-001

Beads Traversal

Universal ID — chuỗi liên kết PRD ↔ Plan ↔ Task ↔ Commit

🗺️🏷ds:screen:storyboard-001

Storyboard

24 use cases trên 6 hành trình — PM, Dev, QA, Architect, Release, Bug

Bảng Màu

Màu sắc

🏷ds:token:colors-001

--bg

Nền chính · #0b1121

--surface

Bề mặt · #131c2f

--surface-elevated

Bề mặt nổi · #1e293b

--text

Chữ chính · #f8fafc

--text-dim

Chữ mờ · #94a3b8

--accent-cyan

Nhấn Cyan · #0ea5e9

--accent-teal

Nhấn Teal · #14b8a6

--accent-amber

Nhấn Amber · #f59e0b

--accent-rose

Nhấn Rose · #f43f5e

Khoảng cách

Thang Khoảng cách

🏷ds:token:spacing-001

--space-xs

4px

--space-sm

8px

--space-md

16px

--space-lg

24px

--space-xl

40px

--space-2xl

60px

Kiểu chữ

Font

🏷ds:token:typography-001

--font-body

"DM Sans", system-ui, sans-serif

Aa Bb Cc 123

--font-mono

"Fira Code", monospace

const x = 42;

Hoạt ảnh

Hiệu ứng Chuyển động

🏷ds:token:animations-001

Tên	Thời lượng	Easing	Công dụng
`fadeUp`	600ms	ease-out	Hiệu ứng vào trang
`fadeIn`	400ms	ease-out	Xuất hiện mờ dần
`slideInRight`	500ms	ease-out	Trượt từ phải
`pulse-glow`	3000ms	infinite	Chấm nhấp nháy navbar

Tiện ích

Token Khác

🏷ds:token:utilities-001

--radius

6px — Bo góc mặc định

--radius-lg

12px — Bo góc lớn

--shadow-card

Đổ bóng thẻ

Thẻ (Cards)

Các biến thể Thẻ

🏷ds:comp:card-001

.ve-card

Thẻ Tiêu chuẩn

Di chuột để xem hiệu ứng hover: viền sáng, nâng lên, đổ bóng.

.ve-card.ve-card--hero

Thẻ Hero

Nền nổi, viền highlight, đổ bóng hero. Không có hiệu ứng nâng khi hover.

Thẻ Trụ cột

PillarCard — 4 Biến thể Màu

🏷ds:comp:pillarCard-001

accent=cyan

Trí tuệ Mã nguồn

Viền trái cyan, nhãn cyangmind search-codebase

accent=teal

Theo dõi SSOT

Viền trái teal, nhãn tealBeads-ID:

accent=amber

Xác minh SAFe

Viền trái amber, nhãn amberCI/CD Gate

accent=rose

Hệ sinh thái

Viền trái rose, nhãn rosemcp_agent_mail

Nút (Buttons)

Button — 3 Biến thể

🏷ds:comp:button-001

Kích thước nhỏ (btn-sm) + Disabled

Nhãn trạng thái (Badge)

Badge — 4 Biến thể Màu

🏷ds:comp:badge-001

Hoạt độngHoàn thànhĐang chờLỗi

Chú thích (Tooltip)

Tooltip — CSS-only Hover

🏷ds:comp:tooltip-001

Nhãn & Phân cách

SectionLabel — 4 Biến thể

🏷ds:comp:sectionLabel-001🏷ds:comp:sectionDivider-001

Nhãn mặc định (cyan)

Nhãn teal

Nhãn amber

Nhãn rose

SectionDivider

Khối Mã nguồn

CodeBlock — Nút Sao chép

🏷ds:comp:codeBlock-001

CODE BLOCK VÍ DỤ

# Ví dụ: Agent gọi gmind trước khi sửa code
gmind search-codebase "cách auth middleware hoạt động?"
gmind context br-123 --depth 0
gmind trace bd-x1y2

Thẻ Prompt

PromptCard

🏷ds:comp:promptCard-001

quy trình

Ví dụ Prompt Card

Di chuột để xem gradient trên cùng xuất hiện và thẻ nâng lên.

Bố cục Lưới

Grid-2, Grid-3, Glassmorphism

🏷ds:layout:grid-001🏷ds:layout:glass-001

.grid-3

Ô 1/3

.grid-3

Ô 2/3

.grid-3

Ô 3/3

.grid-2

Ô 1/2

.grid-2

Ô 2/2

.glass (Glassmorphism)

🏷ds:layout:glass-001

Hiệu ứng kính mờ (backdrop-filter: blur) — dùng cho Navbar.

.path-tree

🏷ds:layout:pathTree-001

/gmind/
├── apps/ // Ứng dụng
├── packages/ // Thư viện
└── docs/ // Tài liệu

Ma trận Trạng thái

Trạng thái Thành phần

🏷ds:state:matrix-001

Mỗi thành phần có các trạng thái tương tác khác nhau: Mặc định, Di chuột, và Nhấn/Sao chép.

Thành phần	Mặc định	Di chuột	Nhấn / Sao chép
`PillarCard`	Nền --surface, viền --border, viền trái accent	Viền sáng, translateY(-2px), đổ bóng	—
`CodeBlock`	Nền tối, chữ mono, viền --border	—	Nút → ✓ Đã sao chép (2 giây), màu --accent-teal
`NavLink`	Chữ --text-dim, gạch chân 0%	Chữ --text, gạch chân 0→100%	Gạch chân 100%, màu --accent-cyan (trang hiện tại)
`PromptCard`	Nền --surface, gradient trên ẩn	Viền sáng, translateY(-3px), gradient xuất hiện	scale(0.98), viền --accent-cyan, glow cyan / Disabled: opacity 0.5
`ArchLayer`	Nền --surface, viền --border, số lớp mờ	Viền sáng, đổ bóng glow cyan	Viền --accent-cyan, glow mạnh / Disabled: opacity 0.5
`Button`	Primary: nền cyan / Secondary: viền / Danger: viền rose	Primary: sáng hơn + glow / Secondary: nền surface / Danger: nền rose dim	scale(0.97), shadow đậm hơn / Disabled: opacity 0.45
`Badge`	Pill mono — nền accent-dim, viền accent, chữ accent	—	—
`Tooltip`	Ẩn (opacity 0, translateY 4px)	opacity 1, translateY 0, mũi tên chỉ hướng	—

Token CSS đặc trưng

Cách Sử dụng Token

🏷ds:state:tokenUsage-001

css · VÍ DỤ: VE-CARD

.ve-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.ve-card:hover {
  border-color: var(--border-highlight);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

Luồng Người dùng

Hành trình Điều hướng

4 luồng người dùng chính trên website — từ khám phá đến sao chép prompt.

🧭

Luồng 1: Khám phá

🏷ds:flow:explore-001

Trang chủ → Đọc 4 Trụ cột → Xem Kiến trúc 5+1 → Nhấn Kiến trúc

📋

Luồng 2: Sao chép Prompt

🏷ds:flow:copy-prompt-001

Trang chủ → Prompts → Duyệt Quy trình/Quy tắc → Nhấn Sao chép

🔬

Luồng 3: Nghiên cứu

🏷ds:flow:research-001

Trang chủ → Nghiên cứu → Xem PRDs → Duyệt Spike (hoàn thành/đang chờ)

🐙

Luồng 4: Khách GitHub

🏷ds:flow:github-visitor-001

GitHub README → gmind.gscfin.com → Hiểu nhanh 4 Trụ cột → Sao chép prompt

Bản đồ Điều hướng

Cấu trúc Trang

🏷ds:flow:pageStructure-001

[Trang chủ] · [Kiến trúc] · [Prompts] · [Nghiên cứu] · [Design System] · [GitHub↗]

Navbar (cố định trên cùng) → Nội dung trang → Footer (liên kết)