Brand Guidelines · Version 3

The look of
real-life play.

How Bingmong looks, sounds and feels — a warm, white, candy-bright world of huggable characters, balanced floaties and one big idea: take the play button off the screen.

00 · The one big idea

Move the play button.

The boldest brands took the coldest corner of tech and made it something you'd hand a kid. We do the same for play itself. For a generation, "play" became a sideways ▶ on a screen: you watch other people have the fun. Bingmong flips it upward ▲ — off the feed and back into the room, together.

Today · on a screen

The ▶ you watch.

Heads down, thumbs scrolling, alone together. The only play button left is the one on a video.

Bingmong · in the room

The ▲ you press.

Phones down, heads up. One upward play button puts the whole room in the game — for real.

Turn the play button up
Instead of the streaming ▶ you tap to watch, we rotate it upward ▲ — play that leaves the screen and happens out in the real world.
Characters = the toys we love
The cast are the real-life things we all reach for to play — ball, rope, dice, top, kite, cube, Lego brick. Toys, given faces.
Bright by birthright
The palette is loud on purpose — the colours of a Rubik’s cube, dice and Lego bricks, the real-life stuff we play with in person. The bright shades of play itself.
02 · The Guli Gulis

Mong & the Guli Gulis.

Family's secret weapon was a cast of huggable characters carrying the "don't be scared" feeling. Ours do the same for AI & play. Mong is the only leader — the AI, a pink upward triangle. Everyone else is an equal Guli Guli: candy-bright toys-with-faces — flowers and blobs alongside the ball, dice, cube, Lego and more — each with sparkle eyes, pink blush and stick limbs.

Mong has moods.
The AI mascot shifts expression with the moment — calm while idle, focused while building, hyped at the win. Always the pink ▲, always sparkling.
02·d · Avatars

Pick your avatar.

Every Guli Guli above can be a player's avatar — the whole crew of toys-with-faces, from flowers and blobs to the ball, dice, cube, Lego, balloon and gamepad shapes. Only Mong is off-limits — he's the AI leader. Same anatomy throughout, so a screen-free game always has a face.

Players pick their Guli Guli
Every player chooses a Guli Guli as their avatar — same anatomy, endless personality. The selected one gets the pink ring (pink = the choice).
02·e · Mong, the AI

How Mong shows up & talks.

Mong is the AI you can see. Whenever the app is thinking, building, hosting or celebrating, Mong appears and speaks in the first person — short, warm, hype-but-human. Four moods cover every moment.

Idle
Calm smile — waiting & listening. The default.
Thinking
Heads-down while it builds or designs a game.
Hype
Open-mouth grin at a win or a big reveal.
Oops
Worried brow + sweat drop when something breaks.

✓ Mong talks like

  • “On it — building your game now.”
  • “Nice round. Who’s up next?”
  • “Scan the card and we’ll start.”
  • Short, first-person, warm, a little hyped.

✕ Mong never

  • “Processing your request. Please wait.”
  • “Error 400: invalid input.”
  • Long, robotic, corporate or cold.
  • Blames the player for the mistake.

When something breaks — Mong owns it

“I lost the room for a sec. Tap to reconnect.”
Reconnect
“That one stumped me — mind rephrasing?”
Try again
“Couldn’t read that card. Let’s scan it again.”
Rescan
02·f · Using the cast

When to use a character — and when not.

✓ Bring a character in

  • Empty states, onboarding & celebrations — moments that need warmth.
  • As the player’s avatar (the Guli Gulis).
  • Mong for anything the AI is doing — thinking, building, hosting.
  • Small floaties for background life — sparingly.

✕ Leave them out

  • Dense data, forms, settings, legal — let content lead.
  • Never cover or compete with the game content.
  • Don’t stack many big characters — one hero per screen.
  • Never as a button or a tappable control.
02·b · How they're built

Anatomy of a buddy.

  • Flat single-colour bodyOne bright fill, no gradients or outlines. Built from a play-shape: flower, oval, square, gem or star.
  • Sparkle pill eyesTall rounded ink eyes with a white highlight dot — wide-awake and friendly, never sleepy.
  • Pink blushTwo soft pink cheeks at 42% opacity. The single detail that makes them feel huggable.
  • Stick limbs + jellybean shoesThin ink arms and legs with rounded shoe caps in an accent colour. They wave, they wobble, they bob.
02·c · Each one moves differently

Every buddy has a signature loop.

Our characters aren’t stills — they’re always gently alive. Each crew member gets one looping idle motion that matches their personality — built as lightweight, exportable Lottie loops so product and marketing share the exact same movement.

One motion per character, looping forever, 2–6s. Never combine two; never speed past playful. All loops respect prefers-reduced-motion and fall back to the happy still.
03 · Colour

White ground, candy floaties.

The platform is calm: a pure-white page with warm-grey fills, so every game and character can shout. Colour lives in the cast and floaties — four flat category colours, perfectly balanced, with three brighter sparks used sparingly.

The four category colours — balanced

Call these category colours, never “primaries.” The word “primary” tricks builders into making blue buttons — these never become buttons. They tag & decorate (genres, the cast, floaties), kept in balance. The one action colour is pink.

Balance rule — in any floatie scatter, blue / green / red / gold appear in roughly equal weight. No single colour dominates.

Pink & Sunset — the brand colours

The sparks — tangerine & cyan (use sparingly, in art only)

Neutrals & ground

03·a · The rule that ends the confusion

Which colour, when.

One job per colour. Get this and you never have to guess between blue, pink and sunset again. Pink is the only "action" colour. Blue / green / red / gold are category & decoration only — never buttons.

Warm paper / white

The canvas for everything. All page & screen backgrounds, nav bars, cards, sheets. Stays calm so games and characters can shout.
Backgrounds · cards · nav · chrome

Pink — the one action colour

The brand & the tap. The logo mark, primary buttons, the Create FAB, links, focus, and the active/selected state (incl. the active nav tab). Aim for one pink action per screen.
Primary button · FAB · active tab · the mark

Sunset (pink → tangerine)

Loud, celebratory moments only. Marketing heroes, the Create surface, win / level-up / confetti states, hype banners. Never a routine button or body UI.
Hero headers · Create energy · win states

Blue · Green · Red · Gold

Category & decoration, never action — and never a big flat fill. They live in the small things: genre tags, glyphs, the cast and floaties — kept balanced, none dominant. Covers and large surfaces hold real content (video / image cover art, Netflix/Roblox-style), not blocks of colour. Gold also marks rewards / achievements.
Genre tags · glyphs · cast · floaties · badges

Tangerine · Cyan · Lime — sparks

Tiny accents inside illustrations — a spark, a highlight, a shoe. Never load-bearing UI, never a colour a user has to act on.
Sparkle dots · illustration accents

Plum darks

Immersive surfaces where media / play takes over — the Feed and live Events. Warm plum (never cold blue-purple). Pink stays the action even here.
Feed · live event rooms · full-bleed video

✓ Do

  • Make the one primary button on a screen pink.
  • Fill game covers with real content (art / thumbnails); show genre as a small colour tag, not a flat fill.
  • Keep page & nav backgrounds warm paper / white.
  • Save the sunset gradient for hero, Create and celebration moments.
  • Use gold for rewards, streaks and badges.

✕ Don't

  • Don't make a button blue, green or gold — those are never actions.
  • Don't use the sunset gradient on ordinary buttons or body UI.
  • Don't tint a whole screen background a category colour — keep chrome calm.
  • Don't let one category colour dominate a floatie scatter or tile grid.
  • Don't reintroduce grape purple as a brand colour (that was the old identity).
03·b · The two that get confused

Pink vs Sunset.

They’re related on purpose — sunset starts with pink. The split is one line: flat pink is for tapping; sunset is for celebrating. Sunset is flat pink turned up to a loud moment; flat pink is sunset calmed down for everyday UI.

Flat pink — the action

The everyday “thing to tap.” Calm, solid, legible at any size. One per screen.

✓ Use it for
  • Primary buttons & the Create FAB
  • Active / selected states — nav tab, chip, toggle
  • Links, focus rings, the small nav mark
  • Small icons & the app icon / favicon
✕ Never
  • Don’t apply a gradient to it — that’s sunset’s job
  • Don’t flood a big background with it
  • Don’t use it as decoration / floaties (the cast’s blush is the one exception)
  • Don’t put two competing pink CTAs on one screen
Shows up asJoin buttonActive tabLikeFABLinksApp icon

Sunset — the celebration

The loud, once-a-moment gradient. Hero energy and big wins — not everyday UI.

✓ Use it for
  • Marketing & hero headers
  • The Create surface (Mong’s energy)
  • Win, level-up & streak moments
  • Party / birthday / event art & big headline text fills
✕ Never
  • Don’t use it on routine / secondary buttons
  • Don’t set body text or long copy in it
  • Don’t use below ~28px — it muddies; drop to flat pink
  • Don’t make it the default action colour
Shows up asLanding heroCreate cardWin screenBirthday cardEvent hero
Taps it? → flat pink. Hero or celebration? → sunset. Never the reverse — and they never sit side by side as two buttons.
03·c · Readability

If you can't read it, it's broken.

The hard rule, no exceptions: text must clearly out-contrast whatever sits behind it. Never put a colour on the same or a similar colour — no white on gold, no gold text on white, no pink label on a pink button.

✓ Pick the foreground by the fill

  • Dark / strong fills (pink, red, plum, ink) → white text & glyphs.
  • Bright / light fills (gold, tangerine, cyan, lime, blue, green, soft tints) → ink text & glyphs.
  • Body copy: ink on paper/white, white on plum. Aim 4.5:1 or better.
  • Gold & tangerine are fills, not text colours on white — use ink for the number, gold for the icon.

✕ Never ship

  • White text on gold, tangerine or cyan.
  • Gold or tangerine text on white / paper.
  • Any label within ~2 shades of its background.
  • A button whose text colour matches its fill.
✕ white on gold ✓ ink on gold ✕ gold on white ✓ white on pink

Colours that don't go together

Four ways colours collide. Each chip below is rendered in the actual clash so you can see it fail — if a chip is hard to read, that pairing is banned.

07·b · App screens

The core screens.

Exactly how each screen should look — and which colour does which job. The pattern never changes: warm-paper chrome, pink for the one action, category colours for genres, plum for immersion. Content screens (Discover, Feed) are media-forward like Netflix, Spotify & Roblox — the cover (video or image) is the loudest thing and the UI gets out of its way. Use these as the blueprint.

Discover

Browse like Netflix or Roblox — poster-forward tiles whose covers are real video or image art, grouped into shelves. The cover is the hero; chrome stays quiet and a small genre tag carries the colour.

BackgroundWarm paper — calm chrome
ActionPink — active filter chip & active tab only
TilesCovers = video / image content; genre = small tag
Build withFriends rowSearch pillGenre chipsFeatured heroMedia poster tilesBottom nav

Feed

The full-bleed vertical scroll of real plays — immersive plum, media edge-to-edge, chrome floating on top. The TikTok-cadence moment of the product.

BackgroundWarm plum — media takes over
ActionPink — the active like; everything else white
Text / railWhite over the gradient scrim
Build withFull-bleed mediaLive badgesSide action railCaptionDark nav

Create

Where Mong builds a game from a prompt. The one screen that earns the sunset gradient — this is the loud, creative heart. Pink button finishes the job.

BackgroundWhite page, calm around the energy
Hero cardSunset — Mong's create energy
ActionPink — "Build it ▲" button
Build withSunset prompt cardMong hostSuggestion chipsPink CTA

Party

A live room — immersive plum so the party's own theme glows. Pulsing red LIVE dot, a big Space Grotesk timer, leaderboard, and a pink join button. App chrome recedes.

BackgroundWarm plum + the event's theme glow
LiveRed — only for the pulsing LIVE state
ActionPink — "Join the room"
RanksGold / category colours for leaderboard places
Build withLIVE badgeMono timerLeaderboard rowsHost avatarsPink CTA

Passport

The profile — who you are, your level, recent games and earned badges. Warm paper, a pink identity avatar; gold carries level, streak & rewards. Far more than a wall of stamps.

BackgroundWhite — calm profile chrome
Avatar / actionPink — identity ring & primary action
RewardsGold — level, streak, badges
BadgesCategory colours — earned badges
Build withAvatar headerLevel progressStat stripRecent gamesBadgesBottom nav

Party Hub

Home base for parties — what's live now, what's on tonight, and a big pink button to host your own. Warm-paper hub; the live party gets a plum card so it pops.

BackgroundWarm paper — calm hub
Live cardPlum — the live party stands out
ActionPink — Start a party · Join · RSVP
Build withLive party cardTonight listRSVP rowsPink CTABottom nav

Game Studio

Where a game gets designed — Mong (think mood) builds the rules live on a sunset card while you tweak players, rounds, scoring and the win condition. A deep flow, so it uses a top back-bar, not the bottom nav.

BackgroundWarm paper — focused workspace
Mong buildsSunset — the AI-designing moment
ActionPink — Playtest
Rule dotsCategory colours tag each rule
Build withMong build cardProgress barRule rowsPlaytest CTABack bar

Invite Studio

Compose and send a party invite — a sunset invite-card preview, channels (link / message / QR) and the guest list. One pink send button.

BackgroundWarm paper
Invite cardSunset — a celebration moment
ActionPink — Send & the selected channel
Build withInvite previewChannel pickerGuest avatarsSend CTABack bar

Money Pool

Pool money for a party's prize — total pooled, progress to goal, contributors and the payout split. Gold carries money; pink stays the one action.

BackgroundWarm paper
Pool cardDark + gold — the money moment
MoneyGold — amounts & the goal bar
ActionPink — Add to pool
Build withPool totalGoal barContributor rowsAdd CTABack bar
06 · Floaties & motion

Everything gently floats.

Characters, coins, stars and tiles drift around the page like a zero-gravity playground. Six soft, slow, looping motions form the library, plus one balance rule: scatter colour evenly and leave breathing room. Every loop is built Lottie-ready so the same movement ships in product, web and social.

Bob
6s · ease-in-out

Up-and-down with a tiny counter-rotate. The default for characters.

Floaty
5s · ease-in-out

A lighter vertical drift, no rotation. For coins, stars and small stickers.

Rocket
6.5s · diagonal

Rises diagonally off-screen — the “play leaving the feed” accent. Once per view.

Spin
9s · linear

A slow rotation that catches the light. For gems, coins and prizes.

Pulse
3.4s · ease

A breathing scale — the AI and live heartbeat behind the mark.

Sway
3.6s · ease

A friendly wave from the base. For welcomers and idle greetings.

The floatie playground — a living Lottie library

Drop the cast, the play-object buddies and the stickers into one zero-gravity field, give each its own loop and offset, and the page comes alive. This is the reference set we export to Lottie for splash screens, empty states and the homepage hero.

15 floaties · Lottie-ready loops

Bits — the non-character floaties

Tiny, faceless extras — pluses, zigzags, dots, arcs, swirls, half-moons — sprinkled behind the cast for depth. Never the focus; just calm category-colour texture in the background.

Card suits

For card & luck games — spade & club in ink, heart & diamond in red (the classic deck colours, and both pass on white).

Confetti — the celebration burst

Confetti is how a win feels. It’s built from the play-shapes — ▲ ■ ● plus streamers, coins & stars — in the four category colours (balanced, + white on dark). It bursts up and out, gravity pulls it down, every piece spins and falls at its own speed, then it clears. Fire it on wins, level-ups, joining a party and birthdays — never as permanent decoration.

When to use what

Floaties — always-on
Gentle, looping, in the background. Ambient life on calm screens (home, empty states). Keep them to the sides — never behind text you must read.
Character idle — always-on
One subtle loop per visible character — Mong breathing, a buddy bobbing. Personality, not distraction. One hero character per screen.
Confetti — one-shot
A burst, then gone. Only for wins, level-ups, joining a party, birthdays. Never a permanent loop, never decoration.
04 · Typography

Three voices, one family.

Bricolage GrotesqueDisplay · 700–800
Headlines, the wordmark, character names
Press play. In real life.
Plus Jakarta SansBody · 400–700
Paragraphs, UI, buttons
Warm, friendly and highly legible from a 10-year-old to a 70-year-old. The connective tissue that carries every screen and sentence.
Space GroteskNumerals · 500–700
Scores, timers, codes, stats
00:42 · +10 · 7741
05 · Iconography

Line icons & play-shapes.

Two systems. A rounded 2px line set for UI (no emoji, ever), and the solid play-shapes — the glyph vocabulary that fills every game tile in flat single colour.

Game tiles — play-shapes on flat colour

07 · Components

The building blocks.

Buttons
Get the app Watch the film Press play
Chips
AI surface — Mong
Make a quick bluffing game for 4…Build
The iridescent conic gradient (pink→tangerine→gold→green→cyan→blue) marks every AI moment. Mong lives here.
Game card
Bottom navigation
Five tabs: Discover (the scroll feed), Explore (library + friends), Create (centre, Mong), Parties, Passport.
07·c · Platform

Desktop & mobile.

Same brain, two bodies. Mobile is home and must feel like a native iOS app; desktop is the wide companion. Colour, character and readability rules never change between them.

Mobile — native iOS
  • Real iOS status bar; large title that collapses on scroll.
  • Bottom tab bar + home indicator; thumb-reachable actions.
  • Sheets & modals slide up; back-chevron on deep flows.
  • 44px minimum tap targets; respect the safe areas.
Desktop — wide companion
  • Left sidebar nav instead of the bottom tab.
  • Center content to a max width; never full-bleed text.
  • Multi-column where it helps (library, studio).
  • Same warm-paper chrome & the one-pink-action rule; hover allowed, never required.

New screen? Start from the core patterns — warm-paper chrome, one pink action, category-colour tags, plum immersion, content-first covers — design mobile-first, then widen to desktop. Never the reverse.

08 · Voice & taglines

Warm, playful, hype-but-human.

We talk like the friend who gets everyone off the couch — for ages 10 to 70. Pro real-life bonding, anti-doomscroll, never corporate. The why-now: because AI can orchestrate the whole game and be the game master, the world's first offline games platform is finally possible.

✓ We say

"Turn any room into a game."

"Phones down, heads up."

"Mong's got the score — you just play."

Plain, warm, all-ages, a little hyped.

✕ We don't

"Leverage our AI-powered engagement platform."

"Endless content, served fresh."

Cold, corporate, doomscroll-y, jargon-heavy.

No generic emoji — use the Ico set.

Let's bring real-life games back. The world's first offline games platform. AI is the game master — so it's finally possible. Less play button on media. More play button on life. Roblox meets TikTok — for real life. Press play. In real life. Discover · Play · Share · Create · Host · Earn.
09 · Games

How a game shows up.

Every game is a little world. The platform stays calm warm-paper so each game can bring its OWN loud theme, cast and colour. Here’s the system — the genres, the card, the theming rule, the live room and the rewards.

09·a · The genres

Eight kinds of play.

Every game maps to one genre, and every genre owns a colour + play-shape. It’s how Discover stays legible — you read the room from each game's art and its genre tag before you read a word.

09·b · The game card

Anatomy of a game tile.

IRL Active
Survival Trials
Hosted by @mong
Active 8 playing
  • Cover mediaFull-bleed video or image — the game’s own world, Netflix/Roblox-style. The cover is the loudest thing; brand colour stays a small tag.
  • IRL badgeGreen dot + “IRL” marks a real-life, in-the-room game vs. an on-device one.
  • Genre tag + chipTop-right theme tag and a bottom genre chip, always in that genre’s colour.
  • Original titleBricolage 800. An original theme name — never a trademarked property.
  • Host & playersA buddy avatar for the host + a live player count in Space Grotesk.
  • Play ▲The upward triangle to join — the control trio’s primary, on every card.
09·c · Theming

Calm platform, loud games.

The one rule that keeps it from getting noisy: chrome stays warm-paper and quiet; the theme lives inside the game cover and the live room. Each event gets an original name and its own loud palette — here are four.

Survival
Trials
Active · IRL
Join
Neon Idol
Hunt
Party · IRL
Join
Heist
Hour
Bluffing · IRL
Join
Lava
Floor
Reflex · IRL
Join
The rule: the theme never leaks into the platform. Nav, Discover and your profile stay warm-paper; only the cover, the lobby and the live room wear the game’s colours.
Chrome · calm Game · loud
09·d · The live room

Lobby, live & the scoreboard.

Where players gather and the game runs. Avatars are the cast; the timer and scores are Space Grotesk; the live dot pulses red so you always know it’s happening now.

Lobby8 joined
Starts in
00:12
Start game
Scoreboard LIVE
09·e · Scoring & rewards

Points, coins, streaks, glory.

Every good moment gets a token. Points land fast, coins bank up, streaks reward coming back, and the win is a real moment — with the Star buddy and the MVP badge.

Victory.
+250 coins · 7-day streak kept · new MVP badge unlocked.
09·f · Real-life game icons

Icons for physical play.

From a deck of cards to a Rubik’s cube — a line set for every real-world game format, each with a single pop of its game colour. Same rounded language as the UI icons, just more alive. Used on filters, badges and how-to cards.

10 · App Store

How we show up on the Store.

The first three seconds of the brand. A pink icon that reads as “play,” a one-line promise, and marketing screenshots that lead with the feeling — real-life play — not a feature list. Big Bricolage captions, one character or shape each.

Bingmong
Real-life games · play off the screen
4.9★
12K ratings
#1
Games
4+
Age
AI
Native
In-App Purchases
Tell Mong.
Get a game.
AI builds the night in seconds.
9:415G
Create with Mong
Tell me about
your party.
12 kids, my backyard, ages 10–12
12 kidsBackyard~1 hr
Build my game
Live scores,
in the room.
No second screen needed.
● LIVERound 3/8
SHAPE-CARVING
00:35
1Kai240
2Maya224
3Zane198
Find your
next game.
Thousands, by mood & group.
9:415G
Browse games
Describe a game, Mong builds it…
Survival Trials
Neon Idol Hunt
Lava Floor
Heist Hour
Run the
whole party.
Invites to buzzer, sorted.
9:415G
Host HQ
Survival Trials
Sun 2:0020 going
POOLED & PROTECTED
$420 / $500
Play that
pays you back.
Earn BMG every game night.
9:415G
BMG Wallet
240 BMG
+89 this week
Play a game+15
Host a night+120
11 · Merch

Wear the play button.

Merch is the brand walking around in the real world — fitting, since that’s the whole point. Warm-paper and plum bases, one bold print: the mark, the wordmark or a buddy. Never busy, always huggable.

The Mark Tee
Warm paper · pink print
Bingmong
Plum Hoodie
Plum · white wordmark
Canvas Tote
Natural · Mong print
Pink Cap
Pink · white mark
Sticker Pack
Die-cut · the cast
Enamel Pins
Mark · Mong · Star
12 · Gift cards

The gift of a game night.

Bingmong gift cards load BMG credit for parties, games and gear — the easiest way for a grandparent to sponsor the fun. Digital or physical, every card carries the mark, a big friendly amount and one buddy peeking in.

Bingmong Gift CardSunset
$25
Load it · gift it · play IRL
Bingmong Gift CardPlum Night
500 BMG
Tokens for games, gear & events
Bingmong Gift CardBirthday
$50
Happy birthday — go throw a game
Bingmong Gift CardClassic
$10
The little nudge to press play
Anatomy: mark + “Bingmong Gift Card” top-left, colourway name top-right, one huge friendly amount, a one-line message, and a single buddy peeking from the bottom-right. Physical cards add a scratch code on the back.
DigitalPhysical
13 · Gamification & tokens

Play that pays you back.

Real-life play earns real rewards. Every game feeds three systems: BMG tokens you bank, streaks that keep you coming back, and a progression of levels, crests and MVP moments. Warm and generous — never grindy, never dark-pattern.

13·a · The token

BMG — the Bingmong token.

One in-game currency: BMG. A warm gold coin stamped with the play ▲ — earned by playing, spent on games, gear and events. Reads instantly as a reward; never a cold crypto coin.

+10 · per game +25 · win +100 · host a night
240BMG The balance pill — token + amount in Space Grotesk. Lives in the wallet and the home top-bar.
13·b · Streaks

Keep the streak alive.

Streaks reward showing up — a warm flame that grows, a seven-day tracker and milestone badges. The anti-doomscroll loop: you come back for the people, and the number just follows.

This week
5 / 7 days
M
T
W
T
F
S·
S·
✓ 3-day ✓ 7-day 30-day 100-day
12
week streak · personal best
13·c · Progression

Levels, crests & MVP.

XP levels you up, crests mark what you’ve done, and the gold Star is the MVP of the night. Earned, never bought.

Level 12
Party Legend
720 / 1000 XP
First winWin your first game
Host x5Throw five game nights
30-day streakPlay a full month
14 · Avatars & wardrobe

Your buddy, your way.

Like Roblox, every player gets a buddy they make their own. Start with a cast character, then dress it — hats, shades, neckwear, held props and colourways. Same huggable base, infinite personality; Mong remembers your look across every game.

Puff · Party
Party hat
Mong · Royal
Crown
Boxy · Studious
Cap + specs
Pip · Dapper
Beanie + bowtie
Wearables
Party hat
Crown
Cap
Beanie
Round specs
Star shades
Bowtie
Headphones
Held props
Play sign
Racket
Coin
Flag
Balloon
Colourways: the same buddy ships in the brand palette — pick your colour and it carries across hats, props and games. Accessories stay flat single-colour so the buddy always reads first.
Real-Life Play · v3

Press play.
In real life.

White ground, candy floaties, one upward triangle. Keep it warm, keep it balanced, keep the play button pointing up.

14 · For engineers

The locked system.

One source of truth so every button, tab and page looks like the same hand made it. Build from these tokens and shared components — if it isn't a token or a shared component, it doesn't ship. No one-off colours, no per-page restyles, no hidden screen that skipped the system.

Colour tokens

TokenValueOnly use for
Pink--pink #ff3d7fThe one action — buttons, FAB, active states, links, the mark.
Sunset--sunsetCelebration — hero, Create, wins, parties. Never routine UI.
Blue--blue #1e9bffCategory only (genre / character). Never a button.
Green--green #22c24eCategory; “go” / ✓ accents.
Red--red #ff3b1eCategory; the live dot.
Gold--gold #ffc32eCategory; rewards, coins, MVP.
Tangerine--tang #ff7a3dSpark — illustration accents only.
Cyan--cyan #16d2e0Spark — illustration accents only.
Plum--plum #1b1020Immersive backgrounds (Feed, Party).
Paper--bg #f4f2edPage ground.
Card--card #ffffffSurfaces & cards.
Ink--ink #16130fPrimary text.
Ink-2--ink-2 #544c44Secondary text.
Ink-3--ink-3 #8d847aMuted labels.
Line--line #e6e1d6Borders & dividers.

Type tokens

TokenFamilyUse
Display--d Bricolage Grotesque 800Headlines, titles, big numbers.
Body--b Plus Jakarta Sans 400–800UI & body copy.
Mono--n Space Grotesk 500–700Numerals, timers, stats, labels.
Scaledisplay clamp 34–56 · card-title 21 · body 15–19 · small 13 · micro/label 10–11 (mono). Mobile body never below 15px.

Primitives

PrimitiveValuesRule
Space4 8 12 16 24 32 44Spacing & gaps — these steps only.
Radius10 14 18 26 999chip-sm · button · card-sm · card · pill.
Shadow--shadow-sm / --shadowCards only — no other shadows.
Motion120ms tap · 200ms UI · 4–9s ambientEase cubic-bezier(.22,1,.36,1); transform/opacity only.
Target44pxMinimum tap target, always.
Layoutmax 1200 · gutters 24–44Content width; centre on desktop.

Buttons — one component, four variants

PrimarySoftGhostDark
Exactly one pink primary per screen. Regular 13–15px / pad 12–13×24; large 16px / pad 15×26; radius 14px; pills (999px) for chips. Never invent a fifth style or recolour a button to a category colour.
Navigation — SSOT
Mobile: one bottom tab bar (5 items, centre pink FAB, active item pink, home indicator). Desktop: the same items as a left sidebar. Label always present, 44px targets. One nav component, configured by props — never rebuilt per page.
Cards, chips & inputs
Card: --card bg, --line border, radius 18–26, --shadow-sm. Chip: pill; ink or white text picked by fill (see Readability). Input: --bg fill, radius 11–12, ink text, ink-3 placeholder. Reuse these — no bespoke containers.

Definition of done — every screen & control

✓ Fast & consistent

  • Tokens only — no raw hex or magic px in components.
  • System-font fallback while webfonts load; font-display:swap.
  • Characters are inline SVG from the shared set — no PNG sprites.
  • Lazy-load below-the-fold images & video covers.
  • Animate only transform & opacity; honour reduced-motion.
  • One shared component per pattern, imported everywhere.

✕ Slow & off-brand

  • Inline one-off colours, fonts or shadows.
  • Re-styling a button or tab per page “just this once.”
  • Animating width/top/left/box-shadow in loops (jank).
  • Huge unoptimised images; per-component font imports.
  • Blocking JS for decoration; autoplaying everything.
  • A hidden page or tiny button that skips the system.

Copy-paste starter — tokens & base components

/* Paste once. Build everything from these — no raw hex, no magic px. */
:root{
  /* action & celebration */
  --pink:#ff3d7f; --sunset:linear-gradient(120deg,#ff5e8a,#ff7a3d);
  /* category — NEVER buttons */
  --blue:#1e9bff; --green:#22c24e; --red:#ff3b1e; --gold:#ffc32e;
  /* sparks — art only */ --tang:#ff7a3d; --cyan:#16d2e0;
  /* grounds */ --bg:#f4f2ed; --card:#fff; --plum:#1b1020;
  /* ink */ --ink:#16130f; --ink-2:#544c44; --ink-3:#8d847a; --line:#e6e1d6;
  /* type */ --d:"Bricolage Grotesque"; --b:"Plus Jakarta Sans"; --n:"Space Grotesk";
  /* primitives */ --r-btn:14px; --r-card:26px; --pill:999px;
  --shadow:0 1px 2px rgba(20,17,14,.04),0 18px 44px rgba(20,17,14,.08);
}
/* the ONE action — never recolour to a category colour */
.btn{font:800 15px var(--d);padding:13px 24px;border:0;border-radius:var(--r-btn);background:var(--pink);color:#fff;}
.btn--soft{background:var(--card);color:var(--ink);border:1px solid var(--line);}
.btn--ghost{background:transparent;color:var(--ink);}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);}
.chip{font:700 13px var(--n);padding:7px 13px;border-radius:var(--pill);} /* fg via fg() */
/* pick text colour by fill brightness — use everywhere a colour fill holds text */
function fg(hex){const h=hex.replace('#','');const r=parseInt(h.slice(0,2),16),g=parseInt(h.slice(2,4),16),b=parseInt(h.slice(4,6),16);return (0.299*r+0.587*g+0.114*b)/255>0.5?'#16130f':'#fff';}

Build a screen in 6 steps

  1. Start mobile-first from the closest screen blueprint.
  2. Lay warm-paper chrome; choose exactly one pink primary action.
  3. Category colours only as small genre tags; covers = real content.
  4. Check every text-on-fill pair with fg() (readability rule).
  5. Add Mong/characters only where warmth helps; subtle loops, confetti = one-shot wins.
  6. Widen to desktop (sidebar); run the Definition of Done.

Codex traps — the mistake → the fix

✕ The mistake

  • Made the button blue / green / gold.
  • White text on a gold or tangerine chip.
  • Invented a new hex, grey or purple.
  • Sunset gradient on a normal button.
  • Two big CTAs on one screen; emoji icons.
  • Full-bleed paragraph; !important one-off restyle.

✓ The fix

  • Buttons are always pink; category colours never on buttons.
  • Ink on bright fills (use fg()).
  • Only --tokens; darks are warm plum, no grape purple.
  • Sunset = celebration only; flat pink for actions.
  • One pink primary; custom SVG/cast, never emoji.
  • Max-width + centre; reuse the shared component.

Full agent playbook (installable): Bingmong Brand Skill.md — the rule-locked summary every agent should load before building.

02 · Logo variants

Every form it takes.

Wordmark, mark-only, inverse, monochrome and the square app/avatar — so there's always a correct lockup for the space.

03 · Sub-brands

One family, many rooms.

Each division is Bingmong + a descriptor in its own accent. The wordmark and mark never change; only the descriptor and accent shift. Chrome stays calm — the accent is just identification.

Coin & token

BMG — Bingmong Coin
The gold ▲-stamped coin is the in-app currency. Wordmark short form BMG; full name Bingmong Coin. Gold is a fill — never gold text on white.

Member badges

Who someone is on the platform — a small accent badge, never a button.

04 · Social asset kit

Profiles & covers.

Exact export sizes for every platform — avatars, covers and feed formats. Sunset for loud moments, warm-paper or plum for calm; one pink action where there's a CTA.

Profile avatars

Covers & feed formats

05 · Social playbook

What to post where.

Same brand, different rooms. Each platform has a job — match the format and the tone.

06 · Video directions

How Bingmong moves.

Real rooms, real faces, phones-down. Every cut earns the ▲ — play coming off the screen.

✓ Do

  • Open on a real room mid-laugh — people, not UI.
  • Phones go down; the game happens between people.
  • End on the ▶→▲ sting + wordmark, 1s max.
  • Warm natural light; all-ages (10→70) in frame.
  • Big captions (Bricolage) for sound-off feeds.
  • Score with Bingmong Music — upbeat, warm.

✕ Don't

  • Screen-recording the app for 30s straight.
  • Cold, corporate VO or stocky "tech" footage.
  • Doomscroll energy — heads-down, alone.
  • Tiny captions, or relying on sound to land.
  • Trademarked game names or music.
  • Grape purple, cold blue grades — keep it warm.
07 · Mood

The feeling to shoot for.

Drop real photography & footage into these slots. The prompts describe exactly what each frame should capture — warm, real-life, phones-down play across all ages.

Mood images

Mood videos

16 · For agents

Churn out on-brand social.

Copy a recipe, swap the words, ship. Every recipe mixes the same ingredients: warm/sunset/plum grounds, the cast, floaties & bits, and motion (loop or one-shot). Export floatie & character idles as Lottie for reels.

Motion menu

Ingredient kit (data-c keys)

Explore Bingmong

Bingmong is AI that takes play off the screen and back into the room — real-life games, built in seconds, for everyone 10 to 70.

Open the app