Hướng dẫn thương hiệu
Một biểu tượng, một màu xanh, một giọng nói.
Toàn bộ hệ thống thương hiệu Protocore — logo, vùng trống, màu sắc, kiểu chữ, giọng điệu và cách đặt tên — trên một trang. Đọc tại đây hoặc tải bản PDF.
Hệ thống logo
Bốn cách đặt biểu tượng.
Biểu tượng lõi nhiều mặt là tài sản vẽ duy nhất. Lockup đặt tên bên cạnh hoặc bên dưới biểu tượng bằng Roboto Medium — không vẽ lại cả hai.
Dùng riêng ở kích thước nhỏ — favicon, biểu tượng ứng dụng và những nơi tên không còn đọc rõ.
Biểu tượng đặt cạnh tên. Mặc định — dùng cho header, tài liệu và chữ ký.
Biểu tượng đặt phía trên tên. Dùng cho khung vuông — social card, tile và con dấu.
Biểu tượng căn giữa trên nền tile đặc 1024 px. Dùng làm ảnh đại diện trên mọi nền tảng.
Vùng đệm & kích thước
Chừa khoảng trống, giữ mức tối thiểu.
Hai con số cứng giúp biểu tượng luôn dễ nhận diện ở mọi nơi xuất hiện.
Vùng đệm — một chiều rộng biểu tượng ở cả bốn phía.
- Vùng đệm
- Bằng chính chiều rộng của biểu tượng, ở cả bốn phía. Không có gì được xâm phạm vào vùng này — không chữ, không đường kẻ, không mép trang.
- Chiều cao tối thiểu · kỹ thuật số
- 16 px. Nhỏ hơn mức này sẽ khó nhận diện — chỉ dùng biểu tượng riêng lẻ, không dùng lockup.
- Chiều cao tối thiểu · in ấn
- 6 mm.
Màu sắc
Năm màu, vai trò rõ ràng.
Gần như đơn sắc theo mặc định. Màu xanh lá là màu nhấn, không phải chủ đề — không bao giờ dùng để phủ các vùng lớn.
Chữ trên nền sáng. Các bề mặt tối.
Nền trang sáng.
Thẻ trên nền paper. Chữ trên nền ink.
Màu xanh lá — chỉ dùng trên bề mặt tối.
Chữ nhấn trên nền trắng — liên kết và nhãn.
Kiểu chữ
Roboto lên tiếng.
Hai họ phông chữ là đủ. Không dùng phông thứ ba, không dùng chữ nghiêng để nhấn mạnh.
Giao diện và tiêu đề — 400 cho nội dung, 500 cho tiêu đề và lockup, 700 dùng tiết chế.
Nhãn, eyebrow và số — viết hoa, giãn chữ rộng.
Nhãn mục bắt đầu bằng ba dấu gạch chéo và một khoảng trắng — dùng Roboto Mono, viết hoa, giãn chữ rộng. Các dấu gạch chéo là ký tự được gõ, không phải hình vẽ.
Giọng điệu
Nói ít, nói thật.
Năm quy tắc áp dụng cho mọi dòng nội dung của Protocore, từ tiêu đề đến nhãn nút.
Cách gọi tên
Sản phẩm mang tên họ.
Một quy tắc, áp dụng không ngoại lệ.
- Lần nhắc đầu tiên
- Tên đầy đủ — “Protocore Pay”, “Protocore Gateway”. Sau đó chỉ dùng tên sản phẩm.
- PDS
- Viết tắt của Protocore Design System. Viết đầy đủ ở lần nhắc đầu tiên; sau đó dùng PDS.
- Công ty
- Protocore — một từ, chữ P viết hoa. Không bao giờ viết ProtoCore, PROTOCORE hay Proto Core.
Cách dùng
Nên và không nên.
Các quy tắc từ press kit, mở rộng cho toàn bộ hệ thống.
- 01Chừa vùng trống quanh biểu tượng bằng chiều rộng của nó ở mọi phía.
- 02Dùng bản đen trên nền sáng và bản trắng trên nền tối.
- 03Chỉ dùng bản màu nhấn trên nền mực (#0a0a0a).
- 04Phóng to hoặc thu nhỏ từ tệp SVG — biểu tượng luôn sắc nét ở mọi kích thước.
- 05Dùng lockup dọc khi khung đặt là hình vuông.
- 06Chuyển sang dùng riêng biểu tượng khi chiều cao dưới 16 px.
- 01Không đổi màu biểu tượng ngoài các biến thể được cung cấp.
- 02Không xoay, tạo viền, thêm bóng đổ hay hiệu ứng khác.
- 03Không vẽ lại biểu tượng hay thay đổi tỷ lệ của nó.
- 04Không dùng kiểu chữ khác cho tên Protocore — lockup dùng Roboto Medium.
- 05Không đặt màu xanh nhấn lên nền trắng — hãy dùng #0e9e6e cho chữ nhấn ở đó.
- 06Không đặt biểu tượng lên ảnh chụp hoặc nền gradient — chỉ dùng nền ink hoặc paper đặc.
Tệp
Mang cả hệ thống theo bạn.
Hướng dẫn dạng PDF, tài nguyên trong một tệp zip. Từng tệp riêng lẻ có trên trang press.