Bộ nhận diện umini
Tất cả nguyên tắc thiết kế của umini gói gọn một nơi: logo, màu, chữ, cách vẽ & diễn hoạt pixel, bộ kít nhân vật trâu và tài nguyên tải về. Dựng bằng chính hệ thống pixel của site — mọi thứ bạn thấy đều là SVG sống, không phải ảnh chụp.
Logo
Logo umini gồm mark trâu pixel + wordmark umini.app. Tên tách nghĩa: U = You · Ultimate · Universal, MINI = nhỏ gọn · tối ưu.
Nên
- Giữ khoảng thở tối thiểu = chiều cao chữ "u".
- Dùng trên nền sáng (green-50 / trắng).
- Kích thước mark tối thiểu 24px để giữ nét pixel.
Không nên
- Không kéo méo tỉ lệ hay bo tròn góc pixel.
- Không đổ bóng mềm / gradient lên logo.
- Không đặt lên nền rối làm mất nét trâu.
Màu sắc
Xanh lá là màu thương hiệu. Bấm vào ô bất kỳ để copy mã HEX.
Bảng màu 6 nghề (nhân vật)
Typography
Một phông duy nhất: Montserrat (400–800). Hỗ trợ đầy đủ dấu tiếng Việt — thay cho font pixel cũ vốn vỡ dấu.
Cách vẽ pixel
Mọi nhân vật & đạo cụ là SVG lưới rect — sắc nét ở mọi độ phân giải, không dùng file ảnh.
- viewBox 20×20 — mép dưới = bàn chân (nhân vật luôn bám đất).
shape-rendering="crispEdges"giữ cạnh pixel sắc.- Mỗi "pixel" là
<rect>1×1 (hoặc khối chữ nhật gộp). - Bóng đổ dải mờ dưới chân để vật thể "đứng" trên nền.
- Bộ phận động (tay/chân/mắt) là
<g>riêng +transform-originở khớp.
// thân trâu
g(p.body, r(6,9,8,7)) // khối 8×7 từ (6,9)
Diễn hoạt
Hoạt hình dùng CSS steps() để giữ chất giật pixel. Bộ hành động dùng chung (điều khiển tập trung trong ACTIONS). Luôn bật trên mọi thiết bị.
Bộ kít nhân vật
Tám chú trâu: 6 nghề đa ngành + founder + barista. Mỗi con = 1 palette + đạo cụ + hành động riêng.
Thư viện props
Đạo cụ & bối cảnh tái dùng để dựng cảnh làm việc (bàn, máy tính, cảm biến, xe, cây…).
UI & Mockup
Phong cách flat-pixel: viền cứng 2px, đổ bóng cứng không blur, bo góc 0.
Tải xuống
Lấy nguyên bộ tài nguyên để tái sử dụng ngoài site.