Brand
The Posty brand, in one place
Everything a partner, an agency or a journalist needs to put Posty on a page: the mascot family, the icon set, the imagery we ship, the colour tokens and the type. Take what you need — the rules at the bottom are the whole ask.
95 files · 24.8 MB · design tokens v1.0 · generated from our repository on every deploy
Logo and app icons
Puff is the Posty mark. mascot/cloud-default.png is the primary logo; app-icon/ holds the square launcher tiles for app stores, favicons and avatars. Scale proportionally and keep clear space of at least half Puff’s height on every side.
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, by expression
The same mark in every mood we have drawn. Pick one per surface — empty states, confirmations and error pages each get a fitting face. Never mix two expressions in one composition.
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
Puff's friends
The rest of the cast shares Puff's body language and shows up on blog cards, share images and empty states. Each character ships in the same set of expressions.
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
Scenes and props
Puff holding something — a coin, a heart, a star, a play button — plus the group shot and the shooting star. Use these when one expression is not enough to say what a screen does.
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
Glass icons
A rounded, glassy icon set with the same finish as the mascots. They are decorative: pair one with a label, and never let an icon carry a meaning on its own.
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
Photography and product stills
The photography and product frames used across posty.so. Cleared for press and partner decks about Posty; this is not stock and may not illustrate anything else.
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
Colour
Read straight out of design/tokens.css, the one token list that the product, this site and the mobile app all compile from. If a colour is not on this page, it is not a Posty colour.
Blush — the ground
--blush-50#FFF6F7--blush-100#FFEEF0--blush-200#FFDCE2--blush-300#FFC6D0--blush-400#FFA3B4
Sky — supporting only
--sky-100#E6F4FF--sky-200#C9E8FF--sky-300#9DD6FF--sky-400#62BBFF--sky-500#2790E6--sky-600#1F7FD1
Rose — the one call to action
--rose-300#FFB3C1--rose-500#FF8098--rose-600#E8436B--rose-700#D93A5E
Ink — all text
--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
Surfaces and borders
--bg-warm#FFEEF0--bg-cool#E6F4FF--paper#FFFFFF--border-warm#F5D6DC--border-cool#CFE6F7
Gradients
--bg-hero--bg-section--mascot-body--mascot-eyes
Elevation
--shadow-warm--shadow-cool--shadow-ink
Corner radius
8px12px16px24px999px
Control heights
- 48px
--control-h - 40px
--control-h-md - 32px
--control-h-sm
Typography
Fredoka for display, Plus Jakarta Sans for body copy, JetBrains Mono for numbers and identifiers. Posty ships in ten locales, so each script falls back to a rounded face that has the glyphs; the stacks below switch on the page's language attribute.
Brands and creators, paid on time.
FredokaDisplay: 500, 600, 700. Headlines and the wordmark.
.font-displayBrands and creators, paid on time.
Plus Jakarta SansBody: 400, 500, 600, 700. Everything you read.
.font-bodyBrands and creators, paid on time.
JetBrains MonoMono: 400, 500. Numbers, ids and file names.
.font-monoFont stacks
The per-script fallbacks exactly as the token file declares them.
--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
Using the brand
Short version: Blush is the ground, Ink is the text, Rose is the one thing you want someone to press.
Do
- Put Blush under everything, flat or as one of the gradients above. It is the ground and the mascot's body.
- Set every piece of text in Ink.
- Save Rose for the mascot's eyes and for one call to action per screen, and set that button's label in Ink.
- Keep Sky supporting: links, information, the trust score.
- Make every control a pill with a 44-48px hit target.
- Keep copy in text rather than inside an image, so it translates into all ten locales.
Don't
- Don't re-draw, recolour, mirror or rotate the mascot, and never place text inside it.
- Don't set white text on Rose.
- Don't give one screen two Rose buttons.
- Don't stretch, crop, outline or add effects to the logo — scale it proportionally.
- Don't introduce a colour, radius or shadow that is not in the token list above.
- Don't re-export or re-cut the files; ask us for the size you need.
Need something that isn't here?
Vector sources, a locked-up wordmark, a different crop, or the whole set as one archive — ask and we will send it. Tell us where it will run so we can check it against the rules above.
hello@posty.so