Nhúng cho web & liên kết cố định
Web dev chỉ cần dẫn link: font thật, logo bằng chữ, và link asset không bao giờ đổi — mỗi lần bộ nhận diện phát hành bản mới, mọi nơi đang nhúng tự ra hình mới.
1. Font MORA Tech & logo bằng chữ (không cần tệp SVG)
Nhúng một dòng CSS để có font MORA Tech (Regular = wordmark, Light = tên sản phẩm; tự host tại brand.mora.vn, CORS mở cho mọi tên miền) và font giao diện Plus Jakarta Sans (nạp từ Google Fonts) cùng các biến màu primary --mora-primary: #0077B2:
<link rel="stylesheet" href="https://brand.mora.vn/font.css"> <span class="mora-wordmark">MORA</span> <span class="mora-product">Doc</span>
Cần cả symbol (khung + chấm)? Thêm script, rồi dùng phần tử <mora-logo> — script tự nạp font, dựng symbol bằng SVG nhỏ nhúng sẵn và wordmark bằng chữ, đúng tỷ lệ lockup gốc:
<script src="https://brand.mora.vn/logo.js" defer></script> <mora-logo size="32"></mora-logo> lockup ngang màu <mora-logo variant="trang" size="40"></mora-logo> bản trắng — trên nền tối / ảnh <mora-logo variant="den"></mora-logo> bản đen — in một màu <mora-logo product="Doc" size="36"></mora-logo> lockup sản phẩm / module (chấm mang màu sản phẩm) <mora-logo symbol="off"></mora-logo> chỉ wordmark
| Thuộc tính | Giá trị | Ghi chú |
|---|---|---|
variant | mau · trang · den | màu (mặc định), trắng cho nền tối/ảnh, đen cho in một màu |
product | Chat · Cloud · Doc · Sheet · Slide · PDF · HRM · FaceID · Meet · Mail · tên module (Payroll, CRM…) | thêm tên sản phẩm/module bằng MORA Tech Regular, chấm đổi sang màu sản phẩm |
size | số px | chiều cao logo; chiều rộng tự theo tỷ lệ |
symbol | off | chỉ hiện wordmark |
JavaScript: MoraLogo.svg({product:"Doc", variant:"trang", size:40}) trả về chuỗi SVG để chèn nơi khác (email HTML không chạy script — dùng link cố định PNG bên dưới). Quy tắc vẫn giữ: không đổi màu, không kéo giãn, khoảng trống quanh logo ≥ 1 chiều cao chữ hoa.
2. Link cố định của asset — dẫn một lần, không bao giờ gãy
Mỗi asset trong bộ có một link cố định dạng https://brand.mora.vn/i/<mã>. Link luôn trả về bản của phiên bản đang phát hành: khi bộ gốc đổi (logo, icon được biên tập viên cập nhật và quản trị duyệt), hình ở mọi website/ứng dụng đang dẫn link tự đổi theo trong vòng 10 phút — không phải cập nhật lại từng nơi. Nếu asset đổi tên hoặc đổi chỗ, hệ thống tự gán mã cũ sang asset mới; trường hợp không tự gán được, quản trị được báo để gán tay — link không tự nhiên 404.
| Asset | Link cố định | |
|---|---|---|
| Logo lockup ngang màu | https://brand.mora.vn/i/lockup-ngang-mau.svg | sao chép · mở |
| Logo lockup ngang trắng | https://brand.mora.vn/i/lockup-ngang-trang.svg | sao chép · mở |
| symbol màu | https://brand.mora.vn/i/symbol-mau.svg | sao chép · mở |
| MORA Doc — icon (nền trong suốt) 512 px | https://brand.mora.vn/i/doc-icon-512.png | sao chép · mở |
| MORA Doc — lockup | https://brand.mora.vn/i/doc-lockup.svg | sao chép · mở |
| Favicon | https://brand.mora.vn/i/favicon.svg | sao chép · mở |
Cách lấy mã: trên mọi trang asset (Logo, Sản phẩm, Module, Tải xuống) bấm nút 🔗 cạnh các nút tải — link đã được sao chép. Thêm ?dl=1 để tải về với tên tệp kèm số phiên bản; SVG logo thêm ?bare=1 để bỏ nền kèm theo (khe hở trong suốt).
<img src="https://brand.mora.vn/i/lockup-ngang-mau.svg" alt="MORA" height="32"> <img src="https://brand.mora.vn/i/doc-icon-512.png" alt="MORA Doc" width="64"> <link rel="icon" href="https://brand.mora.vn/i/favicon.svg">
Kỹ thuật: CORS Access-Control-Allow-Origin: *, Cache-Control: public, max-age=600, stale-while-revalidate=86400, ETag theo phiên bản, header X-MORA-Version. Link /a/ và /p/ theo đường dẫn tệp vẫn hoạt động nhưng có thể đổi khi bộ đổi cấu trúc — dùng /i/ cho mọi chỗ nhúng lâu dài.