Friendly first
Giao diện thân thiện, gần gũi. Bo tròn mềm, màu vàng ấm, ngôn ngữ đời thường thay vì trang trọng cứng nhắc.
K-DNA
Kakao Design DNA
Ấm áp. Bo tròn. Đặt nội dung & kết nối lên trước.
K-DNA là tài liệu tham khảo font & branding lấy cảm hứng từ hệ nhận diện công khai của Kakao và bộ Kakao Font mã nguồn mở. Đây là documentation only — một lựa chọn thiết kế thứ ba bên cạnh Branding Guideline (Hilda/Ericsson) và S-DNA (Sembcorp). Không phải redesign, không phải component library, không áp dụng toàn cục.
Nguồn tham khảo: Kakao Corp — Brand · Kakao Font (OFL-1.1) · Adobe Fonts — Kakao. Các nhãn hiệu Kakao thuộc về Kakao Corp; trang này chỉ dùng cho mục đích tham chiếu thiết kế nội bộ.
Design Philosophy
Kakao là ngôn ngữ thiết kế flat, ấm, content-forward: bề mặt phẳng, ít đổ bóng và gradient, mã màu mạnh qua sắc vàng đặc trưng cùng nền trung tính sạch. Cảm giác như một ứng dụng nhắn tin thân thiện — gần gũi nhưng vẫn rõ ràng, dễ đọc.
Content-forward
Nội dung dẫn dắt. Trang trí lùi lại phía sau. Bề mặt phẳng, ít nhiễu thị giác.
Rounded & soft
Bo góc là chữ ký. K-DNA dùng card 16–20px, nút và ô nhập ~12px — gợi tinh thần bo tròn của Kakao. Không góc nhọn gắt.
Warm color coding
Một sắc vàng chủ đạo (#FEE500) làm điểm nhấn hành động, phần còn lại là trung tính sạch.
Whitespace breathes
Khoảng thở rộng rãi. Phân vân thì thêm spacing, đừng thêm màu hay bóng.
Connection as motif
Bong bóng chat (speech bubble) là hình mẫu nhận diện — biểu tượng của kết nối con người.
Color System
Một màu thương hiệu duy nhất — Kakao Yellow — trên nền trung tính và Near Black. Chữ đặt trên nền vàng luôn là #333333, không bao giờ dùng chữ trắng trên vàng (tương phản kém).
Primary & Brand base
Kakao Yellow
#FEE500Màu chính · nút CTA · điểm nhấnYellow Deep
#FDD835Trạng thái hover / pressedNear Black
#1E1E1EWordmark · brand base · biểu tượng trên nền vàngText on yellow
On-Yellow Text
#333333Chữ trên nền vàng — KHÔNG dùng trắngNeutrals
Body
#4A4A4AĐoạn vănMuted
#8A8A8ANhãn · captionBorder
#ECECECViền card · dividerCream Canvas
#FFFDF3Nền trang (ám vàng nhẹ)Semantic (muted)
Success
#12B886Thành côngInfo
#4B8BF4Thông tinWarning
#F59E0BCảnh báoDanger
#E8635ELỗi · nguy hiểmTypography — Kakao Font
Kakao Font (phát hành miễn phí, giấy phép SIL Open Font License 1.1, © Kakao Corp) gồm hai họ chữ sans-serif tối ưu cho môi trường số. Font chữ thương hiệu dùng cho brand & marketing; UI chức năng dùng system font. Chữ Kakao có nét đều, bo mềm, khoảng chữ rộng rãi và chữ thường (lowercase) giàu tính thân thiện.
kakao
Rounded sans-serif · uniform stroke · soft curves · generous spacing
Kakao Big Sans
Cấu trúc chắc, ổn định, module bám chặt — truyền tải thông tin rõ ràng ở cả tiêu đề và body. Ba độ đậm: Regular (body), Bold và ExtraBold (title / large display).
Kakao Small Sans
Khoảng chữ (letter-spacing) rộng và bụng chữ (counter) mở lớn → dễ đọc trên màn hình nhỏ, cỡ chữ bé. Dùng cho caption, label, chú thích, UI mật độ cao.
Coverage & License
Hangul (Hàn) · Latin · Cyrillic · Japanese kana · symbols. Giấy phép OFL-1.1 — miễn phí cho cả dùng cá nhân lẫn thương mại.
Weights — Kakao Big Sans
Aa 가Regular / 400 · body
Aa 가Bold / 700 · title
Aa 가ExtraBold / 800 · display
Type scale (hierarchy)
Kết nối mọi người
Tiêu đề mục nội dung
Đoạn văn body dùng Big Sans Regular — nét đều, dễ đọc, khoảng dòng thoáng để giảm mỏi mắt trên màn hình.
CAPTION · LABEL · CHÚ THÍCH NHỎ
Do
Big Sans cho title + body; Small Sans cho chữ nhỏ. Chữ thường (lowercase) cho wordmark. Khoảng dòng thoáng (1.6–1.75).
Don't
Không viết HOA toàn bộ tiêu đề dài. Không nhồi nhiều weight lạ. Không kéo giãn / bóp méo chữ. Không chữ trắng trên vàng.
Trên blog này
K-DNA là tham chiếu. Blog vẫn dùng font hệ thống Inter/Hilda; specimen ở trên hiển thị bằng stack bo tròn dự phòng để gợi tinh thần Kakao.
Logo & Wordmark
Wordmark viết chữ thường bằng một sans-serif bo tròn riêng: nét đều, đường cong mềm, khoảng cách chữ rộng rãi. Biểu tượng là bong bóng chat — nét nhận diện của kết nối con người.
kakao
Lowercase & rounded
Wordmark luôn chữ thường, bo mềm, nét đồng đều. Không in hoa, không nghiêng, không thêm bóng đổ.
Speech-bubble symbol
Bong bóng chat sẫm màu (near-black) trên nền vàng — biểu tượng cốt lõi. Góc bong bóng bo mềm, một góc nhọn nhẹ gợi "đuôi" bóng thoại.
Clear space
Chừa khoảng trống quanh logo tối thiểu bằng chiều cao chữ "k". Không đặt logo sát mép hay chồng lên ảnh nhiễu.
On dark
Trên nền tối, dùng wordmark vàng hoặc trắng; giữ bong bóng nhận diện. Luôn ưu tiên tương phản đủ.
Components
Nút vàng CTA, card bo tròn phẳng, và bong bóng chat — ngôn ngữ UI đặc trưng của KakaoTalk: bong bóng vàng cho "tôi", bong bóng trắng cho "người khác".
Buttons
Chat bubbles
Cuối tuần này rảnh không? ☕
Rảnh! Hẹn cà phê nhé 😄
Ok, 10 giờ sáng thứ Bảy!
Primary button
Nền #FEE500, chữ #333, bo 12px. Hành động chính duy nhất mỗi màn hình.
Flat cards
Nền trắng, viền 1px mảnh, bo 16–20px, gần như không đổ bóng. Nội dung trước, trang trí sau.
Bubbles
"Tôi" = bong bóng vàng canh phải; "người khác" = bong bóng trắng canh trái. Một góc bo nhỏ (4px) tạo "đuôi".
Shape & Iconography
Hình học bo tròn xuyên suốt. Icon thân thiện, nét mềm, đầu nét bo (round cap), đơn giản dễ hiểu — không sắc lạnh, không kỹ thuật cứng nhắc.
| Token | Giá trị | Dùng cho |
|---|---|---|
| Radius · container | 12px | Hộp nội dung, ô nhập, khối chính |
| Radius · card | 16–20px | Card, panel, module lớn |
| Radius · button | 12px | Nút bấm |
| Radius · pill | 999px | Chip, tag, nav item |
| Icon style | rounded | Nét mềm, round cap, friendly |
| Elevation | flat | Bóng rất nhẹ hoặc không bóng; ưu tiên viền |
Motion
Chuyển động nhẹ nhàng, vui tươi nhưng không gây xao nhãng. Bong bóng "nảy" nhẹ khi xuất hiện, nút phản hồi tức thì. Thời lượng ngắn, easing mềm.
Duration
150–250ms cho phần lớn transition. Micro-interaction ≤ 120ms để cảm giác tức thì.
Easing
Ease-out mềm cho vào; nhẹ nhàng cho ra. Có thể thêm chút "bounce" nhỏ cho bong bóng/toast.
Tránh
Animation dài, parallax nặng, scale transform lớn, hiệu ứng "đòi chú ý" liên tục.
Anti-patterns
Những gì K-DNA không là. Tránh khi borrow selectively cho page tương lai.
Chữ trắng trên vàng
Tương phản kém — luôn dùng #333 trên nền vàng.
Đen tuyền #000
Dùng near-black #1E1E1E cho cảm giác mềm, ấm hơn.
Góc nhọn gắt
Bo tròn là chữ ký — tránh card/nút góc vuông 0px.
Cầu vồng nhiều màu
Một sắc vàng thương hiệu là đủ; đừng thêm 5–6 màu nhấn.
Bóng đổ nặng
Flat + viền mảnh; tránh drop-shadow 20px+.
Glassmorphism
Blur/frosted làm mất sự rõ ràng, phá cảm giác flat ấm.
Neon / crypto UI
Glow, nền tối rực — ngược hoàn toàn tinh thần thân thiện.
Chữ giãn / bóp méo
Giữ tỉ lệ chữ gốc; không stretch, không condense thủ công.
Compatibility Rule
K-DNA là optional theme — documentation & inspiration. Không redesign trang hiện có, không SCSS migration, không tự động áp dụng.
| Ưu tiên | Nguồn | Vai trò |
|---|---|---|
| 1 | Branding Guideline (Hilda) | Design DNA mặc định — luôn ưu tiên cao nhất |
| 2 | Existing Design DNA (CLAUDE.md) | Pattern đã triển khai trên blog |
| 3 | Existing component library | Reuse trước khi tạo mới |
| 4 | S-DNA / K-DNA (trang này) | Optional — borrow selectively |
Dùng K-DNA khi
Trang cần cảm giác thân thiện, cộng đồng: onboarding vui tươi, landing sản phẩm nhẹ nhàng, tool tương tác, khối "trò chuyện"/feedback, chip/tag.
KHÔNG dùng K-DNA cho
Bài blog thường · navbar · footer · sidebar · dashboard tài chính (đã theo S-DNA) · redesign trang hiện có · đổi theme toàn cục.