Purpose
Quy định “bộ thiết kế” để Website CFP+ nhất quán trên Notion: màu sắc, typography, icon, khoảng cách, banner, callout, card, footer, header.
Scope
Áp dụng cho toàn bộ trang trong Website CFP+ (Home + Content Pages + News + Library).
Parent Source Of Truth
CFP-WEB-000: Website Master Blueprint v1.0 (<mention-page url=\"https://app.notion.com/p/7c12e674d782443ab0c583da18ff2bc1\"/>)
Design Principles (CFP+)
•Minimal, quiet, non-commercial.
•Voice-first (đọc thành tiếng rõ).
•Short sentences.
•Simple navigation.
•Translation-ready.
Tokens (v1)
Color
•Primary (Ink): #111111
•Background: #FFFFFF
•Muted background: #F6F6F6
•Accent (CFP+): (tạm để trống — chốt khi có logo palette)
•Status colors: dùng tiết chế; ưu tiên text + icon hơn màu mạnh.
Typography
•Font hệ thống (Notion default).
•Quy ước cấp độ:
\t- H2: tiêu đề section chính
\t- H3: tiểu mục
\t- Body: câu ngắn, 1 ý / 1 dòng khi phù hợp
Spacing & Layout
•Mỗi section: 1 tiêu đề + 3–7 bullet (hoặc 1 đoạn ngắn + bullet).
•Tránh đoạn văn dài \\> 5 dòng.
•Dùng divider `---` để ngắt nhịp.
Components (Notion-native)
Banner / Hero (Notion)
Chuẩn block:
•1 câu định danh (1 dòng)
•1 câu giải thích (1–2 dòng)
•1 khối “Key Links” (3–5 link)
Callout
<callout icon=\"i\">
\tDùng cho định nghĩa, nguyên tắc, hoặc thông báo quan trọng. Không dùng để “trang trí”.
</callout>
Cards / Navigation
•Dùng danh sách link + mô tả 1 dòng.
•Không dùng quá nhiều gallery nếu gây nặng đọc.
Footer
•3 nhóm link:
\t- About / Contact
\t- Constitution / Source of Truth
\t- Community / Join
Header / Navigation Standard
•Menu bậc 1 theo Sitemap v1.
•Menu bậc 2 chỉ dùng khi thật cần (giữ ít).
Definition Of Done (Design System v1)
•Có quy tắc trình bày áp dụng được ngay.
•Có “component patterns” đủ để Team Web + Team Content làm đồng nhất.
•Không phụ thuộc công cụ ngoài Notion.