Lớp Chồi
2 cô + 1 bảo mẫu / 16 bé
Design system
Mầm Xanh
Ấm, mềm và đáng tin như một lớp mầm non tốt: nền yến mạch, mảng pastel phẳng không bóng đổ, ảnh cắt hình hữu cơ (bông hoa, cỏ ba lá, đám mây, vệt cọ), khung vòm cho chân dung cô giáo, nét vẽ tay (mầm lá, mặt trời, cầu vồng) và gạch chân lượn sóng dưới chữ nhấn. Tiêu đề Alegreya nghiêng nhẹ như sách tranh, nội dung Nunito tròn chữ, nhãn viết tay Playpen Sans. Chuyển động chậm và mềm: nhích lên, xoè quạt, lắc nhẹ.
Font
Tiêu đề
Alegreya
Nơi bé lớn lên trong yêu thương
Nội dung
Nunito
Mỗi lớp có hai cô và một bảo mẫu, bé được gọi tên, được ôm và được lắng nghe.
Nhãn viết tay
Playpen Sans
Trường mầm non song ngữ · Hà Đông
Màu
Nền yến mạch
#FBF6EC
CMS: Màu nền
Chữ rêu đậm
#2B3A31
CMS: Màu chữ
Xanh lá mầm
#2F6B4F
Nút, chữ nhấn. CMS: Màu chính
Cam mơ
#E07A5F
Gạch chân lượn sóng, nhãn viết tay. CMS: Màu nhấn
Cát
#F3E3BF
CMS: Màu phụ
Bạc hà
chính 17% trên nền
Mảng pastel, tự tính
Đào
nhấn 24% trên nền
Mảng pastel, tự tính
Bơ
phụ + #FFF3B8
Mảng pastel, tự tính
Trời
#DBE8F0
Mảng pastel cố định
Oải hương
#E8E0F2
Mảng pastel cố định
Thang chữ
H1
Tinh tế trong từng chi tiết
Alegreya 600 · 40→74px · -1,5%
H2
Tinh tế trong từng chi tiết
Alegreya 600 · 33→54px · chữ nhấn nghiêng 500 + gạch lượn sóng
H3
Tinh tế trong từng chi tiết
Alegreya 600 · 23px
Dẫn
Tinh tế trong từng chi tiết
Nunito 400 · 17–18px · dòng 1,65
Thân
Tinh tế trong từng chi tiết
Nunito 400 · 15,5→16,5px
Nhãn
Tinh tế trong từng chi tiết
Playpen Sans 500 · 15px · màu nhấn + mầm lá
Bo góc
- Nút, chip, thanh menu999px
- Thẻ pastel28–32px
- Khung lớn (form, CTA, chân trang)40–48px
- Viên sỏi58% 42% 46% 54% / 52% 46% 54% 48%
- Vòm chân dung999px 999px 28px 28px
- Ảnh hữu cơclip-path bông hoa, đám mây (+ vòm, viên sỏi)
Khoảng cách
- Khung nội dung1216px, lề 20 → 32px
- Khoảng section64px → 96px
- Khe lưới16–24px
Chuyển động
Hiện dần 650–750ms cubic-bezier(.22,1,.36,1): mờ → rõ, nhích 18px, phóng 98,5% → 100%. Thẻ ảnh hero xoè quạt từ chân, lệch 120ms mỗi thẻ. Gạch chân lượn sóng tự vẽ khi tiêu đề hiện. Nút: vòng tròn mũi tên xoay -45°, nảy cubic-bezier(.34,1.4,.64,1). Mặt trời lắc 6 giây, đường nét đứt chạy chậm. Tắt hết khi người dùng chọn giảm chuyển động.
Thành phần
Nút
Đặt lịch tham quan Xem chương trình Đọc thêm
Ô nhập & chip tuổi
Thẻ pastel & viên sỏi 3–4 tuổi
Khung ảnh & nét vẽ tay
Tiêu đề có gạch chân lượn sóng
Một ngày của bé ở trường
Bé chưa biết tự xúc ăn có được không?
Được. Cô tập cho bé từng bước, tuần đầu cô bón kèm.