Hồ sơ giao diện, bản 2.0

Mỗi bài học là một vụ án

Bộ giao diện Detective Noir cho conan.school. Bốn thám tử biết nhìn theo bạn, icon có ba trạng thái, nút và hộp thông tin phản hồi từng cú chạm.

Thiết kế bởi Thông Phan

Rê chuột để soi đèn. Bấm vào một nhân vật.

Chất liệu

Một nguồn sáng, còn lại là bóng tối

Hổ phách là đèn đường, chỉ dùng cho thứ cần nhìn. Đỏ neon chỉ dành cho nghi phạm, biển hiệu và cảnh báo.

Mực đêm--color-n2-ink
Nền trang--color-n2-ink-2
Than chì--color-n2-coal
Than nổi--color-n2-coal-2
Viền, đường chia--color-n2-coal-3
Khói, chữ phụ--color-n2-smoke
Ngà--color-n2-ivory
Ngà mờ--color-n2-ivory-dim
Hổ phách--color-n2-amber
Chữ trên hổ phách--color-n2-amber-ink
Đỏ neon--color-n2-neon
Mưa--color-n2-rain
Đúng, rất tiết chế--color-n2-ok

Mỗi ô màu vẽ bằng chính lớp token và ghi tên token, không ghi mã màu: đổi token trong theme.css là mọi trang đổi theo.

Chữ

Bốn giọng chữ

Big Shoulders Display 900, tiêu đề thẻ phimVụ án khép lại
Big Shoulders Display 700, tiêu đề mụcHồ sơ số 07: dòng tiền
Newsreader đứng, giọng người kể

Bạn không cần đoán. Bạn cần một manh mối đúng, rồi đi theo nó tới cùng.

Be Vietnam Pro, thân bài

Khách bỏ giỏ ở bước thanh toán vì phí giao hàng chỉ hiện ra ở cuối. Đưa phí lên trang sản phẩm rồi đo lại sau một tuần.

IBM Plex Mono, số và mã hồ sơHS-07 40% bỏ giỏ 12:00 phút

Hiệu ứng chữ

Chữ sôi mựcAi lấy tiền quỹ?
Bút xoá rút đi

Thủ phạm là phí giao hàng hiện ra muộn, không phải giá bánh.

Máy đánh chữ

Hồ sơ 08. Tiệm bánh Ngọc Lan, quận 3. Khách bỏ giỏ ở bước cuối.

Biển neon bật điệnMở cửa
Con dấuĐÃ PHÁ ÁN

Noir 2.0 cho Conan School. Bộ giao diện do anh Thông Phan (CMO Conan) thiết kế, Conan School dựng lại bằng React, Tailwind và token dùng chung.

Thiết kế bởi Thông Phan, xem bản gốc