Mật Pet Family - Since 2011 Peace of Mind
Brand Guideline · v1.0 · 2026

Mỗi bé là một gia đình mới, không phải một giao dịch.

Tài liệu này là kim chỉ nam cho mọi visual, ngôn ngữ và touchpoint của Mật Pet Family. Hãy đọc cùng nhau, sửa cùng nhau, và bảo vệ nó như cách chúng ta bảo vệ tình cảm khách dành cho các bé.

Since2011
Followers10M+
Views20B+
ShowroomTP.HCM
Logo Mật Pet Family — phiên bản full
logo-full.png4076 × 1056
Pink PastelCreamMintGoldDeep Ink
01
Foundation

Về thương hiệu

Mật Pet Family không bán thú cưng — chúng tôi tìm gia đình cho các bé.

Sứ mệnh

Trong 15 năm, Mật Pet Family đã đồng hành cùng hàng chục nghìn gia đình đón các bé thú cưng thuần chủng về nhà. Chúng tôi không cạnh tranh giá rẻ — chúng tôi cạnh tranh bằng trải nghiệm, bảo hành 3 tầng và sự đồng hành trọn đời.

Với 80% khách mua từ xa và 85% truy cập từ mobile, mọi pixel chúng ta thiết kế đều phải phục vụ một trải nghiệm: tin tưởng nhau, ngay từ lần chạm đầu tiên trên màn hình điện thoại.

Core principle

Emotion First.

Pet ownership là một mối quan hệ, không phải một giao dịch. Mọi communication — từ post Facebook đến CTA pet detail page — đều phải lead bằng cảm xúc và kết nối. Giá, upsell, bảo hành chỉ xuất hiện sau khi khách đã có connection với bé. Nguyên tắc này thắng mọi heuristic conversion-rate truyền thống.

→ Áp dụng: Fold 1 pet detail page = câu chuyện. Fold 4+ = giá. CTA = “Tôi quan tâm bé [name].” — KHÔNG “đặt cọc”.
I

Ấm áp như nhà

Cream warm tone, ngôn ngữ "gia đình mình", không khoảng cách corporate.

II

Premium tuyệt đối

Không sale, không deal hot, không "rẻ nhất". Chúng ta bán sự yên tâm.

III

Đồng hành trọn đời

Bảo hành 3 tầng là sản phẩm cốt lõi — visual treatment phải tương xứng.

IV

Emotion-led, Mobile-first

85% khách mobile, 80% mua từ xa. Mọi thứ test mobile trước desktop.

02
Color system

Color palette

Tỷ lệ 60·30·7·3 phải được tôn trọng tuyệt đối. Pink + Cream là DNA — mọi visual phải có ít nhất một trong hai.

Pink Pastel60%
Cream30%
Mint7%
Gold3%
Primary · 90% diện tích visual
Pink Pastel
Primary · 60%

Hồng phấn nhẹ — sole driver cho primary CTA, hero background, flash highlight, chips cảm xúc. Tuyệt đối không dùng pink lòe loẹt kiểu girls' marketing. Đây là pink mềm, premium, dành cho người trưởng thành yêu thú cưng.

RGB 255 · 207 · 233HSL 326° · 100 · 91OKLCH 0.91 · 0.06 · 354
Cream White
Primary · 30%

Nền chính của toàn site. Ấm như ánh nắng buổi sáng. TUYỆT ĐỐI KHÔNG thay bằng pure white #FFFFFF ở body background — pure white chỉ dùng cho card, input field, modal.

RGB 255 · 246 · 230HSL 38° · 100 · 95OKLCH 0.97 · 0.02 · 84
Accent · 10% — dùng có chủ đích, không trang trí
Mint Trust
Accent · 7%

Supporting accent, subtle divider, badge thông tin trung tính. Gợi cảm giác sạch, thú y, đáng tin — không lạnh.

Heritage Gold
Accent · 3%

Vàng champagne — sole color cho warranty Gold/Premium tier, kanban-scroll thumb. KHÔNG dùng cho CTA thông thường.

Deep Ink
Text · 3%

Mực đen pha xanh than. Mọi headline, body text, primary border, card-warranty-premium nền. KHÔNG dùng pure black #000.

Supporting · trạng thái hệ thống
Surface
#FFFFFF
Border Soft
#E8DFD0
Muted Text
#5F574E
Success
#3D6A4D
Error
#C5482E

Quy tắc sử dụng màu

  • Tỷ lệ 60·30·7·3 tôn trọng tuyệt đối — Pink dẫn dắt, Cream nâng đỡ, Mint/Gold điểm xuyết.
  • Pink Pastel + Cream là DNA màu — mọi visual phải có ít nhất một trong hai.
  • Body text luôn Deep Ink trên Cream — contrast 15:1, đạt AAA.
  • Không dùng đỏ tươi (#FF0000), cam neon, vàng chanh — phá vibe premium.
  • Không gradient nhiều màu phức tạp. Tối đa gradient 2 tone trong cùng họ Pink hoặc Cream.
  • Không pure white #FFFFFF làm body background — chỉ làm surface card.
03
Type system

Typography

Một font duy nhất — Montserrat, weights 300–800, subset Vietnamese. Identity nhất quán, giảm cognitive load.

Aa
Montserrat
Geometric sans-serif · Designed by Julieta Ulanovsky · OFL · 18 weights · Latin + Vietnamese subset
300
Light
400
Regular
500
Medium
600
Semibold
700
Bold
800
Extra

Lý do chọn: render dấu tiếng Việt sạch, geometric khoẻ khoắn nhưng có warmth nhất định ở các đường cong — hợp với positioning ấm áp + premium của Mật Pet.

Display
64 / 700 / 1.1
Tìm gia đình cho bé.
Heading 1
48 / 700 / 1.2
Bảo hành 3 tầng trọn đời
Heading 2
36 / 600 / 1.3
Đồng hành cùng các bé từ năm 2011
Heading 3
24 / 600 / 1.4
Bé Mật — Alaskan Malamute, 4 tháng tuổi
Body Large
18 / 400 / 1.6
Mỗi bé đến với Mật Pet Family đều có một câu chuyện riêng. Chúng tôi không vội giới thiệu giá — chúng tôi muốn anh chị gặp bé trước đã.
Body
16 / 400 / 1.6
Bé đã được tiêm phòng đầy đủ 5 mũi, tẩy giun định kỳ, có giấy chứng nhận sức khoẻ từ bác sĩ thú y của Mật Pet.
Small
14 / 400 / 1.5
Mã bé: MP-D2604-001 · Ngày nhập: 12 / 04 / 2026 · Showroom Tân Bình
Caption
12 / 500 / 1.4
Cập nhật lần cuối · 14:32 hôm nay
Pricing · luôn format đầy đủ
22,000,000 VND
22tr22M22 triệu

Số đầy đủ thể hiện sự minh bạch và xứng đáng với mức giá premium. Mật Pet không né tránh giá — chúng ta tự tin với giá trị mình mang lại.

Quy tắc typography

  • Headlines luôn weight 600–700, không bao giờ thin / light.
  • Body text weight 400–500. Body-md là default cho mọi prose.
  • Input mobile (<767px) bắt buộc font-size 16px — chặn iOS auto-zoom.
  • Không italic trong UI / headline. Italic chỉ dành cho quote testimonial.
  • Không mix font khác Montserrat trên web / social. Một identity = một font.
  • Không viết tắt giá: 22tr / 22M / 22 triệu đều cấm.
05
Voice & tone

Brand voice & tone

Cách Mật Pet nói chuyện. Mỗi từ là một quyết định về cảm xúc khách sẽ cảm thấy.

Personality

Ấm ápLạnh lùng

Ấm áp như chị Sếp Mai (founder) — người đã 15 năm gọi từng bé bằng tên.

Tận tâmGiao dịch

Chuyên nghiệp 15 năm, nhưng vẫn nhớ tên từng bé đã về nhà mới.

Cảm xúcSến súa

Lead bằng kết nối thật, không cliché "yêu thương bao la".

PremiumXa cách

Cao cấp ở chất lượng, gần gũi ở cách nói. Không "kính gửi quý khách".

Gọi khách
anh / chị / gia đình mình
khách hàng · quý khách · bạn
Xưng
em / Mật Pet
chúng tôi · shop · cửa hàng
Gọi thú cưng
bé + tên · em bé bốn chân
con · nó · sản phẩm · hàng
❌ Đừng nói
✅ Nên nói
Mua thú cưng tại Mật Pet
Đón bé về nhà cùng Mật Pet
Bán chó / mèo thuần chủng
Tìm gia đình mới cho các bé
Đặt cọc ngay để giữ hàng
Giữ chỗ để gặp bé
Truy cập website của shop
Ghé thăm nhà Mật Pet
Con chó này đẹp lắm chị ơi
Bé Mật xinh không kìm được nha chị
Sản phẩm hiện đang còn hàng
Bé đang ở showroom chờ gia đình mới
Chương trình hậu mãi sau bán
Đồng hành trọn đời cùng bé
Quý khách hàng thân thiết
Gia đình mình
Sale sốc cuối tuần — giảm 30%
Không bao giờ. Mật Pet không sale.
CSKH sẽ liên hệ trong 24h
Em sẽ nhắn lại anh/chị trong ngày
Mẫu copy chuẩn

“Bé Mật là một chú Alaskan Malamute 4 tháng tuổi, sinh ra ở trại giống Mật Pet ngay tại Tân Bình. Bé có đôi mắt đen tròn rất tỉnh, tính nết hiền và đặc biệt mê được vuốt sau gáy. Mỗi sáng bé sẽ đợi ở cửa lồng để xin được ra ngoài chạy.

Em để dành riêng phần giới thiệu này cho bé Mật vì biết anh chị đang tìm một người bạn đồng hành lâu dài, không phải chỉ một em bé dễ thương để chụp hình. Anh/chị có muốn em hẹn anh chị một buổi gặp bé tại nhà Mật Pet không ạ?”

— Trích trang chi tiết bé · Fold 1 · matpet.vn
06
Visual language

Visual style

Ngôn ngữ hình ảnh là Soft Premium — mềm vừa đủ để thân thiện, không bao giờ trẻ con.

A

Photography

Soft natural light, background pastel hoặc minimal, biểu cảm bé luôn vui vẻ hoặc hiền.

pet portrait · 4:5 · natural light · cream bg
Pet shot 4:5 cho social — soft light, pet biểu cảm hiền
hero · 16:9 · pet + human connection · pink bg
Hero web 16:9 — khoảnh khắc kết nối pet + human
flat lay · 1:1 · pet + favorite toy · cream bg
Pet + đồ vật yêu thích, flat lay tone pastel
harsh flash · cluttered bg · stressed expression
Flash gắt, nền tối lộn xộn, biểu cảm pet căng thẳng
studio black bg · pet baring teeth · low-key
Studio nền đen, low-key — phá vibe ấm áp Mật Pet
heavy filter · oversaturated · sticker spam
Filter nặng, oversaturate, dán sticker trang trí thừa
B

Illustration & pattern

Minimal, organic, hand-drawn nhẹ. Pattern dấu chân / xương / trái tim rải rác tỷ lệ thấp — KHÔNG flat icon corporate.

Pattern · Paws
Pattern · Hearts
Pattern · Dots
12 pxImage trong card
16 pxCard mặc định
24 pxHero block, modal lớn
9999 pxButton, chip, avatar
C

Component library

Mỗi component có một mục đích, một state, một copy template — không tạo thêm khi đã có biến thể đủ.

Button · Primary
bg #FFCFE9 · text #192223 · radius full
Button · Secondary
surface · border 1px · text deep ink
Button · Ghost
bg cream · text deep ink · action thứ yếu
Đã tiêm phòngBảo hành PremiumĐã giao bé
Chip / Badge
3 tone: mint info · gold tier · success forest
Input field
surface · radius 12 · mobile font-size 16 bắt buộc
SM
Avatar
radius full · 56 px default · monogram fallback
Mật
Có sẵn

Alaskan Malamute · 5 tháng

Hiền lànhQuấn người
Bảo hành
22.000.000đXem bé
Pet card · production component
Import từ @/components/PetCard · radius 16 · price luôn đầy đủ
Standard
Miễn phí · 30 ngày
Bao gồm theo bé
Gold +25%
6 tháng
Khám định kỳ + thay bé
Premium +35%
1 năm trọn đời
Đồng hành toàn diện
Warranty cards — 3 tầng
Standard surface · Gold accent border · Premium deep ink inverse

Elevation & depth

Depth bằng tonal layers + soft borders, không hard drop shadow. Body cream → card surface (chênh tone tự tạo lớp). Modal/dropdown shadow nhẹ: 0 4px 16px rgba(25,34,35,.08).

07
In the wild

Brand applications

Cách identity sống trên các touchpoint thực tế — social, web, in ấn, giấy chứng nhận.

01
Facebook post
Post giới thiệu bé mới, square 1:1, brand voice ấm áp.
Mật Pet Family
14 phút · 🐾
Bé mới về nhà Mật

Bé Mật đang đợi gia đình mới

Alaskan Malamute · 4 tháng · mắt tỉnh, tính hiền, mê được vuốt sau gáy.

pet photo · centered · soft light
@matpetfamilymatpet.vn
02
Instagram story
Story 9:16, brand pink dominant, CTA gọi nhanh.
matpetfamily2g
Câu chuyện hôm nay

Bé Mật vừa được vuốt sau gáy lần đầu.

pet candid · 9:16
Gặp bé tại nhà Mật ↗
03
Web hero matpet.vn
Live homepage render — luôn match production thật-thời-gian-thực.
04
Business card
Name card cho team, 85×55mm chuẩn print.
Since 2011 · Peace of Mind
Mai Nguyễn
Founder · Sếp Mai
0939 · 86 · 36 · 96
mai@matpet.vn
239 Nguyễn Hồng Đào · Tân Bình
05
Chứng nhận sức khỏe
Cert sức khỏe bé khi bàn giao, A4 portrait.
Giấy chứng nhận thuần chủng

Bé Mật

Giống
Alaskan Malamute
Mã bé
MP-D2604-001
Ngày sinh
12 / 12 / 2025
Microchip
900 215 0001 5421
Sếp Mai · Founder
Bác sĩ thú y phụ trách
06
Document bảo hành
Hợp đồng bảo hành 3 tầng, A4 portrait, deep ink premium.
Premium · +35%
Đồng hành trọn đời

Bảo hành Premium — 1 năm

Khám định kỳ hàng tháng · Hỗ trợ thay bé nếu sức khoẻ không đảm bảo · Tư vấn dinh dưỡng & hành vi không giới hạn.

  • Khám sức khoẻ 12 lần / năm tại showroom
  • Tư vấn 24/7 qua Zalo & hotline
  • Hỗ trợ thay bé trong 6 tháng đầu
  • Tặng gói grooming & spa định kỳ
Phát hành: 12 / 04 / 2026MPW-2604-001

Hot-swap workflow khi có asset thật

  1. 1. Đội design ship PSD/Figma → export PNG/JPG/WebP (recommend WebP quality 85, ~150-400KB max).
  2. 2. Drop file vào /public/brand-mockups/
  3. 3. Edit applications.config.ts đổi entry type: 'css-mock' type: 'image' + add imagePath/imageAlt/width/height.
  4. 4. Commit + push. Vercel auto-deploy ~2 phút. Zero JSX change. CSS mock components giữ lại làm reference.
08
Cheat sheet

Do's & Don'ts

Bản tổng hợp một trang — in ra dán lên bàn nếu cần. Đây là những điều thắng mọi heuristic khác.

Always

10 điều luôn làm

  1. 01Lead bằng câu chuyện và cảm xúc — giá nói sau khi khách đã connect.
  2. 02Gọi pet là "bé + tên". Gọi khách là "anh/chị" hoặc "gia đình mình".
  3. 03Tôn trọng tỷ lệ màu 60·30·7·3 — Pink dẫn, Cream nâng, Mint/Gold điểm.
  4. 04Mỗi visual phải có ít nhất một trong hai: Pink Pastel hoặc Cream.
  5. 05Body background luôn cream #FFF6E6. Card mới dùng surface trắng.
  6. 06Format pricing đầy đủ: 22,000,000 VND — không tắt, không tròn số.
  7. 07Montserrat duy nhất, Vietnamese subset, weight 300–800.
  8. 08Mobile-first — test mobile trước desktop. Input mobile font-size 16px bắt buộc.
  9. 09Bảo hành 3 tầng là sản phẩm cốt lõi — visual treatment xứng đáng, không phụ kiện.
  10. 10CTA chính: "Tôi quan tâm bé [name]" hoặc "Gặp bé tại nhà Mật".
Never

10 điều tuyệt đối không

  1. 01Không dùng "đặt cọc", "mua ngay", "add to cart" làm CTA chính.
  2. 02Không gọi pet là "con", "nó", "sản phẩm", "hàng", "mặt hàng".
  3. 03Không dùng "khách hàng", "quý khách", "khách hàng thân thiết".
  4. 04Không viết tắt giá: 22tr / 22M / 22 triệu đều cấm.
  5. 05Không pure white #FFFFFF làm body — chỉ làm surface card.
  6. 06Không đỏ tươi / cam neon / vàng chanh / gradient cầu vồng.
  7. 07Không đổi màu, stretch, xoay, bóp méo logo.
  8. 08Không heavy drop shadow — depth bằng tonal layer + soft border.
  9. 09Không mix font khác Montserrat trên web / social.
  10. 10Không sale, không deal hot, không "rẻ nhất Việt Nam". Premium tuyệt đối.
Một câu duy nhất để nhớ

Mật Pet không corporate khô khan, cũng không cute kiểu trẻ con. Cân bằng giữa “ấm áp như nhà” “chuyên nghiệp như một studio cao cấp”.