Colors
Pongo leads with a vivid blue (#0CA4FF) accented by warm yellows and pinks, with deep purples for sleep content. The neutral brushwork is warm-toned with creams and soft grays.
Brand
Primary (Blue)
Secondary
Neutrals
Semantic
Typography
Pongo uses their custom "Pongo Apercu" font -- a rounded, friendly geometric sans-serif. Weights range from 400 (regular) to 900 (black). Here we approximate with DM Sans.
Font Weights
400 Regular
500 Medium
600 Semibold
700 Bold
900 Black
Spacing
4px base unit spacing scale used consistently throughout the product.
Border Radius
Pongo's signature rounded aesthetic -- everything feels soft and approachable. Large radii dominate the UI.
sm
md
lg
xl
2xl
3xl
Shadows
Subtle, warm shadows that add depth without harshness.
Gradients
Warm sunrise gradients for energy, deep night gradients for sleep.
Form Inputs
Clean, minimal inputs with 8px radius and subtle borders. Used on login/signup screens.
Cards
Rounded cards with 24px radius, soft shadows, and image-top layouts. Content cards use 16px radius.
Host Playbook
Tips and templates for the host who runs a 6+ person group.
Game History
Look back at every game your group has played, with scores and notes.
Find a Group
Discover local mahjong groups looking for a fourth this month.
House Rules
Set the rules of play once so every game starts on the same page.
Testimonial Card
I started using Pongo to help with stress at work. After just two weeks, I noticed a real difference in how I handle tough moments.
Hero Sections
Pongo uses bold, colorful hero areas -- often with yellow/orange backgrounds, large type, and playful illustrations or app screenshots.
40% off the sleep that makes your day
Get the app for meditation, sleep, and focus.
Put your mind to sleep
Wind down with sleepcasts, sleep music, and soundscapes.
Meditation made simple
Guided meditation as easy as 3 minutes a day.
Pills & Tags
Rounded pill tags for categories, durations, and labels.
Game Detail
The iconic Pongo player uses a warm gradient background (yellow to orange), centered timer ring, and minimal controls. The progress bar sits at the bottom.
Game Detail Specifications
| Background | linear-gradient(180deg, #FFCE00, #0CA4FF) |
| Timer ring | 160px diameter, 4px stroke |
| Timer font | 44px, weight 700, white |
| Play button | 72px circle, white background |
| Skip buttons | 56px circle, rgba(255,255,255,0.2) |
| Progress bar | 4px height, rgba(255,255,255,0.3) track |
| Title | 16px, weight 700, white |
| Subtitle | 13px, weight 400, white 80% |
Dark Mode
Dark mode UI with deep purple-to-black gradients. Cards use translucent white backgrounds. Calming, low-contrast design for bedtime use.
Sleep
Wind down and drift off
Dark Mode Tokens
| Background | linear-gradient(180deg, #281466, #141313) |
| Card bg | rgba(255, 255, 255, 0.08) |
| Card radius | 16px |
| Thumbnail radius | 12px |
| Text color | #FFFFFF |
| Secondary text | rgba(255, 255, 255, 0.6) |
| Tab bar bg | #141313 |
| Active tab color | #FFA1CC (pink) |
Dark Mode Content Tags
Group Discovery Cards
Square aspect-ratio cards with vibrant background colors and bold white text overlays. Used in category grids and content carousels.
RSVP Progress Rings
Circular progress indicators used for streaks, session completion, and daily goals. Orange fill on gray track.
Streak Counter
Tab Bar
Bottom tab navigation for the mobile app. White background for day mode, dark for sleep mode. Orange active state.
Light Mode
Dark Mode
Avatars & Stacks
Members are represented by initial-based avatars in the Pongo brand-blue family with category-rotated tints. Status dots show online/busy/offline. Stacks render up to 4 avatars before condensing to a "+N" count tile.
Sizes
With Status
Stacks
Group Card
Primary list item for the "Your Groups" home screen. Shows group name, mahjong style, member-avatar stack, member count, and the next scheduled game. Tap routes to the group detail.
Member List Row
Used in the group detail screen and on the player picker. Avatar + name + role pill + secondary line. Host gets the brand-blue role pill.
Game Proposal Card
A proposed game is one date with up to three time options. Each row shows a time and the live RSVP count. The instant a slot reaches 4 yeses, anyone in the group can lock it.
RSVP State Pills
Used on game cards, member rows, and group cards. Color signals state but is always paired with text — never color-only meaning.
Calendar — Month View
Used in the Schedule tab and as the date picker for proposing a game. Days with at least one proposed game show a blue dot under the date; locked games render as a filled blue circle.
Calendar — Week Strip
A condensed seven-day strip used at the top of the Schedule tab and inside the Group detail. Active day fills with brand blue; days with proposals show a small dot above the letter. Modeled on the MyFitnessPal "Today" header.
Date & Time Pickers
When proposing a game, hosts pick one date and up to three time options. Inline calendar for date selection, native iOS-style wheel for each time. Times snap to 15-minute increments.
Settings Row
Profile and group-settings rows: bold label on top, current value below in lighter weight, right-aligned uppercase action in brand blue. A standard account & subscription settings pattern. Destructive action (Delete) uses error red.
Sign in with Apple
Pongo's only auth path. Uses Apple's own black pill button per HIG; the system provides the icon and label automatically — this is a visual reference only.
Empty States
Three core empty states a new user will see. Each uses a soft brand-blue glow disc, a tight title, a one-sentence body, and a single primary CTA.
Pongo Tab Bar
Five-slot bottom navigation with a center FAB for the most common host action: propose a game. The FAB rises 22px above the bar and uses the brand glow. Active tab tints the icon and label brand-blue.
Illustration Style
Pongo's iconic illustration style features amorphous blob shapes, simple dot-eye characters with curved smiles, and a warm brushwork. All shapes are organic and rounded -- no sharp edges anywhere.
Mascot Illustrations
Design Principles
Organic Shapes
No sharp corners. Every shape uses blob-like, organic border radii (40%-60% variations). This creates the warm, approachable feeling that defines Pongo.
Minimal Faces
Characters use dot eyes (2-3px circles) and simple curved-line smiles. No detailed facial features. Expressions are conveyed through shape and posture.
Warm Brushwork
Illustrations primarily use orange, yellow, and pink tones. Sleep illustrations use deep purples and navy. Cool blues are reserved for focus content.
Gentle Motion
Animations are slow and breathing-like (4s ease-in-out). Float and scale effects. Never jarring or fast. Everything moves like it is breathing.
Animations
Pongo animations are slow, calming, and breathing-inspired. Transitions use ease-in-out curves.
Transition Specs
| Name | Value | Usage |
|---|---|---|
| Fast | all 0.15s ease | Hover states, micro-interactions |
| Default | all 0.3s ease | Button states, card hover |
| Slow | all 0.5s ease | Page transitions, reveals |
| Spring | all 0.4s cubic-bezier(0.34,1.56,0.64,1) | Playful bounces |
| Breathe | 4s ease-in-out infinite | Meditation visuals |
Token Reference
Complete list of CSS custom properties / design tokens.
Layout Tokens
| Token | Value |
|---|---|
--max-width | 1440px |
--content-width | 1200px |
--narrow-width | 800px |
--nav-height | 80px |
--mobile-nav-height | 64px |
--tab-bar-height | 56px |
Breakpoints
| Name | Value |
|---|---|
| Mobile | 375px |
| Tablet | 768px |
| Desktop | 1024px |
| Wide | 1440px |
Z-Index Scale
| Name | Value |
|---|---|
| Dropdown | 100 |
| Sticky | 200 |
| Nav | 1000 |
| Modal | 2000 |
| Toast | 3000 |
Font Family
| Token | Value |
|---|---|
--font-primary | 'Pongo Apercu', sans-serif |
--font-secondary | Apercu, sans-serif |
--font-serif | Apercu, serif |