Đen – trắng, chữ có chân, dòng vừa tầm mắt, nhiều lề. Không ảnh trang trí, không gradient, không bóng đổ — thứ duy nhất “nổi” là chữ.
Phỏng theo DESIGN.md “Claude” (VoltAgent/awesome-design-md, giấy phép MIT), đổi sang đen – trắng cho mza.vn.
Cùng một trang ở Sáng, Giấy và Tối. Người đọc chọn trong “Cài đặt đọc”; chưa chọn thì theo máy.
Chữ là thứ duy nhất nổi
Một trang đọc tốt để người đọc quên mất giao diện.
Thân bài chữ có chân, dòng vừa tầm mắt, link gạch chân và đoạn người đọc đánh dấu.
Từ thực tế
Khối duy nhất trong thân bài có nền.
Chữ là thứ duy nhất nổi
Một trang đọc tốt để người đọc quên mất giao diện.
Thân bài chữ có chân, dòng vừa tầm mắt, link gạch chân và đoạn người đọc đánh dấu.
Từ thực tế
Khối duy nhất trong thân bài có nền.
Chữ là thứ duy nhất nổi
Một trang đọc tốt để người đọc quên mất giao diện.
Thân bài chữ có chân, dòng vừa tầm mắt, link gạch chân và đoạn người đọc đánh dấu.
Từ thực tế
Khối duy nhất trong thân bài có nền.
Mực đen là màu thương hiệu duy nhất, còn lại là các bậc xám ấm. Tương phản tính với màu nền của từng nền đọc.
| Token | Sáng | Giấy | Tối | Dùng cho |
|---|---|---|---|---|
ink--color-ink | #111111tương phản 18,9:1 | #141413tương phản 17,5:1 | #f5f4eftương phản 16,7:1 | chữ chính, nút chính, viền nhấn — màu thương hiệu |
body--color-body | #2b2b2btương phản 14,2:1 | #3d3d3atương phản 10,3:1 | #d9d7d0tương phản 12,8:1 | thân bài |
muted--color-muted | #6b6b6btương phản 5,3:1 | #6c6a64tương phản 5,1:1 | #a09d96tương phản 6,8:1 | chữ phụ: ngày cập nhật, "Còn N phút", nhãn tầng |
muted-soft--color-muted-soft | #9a9a9atương phản 2,8:1 | #9a9a9atương phản 2,7:1 | #9a9a9atương phản 6,6:1 | chỉ cho đường gạch chân link, viền vô hiệu — KHÔNG dùng cho chữ (tương phản < 4.5:1) |
hairline--color-hairline | #e4e4e4tương phản 1,3:1 | #e6dfd8tương phản 1,3:1 | #2e2c29tương phản 1,3:1 | đường kẻ, viền thẻ |
canvas--color-canvas | #ffffff | #faf9f5 | #141413 | |
surface-soft--color-surface-soft | #f6f6f4tương phản 1,1:1 | #f5f0e8tương phản 1,1:1 | #1f1e1btương phản 1,1:1 | nền khối phụ: "Từ thực tế", gate |
surface-strong--color-surface-strong | #ececeatương phản 1,2:1 | #ebe6dftương phản 1,2:1 | #2a2825tương phản 1,3:1 | nền thanh tiến độ, nút phụ khi nhấn |
primary— | #111111tương phản 18,9:1 | #111111tương phản 17,9:1 | #111111tương phản 1,0:1 | |
on-primary--color-on-primary | #fffffftương phản 18,9:1 | #fffffftương phản 18,4:1 | #141413tương phản 16,7:1 | tương phản tính trên ink |
highlight--color-highlight | #e9e6dctương phản 1,2:1 | #e8e0d2tương phản 1,2:1 | #3a3832tương phản 1,6:1 | nền đoạn người đọc đánh dấu |
focus-ring--color-focus-ring | #111111tương phản 18,9:1 | #111111tương phản 17,9:1 | #f5f4eftương phản 16,7:1 | vòng focus 2px + offset 2px; trên nút đen dùng vòng ngoài màu canvas + vòng đen |
scrim--color-scrim | rgba(17,17,17,0.5) | rgba(17,17,17,0.5) | rgba(17,17,17,0.5) | nền tối sau popup/ngăn kéo (40–60%) |
success--color-success | #2f6b3btương phản 6,4:1 | #2f6b3btương phản 6,1:1 | #2f6b3btương phản 2,9:1 | chỉ tô chữ trạng thái, luôn kèm ký hiệu/chữ |
error--color-error | #a3261btương phản 7,4:1 | #a3261btương phản 7,0:1 | #a3261btương phản 2,5:1 | chỉ tô chữ lỗi biểu mẫu, luôn kèm chữ "Lỗi:" hoặc biểu tượng |
accent-alt— | #5b3fd1tương phản 6,8:1 | #5b3fd1tương phản 6,5:1 | #5b3fd1tương phản 2,7:1 | dự phòng, không dùng mặc định |
Chữ có chân cho tiêu đề và thân bài, chữ không chân cho giao diện, chữ đều cho code — cả ba tự host, đủ dấu tiếng Việt.
--font-serif · thân bài, câu định nghĩa, tiêu đề
Aa Ăă Ââ Đđ Êê Ôô Ơơ Ưư
ặ ỗ ữ ỹ Ợ — dấu chồng
Trọng lượng đang dùng
--font-sans · giao diện
Aa Ăă Ââ Đđ Êê Ôô Ơơ Ưư
ặ ỗ ữ ỹ Ợ — dấu chồng
Trọng lượng đang dùng
--font-mono · chỉ tải ở trang có khối code
Aa Ăă Ââ Đđ Êê Ôô Ơơ Ưư
ặ ỗ ữ ỹ Ợ — dấu chồng
Trọng lượng đang dùng
Đọc chậm, hiểu kỹ
Bạn đang gặp chuyện gì?
Kết quả đo được sau ba tháng
Từ thực tế
Một câu định nghĩa ngắn, nghiêng, ngay dưới tiêu đề.
Thân bài đọc ở cỡ người đọc chọn; dấu chồng như ặ, ỗ, ữ, ỹ vẫn rõ ở mọi nấc.
Chữ giao diện cho menu, nút và nhãn.
Cập nhật lần cuối: 10/2026
Gửi →
npm run build
1.500 · 2,5 · 200.000 đ
Độ dài dòng và cỡ chữ người đọc tự chỉnh bằng nút Aa; chưa chỉnh thì theo thiết bị.
Hẹp · 29em · --measure-narrow
Vừa · 33em · --measure-medium
Rộng · 37.5em · --measure-wide
Rộng — máy tính chuột/trackpad · 34.5em
| Nấc 1 | Nấc 2 | Nấc 3 | Nấc 4 | Nấc 5 | |
|---|---|---|---|---|---|
| Điện thoại, dưới 768px | 16px | 17px | 18pxmặc định | 20px | 22px |
| Máy tính bảng, màn cảm ứng rộng | 17px | 18px | 19pxmặc định | 21px | 23px |
| Máy tính chuột/trackpad từ 1200px | 16px | 17px | 18pxmặc định | 20px | 22px |
Khoảng cách đoạn: 1.1em
Tốc độ đọc 200 từ/phút — giả định, dùng cho “Còn N phút”
Nhịp 4/8px, một khung chung từ 1200px, vùng bấm vừa ngón tay.
xxs · 4px · --space-xxs: 4pxxs · 8px · --space-xs: 8pxsm · 12px · --space-sm: 12pxmd · 16px · --space-md: 16pxlg · 24px · --space-lg: 24pxxl · 32px · --space-xl: 32pxxxl · 48px · --space-xxl: 48pxsection · clamp(48px, 8vw, 80px) · --space-section: clamp(48px, 8vw, 80px)none0sm4px · nút, ô nhậpmd8px · thẻ, khối gate, popover, ngăn kéopill9999px · chip trụ, tab tầngxs · 320pxsm · 375pxmd · 768pxlg · 1200pxshort-height · max-height: 600pxTừ 1200px: mục lục 240px + 2 × khoảng cột clamp(40px, 3.5vw, 56px) + cột giữa 39rem + ‘Trong bài này’ 220px ≈ 1196–1236px, căn giữa; lề ngoài tối thiểu {spacing.xl}. dưới 1200px giữ lề gutter như cũ.
coarse · 44pxcảm ứng (pointer: coarse) ở mọi bề rộng, và mọi màn dưới 1200px — icon nhỏ hơn thì nới vùng bấmfine · 32pxchuột/trackpad từ 1200px — (pointer: fine) and (min-width: 1200px); vẫn vượt mức AA 24px của WCAG 2.5.8gap-min · 8pxinput-font-min · 16pxtránh iOS tự phóng khi bấm vào ô nhập| Token | Giá trị | Biến CSS | Dùng cho |
|---|---|---|---|
content | 0 | — | |
sticky | 10 | --z-sticky | thanh menu, thanh tiến độ |
dropdown | 20 | --z-dropdown | menu Chủ đề ▾ |
drawer | 40 | --z-drawer | mục lục điện thoại, ghi chú |
popover | 50 | --z-popover | cài đặt đọc, popover chọn chữ |
notice | 60 | --z-notice | thông báo cookie (ADR-30) — trên popover, dưới popup ủng hộ |
modal | 100 | — | popup ủng hộ |
toast | 1000 | — |
Ít và ngắn, chỉ đổi độ mờ và vị trí. Máy bật giảm chuyển động thì tắt hết.
fast150ms · --duration-fastbase200ms · --duration-baseslow300ms · --duration-slowentercubic-bezier(0.2, 0, 0, 1) · --ease-enterexitcubic-bezier(0.4, 0, 1, 1) · --ease-exitLuật: chỉ animate transform/opacity; tối đa 1–2 chuyển động mỗi màn; prefers-reduced-motion: reduce → tắt hết chuyển động, kể cả cuộn mượt.
Máy bật giảm chuyển động (prefers-reduced-motion) thì mọi chuyển động trên trang, kể cả cuộn mượt tới mục, đều tắt.
Bản sống dựng bằng chính các thành phần của trang; chữ nhỏ dưới mỗi mẫu là tên của nó trong DESIGN.md.
button-primary · button-secondaryĐội kỹ thuật? Xem các bài Làm thế nào →
text-linkpillar-chiptier-tabspain-cardTừ thực tế
Câu chuyện thật từ một lần triển khai, đặt trong khối có nền nhạt và vạch đen bên trái.
from-practice-boxBài mới về thẳng hộp thư của bạn.
email-boxprev-nextBài mới về thẳng hộp thư của bạn.
end-of-post · donate-button · comment-formresult-cardcookie-noticeĐọc tiếp: 3 email, 2 số điện thoại nhưng là 1 khách hàng: hợp nhất dữ liệu khách hàng — từ chỗ bạn dừng
continue-readingLiên hệ
contact-list
share-sheet · share-backgroundsTrích nguyên văn từ DESIGN.md.
<picture> (AVIF → WebP → gốc), rộng tối đa bằng cột chữ, khai kích thước để không giật trang.currentColor nên tự đúng ở Sáng/Giấy/Tối; phân nhóm bằng nền xám nhạt hoặc hoạ tiết sọc/chấm, không bằng màu.Trích nguyên văn từ DESIGN.md. Trượt một mục là lỗi cần sửa trước khi đăng.
Đo được, kiểm ở mọi mẫu trang (chi tiết trong reading-standard):
| Tiêu chuẩn | Mức |
|---|---|
| WCAG 2.2 | AA toàn trang; tương phản thân bài AAA (≥ 7:1) |
| Co giãn 320px / phóng chữ 200% / tự giãn dòng–chữ | không cuộn ngang, không mất chữ, không chồng lấn |
| Vùng bấm | ≥ 44×44px (cảm ứng, dưới 1200px); ≥ 32px với chuột/trackpad từ 1200px |
| Độ dài dòng / giãn dòng | 45–75 ký tự / 1.6–1.8 |
| Lighthouse mobile | Accessibility 100 · SEO 100 · Best Practices ≥ 95 · Performance ≥ 90 |
| axe-core | 0 lỗi nghiêm trọng |
| Thử tay | đọc trọn bài bằng VoiceOver, TalkBack; chỉ dùng bàn phím |
Trích nguyên văn từ DESIGN.md.
surface-soft.reading-standard.challenges.cloudflare.com) phục vụ kiểm tra chống máy tự động (reader UC-201 AC-10, ADR-32), và CHỈ tải lười khi người đọc bấm/focus vào ô nhập email hoặc form bình luận; khung trình phát YouTube của ô video (publishing UC-110 AC-1, pages/privacy.md: “chỉ tải khi bạn bấm vào video”), CHỈ tạo khi người đọc bấm nút phát — trước đó trang không có khung nhúng hay script nào của YouTube (nguồn ảnh bìa video còn [OPEN] ở UC-110; tới khi tác giả chọn, ô video là khung 16:9 site tự vẽ) (ADR-32 sửa đổi 2026-10-20).100vh thuần.cookie-notice (ADR-30: thông báo, không xin đồng ý; không scrim, không lấy focus, đóng × là không hiện lại). Không thêm hộp tự hiện nào khác “theo cùng kiểu”.Xem tệp DESIGN.md — Tệp gốc, nguyên văn, dạng chữ thô.
Câu hỏi & bình luận
Chưa có bình luận nào.