Mini Toy Brand Board

Màu gốc

Lấy bằng cách phân cụm điểm ảnh của logo và banner (bỏ nền đen). Bấm vào ô màu để chép mã.

Hồng kẹoVành tròn của logo, màu nhận diện chính
Vàng saoChữ i, chữ T và các ngôi sao
Xanh trờiChữ n và bầu trời trên banner
Tím oải hươngChữ i tím, chú bạch tuộc
Xanh bạc hàChữ y, chú rồng con
Cam khủng longChú khủng long, viền ngôi sao
Đỏ báo lỗiKhông lấy từ logo; chỉ dùng cho lỗi
Nâu socolaNét viền của logo, dùng làm màu chữ
Hồng sữaNền bên trong vòng logo, chiếm nhiều diện tích nhất

Thang màu 10 bậc

Sinh từ mỗi màu gốc, giữ nguyên sắc độ. Bậc 50–200 làm nền nhạt, 500–600 làm nút và liên kết, 700–900 làm chữ nhấn và nền tối. Trung tính ngả hồng ở đầu sáng và ngả nâu socola ở đầu tối, để xám không bị lạc tông.

Hồng kẹo --mt-pink-*

Vàng sao --mt-yellow-*

Xanh trời --mt-sky-*

Tím oải hương --mt-lavender-*

Xanh bạc hà --mt-mint-*

Cam khủng long --mt-orange-*

Đỏ báo lỗi --mt-red-*

Trung tính hồng → socola --mt-n-*

Vai trò màu

Component chỉ gọi tên vai trò, không gọi mã màu. Đổi sang giao diện tối là mỗi vai trò tự đổi giá trị.

Biến	Sáng	Tối	Dùng cho
`--surface`	#FFFDFD	#2C1611	Nền thẻ, ô nhập, hộp thoại
`--surface-page`	#FCF5F6	#1A0A06	Nền trang
`--surface-sunken`	#F5EBEC	#3C2825	Khối lún, thanh lọc, bảng
`--surface-brand-soft`	#FADBE0	#550F2B	Mảng nhấn hồng (hero, khối khuyến mãi)
`--surface-sky-soft`	#E9F8FF	#0C3345	Mảng nhấn xanh trời
`--surface-inverse`	#1A0A06	#FCF5F6	Chân trang, khối nền tối
`--text`	#3B1307	#FCF5F6	Chữ chính, tiêu đề
`--text-soft`	#51403E	#E5DADB	Chữ phụ, mô tả
`--text-muted`	#6B5B5A	#CBBEBE	Chú thích, placeholder
`--text-brand`	#C13B6C	#FF9FBC	Chữ nhấn màu thương hiệu
`--text-on-inverse`	#FCF5F6	#3B1307	Chữ trên nền tối
`--text-on-inverse-soft`	#CBBEBE	#51403E	Chữ phụ trên nền tối
`--link`	#C13B6C	#FF9FBC	Liên kết
`--border`	#E5DADB	#51403E	Viền thẻ, đường kẻ
`--border-strong`	#887978	#887978	Viền ô nhập
`--border-brand`	#FF9FBC	#9C2653	Viền nhấn hồng
`--action`	#FB6D9B	#FB6D9B	Nút chính kiểu sticker
`--action-hover`	#FF9FBC	#FF9FBC	Nút chính khi rê chuột
`--action-text`	#3B1307	#3B1307	Chữ trên nút chính
`--action-border`	#3B1307	#3B1307	Viền và bóng sticker
`--action-strong`	#C13B6C	#FF9FBC	Nút chữ trắng cho form dày, trang quản trị
`--action-strong-hover`	#9C2653	#FFC0D4	Nút chữ trắng khi rê chuột
`--action-strong-text`	#FFFFFF	#3B1307	Chữ trên nút chữ trắng
`--action-soft`	#FFDAE6	#550F2B	Nút phụ nền nhạt
`--action-soft-text`	#78193E	#FFC0D4	Chữ trên nút phụ nền nhạt
`--action-secondary`	#3B1307	#FCF5F6	Nút viền (outline)
`--accent`	#FBD747	#FBD747	Nhãn nổi bật: Freeship, Sale
`--accent-text`	#3B1307	#3B1307	Chữ trên nhãn nổi bật
`--focus`	#4E98BD	#98CCE8	Viền focus khi dùng bàn phím
`--info`	#337DA0	#98CCE8	Biểu tượng thông tin
`--info-soft`	#E9F8FF	#0C3345	Nền hộp thông tin
`--info-text`	#206281	#98CCE8	Chữ hộp thông tin
`--success`	#1E6B3F	#98D4AB	Biểu tượng thành công
`--success-soft`	#D6F2DE	#0A391F	Nền hộp thành công
`--success-text`	#1E6B3F	#98D4AB	Chữ hộp thành công
`--warn`	#A66300	#EDB87A	Biểu tượng cảnh báo
`--warn-soft`	#F5EAC2	#482600	Nền hộp cảnh báo
`--warn-text`	#854B00	#EDB87A	Chữ hộp cảnh báo
`--danger`	#D22A1D	#FF9B89	Biểu tượng lỗi
`--danger-soft`	#FFEBE4	#5E0402	Nền hộp lỗi
`--danger-text`	#AA1209	#FF9B89	Chữ hộp lỗi

Tương phản đã đo

Chữ thường cần ít nhất 4,5:1; viền ô nhập, viền focus và nút cần 3:1. Dòng "tham chiếu" cho thấy vì sao không đặt chữ trắng lên hồng gốc.

Mẫu	Cặp màu	Tỉ lệ	Kết quả
Aa	Chữ thông báo thành công trên nền nhạt	5,45:1	AA
Aa	Chữ cảnh báo trên nền nhạt	5,80:1	AA
Aa	Chữ lỗi trên nền nhạt	6,52:1	AA
Aa	Chữ thông tin trên nền nhạt	6,19:1	AA
Aa	Chữ ink trên nhãn sticker (hover pink-300) - nút đậm tối	8,53:1	AAA
Aa	Chữ chính (ink) trên nền trắng	16,16:1	AAA
Aa	Chữ chính (ink) trên nền trang	15,23:1	AAA
Aa	Chữ chính (ink) trên nền hồng nhạt logo	12,69:1	AAA
Aa	Chữ mềm trên nền trang	9,07:1	AAA
Aa	Chữ mờ trên nền trang	5,97:1	AA
Aa	Chữ mờ trên nền lún	5,50:1	AA
Aa	Chữ nhấn hồng trên trắng	5,04:1	AA
Aa	Link hồng trên nền trang	4,75:1	AA
Aa	Chữ ink trên nút chính (hồng gốc logo)	6,05:1	AA
Aa	Chữ ink trên nút chính (hover, pink-300)	8,53:1	AAA
Aa	Viền sticker ink quanh nút trên nền trang	15,23:1	Đạt 3:1
Aa	Chữ trắng trên nút đậm (action-strong)	5,11:1	AA
Aa	Chữ trắng trên nút đậm (hover)	7,46:1	AAA
Aa	Chữ hồng đậm trên nút hồng nhạt	8,18:1	AAA
Aa	Chữ ink trên nhãn vàng (accent)	11,63:1	AAA
Aa	Viền focus xanh trên trắng	3,16:1	Đạt 3:1
Aa	Viền input (border-strong) trên trắng	4,10:1	Đạt 3:1
Aa	Chữ lỗi đỏ trên trắng	5,07:1	AA
Aa	Chữ thành công trên trắng	6,41:1	AA
Aa	Chữ cảnh báo trên trắng	4,70:1	AA
Aa	Chữ sáng trên nền đảo (footer)	17,92:1	AAA
Aa	Chữ mềm trên nền đảo	10,69:1	AAA
Aa	Nhãn kẹo pink: chữ 700 trên nền 100	5,83:1	AA
Aa	Nhãn kẹo yellow: chữ 700 trên nền 100	5,61:1	AA
Aa	Nhãn kẹo sky: chữ 700 trên nền 100	5,60:1	AA
Aa	Nhãn kẹo lavender: chữ 700 trên nền 100	5,99:1	AA
Aa	Nhãn kẹo mint: chữ 700 trên nền 100	5,45:1	AA
Aa	Nhãn kẹo orange: chữ 700 trên nền 100	5,76:1	AA
Aa	(tham chiếu) Chữ trắng trên hồng gốc logo	2,71:1	Không đạt
Aa	(tham chiếu) Chữ ink trên hồng gốc logo	6,05:1	AA
Aa	[tối] Chữ chính trên nền trang	17,92:1	AAA
Aa	[tối] Chữ chính trên thẻ	15,88:1	AAA
Aa	[tối] Chữ mờ trên thẻ	9,47:1	AAA
Aa	[tối] Chữ hồng nhấn trên thẻ	8,89:1	AAA
Aa	[tối] Chữ ink trên nút chính (hồng gốc)	6,05:1	AA
Aa	[tối] Nút chính trên nền trang (nhận diện nút)	7,12:1	Đạt 3:1
Aa	[tối] Viền input trên thẻ	4,11:1	Đạt 3:1
Aa	[tối] Viền focus trên nền trang	11,14:1	Đạt 3:1
Aa	[tối] Chữ lỗi trên thẻ	8,38:1	AAA
Aa	[tối] Chữ thành công trên thẻ	10,03:1	AAA
Aa	[tối] Chữ cảnh báo trên thẻ	9,54:1	AAA
Aa	[tối] Chữ thông báo thành công trên nền nhạt	7,63:1	AAA
Aa	[tối] Chữ cảnh báo trên nền nhạt	7,56:1	AAA
Aa	[tối] Chữ lỗi trên nền nhạt	6,89:1	AA
Aa	[tối] Chữ thông tin trên nền nhạt	7,71:1	AAA
Aa	[tối] Chữ hồng nhạt trên nút hồng đậm (action-soft)	9,23:1	AAA

Chữ

Tiêu đề dùng Baloo 2: nét tròn và mập, gần với chữ trong logo. Nội dung dùng Be Vietnam Pro, dấu tiếng Việt chuẩn và dễ đọc ở cỡ nhỏ.

Quà tặng siêu dễ thương

Móc khoá khắc tên theo yêu cầu

Chọn thú, chọn màu, gõ tên và nhận hàng sau 2–3 ngày

Mỗi món đồ chơi được in 3D từ nhựa PLA an toàn, phối tối đa bốn màu. Bạn có thể tự thiết kế ngay trên web hoặc gửi ảnh thú cưng để chúng mình làm phiên bản chibi riêng.

Chú thích · Cỡ 13–14px · dùng --text-muted

Tiêu đề: Baloo 2 · 700–800Nội dung: Be Vietnam Pro · 400–700Cỡ: 56 / 32 / 19 / 16 / 13 px

Logo và icon

Logo đã tách khỏi nền đen, nền trong suốt. Viền hồng và viền trắng của huy hiệu giúp logo đứng được trên mọi nền.

Nền trắng

Nền hồng sữa

Nền tối

16 px

32 px

iPhone 180

Android

Logo gốc là ảnh JPG 1536×1024, đủ cho web nhưng chưa đủ cho in ấn. Ở cỡ 16–32 px chữ "Mini Toy" không còn đọc được, nên cần thêm một biểu tượng rút gọn (ví dụ mặt mèo hoặc chữ "M" kẹo). Nên xin người thiết kế bản SVG hoặc PNG nền trong.

Thành phần giao diện

Nút chính lấy đúng kiểu chữ trong logo: màu kẹo, viền nâu socola, bóng đổ như sticker. Các mẫu dưới đây đổi theo giao diện sáng hoặc tối.

Nút

Nhãn

Móc khoáMới vềQuà sinh nhậtCó khắc tênThú cưngBán chạy

Ô nhập

Tên in lên móc khoá

Tối đa 12 ký tự, có dấu tiếng Việt5/12

Thông báo

Đã thêm "Móc khoá rồng con" vào giỏ.

Nét chữ mảnh hơn 0,8 mm có thể in không rõ.

Chưa có tên in. Nhập ít nhất 1 ký tự để tiếp tục.

Thời gian in khoảng 2–3 ngày làm việc.

Dải cam kết (theo banner)

Freeshiptoàn quốc
Bảo hành1 đổi 1
Quà tặngsiêu dễ thương
Tư vấnnhanh chóng

Thẻ sản phẩm

Có khắc tên

Móc khoá rồng con

79.000₫

Bán chạy

Móc khoá khủng long

85.000₫

Mới về

Móc khoá gấu trúc

79.000₫

Ví dụ minh hoạ: ảnh cắt từ banner, tên và giá chỉ để xem bố cục.

Áp vào đầu trang chủ

Mini Toy

Biến ý tưởng thành đồ chơi mini

Chọn thú, phối màu, khắc tên. Hoặc gửi một tấm ảnh để AI làm phiên bản chibi của riêng bạn.

Quy tắc dùng màu

Bốn điều giữ cho trang vừa vui mắt vừa dễ đọc.

Nút chính

NênHồng gốc, chữ và viền nâu: 6,05:1

Không nênChữ trắng trên hồng gốc: 2,71:1

Màu kẹo

NênMới vềNền nhạt, chữ đậm cùng màu

Không nênMới vềChữ vàng trên nền trắng gần như vô hình

Báo lỗi

Nên

Thiếu tên in

Đỏ cam riêng, kèm icon và chữ

Không nên

Thiếu tên in

Lỗi bằng hồng thương hiệu dễ nhầm với khuyến mãi

Tỉ lệ 70 / 20 / 10

70% nền20%10%

70% nền trung tính, 20% mảng nhạt (hồng sữa, xanh trời nhạt), 10% màu đậm cho nút, giá, nhãn nổi bật. Nhiều màu kẹo cùng lúc chỉ dùng cho minh hoạ và banner.

Dùng trong code

File nguồn là brand/tokens.css. Với Next.js và Tailwind v4, import thêm brand/tailwind-theme.css để có class như bg-action, text-brand.

/* app/globals.css */
@import "tailwindcss";
@import "../brand/tokens.css";
@import "../brand/tailwind-theme.css";

/* Nút chính kiểu sticker */
.btn-primary {
  background: var(--action);
  color: var(--action-text);
  border: 2.5px solid var(--action-border);
  box-shadow: var(--shadow-pop);
  border-radius: var(--radius-pill);
}