Brand
Ang brand ng Posty, nasa iisang pahina
Lahat ng kailangan ng isang partner, ahensya o mamamahayag para mailagay ang Posty sa pahina: ang pamilya ng maskot, ang icon set, ang mga imaheng ginagamit namin, ang color token at ang tipograpiya. Kunin ang kailangan mo — ang mga tuntunin sa ibaba ang tanging hinihiling namin.
95 na file · 24.8 MB · design tokens v1.0 · nabubuo mula sa aming repository tuwing may deploy
Logo at mga app icon
Si Puff ang marka ng Posty. Ang mascot/cloud-default.png ang pangunahing logo; nasa app-icon/ ang mga parisukat na tile para sa app store, favicon at avatar. Iskalahin nang proporsyonal at mag-iwan ng espasyong kahit kalahati ng taas ni Puff sa bawat gilid.
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
Si Puff, ayon sa ekspresyon
Iisang marka, sa bawat mood na naiguhit namin. Pumili ng isa kada screen — may bagay na mukha ang empty state, kumpirmasyon at error page. Huwag paghaluin ang dalawang ekspresyon sa isang komposisyon.
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
Ang mga kaibigan ni Puff
Ang iba pang karakter ay may parehong kilos ni Puff at lumilitaw sa mga blog card, share image at empty state. Bawat karakter ay may kaparehong set ng ekspresyon.
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
Mga eksena at props
Si Puff na may hawak — barya, puso, bituin, play button — pati ang group shot at ang shooting star. Gamitin ito kapag hindi sapat ang isang ekspresyon para sabihin kung ano ang ginagawa ng screen.
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
Mga glass icon
Isang bilog at parang salaming icon set na kapareho ng pakiramdam ng mga maskot. Pandekorasyon lamang ang mga ito: laging isabay sa isang label, at huwag hayaang mag-isang magdala ng kahulugan ang isang icon.
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
Potograpiya at product still
Ang mga larawan at product frame na ginagamit sa posty.so. Pinapayagan para sa balita at partner deck tungkol sa Posty; hindi ito stock photo at hindi maaaring gamiting ilustrasyon ng iba pang paksa.
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
Kulay
Direktang binabasa mula sa design/tokens.css, ang iisang listahan ng token na pinagmumulan ng produkto, ng site na ito at ng mobile app. Kung wala ang isang kulay sa pahinang ito, hindi iyon kulay ng Posty.
Blush — ang pundasyon
--blush-50#FFF6F7--blush-100#FFEEF0--blush-200#FFDCE2--blush-300#FFC6D0--blush-400#FFA3B4
Sky — pansuporta lamang
--sky-100#E6F4FF--sky-200#C9E8FF--sky-300#9DD6FF--sky-400#62BBFF--sky-500#2790E6--sky-600#1F7FD1
Rose — ang iisang pangunahing aksyon
--rose-300#FFB3C1--rose-500#FF8098--rose-600#E8436B--rose-700#D93A5E
Ink — lahat ng teksto
--ink-900#2B2036--ink-700#5E5468--ink-500#75697F--ink-200#C9BFD3--ink-100#E9E4EC
Estado
--success#1B7A55--success-bg#E3F7EE--warning#8A5A00--warning-bg#FFF3D6--danger#B3273A--danger-bg#FFE5E7--info#1F7FD1--info-bg#E6F4FF
Mga surface at hangganan
--bg-warm#FFEEF0--bg-cool#E6F4FF--paper#FFFFFF--border-warm#F5D6DC--border-cool#CFE6F7
Mga gradient
--bg-hero--bg-section--mascot-body--mascot-eyes
Elevation
--shadow-warm--shadow-cool--shadow-ink
Radius ng sulok
8px12px16px24px999px
Taas ng mga kontrol
- 48px
--control-h - 40px
--control-h-md - 32px
--control-h-sm
Tipograpiya
Fredoka para sa display, Plus Jakarta Sans para sa katawan ng teksto, JetBrains Mono para sa numero at identifier. Nasa sampung locale ang Posty, kaya bumabalik ang bawat sistema ng pagsulat sa isang bilugang typeface na may glyph nito; nagpapalit ang mga stack sa ibaba batay sa language attribute ng pahina.
Mga brand at creator, bayad sa oras.
FredokaDisplay: 500, 600, 700. Mga headline at ang wordmark.
.font-displayMga brand at creator, bayad sa oras.
Plus Jakarta SansKatawan: 400, 500, 600, 700. Lahat ng binabasa mo.
.font-bodyMga brand at creator, bayad sa oras.
JetBrains MonoMono: 400, 500. Mga numero, id at pangalan ng file.
.font-monoMga font stack
Ang mga fallback kada sistema ng pagsulat, gaya mismo ng nakadeklara sa token file.
--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
Type scale
--text-display64px--text-h144px--text-h232px--text-h324px--text-lg18px--text-md16px--text-label14px--text-caption12px
Paggamit ng brand
Sa maikling salita: Blush ang pundasyon, Ink ang teksto, at Rose ay para sa iisang bagay na gusto mong pindutin ng tao.
Gawin
- Ilagay ang Blush sa ilalim ng lahat, plain man o gamit ang isa sa mga gradient sa itaas. Ito ang pundasyon at ang katawan din ng maskot.
- Itakda sa Ink ang bawat teksto.
- Itabi ang Rose para sa mata ng maskot at para sa iisang pangunahing aksyon kada screen, at gawing Ink ang label ng button na iyon.
- Panatilihing pansuporta ang Sky: mga link, impormasyon, trust score.
- Gawing hugis-pill ang bawat kontrol na may 44-48px na hit target.
- Panatilihing teksto ang kopya sa halip na nasa loob ng imahe, para maisalin ito sa lahat ng sampung locale.
Huwag
- Huwag muling iguhit, kulayan, i-mirror o iikot ang maskot, at huwag kailanman maglagay ng teksto sa loob nito.
- Huwag maglagay ng puting teksto sa ibabaw ng Rose.
- Huwag bigyan ng dalawang Rose button ang isang screen.
- Huwag banatin, i-crop, lagyan ng outline o effect ang logo — iskalahin ito nang proporsyonal.
- Huwag magpasok ng kulay, radius o anino na wala sa listahan ng token sa itaas.
- Huwag muling i-export o i-crop ang mga file; sabihin sa amin ang sukat na kailangan mo.
May kailangan kang wala rito?
Vector source, naka-lockup na wordmark, ibang crop, o ang buong set sa isang archive — sabihin lang at ipapadala namin. Banggitin din kung saan ito lalabas para maitugma namin sa mga tuntunin sa itaas.
hello@posty.so