Brand
Brand Posty, lengkap di satu halaman
Semua yang dibutuhkan mitra, agensi, atau jurnalis untuk menampilkan Posty: keluarga maskot, set ikon, gambar yang kami pakai, token warna, dan tipografi. Ambil yang Anda perlukan — aturan di bagian bawah adalah satu-satunya permintaan kami.
95 berkas · 24,8 MB · design tokens v1.0 · dibuat ulang dari repositori kami setiap kali dirilis
Logo dan ikon aplikasi
Puff adalah tanda Posty. mascot/cloud-default.png adalah logo utama; folder app-icon/ berisi kotak untuk toko aplikasi, favicon, dan foto profil. Skalakan secara proporsional dan sisakan ruang kosong minimal setengah tinggi 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 menurut ekspresi
Tanda yang sama dalam setiap suasana hati yang kami gambar. Pilih satu untuk satu layar — kondisi kosong, konfirmasi, dan halaman galat masing-masing punya wajah yang cocok. Jangan campur 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
Teman-teman Puff
Karakter lainnya memakai bahasa tubuh yang sama dengan Puff dan muncul di kartu blog, gambar berbagi, dan kondisi kosong. Setiap karakter tersedia dalam 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 properti
Puff sambil memegang sesuatu — koin, hati, bintang, tombol putar — ditambah foto bersama dan bintang jatuh. Gunakan saat satu ekspresi belum cukup menjelaskan apa yang dilakukan layar.
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 membulat bergaya kaca dengan sentuhan akhir yang sama seperti maskot. Sifatnya dekoratif: selalu pasangkan dengan label, dan jangan biarkan satu ikon memikul makna sendirian.
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 tangkapan produk
Fotografi dan bingkai produk yang dipakai di posty.so. Diizinkan untuk pemberitaan dan materi mitra tentang Posty; ini bukan foto stok dan tidak boleh dipakai untuk mengilustrasikan hal 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 langsung dari design/tokens.css, satu-satunya daftar token yang menjadi sumber kompilasi produk, situs ini, dan aplikasi seluler. Kalau sebuah warna tidak ada di halaman ini, itu bukan warna Posty.
Blush — dasar
--blush-50#FFF6F7--blush-100#FFEEF0--blush-200#FFDCE2--blush-300#FFC6D0--blush-400#FFA3B4
Sky — hanya pendukung
--sky-100#E6F4FF--sky-200#C9E8FF--sky-300#9DD6FF--sky-400#62BBFF--sky-500#2790E6--sky-600#1F7FD1
Rose — satu-satunya aksi 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 garis batas
--bg-warm#FFEEF0--bg-cool#E6F4FF--paper#FFFFFF--border-warm#F5D6DC--border-cool#CFE6F7
Gradien
--bg-hero--bg-section--mascot-body--mascot-eyes
Elevasi
--shadow-warm--shadow-cool--shadow-ink
Radius sudut
8px12px16px24px999px
Tinggi kontrol
- 48px
--control-h - 40px
--control-h-md - 32px
--control-h-sm
Tipografi
Fredoka untuk judul, Plus Jakarta Sans untuk teks isi, JetBrains Mono untuk angka dan pengenal. Posty hadir dalam sepuluh lokal, jadi setiap sistem tulisan mundur ke huruf membulat yang punya glifnya; tumpukan di bawah berganti mengikuti atribut bahasa halaman.
Brand dan kreator, dibayar tepat waktu.
FredokaJudul: 500, 600, 700. Headline dan wordmark.
.font-displayBrand dan kreator, dibayar tepat waktu.
Plus Jakarta SansIsi: 400, 500, 600, 700. Semua yang Anda baca.
.font-bodyBrand dan kreator, dibayar tepat waktu.
JetBrains MonoMono: 400, 500. Angka, id, dan nama berkas.
.font-monoTumpukan font
Font cadangan tiap sistem tulisan, persis seperti yang dideklarasikan di berkas 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 tipe
--text-display64px--text-h144px--text-h232px--text-h324px--text-lg18px--text-md16px--text-label14px--text-caption12px
Menggunakan brand
Singkatnya: Blush adalah dasar, Ink adalah teks, Rose untuk satu hal yang ingin Anda tekan orang lain.
Lakukan
- Taruh Blush di bawah semuanya, polos atau memakai salah satu gradien di atas. Ia adalah dasar sekaligus tubuh maskot.
- Atur setiap teks dengan warna Ink.
- Simpan Rose untuk mata maskot dan satu aksi utama per layar, dan buat label tombol itu berwarna Ink.
- Jaga Sky tetap sebagai pendukung: tautan, informasi, skor kepercayaan.
- Buat setiap kontrol berbentuk pil dengan area sentuh 44-48px.
- Simpan teks sebagai teks, bukan di dalam gambar, supaya bisa diterjemahkan ke sepuluh lokal.
Jangan
- Jangan menggambar ulang, mengubah warna, mencerminkan, atau memutar maskot, dan jangan pernah menaruh teks di dalamnya.
- Jangan memakai teks putih di atas Rose.
- Jangan memberi satu layar dua tombol Rose.
- Jangan meregangkan, memotong, menggarisi, atau menambah efek pada logo — skalakan secara proporsional.
- Jangan memperkenalkan warna, radius, atau bayangan yang tidak ada di daftar token di atas.
- Jangan mengekspor atau memotong ulang berkasnya; beri tahu kami ukuran yang Anda butuhkan.
Butuh sesuatu yang belum ada di sini?
Sumber vektor, logo dengan wordmark, potongan berbeda, atau seluruh set dalam satu arsip — tinggal minta dan kami kirimkan. Sebutkan juga di mana akan dipakai agar kami bisa mencocokkannya dengan aturan di atas.
hello@posty.so