Kiến Trúc Phần Mềm
Single Design System Specification • .lavish
Về Hub Điều Hướng
Source of Truth • Hệ Thống Thiết Kế Duy Nhất

Quy Chuẩn Thiết Kế Hệ Thống Ghi Chép

Tài liệu đặc tả toàn diện toàn bộ quy tắc thị giác, bảng màu tinh giản, phân cấp kiểu chữ và các linh kiện (UI components) được sử dụng nhất quán trên toàn bộ các trang ghi chép trong thư mục .lavish/.

1. Triết Lý Thiết Kế 2. Bảng Màu Tinh Giản 3. Kiểu Chữ & Typography 4. Thẻ & Khối Chứa (Cards) 5. Nút & Thẻ Nhãn (Buttons & Tags) 6. Bảng Biểu (Tables) 7. Hộp Cảnh Báo (Callouts) 8. Hệ Thống Icon 9. Quy Tắc Mở Rộng

1 Triết Lý & Nguyên Tắc Cốt Lõi (Core Principles)

Định hướng nhằm giải quyết vấn đề phân tán màu sắc và tạo cảm giác học thuật, chuyên nghiệp.

1. Bảng Màu Kỷ Luật (Restrained Palette)

Tuyệt đối không dùng dải màu cầu vồng ngẫu hứng (hồng, cam, tím, xanh lá, xanh lơ). Chỉ sử dụng 1 màu nhấn duy nhất (Deep Blue #1e40af) kết hợp hệ thống thang độ xám Slate trung tính.

2. Tập Trung Nội Dung (Content-First)

Trang ghi chép kiến trúc phục vụ việc đọc sâu và tra cứu. Mọi yếu tố đồ họa, đường viền, khoảng trắng đều phải tôn lên cấu trúc logic, bảng so sánh và sơ đồ kỹ thuật.

3. Một Nguồn Sự Thật Duy Nhất (Single Truth)

Mọi bài ghi chép hiện tại và bài thêm mới sau này đều kế thừa trực tiếp từ design-system.css, không tự ý thêm các class màu lạ hay phá vỡ cấu trúc font và lề.

2 Bảng Màu Tinh Giản (Color Palette Tokens)

Hệ thống màu tối giản, độ tương phản cao, tuân thủ chặt chẽ nguyên tắc không lòe loẹt.

Primary Blue
#1e40af
Màu thương hiệu, nút chính, liên kết active
Primary Subtle
#eff6ff
Nền tag nhấn, callout info, hover link
Slate 900
#0f172a
Tiêu đề chính, văn bản có độ tương phản cao
Slate 700
#334155
Nội dung đoạn văn, nội dung bảng
Slate 100/200
#f1f5f9 / #e2e8f0
Nền thẻ phụ, viền ngăn cách (Borders)
Slate 50 (Page BG)
#f8fafc
Nền toàn bộ trang web (Light background)
!
Màu Cảnh Báo Kỹ Thuật (Warning Accent): #f59e0b / #fffbeb
Chỉ dùng khi có lưu ý sống còn (như nghẽn cổ chai L7 hay SPOF), tuyệt đối không dùng làm màu trang trí chung.
--alert-warning

3 Kiểu Chữ & Thứ Bậc Nội Dung (Typography & Hierarchy)

Sử dụng font Inter cho giao diện và JetBrains Mono cho code.

Heading 1 • text-3xl font-extrabold

Sổ Tay Kiến Trúc Phần Mềm

Heading 2 • text-xl sm:text-2xl font-bold

1. Thiết Kế Kiến Trúc Cho Khởi Đầu (500 Users/Ngày)

Heading 3 • text-base sm:text-lg font-bold

Phân Biệt Scale Up & Scale Out

Body Paragraph • text-sm text-slate-600 leading-relaxed

Hệ thống Monolith được tối ưu hóa tốt hoàn toàn có thể phục vụ lượng truy cập khổng lồ ở quy mô Web-scale mà không cần chia nhỏ thành hàng trăm microservices ngay từ đầu.

Inline Code & Code Snippet

Sử dụng mã Round Robin, Least Connections hoặc cấu hình Nginx proxy_pass http://backend_pool;.

4 Thẻ & Khối Chứa (Card Components)

Cấu trúc thẻ thống nhất với viền mỏng border-slate-200, đổ bóng nhẹ và hiệu ứng hover nhẹ nhàng.

Bài Mẫu Chuẩn 28/09/2026

Tiêu Đề Thẻ Ghi Chép Chuẩn

Mô tả ngắn gọn nội dung bài học, nêu rõ các luận điểm cốt lõi, trade-offs và giải pháp kỹ thuật cụ thể.

Chủ Đề 01 Chủ Đề 02 Thuật Toán
Class: .arch-card Đọc ghi chép →
Thẻ Thống Kê / Chỉ Số
100% Đồng Bộ

Tất cả các trang đều sử dụng chung một cấu trúc HTML, một file CSS duy nhất và cùng một nguyên tắc tương tác.

Dùng trong phần Dashboard / Stats của index.html.

5 Nút & Thẻ Nhãn (Buttons & Tags)

Đã loại bỏ hoàn toàn các màu badge sặc sỡ, chuyển về hệ nhãn xám Slate và xanh Navy.

Thẻ Nhãn (Tags / Badges):
Nhãn Trung Tính (.arch-tag) Nhãn Nhấn Mạnh (.arch-tag-primary) Monolith Microservices Load Balancer Reverse Proxy
Nút Thao Tác (Buttons):

6 Bảng Biểu Đối Chiếu (Comparison Tables)

Quy chuẩn kẻ bảng với hàng tiêu đề Slate 100, đường kẻ mảnh và responsive scroll.

Thuộc tính Quy chuẩn thiết kế Mục đích áp dụng
Header Table background: #f1f5f9; color: #334155; font-weight: 600; Phân biệt rõ ràng hàng tiêu đề cột, dễ quét mắt khi đọc tài liệu dài.
Border Divider border-bottom: 1px solid #f1f5f9; Đường chia nhẹ nhàng, không gây cảm giác đè nặng thị giác.
Hover State tr:hover td { background-color: #f8fafc; } Giúp mắt người dùng không bị lệch dòng khi đối chiếu các tiêu chí kỹ thuật.

7 Hộp Cảnh Báo & Ghi Chú (Callout Alerts)

Chỉ sử dụng 2 dạng hộp cảnh báo: Thông tin cốt lõi (Info) và Cảnh báo sống còn (Warning).

Ghi Chú Trọng Tâm (.arch-callout-info)

Dùng để nhấn mạnh câu hỏi phỏng vấn kiến trúc, quyết định kỹ thuật cốt lõi (Decision) hoặc tóm lược quy tắc then chốt.

Cảnh Báo Kỹ Thuật Quan Trọng (.arch-callout-warning)

Dùng khi phân tích các rủi ro hệ thống nghiêm trọng như Single Point of Failure (SPOF), nút thắt cổ chai tầng 7 (L7 bottleneck), hoặc khi nhận định kỹ thuật là SAI.

8 Hệ Thống Icon Chuẩn Hóa (Standardized Icon System)

Loại bỏ hoàn toàn emoji và ký tự Unicode ngẫu nhiên. Mọi icon trong hệ thống tuân thủ nghiêm ngặt chuẩn: viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke-width="2", kết hợp 4 kích thước quy ước.

Thang Đo Kích Thước Quy Ước (.arch-icon-*):
.arch-icon-xs
14×14px (Meta, Tag)
.arch-icon-sm
16×16px (Buttons, List)
.arch-icon-md
20×20px (Headings)
.arch-icon-lg
24×24px (Logo, Banner)
Bộ Icon Ngữ Nghĩa Đồng Bộ:
Mục Tiêu (Target)
Giải Pháp (Solution)
Khuyến Nghị (Check)
Không Khuyên (Cancel)
Cảnh Báo (Warning)
Bảng Biểu (Table)
Sơ Đồ (Diagram)
Styleguide (Palette)
Hướng Dẫn Kế Thừa (Checklist)

9. Quy Tắc Khi Viết Thêm Bài Ghi Chép Mới Vào Thư Mục .lavish/

  • Luôn đặt file trong thư mục .lavish/ (VD: .lavish/note-10-05.html).
  • Liên kết đúng file design-system.css ở phần <head>.
  • Dùng đúng cấu trúc Header, Breadcrumb dẫn về index.html và Footer đồng nhất.
  • Giữ nguyên bảng màu: chỉ dùng class .arch-tag hoặc .arch-tag-primary, không dùng màu Tailwind ngẫu nhiên cho badge.
  • Sử dụng đúng bộ icon chuẩn hóa trong mục 8 với .arch-icon và kích thước quy ước, tuyệt đối không chèn emoji trực tiếp vào văn bản kỹ thuật.
  • Cập nhật bổ sung Card mới vào .lavish/index.html.