Hilykan Brand Guidelines · 2026
Precision in craft. Distinction in every light.
Hệ thống nhận diện dành cho một đối tác sản xuất đèn trang trí B2B—được xây trên uy tín, chất lượng đúng cam kết, tiến độ đúng hạn và khả năng hiện thực hóa yêu cầu dự án.
Bắt đầu sử dụng ↘Every light tells a story
01 / Aesthetic principles
Hilykan thể hiện sự cao cấp bằng độ chính xác, vật liệu thật và khoảng thở—không bằng trang trí phô trương.
Nền ngà là chế độ mặc định cho tài liệu, web và thông tin kỹ thuật; nền đen chỉ dành cho hero, ảnh sản phẩm và không gian trải nghiệm.
Viền mảnh thay cho bóng nặng; bóng chỉ xuất hiện khi cần thể hiện lớp nổi hoặc trạng thái tương tác.
Ảnh phải cho thấy tỷ lệ, bề mặt vật liệu, cách ánh sáng lan tỏa hoặc bằng chứng chế tác.
Vàng kim là tín hiệu: dùng cho nút chính, link, focus, con số quan trọng và chi tiết logo—không dùng làm nền lớn hoặc chữ thân bài.
Mỗi bố cục phải cân bằng được hai phẩm chất: cảm xúc của ánh sáng thủ công và kỷ luật của một nhà sản xuất dự án quốc tế.
01.1 / Logo system
Chỉ dùng file logo gốc. Không gõ lại wordmark, không đổi tỷ lệ, không thêm viền hoặc hiệu ứng.
Preferred / Gold on IvoryPremium / Gold on InkKhoảng an toàn
Tối thiểu bằng 1/2 chiều rộng dấu H ở mọi phía.
Kích thước tối thiểu
Dấu H: 20px / 6mm. Logo đầy đủ: 120px / 32mm.
02 / Colour tokens
Ba lớp token giúp con người và AI dùng cùng một ngôn ngữ: màu gốc → ý nghĩa → trạng thái.
#F8F5F0Nền chính#EEE9E1Nền phụ#DED6CBNền vô hiệu#C5BAADĐường phân cách#9F9182Chi tiết phụ#776A5EViền chức năng#554A41Chữ phụ đậm#342C27Nền tối ấm#1D1916Chữ chính#FFF7E8Ánh sáng nền#F9E3B7Logo vàng sáng#E9C98FNhấn trên nền tối#D5AE70Chi tiết trang trí#C09251Vàng logo trung tâm#A37435Icon lớn#7F5728CTA / link#5A3B1DCTA hover#382313CTA pressed#F3F3F2Nền neutral#D7D6D3Chữ sáng phụ#B2B0ACChữ muted nền tối#85817BViền nền tối#5D5953Chữ muted nền sáng#45413CSurface nâng#302D29Surface tối#1F1D1ASurface dark#0D0C0BNền trình diễn--bg#F8F5F0Nền trang—--surface#FFFFFFCard / field—--text#1D1916Chữ chính trên --bg16.05:1 · AAA--text-muted#5D5953Chữ phụ trên --bg6.40:1 · AA--accent#7F5728Link / tín hiệu trên --bg5.86:1 · AA--on-accent#FFFFFFChữ trên --accent6.37:1 · AA--border#776A5EViền chức năng trên --bg4.82:1 · Đạt 3:1--focus-ring#7F5728Focus trên --bg5.86:1 · Đạt 3:1--bg#0D0C0BNền trình diễn—--surface#1F1D1ACard tối—--text#F8F5F0Chữ chính trên --bg17.97:1 · AAA--text-muted#B2B0ACChữ phụ trên --bg9.03:1 · AAA--accent#E9C98FLink / tín hiệu trên --bg12.30:1 · AAA--on-accent#1D1916Chữ trên --accent10.99:1 · AAA--border#85817BViền chức năng trên --bg5.05:1 · Đạt 3:1--focus-ring#F9E3B7Focus trên --bg15.54:1 · Đạt 3:1Chuẩn đo: WCAG 2.2 — chữ thường ≥4.5:1; chữ lớn, icon và viền chức năng ≥3:1. AAA chữ thường ≥7:1. “Đạt 3:1” không được dùng cho chữ thân bài.
Light: #216E4E · 6.17:1
Dark: #75D6A7 · 11.11:1
Luôn đi cùng icon + nhãn chữ.Light: #B42318 · 6.57:1
Dark: #FFB4AB · 11.51:1
Luôn đi cùng icon + nhãn chữ.Light: #7A4D00 · 7.27:1
Dark: #FFD28A · 13.81:1
Luôn đi cùng icon + nhãn chữ.03 / Typography
Inter là font hệ thống: rõ ở dữ liệu kỹ thuật, điềm tĩnh trong tiêu đề và hỗ trợ đầy đủ tiếng Việt. Fallback: Arial, sans-serif.
Ánh sáng được chế tác
để thuộc về không gian.
Quy tắc: tiêu đề dùng sentence case; không dùng ALL CAPS quá 5 từ; đoạn văn tối đa 72 ký tự mỗi dòng; không dùng weight dưới 400.
04 / Geometry & depth
space-1 · 4pxspace-2 · 8pxspace-3 · 12pxspace-4 · 16pxspace-6 · 24pxspace-8 · 32pxspace-12 · 48pxspace-16 · 64pxspace-24 · 96pxspace-32 · 128px0 8 24 / 8%0 20 60 / 14%Không dùng glow. Không chồng quá hai lớp bóng. Card mặc định chỉ có viền.
06 / Component specifications
--surface; border divider #C5BAAD; radius 8; padding 24/32; không bóng mặc định.
Surface · Border · Radius · PaddingCao 48; nền #FFFFFF; border #776A5E; radius 4; padding 12×14; label cách 8; lỗi kèm icon.
Input · Select · TextareaCao 72 desktop, 64 mobile; nền theo ngữ cảnh; khoảng ngang 32; active dùng underline 2px, không dùng pill.
Desktop · MobilePadding 16; radius 4; icon 20; tiêu đề 14/20 semibold; nội dung 14/22; luôn có icon + chữ.
Success · Error · WarningCao 24; padding 4×8; radius 4; chữ 12/16 semibold; dùng nhãn trạng thái, không trang trí.
Neutral · StatusTrack cao 6, radius 999; fill Gold 700 trên sáng / Gold 300 trên tối; luôn có % hoặc nhãn bước.
Linear · StepCustom decorative lighting for a five-star coastal hospitality project.
✓ Quality record available
Inspection data accompanies the final handover.
07 / Motion
cubic-bezier(.2,0,0,1)Nút, link, card affordance.
ease-outTooltip, menu, nội dung đổi trạng thái.
cubic-bezier(.2,.8,.2,1)Overlay, drawer; dịch chuyển tối đa 16px.
prefers-reduced-motion: tắt parallax và auto-play; duration 0.01ms; giữ thay đổi opacity tức thời để người dùng vẫn nhận biết trạng thái.
08 / Rejected colours
#FE4F0AThuộc tài liệu hệ sinh thái, quá khẩn cấp và lấn át sản phẩm Hilykan.
Thay bằng: Gold 700 #7F5728#FFAC00Gợi công trường/khuyến mại, không đạt chất sang trọng điềm tĩnh.
Thay bằng: Gold 300 hoặc 700#058DC7Tạo cảm giác công nghệ lạnh, tách khỏi vật liệu thủ công và ánh sáng ấm.
Thay bằng: Ink 900 + Gold 300#800080Không có gốc trong logo, portfolio hay vật liệu Hilykan.
Thay bằng: Ivory 700 hoặc Ink 700#F9E3B7 on #F8F5F0Tương phản thấp; chữ và icon chức năng sẽ mất nét.
Thay bằng: Gold 700 on Ivory 100 · 5.86:109 / Applications
Mockup là định hướng triển khai. File sản xuất phải dùng logo vector gốc và thông tin thật đã được duyệt.
10 / Brand test
Chỉ cần một câu trả lời “Không” — ấn phẩm phải làm lại.