Design system

Lantern

Sổ tay học thuật cho một trung tâm tiếng Anh tự tin: giấy kẻ ô có lề đỏ, tiêu đề Epilogue đậm, thân bài Literata như tạp chí khoa học. Chữ nhấn là nghiêng serif kèm vệt bút dạ quang, nét bút đỏ của giáo viên (khoanh điểm, dấu tích) tự vẽ khi cuộn tới. Mục đánh số § 01, § 02…, ảnh có chú thích "Hình n", nút có bóng cứng như dấu mộc.

Font

Tiêu đề, nhãn, số

Epilogue

Từ mất gốc đến IELTS 7.0+

Nội dung, chữ nhấn nghiêng

Literata

Mỗi lớp tối đa 12 học viên, giáo viên chữa bài viết từng câu và gửi nhận xét sau mỗi buổi.

Nhãn

Epilogue in hoa

§ 02 · Lộ trình học

Màu

Nền giấy

#F6F3EA

CMS: Màu nền

Mực

#1B1E26

Chữ, viền, bóng cứng. CMS: Màu chữ

Bút đỏ

#8E2C35

Nút, lề, nét khoanh. CMS: Màu chính

Dạ quang

#EFDD6B

Vệt nhấn chữ, chọn chữ. CMS: Màu nhấn

Kẻ ô

#C9D5E6

Đường kẻ giấy (pha nền). CMS: Màu phụ

Giấy trắng

nền + 70% trắng

Thẻ, phiếu, ô nhập

Thang chữ

Tinh tế trong từng chi tiết

Epilogue 650 · 38→74px · -3.5%

Tinh tế trong từng chi tiết

Epilogue 650 · 30→50px · -3%

Nhấn

Tinh tế trong từng chi tiết

Literata nghiêng 500 + vệt dạ quang 42%

Thân

Tinh tế trong từng chi tiết

Literata 400 · 15→17px · dòng 1.7

Chú thích

Tinh tế trong từng chi tiết

Literata nghiêng · 13px, số hình đậm

Nhãn

Tinh tế trong từng chi tiết

Epilogue 600 · 11px · in hoa · +14%

Bo góc

Mọi thứ40% bo góc CMS (mặc định 3px)
Điểm, tab nổitròn / vuông mép

Khoảng cách

Khung nội dung1152px, lề 24px
Khoảng section80px → 112px
Giấy kẻ ôô 24px, lề đỏ cách mép 24–48px

Chuyển động

Hiện dần 550ms cubic-bezier(.22,1,.36,1): mờ → rõ, nhích 14px, so le 70ms. Nét bút đỏ tự vẽ 900ms sau 350ms. Nút chính ấn xuống 2px làm bóng cứng ngắn lại. Ảnh giáo viên xám → màu khi rê.

Thành phần

Nút

Kiểm tra trình độ Xem học phí Lịch khai giảng

Ô nhập

Số điện thoại Kiểu phiếu thi

Tiêu đề có vệt dạ quang

Nói tiếng Anh tự tin sau 12 tuần

Đầu mục tạp chí

Phiếu điểm + bút đỏ

N.T.H.

IELTS Academic

7.5

Chip lớp học · dấu chứng chỉ

T2 · T4 · T6, 18:00 Offline Cầu Giấy Tối đa 12 HV

IELTS 8.5CELTA

Giấy kẻ ô có lề đỏ

Lantern

Font

Màu

Thang chữ

Bo góc

Khoảng cách

Chuyển động

Thành phần

Tham chiếu 21st.dev