Jenama
Jenama Posty, semuanya di satu halaman
Semua yang diperlukan rakan kongsi, agensi atau wartawan untuk memaparkan Posty: keluarga maskot, set ikon, imej yang kami gunakan, token warna dan tipografi. Ambil apa yang anda perlukan — peraturan di bahagian bawah ialah satu-satunya permintaan kami.
95 fail · 24.8 MB · design tokens v1.0 · dijana daripada repositori kami pada setiap penggunaan
Logo dan ikon aplikasi
Puff ialah tanda Posty. mascot/cloud-default.png ialah logo utama; app-icon/ mengandungi jubin segi empat untuk gedung aplikasi, favicon dan avatar. Skalakan secara berkadar dan sediakan ruang lapang sekurang-kurangnya separuh ketinggian Puff di setiap sisi.
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 mengikut ekspresi
Tanda yang sama dalam setiap mood yang kami lukis. Pilih satu untuk satu skrin — keadaan kosong, pengesahan dan halaman ralat masing-masing mempunyai wajah yang sesuai. Jangan campurkan dua ekspresi dalam satu komposisi.
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
Rakan-rakan Puff
Watak lain berkongsi bahasa badan Puff dan muncul pada kad blog, imej perkongsian dan keadaan kosong. Setiap watak hadir dengan set ekspresi yang sama.
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
Adegan dan prop
Puff memegang sesuatu — syiling, hati, bintang, butang main — serta gambar berkumpulan dan bintang jatuh. Gunakannya apabila satu ekspresi tidak cukup untuk menerangkan fungsi skrin.
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
Ikon kaca
Set ikon bulat bergaya kaca dengan kemasan yang sama seperti maskot. Ia bersifat hiasan: pasangkan dengan label, dan jangan biarkan ikon membawa makna secara bersendirian.
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
Fotografi dan imej produk
Fotografi dan bingkai produk yang digunakan di posty.so. Dibenarkan untuk liputan media dan deck rakan kongsi mengenai Posty; ini bukan imej stok dan tidak boleh digunakan untuk menggambarkan perkara lain.
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
Warna
Dibaca terus daripada design/tokens.css, satu-satunya senarai token yang menjadi sumber kompilasi produk, laman ini dan aplikasi mudah alih. Jika sesuatu warna tiada di halaman ini, ia bukan warna Posty.
Blush — latar
--blush-50#FFF6F7--blush-100#FFEEF0--blush-200#FFDCE2--blush-300#FFC6D0--blush-400#FFA3B4
Sky — sokongan sahaja
--sky-100#E6F4FF--sky-200#C9E8FF--sky-300#9DD6FF--sky-400#62BBFF--sky-500#2790E6--sky-600#1F7FD1
Rose — satu-satunya tindakan utama
--rose-300#FFB3C1--rose-500#FF8098--rose-600#E8436B--rose-700#D93A5E
Ink — semua teks
--ink-900#2B2036--ink-700#5E5468--ink-500#75697F--ink-200#C9BFD3--ink-100#E9E4EC
Status
--success#1B7A55--success-bg#E3F7EE--warning#8A5A00--warning-bg#FFF3D6--danger#B3273A--danger-bg#FFE5E7--info#1F7FD1--info-bg#E6F4FF
Permukaan dan sempadan
--bg-warm#FFEEF0--bg-cool#E6F4FF--paper#FFFFFF--border-warm#F5D6DC--border-cool#CFE6F7
Kecerunan
--bg-hero--bg-section--mascot-body--mascot-eyes
Ketinggian
--shadow-warm--shadow-cool--shadow-ink
Jejari bucu
8px12px16px24px999px
Ketinggian kawalan
- 48px
--control-h - 40px
--control-h-md - 32px
--control-h-sm
Tipografi
Fredoka untuk paparan, Plus Jakarta Sans untuk teks badan, JetBrains Mono untuk nombor dan pengecam. Posty hadir dalam sepuluh lokaliti, jadi setiap sistem tulisan berundur kepada muka taip bulat yang mempunyai glifnya; tindanan di bawah bertukar mengikut atribut bahasa halaman.
Jenama dan kreator, dibayar tepat pada masanya.
FredokaPaparan: 500, 600, 700. Tajuk dan tanda kata.
.font-displayJenama dan kreator, dibayar tepat pada masanya.
Plus Jakarta SansBadan: 400, 500, 600, 700. Semua yang anda baca.
.font-bodyJenama dan kreator, dibayar tepat pada masanya.
JetBrains MonoMono: 400, 500. Nombor, id dan nama fail.
.font-monoTindanan fon
Fon sandaran bagi setiap sistem tulisan, tepat seperti yang diisytiharkan dalam fail 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
Skala taip
--text-display64px--text-h144px--text-h232px--text-h324px--text-lg18px--text-md16px--text-label14px--text-caption12px
Menggunakan jenama
Ringkasnya: Blush ialah latar, Ink ialah teks, Rose untuk satu perkara yang anda mahu orang tekan.
Lakukan
- Letakkan Blush di bawah segala-galanya, rata atau sebagai salah satu kecerunan di atas. Ia latar dan juga badan maskot.
- Tetapkan setiap teks dalam Ink.
- Simpan Rose untuk mata maskot dan satu tindakan utama setiap skrin, dan tetapkan label butang itu dalam Ink.
- Kekalkan Sky sebagai sokongan: pautan, maklumat, skor kepercayaan.
- Jadikan setiap kawalan berbentuk pil dengan kawasan sentuh 44-48px.
- Simpan teks sebagai teks dan bukan di dalam imej, supaya ia boleh diterjemah ke sepuluh lokaliti.
Jangan
- Jangan lukis semula, tukar warna, cerminkan atau putarkan maskot, dan jangan sekali-kali meletakkan teks di dalamnya.
- Jangan letakkan teks putih di atas Rose.
- Jangan berikan satu skrin dua butang Rose.
- Jangan regangkan, potong, garis luar atau tambah kesan pada logo — skalakan secara berkadar.
- Jangan perkenalkan warna, jejari atau bayang yang tiada dalam senarai token di atas.
- Jangan eksport atau potong semula fail; beritahu kami saiz yang anda perlukan.
Perlukan sesuatu yang tiada di sini?
Sumber vektor, gabungan logo, potongan berbeza, atau keseluruhan set dalam satu arkib — beritahu kami dan kami akan hantar. Beritahu juga di mana ia akan dipaparkan supaya kami boleh semak dengan peraturan di atas.
hello@posty.so