Nền tảng
Logo
Biểu tượng Comitor là một khối lập phương isometric ba mặt, hiện đại, mang tông vàng của thương hiệu. Mỗi mặt có một chi tiết hình học gợi sự kết nối — ý niệm đồng hành của thương hiệu. Dùng các lockup chính thức bên dưới; không bao giờ thay thế, đổi màu hay giản lược biểu tượng. Cả hai component đều có trong @comitor/ui/shell và render được từ Server Component — biểu tượng không tốn chút JavaScript nào phía client.
Lockup chính thức
Dùng bản light trên nền trắng hoặc kem; chuyển sang bản dark mỗi khi nền tối hoặc vàng ấm, để mặt trên của khối lập phương giữ được tương phản rõ.
Bản auto
Trên mọi bề mặt đi theo theme — một thẻ, một header, chính trang này — dùng variant="auto" thay vì tự chọn bản. Đổi site này giữa sáng và tối, biểu tượng bên dưới đổi theo.
Thang cỡ
Bốn nấc đã được chỉnh lại thành một thang tỉ lệ thật: ở mọi nấc, wordmark nằm trong khoảng 0,375 đến 0,417 chiều cao icon, và khoảng cách giữ quanh 0,28 chiều cao đó. Khoảng cách lấy từ brand book (80 / 280 = 0,286). Wordmark cố ý lớn hơn so với lockup in của brand book, nơi nó bằng 72 / 280 = 0,257 chiều cao icon: với icon 36px, tỉ lệ đó sẽ cho chữ COMITOR chỉ khoảng 9px. Vì vậy đổi size chỉ đổi cỡ, không đổi gì trong bố cục.
xssmmdlg| size | Icon | Wordmark | Khoảng cách | Dùng ở đâu |
|---|---|---|---|---|
| xs | 36px | 14px · text-sm | 10px | Header của app (cao 56px) và header của thanh bên |
| sm | 48px | 20px · text-xl | 14px | Header trang gọn, thẻ đăng nhập |
| md | 80px | 30px · text-3xl | 22px | Mặc định. Trang landing, trang giới thiệu |
| lg | 128px | 48px · text-5xl | 36px | Màn hình chờ và trang bìa |
Một ràng buộc hình học phải giữ
Wordmark, gạch vàng và khẩu hiệu xếp thành một flex-col, nên gạch rộng bằng dòng nào rộng hơn. Từ đó có một luật: khẩu hiệu không bao giờ được rộng hơn wordmark. Phá luật này thì chính khẩu hiệu kéo dài gạch, còn "COMITOR" đứng hụt so với gạch — trông như wordmark bị thu nhỏ, dù wordmark không hề đổi.
xs là nấc duy nhất vẫn phá luật với khẩu hiệu mặc định mười sáu ký tự, và được để vậy có chủ ý: sửa nó nghĩa là hoặc khẩu hiệu nhỏ dưới ngưỡng đọc được, hoặc wordmark lấn át biểu tượng. Ở xs, truyền một khẩu hiệu ngắn — tên app, như mọi header trong hệ sinh thái đang làm — hoặc chỉnh nó bằng sloganClassName.
Cách dùng
import { ComitorLockup, ComitorLogo } from '@comitor/ui/shell'
// Neither component has "use client" — both render straight from a Server Component.
// The mark on its own. Sizing is a className, not a prop.
<ComitorLogo variant="auto" className="w-20 h-20" title="Comitor" />
// The horizontal lockup. One size prop moves icon, gap, wordmark and slogan together.
<ComitorLockup variant="auto" size="xs" slogan="Design System" />
<ComitorLockup variant="light" size="md" />
<ComitorLockup variant="dark" size="lg" wordmark="COMITOR TASKS" slogan="Tasks" />Vùng trống
Giữ vùng trống tối thiểu 0.5× quanh icon, với × là chiều cao của khối lập phương. Không thứ gì khác — chữ, ảnh hay viền — được lấn vào vùng đó.
Viền nét đứt đánh dấu vùng trống tối thiểu 0,5×.
Cỡ tối thiểu
Gói có hai dạng: biểu tượng logo và lockup ngang. Brand book còn định nghĩa lockup dọc — Comitor và Thiện Minh, mỗi loại trên nền sáng, ấm và tối — dưới dạng file SVG cho trang bìa, màn hình chờ và bản in. Khi bố cục cần biểu tượng xếp dọc, dùng một trong các file đó; đừng tự xếp ComitorLogo lên trên chữ của mình.
| Dạng | Tối thiểu trên màn hình | Tối thiểu khi in | Ghi chú |
|---|---|---|---|
| ComitorLogo — chỉ icon | 24 px | 10 mm | Nhỏ hơn mức này, chi tiết hình học trên mỗi mặt khối lập phương nhoè vào nhau. |
| ComitorLockup — ngang | icon 36 px (size="xs") | rộng 28 mm | xs là nấc nhỏ nhất gói có; nó được vẽ cho header cao 56px. |
| Lockup SVG của brand kit | rộng 140 px (ngang) · rộng 100 px (dọc) | 28 mm · 20 mm | Nấc xs hẹp hơn 140 px (khoảng 113 px với khẩu hiệu ngắn) và chỉ dành cho header của app và thanh bên. |
Props của ComitorLogo
| Prop | Kiểu | Mặc định | Mô tả |
|---|---|---|---|
variant | 'light' | 'dark' | 'auto' | 'light' | light cho khối lập phương mặt trên vàng nhạt, dùng trên bề mặt sáng; dark cho mặt trên màu trắng, dùng trên bề mặt màu ink hoặc ấm; auto render cả hai và đổi theo theme. |
title | string | 'Comitor' | Điền vào <title> của SVG và aria-label. Đổi khi biểu tượng đại diện cho một app cụ thể. |
className | string | — | Class về cỡ và bố cục. Không có prop size — đặt chiều rộng và chiều cao ở đây. |
style | CSSProperties | — | Style inline, chuyển xuống <svg>. |
Props của ComitorLockup
| Prop | Kiểu | Mặc định | Mô tả |
|---|---|---|---|
variant | 'light' | 'dark' | 'auto' | 'light' | Truyền thẳng xuống ComitorLogo, đồng thời quyết định màu của wordmark, gạch vàng và khẩu hiệu. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Đổi cùng lúc cỡ icon, khoảng cách, cỡ wordmark, cỡ khẩu hiệu và lề của gạch vàng theo một tỉ lệ. |
wordmark | string | 'COMITOR' | Dòng trên. Đổi khi làm lockup riêng cho từng app, ví dụ "COMITOR TASKS". |
slogan | string | 'Together Further' | Dòng dưới, hiện bằng chữ in hoa. Ở cỡ xs, đây thường là tên app ngắn. |
sloganClassName | string | — | Ghi đè preset cỡ chỉ cho khẩu hiệu — dùng khi phải chỉnh khẩu hiệu cho khớp đúng bề rộng của wordmark. |
className | string | — | Gộp vào hàng flex bên ngoài. |
style | CSSProperties | — | Style inline trên hàng bên ngoài. |
Đừng
- • Đừng kéo giãn, bóp méo, xoay hay lật biểu tượng — icon luôn giữ tỉ lệ 1:1.
- • Đừng thêm đổ bóng, quầng sáng, viền ngoài hay vát cạnh — biểu tượng là vector phẳng.
- • Đừng thay kiểu chữ của wordmark hay khẩu hiệu — chỉ dùng Inter.
- • Đừng tô lại các mặt của khối lập phương hay token hoá các giá trị hex. Vector được chép từ brand book, và đó là chỗ duy nhất trong hệ thống mà màu viết cứng là đúng — biểu tượng phải giống hệt nhau ở mọi sản phẩm.
- • Đừng đặt bản light lên nền tối / ấm (hay ngược lại) — dùng bản tương ứng, hoặc
autotrên bề mặt đi theo theme. - • Đừng tự dựng lại lockup từ logo cộng chữ của mình. Gạch vàng và khẩu hiệu nằm ở những tỉ lệ đã đo, bản ghép tay sẽ không tái tạo được.