D-01 — Hướng thiết kế · Khối duyệt gu S-P1 và S-D3

BƯỚC 1 · TRƯỚC KHI VẼ

Ràng buộc đo được

Tương phản WCAG AA

Mọi cặp chữ/nền dùng trong hai hướng đều ≥ 4,5:1 với chữ thường. Bảng đủ 18 cặp kèm tỉ số đo bằng công thức luminance: xem NOTES.md mục 1. Màu nhấn trượt biên chỉ dùng làm nền nút; chữ nhỏ dùng bản đậm hơn của cùng màu.

Font

Một họ font cho toàn bộ chữ: Inter (subset tiếng Việt). Thêm đúng một font mono — chỉ cho mã yêu cầu, mã hash, mã REQ. Không gọi máy chủ ngoài: bản xem trước này khai báo họ font + font hệ thống dự phòng; file font tự lưu (woff2 subset vietnamese) đóng gói ở D-02 cùng tokens — xem câu hỏi mở trong NOTES.md.

Không dark pattern

Ô đồng ý không ô nào đánh dấu sẵn (REQ-CONSENT-02). Nút “Đồng ý và gửi” và nút “Không đồng ý” cùng chiều cao 48 px, cùng cỡ chữ, cùng độ đậm, đặt cạnh nhau. Mục đích bắt buộc / tùy chọn ghi bằng chữ, không chỉ bằng dấu sao. Mỗi mục đích một ô riêng (REQ-CONSENT-01).

Vùng bấm & cột chữ

Vùng bấm ≥ 44 px trên mobile. Thân bài form 16–17 px, line-height 1,55; cột chữ trong form ≈ 62 ký tự. Bảng/việc trong dashboard tối thiểu 14 px. Tiêu đề lớn: tracking âm nhẹ, line-height 1,02–1,1, và là chữ lớn nhất trong khối của nó — kể cả ở 390 px.

BƯỚC 3 · HƯỚNG A

Hướng NEO — “Điềm tĩnh kiểu Stripe”

Neo vào: dashboard của Stripe (số đo ở NOTES.md mục 2). Số đo mượn: mực navy #0A2540, nền xám-xanh rất nhạt #F6F9FC, thẻ trắng bo 12 px, bóng đổ mềm hai lớp, nhãn 13–14 px độ đậm 500–600, nút bo 8 px. Rủi ro cố ý: dễ bị đọc là “generic SaaS” — đánh đổi lấy cảm giác quen thuộc, đã được chứng minh là đáng tin với người dùng doanh nghiệp.

S-P1 · HƯỚNG NEOForm nhúng trên website của doanh nghiệp · cột nhúng 640 px

Trang web của doanh nghiệp — vùng dưới đây là form được nhúng

THÔNG BÁO XỬ LÝ DỮ LIỆU

Đăng ký tham dự hội thảo

Form này do [Tên pháp nhân của doanh nghiệp] — bên kiểm soát dữ liệu — vận hành. Chúng tôi thu họ tên, số điện thoại và email để xác nhận đăng ký và liên hệ khi chương trình thay đổi. Chỉ bộ phận tổ chức sự kiện xem được thông tin này. Dữ liệu được giữ 12 tháng kể từ ngày sự kiện, sau đó xóa. Bạn có quyền xem, sửa, xóa dữ liệu và rút đồng ý bất cứ lúc nào tại cổng quản lý quyền. Đọc chính sách quyền riêng tư đầy đủ.

Họ và tên (bắt buộc)

Số điện thoại (bắt buộc)

Email (bắt buộc)

Đơn vị công tác (tùy chọn)

Dị ứng thực phẩm, nếu có (tùy chọn)

Đây là dữ liệu nhạy cảm (sức khỏe). Chỉ điền khi bạn cần chúng tôi chuẩn bị suất ăn riêng; muốn chúng tôi xử lý thông tin này cần thêm đồng ý riêng ở mục đích 4 bên dưới.

Bạn đồng ý cho chúng tôi dùng dữ liệu vào việc gì?

Không ô nào được chọn sẵn. Chọn mục đích bắt buộc để gửi được form; mục đích tùy chọn bỏ qua vẫn gửi được.

1 · Gửi xác nhận đăng ký và thông tin tham dự. Bắt buộc
Dùng họ tên, số điện thoại, email. Không có mục này, chúng tôi không hoàn tất được đăng ký của bạn. 2 · Nhận thông tin các sự kiện tiếp theo qua email. Tùy chọn
Tối đa 2 email mỗi tháng. Rút đồng ý trong từng email hoặc tại cổng quản lý quyền. 3 · Nhận ưu đãi từ đối tác đồng hành của sự kiện. Tùy chọn
Chúng tôi chuyển email của bạn cho đối tác đồng hành ghi trong chính sách. Không chọn thì không chuyển. 4 · Xử lý thông tin dị ứng để chuẩn bị suất ăn riêng. Tùy chọn Dữ liệu nhạy cảm
Chỉ chuyển danh sách dị ứng (không kèm họ tên) cho đơn vị phục vụ suất ăn, và xóa sau sự kiện 7 ngày.

Bấm “Không đồng ý” thì form không được gửi và không dữ liệu nào được lưu. Rút đồng ý sau này không ảnh hưởng tính hợp pháp của phần đã xử lý trước đó.

Sau khi gửi, người điền thấy:

Đã ghi nhận đăng ký lúc 09:41, 04/11/2026. Các mục đích bạn đã đồng ý: 1 và 2. Mã bằng chứng của lượt đồng ý này: a3f9·c41d — xem và rút đồng ý tại cổng quản lý quyền.

S-D3 · HƯỚNG NEODashboard · khối đầu trang Tổng quan · cột nội dung 1040 px

TỔNG QUAN · [TÊN DOANH NGHIỆP]

Việc cần làm hôm nay

Thứ Tư, 04/11/2026 · 3 việc cần chú ý, trong đó 1 việc đã quá hạn

72/100

Điểm sẵn sàng tuân thủ

1.284/2.000

Lượt đồng ý tháng này so với giới hạn gói

Trả lời yêu cầu rút đồng ýTừ cổng quyền · mã yêu cầu YC-7J9X Quá hạn · hạn phản hồi 03/11/2026 Mở yêu cầu
Trả lời yêu cầu xem dữ liệuTừ cổng quyền · mã yêu cầu YC-7K2P Sắp tới hạn · phản hồi trước 06/11/2026 Mở yêu cầu
Phát hành thông báo cho form “Đăng ký hội thảo tháng 11”Form đang dùng bản nháp · chưa có thông báo đã phát hành Chưa tới hạn Soạn thông báo

BƯỚC 3 · HƯỚNG B

Hướng TỰ ĐỀ XUẤT — “Sổ cái & con dấu bằng chứng”

Chữ ký: sản phẩm bán bằng chứng tin cậy được, nên hình học chủ đạo là sổ cái — dòng kẻ ngang của sổ, cột mã mono, dòng thời gian dọc nối các sự kiện — và con dấu bằng chứng: mỗi lượt đồng ý đóng một dấu viền kép chứa 8 ký tự đầu của mã hash. Số đo tự đặt: nền giấy ấm #FAF7F0, mực xanh-đen #1F2A24, một màu nhấn duy nhất là xanh dấu mực #0B6E4F, bo góc 4 px (tính chất văn bản/sổ), không bóng đổ — phân cấp bằng kẻ và khoảng trắng. Rủi ro cố ý: gần với cảm giác “hồ sơ giấy” — nếu quá tay sẽ bị đọc là cũ; giữ lại bằng cỡ chữ lớn, khoảng trắng rộng và mono có nhịp. Đổi tên hai hướng cho nhau, câu mô tả không còn đúng — hai hướng khác nhau thật.

S-P1 · HƯỚNG TỰ ĐỀ XUẤTForm nhúng trên website của doanh nghiệp · cột nhúng 640 px

Trang web của doanh nghiệp — vùng dưới đây là form được nhúng

THÔNG BÁO XỬ LÝ DỮ LIỆU · REQ-NOTICE-01

Đăng ký tham dự hội thảo

Form này do [Tên pháp nhân của doanh nghiệp] — bên kiểm soát dữ liệu — vận hành. Chúng tôi thu họ tên, số điện thoại và email để xác nhận đăng ký và liên hệ khi chương trình thay đổi. Chỉ bộ phận tổ chức sự kiện xem được thông tin này. Dữ liệu được giữ 12 tháng kể từ ngày sự kiện, sau đó xóa. Bạn có quyền xem, sửa, xóa dữ liệu và rút đồng ý bất cứ lúc nào tại cổng quản lý quyền. Đọc chính sách quyền riêng tư đầy đủ.

Họ và tên (bắt buộc)

Số điện thoại (bắt buộc)

Email (bắt buộc)

Đơn vị công tác (tùy chọn)

Dị ứng thực phẩm, nếu có (tùy chọn)

Đây là dữ liệu nhạy cảm (sức khỏe). Chỉ điền khi bạn cần chúng tôi chuẩn bị suất ăn riêng; muốn chúng tôi xử lý thông tin này cần thêm đồng ý riêng ở mục đích 4 bên dưới.

Bạn đồng ý cho chúng tôi dùng dữ liệu vào việc gì?

Không ô nào được chọn sẵn. Chọn mục đích bắt buộc để gửi được form; mục đích tùy chọn bỏ qua vẫn gửi được.

1 · Gửi xác nhận đăng ký và thông tin tham dự. Bắt buộc
Dùng họ tên, số điện thoại, email. Không có mục này, chúng tôi không hoàn tất được đăng ký của bạn. 2 · Nhận thông tin các sự kiện tiếp theo qua email. Tùy chọn
Tối đa 2 email mỗi tháng. Rút đồng ý trong từng email hoặc tại cổng quản lý quyền. 3 · Nhận ưu đãi từ đối tác đồng hành của sự kiện. Tùy chọn
Chúng tôi chuyển email của bạn cho đối tác đồng hành ghi trong chính sách. Không chọn thì không chuyển. 4 · Xử lý thông tin dị ứng để chuẩn bị suất ăn riêng. Tùy chọn Dữ liệu nhạy cảm
Chỉ chuyển danh sách dị ứng (không kèm họ tên) cho đơn vị phục vụ suất ăn, và xóa sau sự kiện 7 ngày.

Bấm “Không đồng ý” thì form không được gửi và không dữ liệu nào được lưu. Rút đồng ý sau này không ảnh hưởng tính hợp pháp của phần đã xử lý trước đó.

Sau khi gửi, người điền thấy:

Đã ghi nhận đăng ký lúc 09:41, 04/11/2026. Các mục đích bạn đã đồng ý: 1 và 2. Dấu bằng chứng bên cạnh là 8 ký tự đầu của mã hash của lượt đồng ý này — xem và rút đồng ý tại cổng quản lý quyền.

S-D3 · HƯỚNG TỰ ĐỀ XUẤTDashboard · khối đầu trang Tổng quan · cột nội dung 1040 px

TỔNG QUAN · [TÊN DOANH NGHIỆP]

Việc cần làm hôm nay

Thứ Tư, 04/11/2026 · 3 việc cần chú ý, trong đó 1 việc đã quá hạn

72/100

Điểm sẵn sàng tuân thủ

1.284/2.000

Lượt đồng ý tháng này so với giới hạn gói

01 Trả lời yêu cầu rút đồng ýTừ cổng quyền · mã yêu cầu YC-7J9X Quá hạn · hạn phản hồi 03/11/2026 Mở yêu cầu
02 Trả lời yêu cầu xem dữ liệuTừ cổng quyền · mã yêu cầu YC-7K2P Sắp tới hạn · phản hồi trước 06/11/2026 Mở yêu cầu
03 Phát hành thông báo cho form “Đăng ký hội thảo tháng 11”Form đang dùng bản nháp · chưa có thông báo đã phát hành Chưa tới hạn Soạn thông báo

BƯỚC 4 · DUYỆT GU TRÊN MỘT KHỐI

Biến thể lệch nhau trên một trục

Mỗi bộ biến thể giữ nguyên mọi thứ — cỡ chữ, màu (vỏ Hướng NEO), khoảng cách, nút — và chỉ đổi một trục ghi trên từng bộ. Phần không đổi của khối (thông báo và các trường, ở S-P1) không vẽ lại; biến thể chỉ dựng phần thay đổi để so cạnh nhau cho nhanh.

S-P1 · Trục duy nhất: cách trình bày mục đích

P1-A · DANH SÁCH PHẲNG

Bạn đồng ý cho chúng tôi dùng dữ liệu vào việc gì? 1 · Gửi xác nhận đăng ký và thông tin tham dự. Bắt buộc
Không có mục này, chúng tôi không hoàn tất được đăng ký của bạn. 2 · Nhận thông tin các sự kiện tiếp theo qua email. Tùy chọn
Tối đa 2 email mỗi tháng, rút đồng ý bất cứ lúc nào. 3 · Nhận ưu đãi từ đối tác đồng hành. Tùy chọn
Không chọn thì email của bạn không được chuyển cho đối tác. 4 · Xử lý thông tin dị ứng để chuẩn bị suất ăn riêng. Tùy chọn Nhạy cảm
Xóa sau sự kiện 7 ngày.

P1-B · MỖI MỤC ĐÍCH MỘT THẺ

Bạn đồng ý cho chúng tôi dùng dữ liệu vào việc gì? 1 · Gửi xác nhận đăng ký và thông tin tham dự. Bắt buộc
Không có mục này, chúng tôi không hoàn tất được đăng ký của bạn. 2 · Nhận thông tin các sự kiện tiếp theo qua email. Tùy chọn
Tối đa 2 email mỗi tháng, rút đồng ý bất cứ lúc nào. 3 · Nhận ưu đãi từ đối tác đồng hành. Tùy chọn
Không chọn thì email của bạn không được chuyển cho đối tác. 4 · Xử lý thông tin dị ứng để chuẩn bị suất ăn riêng. Tùy chọn Nhạy cảm
Xóa sau sự kiện 7 ngày.

P1-C · NHÓM THEO BẮT BUỘC / TÙY CHỌN

Bạn đồng ý cho chúng tôi dùng dữ liệu vào việc gì?

Cần cho việc đăng ký

1 · Gửi xác nhận đăng ký và thông tin tham dự. Bắt buộc
Không có mục này, chúng tôi không hoàn tất được đăng ký của bạn.

Chỉ khi bạn muốn thêm

2 · Nhận thông tin các sự kiện tiếp theo qua email. Tùy chọn
Tối đa 2 email mỗi tháng, rút đồng ý bất cứ lúc nào. 3 · Nhận ưu đãi từ đối tác đồng hành. Tùy chọn
Không chọn thì email của bạn không được chuyển cho đối tác. 4 · Xử lý thông tin dị ứng để chuẩn bị suất ăn riêng. Tùy chọn Nhạy cảm
Xóa sau sự kiện 7 ngày.

S-D3 · Trục duy nhất: cách trình bày danh sách việc cần làm

D3-A · HÀNG DANH SÁCH (NHƯ HƯỚNG NEO)

Việc cần làm hôm nay

Trả lời yêu cầu rút đồng ýMã YC-7J9XQuá hạn · 03/11/2026
Trả lời yêu cầu xem dữ liệuMã YC-7K2PSắp tới hạn · 06/11/2026
Phát hành thông báo cho form “Đăng ký hội thảo tháng 11”Chưa có thông báo đã phát hànhChưa tới hạn

D3-B · MỖI VIỆC MỘT THẺ

Việc cần làm hôm nay

Trả lời yêu cầu rút đồng ýMã YC-7J9XQuá hạn · 03/11/2026
Trả lời yêu cầu xem dữ liệuMã YC-7K2PSắp tới hạn · 06/11/2026
Phát hành thông báo cho form “Đăng ký hội thảo tháng 11”Chưa có thông báo đã phát hànhChưa tới hạn

D3-C · BẢNG BA CỘT

Việc cần làm hôm nay

Việc	Hạn	Trạng thái
Trả lời yêu cầu rút đồng ý · YC-7J9X	03/11/2026	Quá hạn
Trả lời yêu cầu xem dữ liệu · YC-7K2P	06/11/2026	Sắp tới hạn
Phát hành thông báo cho form tháng 11	—	Chưa tới hạn

BƯỚC 7 · KIỂM BẰNG MÁY

Cổng máy — kết quả chạy trên bản này

Kết quả đo thật (script + Chrome headless trên chính file này, ở 1440 px, 390 px và các bề rộng giữa) ghi đầy đủ trong NOTES.md mục 7, kèm ảnh chụp từng khối ở hai bề rộng. Tóm tắt: không tràn ngang ở mọi bề rộng đã quét; 0 yêu cầu mạng ra ngoài; tắt JavaScript không khối nào mất chữ (trang không dùng JavaScript); mọi ô đồng ý đều không chọn sẵn và có nhãn đọc được bằng trình đọc màn hình; hai nút đồng ý / không đồng ý bằng kích thước.

Một câu lời thường: đây là bản đầu tiên của D-01, chưa có bản trước để so. Nó đặt hai hướng cạnh nhau trên cùng một nội dung thật để product owner và phiên chấm gu độc lập chọn hướng bằng mắt trên đúng hai khối sẽ nhân ra toàn bộ sản phẩm — thay vì duyệt một trang hoàn chỉnh rồi mới phát hiện hướng sai.