Thương hiệu
Thương hiệu Posty, gói gọn trong một trang
Tất cả những gì đối tác, agency hay nhà báo cần để đưa Posty lên trang: gia đình linh vật, bộ biểu tượng, hình ảnh chúng tôi đang dùng, token màu và kiểu chữ. Cần gì cứ lấy — quy tắc ở cuối trang là điều duy nhất chúng tôi đề nghị.
95 tệp · 24,8 MB · design tokens v1.0 · được tạo lại từ kho mã của chúng tôi ở mỗi lần triển khai
Logo và biểu tượng ứng dụng
Puff là dấu hiệu nhận diện của Posty. mascot/cloud-default.png là logo chính; thư mục app-icon/ chứa các ô vuông dùng cho kho ứng dụng, favicon và ảnh đại diện. Hãy phóng to thu nhỏ theo đúng tỷ lệ và chừa khoảng trống mỗi bên ít nhất bằng nửa chiều cao của Puff.
apple-touch-icon.png180×180 · 37.2 kBicon-192.png192×192 · 41.7 kBicon-512.png512×512 · 270.2 kBicon.png64×64 · 6.8 kBapp-icon.png1024×1024 · 789.4 kBcloud-default.png1024×1024 · 375.3 kB
Puff theo biểu cảm
Vẫn dấu hiệu ấy, ở mọi tâm trạng chúng tôi đã vẽ. Mỗi màn hình chỉ chọn một: trạng thái trống, xác nhận và trang lỗi đều có gương mặt phù hợp riêng. Đừng trộn hai biểu cảm trong cùng một bố cục.
cloud-cool.png1024×1024 · 389.8 kBcloud-happy.png1024×1024 · 381.5 kBcloud-love.png1024×1024 · 402.8 kBcloud-sleepy.png1024×1024 · 445.1 kBcloud-sparkle.png1024×1024 · 413.2 kBcloud-surprised.png1024×1024 · 385.2 kBcloud-wink.png1024×1024 · 395 kB
Những người bạn của Puff
Các nhân vật còn lại có cùng ngôn ngữ hình thể với Puff và xuất hiện trên thẻ bài viết, ảnh chia sẻ và trạng thái trống. Mỗi nhân vật đều có cùng bộ biểu cảm.
Beat
beat-cool.png1024×1024 · 324.5 kBbeat-default.png1024×1024 · 305.7 kBbeat-happy.png1024×1024 · 324.8 kBbeat-sleepy.png1024×1024 · 315.9 kBbeat-surprised.png1024×1024 · 310.5 kBbeat-wink.png1024×1024 · 312.6 kB
Blab
blab-cool.png1024×1024 · 302.1 kBblab-default.png1024×1024 · 274.9 kBblab-happy.png1024×1024 · 289.7 kBblab-sleepy.png1024×1024 · 294.1 kBblab-surprised.png1024×1024 · 282.1 kBblab-wink.png1024×1024 · 285.3 kB
Penny
penny-cool.png1024×1024 · 317 kBpenny-default.png1024×1024 · 295.9 kBpenny-happy.png1024×1024 · 302.3 kBpenny-sleepy.png1024×1024 · 296.3 kBpenny-surprised.png1024×1024 · 297.9 kBpenny-wink.png1024×1024 · 285.4 kB
Tap
tap-cool.png1024×1024 · 282.2 kBtap-default.png1024×1024 · 252.6 kBtap-happy.png1024×1024 · 270.4 kBtap-sleepy.png1024×1024 · 266.1 kBtap-surprised.png1024×1024 · 256.2 kBtap-wink.png1024×1024 · 264.3 kB
Twinkle
twinkle-cool.png1024×1024 · 297.9 kBtwinkle-default.png1024×1024 · 276.5 kBtwinkle-happy.png1024×1024 · 286.1 kBtwinkle-sleepy.png1024×1024 · 285.6 kBtwinkle-surprised.png1024×1024 · 286.6 kBtwinkle-wink.png1024×1024 · 286.6 kB
Zip
zip-cool.png1024×1024 · 388.8 kBzip-default.png1024×1024 · 377.4 kBzip-happy.png1024×1024 · 376.9 kBzip-sleepy.png1024×1024 · 379.2 kBzip-surprised.png1024×1024 · 378.3 kBzip-wink.png1024×1024 · 381.2 kB
Bối cảnh và đạo cụ
Puff cầm một món gì đó — đồng xu, trái tim, ngôi sao, nút phát — cùng ảnh chụp chung và sao băng. Dùng nhóm này khi một biểu cảm chưa đủ để nói lên màn hình đang làm gì.
friend-bubble.png1024×1024 · 281.3 kBfriend-coin.png1024×1024 · 276.9 kBfriend-heart.png1024×1024 · 311.9 kBfriend-play.png1024×1024 · 253.1 kBfriend-star.png1024×1024 · 281.9 kBfriends-group.png1024×1024 · 327 kBshooting-star.png1024×1024 · 365.7 kB
Biểu tượng kính
Bộ biểu tượng bo tròn, bề mặt như thủy tinh, cùng chất liệu với linh vật. Chúng chỉ mang tính trang trí: luôn đi kèm nhãn chữ và đừng để một biểu tượng tự mình mang nghĩa.
glass-bell.png640×640 · 167.8 kBglass-bolt.png640×640 · 143.3 kBglass-camera.png640×640 · 267.2 kBglass-chat.png640×640 · 241.9 kBglass-check.png640×640 · 226 kBglass-cloud.png640×640 · 184.1 kBglass-coin.png640×640 · 247.8 kBglass-crown.png640×640 · 225.1 kBglass-fire.png640×640 · 185.4 kBglass-gift.png640×640 · 203.3 kBglass-heart.png640×640 · 202.1 kBglass-megaphone.png640×640 · 205 kBglass-note.png640×640 · 181.3 kBglass-play.png640×640 · 201.8 kBglass-sparkle.png640×640 · 177.7 kBglass-star.png640×640 · 202.8 kB
Ảnh chụp và hình sản phẩm
Ảnh chụp và khung hình sản phẩm dùng trên posty.so. Được phép dùng cho bài báo và tài liệu đối tác nói về Posty; đây không phải ảnh stock và không được dùng để minh họa nội dung khác.
blob-avatars.jpg1600×893 · 65 kBcompliance-contracts.jpg1200×805 · 101.9 kBcompliance-disclosures.jpg1200×805 · 100 kBcompliance-taxes.jpg1200×805 · 146.2 kBcreators-1.jpg900×1117 · 143.9 kBcreators-2.jpg900×1117 · 108.5 kBcreators-3.jpg900×1117 · 144.9 kBcreators-4.jpg900×1117 · 186.9 kBflow-reward-poster.jpg1200×900 · 26.5 kBflow-reward.png1600×1194 · 651.2 kBflow-source-poster.jpg1200×900 · 32.3 kBflow-source.png1600×1194 · 749.2 kBflow-track-poster.jpg1200×900 · 23.8 kBflow-track.png1600×1194 · 496.3 kBhero-creators-2.jpg1920×1071 · 343.8 kBhero-creators-3.jpg1920×1071 · 291.7 kBhero-creators.jpg1920×1071 · 291.6 kBhero-poster.jpg1920×1068 · 29.7 kBhero.jpg1920×1071 · 60.7 kBsticker-pack.jpg1600×1194 · 132.9 kBstory-1.jpg1200×896 · 125 kBstory-2.jpg1200×896 · 197.3 kBstory-3.jpg1200×896 · 199.7 kB
Màu sắc
Đọc thẳng từ design/tokens.css, danh sách token duy nhất mà sản phẩm, trang này và ứng dụng di động đều biên dịch ra. Màu nào không có trên trang này thì không phải màu của Posty.
Blush — nền
--blush-50#FFF6F7--blush-100#FFEEF0--blush-200#FFDCE2--blush-300#FFC6D0--blush-400#FFA3B4
Sky — chỉ hỗ trợ
--sky-100#E6F4FF--sky-200#C9E8FF--sky-300#9DD6FF--sky-400#62BBFF--sky-500#2790E6--sky-600#1F7FD1
Rose — hành động chính duy nhất
--rose-300#FFB3C1--rose-500#FF8098--rose-600#E8436B--rose-700#D93A5E
Ink — toàn bộ chữ
--ink-900#2B2036--ink-700#5E5468--ink-500#75697F--ink-200#C9BFD3--ink-100#E9E4EC
Trạng thái
--success#1B7A55--success-bg#E3F7EE--warning#8A5A00--warning-bg#FFF3D6--danger#B3273A--danger-bg#FFE5E7--info#1F7FD1--info-bg#E6F4FF
Bề mặt và đường viền
--bg-warm#FFEEF0--bg-cool#E6F4FF--paper#FFFFFF--border-warm#F5D6DC--border-cool#CFE6F7
Chuyển sắc
--bg-hero--bg-section--mascot-body--mascot-eyes
Độ nổi
--shadow-warm--shadow-cool--shadow-ink
Bo góc
8px12px16px24px999px
Chiều cao điều khiển
- 48px
--control-h - 40px
--control-h-md - 32px
--control-h-sm
Kiểu chữ
Fredoka cho tiêu đề, Plus Jakarta Sans cho nội dung, JetBrains Mono cho số và định danh. Posty phát hành ở mười ngôn ngữ, nên mỗi hệ chữ viết sẽ lùi về một bộ chữ bo tròn có đủ ký tự; các chuỗi bên dưới đổi theo thuộc tính ngôn ngữ của trang.
Thương hiệu và nhà sáng tạo, thanh toán đúng hạn.
FredokaTiêu đề: 500, 600, 700. Dòng tít và wordmark.
.font-displayThương hiệu và nhà sáng tạo, thanh toán đúng hạn.
Plus Jakarta SansNội dung: 400, 500, 600, 700. Mọi thứ bạn đọc.
.font-bodyThương hiệu và nhà sáng tạo, thanh toán đúng hạn.
JetBrains MonoĐơn cách: 400, 500. Số, mã định danh và tên tệp.
.font-monoChuỗi phông chữ
Phông dự phòng cho từng hệ chữ viết, đúng như khai báo trong tệp token.
--font-display'Fredoka', 'M PLUS Rounded 1c', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Baloo Bhaijaan 2', system-ui, sans-serif--font-body'Plus Jakarta Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Arabic', 'Noto Sans Devanagari', system-ui, sans-serif--font-mono'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace
Thang cỡ chữ
--text-display64px--text-h144px--text-h232px--text-h324px--text-lg18px--text-md16px--text-label14px--text-caption12px
Cách dùng thương hiệu
Ngắn gọn: Blush là nền, Ink là chữ, Rose dành cho một thứ duy nhất bạn muốn người ta bấm vào.
Nên
- Đặt Blush làm nền cho mọi thứ, màu phẳng hoặc một trong các chuyển sắc ở trên. Đó vừa là nền vừa là thân của linh vật.
- Đặt mọi dòng chữ bằng màu Ink.
- Chỉ dùng Rose cho mắt linh vật và cho một hành động chính trên mỗi màn hình, và chữ trên nút đó phải là Ink.
- Giữ Sky ở vai trò hỗ trợ: liên kết, thông tin, điểm tin cậy.
- Làm mọi điều khiển dạng viên thuốc với vùng chạm 44-48px.
- Giữ chữ ở dạng văn bản thay vì nằm trong ảnh, để dịch được sang cả mười ngôn ngữ.
Không nên
- Đừng vẽ lại, đổi màu, lật gương hay xoay linh vật, và tuyệt đối không đặt chữ lên trên nó.
- Đừng đặt chữ trắng trên nền Rose.
- Đừng để một màn hình có hai nút Rose.
- Đừng kéo giãn, cắt xén, viền hay thêm hiệu ứng cho logo — hãy phóng to thu nhỏ theo tỷ lệ.
- Đừng tạo thêm màu, bo góc hay đổ bóng ngoài danh sách token ở trên.
- Đừng tự xuất lại hay cắt lại tệp; hãy cho chúng tôi biết bạn cần kích thước nào.
Cần thứ chưa có ở đây?
Tệp vector gốc, logo ghép wordmark, khung cắt khác, hay cả bộ trong một tệp nén — cứ hỏi và chúng tôi sẽ gửi. Hãy cho biết nơi sẽ đăng để chúng tôi đối chiếu với quy tắc ở trên.
hello@posty.so