Bỏ qua, tới nội dung chính
🔍 👤

Brand Guidelines

Chuẩn nhận diện của phat.edu.vn — để mọi trang, mọi hình ảnh, mọi câu chữ đều mang cùng một tinh thần: tĩnh tâm, chánh tín, khiêm cung. Dành cho người viết bài, thiết kế, làm ảnh chia sẻ hoặc cộng tác với dự án.

1 · Tinh thần thương hiệu

phat.edu.vn là thư viện Phật học nhập môn phi thương mại cho người Việt: một người bạn đồng hành ôn hoà, dẫn người mới đi từng bước — không phải một ngôi đền trực tuyến, không phải kênh truyền thông giật gân.

Chánh tín, không mê tín

Giúp phân biệt lời Phật dạy với tập tục pha trộn; mọi khẳng định đều dẫn nguồn.

Trung lập tông phái

Nguyên thủy, Đại thừa, Thiền, Tịnh Độ… được trình bày như những con đường, không hơn kém.

Phi thương mại

Không quảng cáo, không bán hàng, không thu phí nội dung; minh bạch về vận hành.

Riêng tư trước tiên

Không theo dõi người dùng quá mức; dữ liệu cá nhân (nhật ký) thuộc về người học.

Tên thương hiệu: viết thường, đủ ba phần — phat.edu.vn. Không viết "Phat.edu.vn", "PHAT.EDU.VN" hay tách rời "Phat Edu". Khi cần tên đầy đủ trong văn bản: "phat.edu.vn — Thư viện Phật học cho người mới".

3 · Bảng màu "giấy – rêu – sen"

Tỉ lệ khuyến nghị 60 / 30 / 10: nền giấy chiếm chủ đạo, xanh rêu cho điều hướng & hành động, vàng sen chỉ làm điểm nhấn. Token CSS khai báo trong src/styles/global.css.

Màu nền & chữ

#fdfbf7

Paper — giấy mộc

--color-paper

Nền chính toàn site, nhẹ mắt như trang giấy

#f4ecd8

Paper Soft — giấy cổ

--color-paper-soft

Nền phụ, khối nhấn, chế độ đọc kinh/sách (sepia)

#2c2520

Ink — mực nâu trầm

--color-ink

Chữ chính — trang nghiêm, không dùng đen tuyệt đối

#7a6f66

Ink Soft — xám tro

--color-ink-soft

Chữ phụ, chú thích, metadata — khiêm tốn

#1e1a17

Night — nâu đen dịu

--color-night

Nền chế độ tối / đọc đêm

Màu nhấn

#d4af37

Lotus — vàng hổ phách

--color-lotus

Điểm nhấn & CTA quan trọng — dùng tiết chế (~10%)

#f3e3bd

Lotus Soft

--color-lotus-soft

Nền callout "tóm tắt nhanh", badge nhấn nhẹ

#5f7a5c

Moss — xanh rêu

--color-moss

Màu thương hiệu phụ: nút chính, liên kết — bình an

#4a6147

Moss Deep — rêu đậm

--color-moss-deep

Chữ liên kết, trạng thái hover

#dde7d9

Moss Soft

--color-moss-soft

Nền tag, hover row, khối thông tin dịu

#8a6c52

Earth — nâu đất ấm

--color-earth

Chi tiết trang trí, minh hoạ

#e9ddcd

Earth Soft

--color-earth-soft

Viền (border) mặc định của thẻ, bảng, ngăn cách

4 · Kiểu chữ

Hai họ chữ, đều self-host (woff2, subset tiếng Việt — không gọi Google Fonts để giữ tốc độ & riêng tư):

Merriweather

--font-serif · 700

Tiêu đề (h1–h3), trích kinh văn, lời dẫn trang trọng. Mang hơi thở sách in, phù hợp văn bản Phật học.

«Tâm dẫn đầu các pháp, tâm làm chủ, tâm tạo.»

Be Vietnam Pro

--font-sans · 400 / 500 / 600

Thân bài, giao diện, nút, bảng. Thiết kế cho tiếng Việt — dấu thanh rõ ràng, dễ đọc trên màn hình nhỏ.

Học hiểu trước, thực hành sau — mỗi ngày một bước nhỏ.

  • ✅ Cỡ thân bài ≥ 16px, giãn dòng ~1.7; cột đọc tối đa ~70 ký tự (max-w-prose).
  • ✅ Thuật ngữ Pāli/Sanskrit viết nghiêng kèm nghĩa Việt lần đầu: mettā (tâm từ).
  • 🚫 Không thêm font thứ ba, không dùng chữ viết tay/calligraphy giả cổ.

5 · Giọng nói & ngôn từ

Giọng của site là người bạn đồng hành đi trước vài bước — không phải giảng sư trên pháp toà, không phải người bán khoá học. Bốn từ khoá: ôn hoà · khiêm cung · rõ ràng · khích lệ.

✅ Nên

  • ·Xưng hô "bạn", giọng một người bạn đồng hành đi trước vài bước
  • ·Ôn hoà, khiêm cung, không phán xét người chưa biết hoặc hiểu sai
  • ·Giải thích thuật ngữ ngay lần đầu xuất hiện (kèm Pāli/Sanskrit nếu có)
  • ·Luôn dẫn nguồn kinh điển / tác giả uy tín khi nêu giáo lý
  • ·Trung lập tông phái — trình bày khác biệt như những con đường, không hơn kém
  • ·Câu ngắn, chủ động; mỗi đoạn một ý; ưu tiên ví dụ đời thường
  • ·Khi nói về thực hành: nhẹ nhàng khích lệ, "thử", "tập", "dần dần"

🚫 Tránh

  • ·Hù doạ nghiệp báo, địa ngục để tạo sợ hãi; ngôn ngữ giật gân, câu view
  • ·Hứa hẹn linh nghiệm, cầu gì được nấy, "khoa học đã chứng minh" mơ hồ
  • ·Chê bai tông phái khác, hạ thấp tôn giáo khác
  • ·Từ ngữ thương mại hoá ("ưu đãi", "độc quyền", "mua ngay")
  • ·Khẳng định giáo lý không dẫn nguồn, hoặc gán quan điểm cá nhân cho Đức Phật
  • ·Thuật ngữ Hán-Việt dày đặc không giải thích với người mới
  • ·Viết tắt tuỳ tiện tên kinh, danh hiệu Phật – Bồ Tát
Thay vì viết… Hãy viết…
"Mê tín dị đoan, sai hoàn toàn!" "Đây là tập tục dân gian pha trộn về sau; lời Phật dạy trong kinh… nói rằng…"
"Không tu là đoạ địa ngục" "Hành động có chủ ý để lại dấu vết nơi tâm — ta có thể bắt đầu gieo nhân lành từ hôm nay"
"Pháp môn X cao siêu nhất" "Pháp môn X phù hợp với người…, trong khi pháp môn Y nhấn mạnh…"
"Đăng ký ngay kẻo lỡ!" "Khi nào bạn sẵn sàng, lộ trình 7 ngày luôn ở đây"

6 · Hình ảnh, icon & ảnh chia sẻ

  • ✅ Minh hoạ line-art / màu phẳng theo bảng màu; thiên nhiên tĩnh lặng (sen, lá, nước, đá).
  • ✅ Icon dùng emoji nhẹ nhàng (🧭 📜 📖 🧘 🏯 🪷) hoặc nét mảnh 1.5px cùng ngôn ngữ với LotusMark.
  • ✅ Ảnh OG tự sinh cho từng bài (chạy npm run og): nền giấy, tiêu đề serif, hoa sen góc — đồng bộ một khuôn.
  • 🚫 Không dùng ảnh tượng Phật cận mặt làm trang trí tuỳ tiện, ảnh khói hương u ám, ảnh stock "thiền thương mại" (người ngồi silhouette hoàng hôn rực rỡ).
  • 🚫 Không dùng hiệu ứng hào quang, tia sáng, lấp lánh huyền bí.

7 · Thành phần giao diện

Ngôn ngữ giao diện: mềm, thoáng, ít đường nét — bo góc lớn, viền mảnh màu đất, chuyển động ngắn dưới 200ms.

Thẻ (card)

Bo góc lớn rounded-2xl, viền earth-soft 1px, nền paper. Hover: viền moss + nâng nhẹ (-translate-y-0.5) + bóng mềm.

Nút chính

Nền moss, chữ paper, bo rounded-xl, hover sang moss-deep. Chỉ một nút chính trong mỗi khối.

Nút phụ

Viền earth-soft, chữ ink, nền trong suốt; hover viền moss. Dùng cho hành động thứ cấp.

Badge / pill

rounded-full, nền soft (moss-soft / lotus-soft / paper) + ring 1px cùng tông; chữ 12–14px.

Callout "Tóm tắt nhanh"

Nền pha lotus 16%, viền trái lotus — đặt đầu bài, 40–60 từ trả lời thẳng câu hỏi.

Callout "Thường hiểu sai"

Nền pha cam đất 14% — đính chính hiểu lầm với giọng tôn trọng.

Bảng

Header nền paper-soft, hàng ngăn bằng earth-soft/40, hover moss-soft/20, số dùng tabular-nums căn phải.

Breadcrumb & TOC

Chữ ink-soft, mục hiện tại đậm; mọi trang con đều có breadcrumb dẫn về trụ cột.

Mẫu nhanh: Nút chính Nút phụ Badge rêu Badge sen

8 · Khả năng tiếp cận (a11y)

  • ✅ Tương phản chữ/nền đạt WCAG AA trở lên; chữ chính đạt AAA.
  • ✅ Focus ring rõ ràng màu moss 2px cho điều hướng bàn phím.
  • ✅ Mọi icon trang trí có aria-hidden; ảnh nội dung có alt mô tả.
  • ✅ Hỗ trợ chế độ đọc sepia & dark mode bằng cách hoán đổi token — không hard-code màu.
  • ✅ Tôn trọng prefers-reduced-motion: tắt hiệu ứng chuyển động khi người dùng yêu cầu.

Câu hỏi về nhận diện hoặc muốn đóng góp? Xem Nguyên tắc & Đạo đức hoặc ghé Cộng đồng.

Nam Mô A Di Đà Phật.