GroupMe DESIGN.md

1. Visual Theme & Atmosphere

GroupMe's iOS app is a friendly, high-energy group-messaging surface built around one idea: a group chat should feel like a party everyone can drop into, not a serious work tool. The canvas is clean white (#FFFFFF light / #121212 dark) and the entire personality of the app is carried by GroupMe Blue (#00AFF0) — a bright cyan-leaning blue that paints the chat navigation bar, the outbound message bubbles, the floating send button, and the active bottom tab. Open a group and the top bar is a solid block of that blue with the group's name and member count in white; this colored header is the single most recognizable piece of GroupMe chrome and instantly separates it from the gray-and-white restraint of iMessage or Signal.

The signature interaction is the heart "like" on a message. Double-tap any bubble (or tap the heart affordance) and a count badge docks just below the bubble's trailing corner in a small rounded pill — a red heart glyph (#FF3B5C) plus the number of likes. This is GroupMe's version of a reaction and it is everywhere: it's how the group cheers, votes, and acknowledges without flooding the thread. The other defining moment is per-group theming — every group can pick its own color theme and the app recolors avatar gradients and accent details to match, so the "Roadtrip" group can feel sunset-orange while "Family" stays classic blue, all while the core blue chrome and like interaction stay consistent.

Two screens define the product. The group list (Chats tab) is a vertical feed of group rows, each with a circular group avatar (often a generated gradient or a group photo), the group name in semibold, a one-line message preview, a timestamp, and an unread count pill in GroupMe Blue. The group chat thread is the heart of the app: inbound bubbles in neutral gray (#F0F0F0 light / #2A2A2C dark) with the sender's avatar and colored name above the first bubble in a run, outbound bubbles in GroupMe Blue, like-count pills docked below bubbles, an inline image gallery grid for shared photos, and a pill-shaped composer with a + attachment button and a circular blue send button. The avatars are always circular and frequently colorful — GroupMe assigns each member a generated gradient avatar with their initial, which makes a busy group thread feel like a wall of friendly faces.

Typography is the iOS system face (SF Pro) — GroupMe does not ship a brand typeface; it leans on system text and lets color and the circular avatars carry the brand. Hierarchy is conversational: group names at 22pt bold, message body at 16pt regular, sender names at 12pt semibold in the group's accent color, timestamps and metadata at small gray sizes. The type system stays out of the way so the bubbles, hearts, and faces do the talking.

Key Characteristics:

• Bright GroupMe Blue (#00AFF0) chrome — colored chat nav bar, outbound bubbles, send button, active tab
• Clean white canvas (#FFFFFF) light / warm charcoal (#121212) dark — content-forward, friendly
• Heart "like" on messages — double-tap to like; count docks in a pill below the bubble's trailing corner
• Per-group color themes — each group recolors avatar gradients and accent details
• Circular generated-gradient member avatars with initials — a wall of friendly faces
• Colored sender name above the first bubble in a run (in the group's accent color)
• Inline image gallery grid — multi-photo shares render as a tappable 2×2 (or more) grid in a bubble
• Pill composer with + attachment button and circular blue send button
• Group list rows with circular avatar, name, preview, timestamp, unread pill
• Bottom tab bar: Chats / People / Discover / Profile — active tab in GroupMe Blue
• Emoji, GIFs, and a meme/sticker library as first-class message content
• Bubbles use an 18pt radius with the tail corner squared to ~5pt

2. Color Palette & Roles

Primary (Interactive)

• GroupMe Blue (#00AFF0): The brand. Chat nav bar background, outbound message bubbles, send button, active tab, primary CTAs, unread count pills, links.
• GroupMe Blue Pressed (#0091C7): Pressed/active state on buttons and the send button.
• GroupMe Blue Deep (#0077B5): Deeper shade for gradient bottoms, pressed nav elements, splash backgrounds.

Canvas & Surfaces (Light Mode)

• Canvas White (#FFFFFF): Primary light canvas — chat thread background, list background.
• Surface Gray (#F7F7F8): Grouped settings backdrop, search field fill, elevated rows.
• Inbound Bubble Light (#F0F0F0): Inbound message bubble fill.
• Divider Light (#E4E4E6): Hairline dividers between list rows and sections.
• Row Pressed Light (#ECECEE): Pressed list row.

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#121212): Primary dark canvas — NOT pure black; keeps the app warm.
• Dark Surface 1 (#1C1C1E): Composer bar, like-pill background, grouped settings rows.
• Dark Surface 2 / Inbound Bubble Dark (#2A2A2C): Inbound message bubble fill, hovered rows.
• Dark Divider (#2C2C2E): Hairline dividers.

Text

• Text Primary Light (#1A1A1A): Primary message and list text on light.
• Text Secondary Light (#6A6A6A): Message previews, timestamps, metadata.
• Text Tertiary Light (#9A9A9A): Disabled, very low-emphasis.
• Text Primary Dark (#ECECEC): Primary text on dark.
• Text Secondary Dark (#A0A0A0): Secondary text on dark.
• Text Tertiary Dark (#6A6A6A): Tertiary on dark.
• Text On Blue (#FFFFFF): Text inside the blue nav bar and outbound bubbles.

Per-Group Theme Accents

GroupMe lets each group pick a color theme. These recolor avatar gradients, the sender name color, and accent details. The blue chrome stays constant.

Avatar Generated Gradients (assigned per member)

• Av 1: #FF6B6B → #FF8E53 (warm)
• Av 2: #2ECC71 → #16A085 (green)
• Av 3: #9B59B6 → #6C5CE7 (purple)
• Av 4: #4A90D9 → #1E3A5F (blue)
• Av 5: #F39C12 → #B5651D (amber)

Semantic

• Like Heart (#FF3B5C): The heart glyph on liked-message count pills — the signature accent.
• Error Red (#F15E6C): Failed-to-send, destructive actions (Leave group, Remove member).
• Success Green (#2ECC71): Message-sent confirmation, success toasts.
• Warning Amber (#F1C40F): Mute/notification warnings.
• Online Dot (#2ECC71): Active-now indicator on avatars (where shown).

3. Typography Rules

Font Family

• Primary: SF Pro Text / SF Pro Display (Apple system font) — GroupMe ships no custom brand typeface; it relies on the iOS system face and uses color + circular avatars for brand expression.
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Emoji: Apple Color Emoji (system) — emoji are first-class message content and render at message-body size or larger when a message is emoji-only.

Hierarchy

Principles

• System face, no brand type: GroupMe deliberately uses SF Pro. Don't substitute a decorative typeface — the brand lives in blue + circular avatars.
• Body is 400, names are 600: Message text is regular weight; sender names are semibold and tinted with the group accent color for fast scanning.
• Color carries hierarchy in chat: Inside a thread, weight is nearly flat — color (blue outbound, gray inbound, accent sender names) does the differentiating, not type size.
• Emoji scale up when alone: An emoji-only message renders at ~40pt; mixed text+emoji stays at body size.
• Dynamic Type first-class: Message body, list titles, previews scale with the system setting; tab labels, like-count numbers, and unread pills stay fixed.

4. Component Stylings

Buttons

Primary Button (Create group / Send invite / Save)

• Shape: Fully rounded pill (999pt corner radius)
• Background: #00AFF0 (GroupMe Blue)
• Text: #FFFFFF, SF Pro Text 16pt weight 700
• Padding: 14pt vertical, 28pt horizontal
• Pressed: background #0091C7 + scale 0.98
• Disabled: #00AFF0 at 40% opacity

Secondary / Outline Button (Add members / Cancel)

• Background: transparent
• Border: 1.5pt #00AFF0
• Text: #00AFF0, SF Pro Text 14pt weight 600
• Padding: 12pt vertical, 20pt horizontal
• Corner radius: 999pt (pill)
• Pressed: 8% blue fill

Pill / Utility Button (Mute / Pin / Filter)

• Background: #F0F0F0 light / #2A2A2C dark
• Border: 1pt divider
• Text: primary text color, SF Pro Text 14pt weight 500
• Corner radius: 999pt
• Padding: 10pt vertical, 18pt horizontal

Text Button (See all members / Edit)

• Font: SF Pro Text 14pt weight 600
• Color: #00AFF0
• No background, no underline
• Pressed: 50% opacity

Circular Send Button

• Size: 38pt circle
• Background: #00AFF0 (active) / #C8C8CC (empty input, disabled)
• Icon: paper-plane glyph 18pt #FFFFFF
• Pressed: #0091C7 + scale 0.94

Message Bubble (the core atom)

Inbound Bubble

• Background: #F0F0F0 light / #2A2A2C dark
• Text: primary text color, SF Pro Text 16pt weight 400
• Corner radius: 18pt, with the bottom-leading corner squared to 5pt (tail side)
• Padding: 9pt vertical, 13pt horizontal
• Max width: 80% of thread width
• Leading avatar: 30pt circle, aligned to the bottom of the bubble run
• Sender name: 12pt weight 600 in group accent color, above the first bubble in a run, 4pt leading inset

Outbound Bubble

• Background: #00AFF0 (GroupMe Blue)
• Text: #FFFFFF, SF Pro Text 16pt weight 400
• Corner radius: 18pt, with the bottom-trailing corner squared to 5pt
• Aligned trailing; no avatar shown for self
• Timestamp: 10pt #9A9A9A below trailing edge when expanded

Bubble Run Grouping

• Consecutive messages from the same sender within 60s collapse: avatar + name show only once at the top; bubbles stack with 3pt vertical gap

Like Pill (signature distinctive component)

• Position: docked at the bubble's trailing-bottom corner, overlapping ~10pt below
• Background: #FFFFFF light / #1C1C1E dark
• Border: 1pt divider
• Corner radius: 999pt
• Content: red heart glyph (#FF3B5C) 11pt + count number 10pt weight 700 #6A6A6A
• Padding: 2pt vertical, 7pt trailing / 5pt leading
• Appears with a 150ms pop (scale 0.6 → 1.1 → 1.0) when a like lands
• Tapping the pill opens the "Liked by" list (avatars + names)

Image Gallery Block

• A multi-photo share renders inside a bubble-shaped container
• Single image: rounded 18pt, max 220pt wide, aspect-preserved
• 2–4 images: 3pt-gap grid (2 columns), each cell 8pt corner radius, square-cropped
• 5+ images: 2×2 grid; the 4th cell shows a +N overlay (rgba(0,0,0,0.5) scrim, white 16pt bold)
• Container padding: 4pt; container radius 18pt with squared tail corner

Navigation

Chat Nav Bar (top of a thread)

• Height: 56pt + safe area
• Background: #00AFF0 (solid GroupMe Blue) — the signature colored header
• Leading: back chevron 22pt #FFFFFF
• Center-leading: 34pt circular group avatar + group name 22pt weight 700 #FFFFFF + sub-line (member count / typing) 11pt rgba(255,255,255,0.82)
• Trailing: group info / call action 21pt #FFFFFF

Bottom Tab Bar

• Height: 68pt + safe area
• Background: rgba(255,255,255,0.94) light / rgba(18,18,18,0.94) dark with blur + 0.5pt top divider
• Tabs (4): Chats, People, Discover, Profile
• Icon size: 22pt
• Active: #00AFF0, icon filled
• Inactive: #888888, icon stroked
• Labels: SF Pro Text 10pt weight 500, always shown

Chats List Row

• Height: 72pt
• Leading: 52pt circular group avatar (group photo or generated gradient)
• Title: group name 15pt weight 600
• Subtitle: last-message preview 14pt weight 400 #6A6A6A (1 line, ellipsized)
• Trailing top: timestamp 12pt #9A9A9A
• Trailing bottom: unread count pill — #00AFF0 fill, white 12pt weight 700, min 20pt circle/pill

Input Fields

Composer

• Layout: + attach button (left) · pill text field (center) · circular send button (right)
• Pill field: height 38pt, background #F0F0F0 light / #2A2A2C dark, 999pt radius, 16pt horizontal padding
• Placeholder: "Send a message" 14pt #9A9A9A
• + button: 26pt glyph #00AFF0 — opens attachment sheet (camera, photo library, GIF, location, poll, event, calendar)
• Send button: 38pt blue circle (see Buttons)
• Bar background: #FFFFFF light / #1C1C1E dark, 0.5pt top divider

Search Field (Chats / People)

• Height: 38pt
• Background: #F0F0F0 light / #2A2A2C dark
• Corner radius: 999pt (pill)
• Leading icon: magnifyingglass 16pt #9A9A9A
• Placeholder: "Search" 15pt #9A9A9A

Distinctive Components

Heart Like + Count Pill

• See "Like Pill" above — the single most recognizable GroupMe interaction
• Double-tap a bubble to like; a heart animates from the tap point and the count pill updates

Generated Gradient Avatar

• 30–52pt circle, two-stop diagonal gradient assigned per member, member initial in white SF Pro weight 700, centered
• Group avatar can be a photo or a composite of member avatars

Per-Group Theme Picker

• In group settings: a row of color swatches; selecting one recolors avatar gradients, sender-name color, and accent details across the thread
• The blue chrome (nav bar, outbound bubbles, send) stays constant

Inline Polls & Events

• Poll card: question + option rows with vote bars filling in group accent color; "X votes" footer
• Event card: title, date/time, location, RSVP pill buttons (Going / Maybe / Can't)

GIF / Meme Library

• Tapping + → GIF opens a searchable grid (2 columns) of GIFs; selecting sends inline
• Meme generator: pick image + top/bottom caption, sends as an image message

Gallery Tab (per group)

• A grid of all photos shared in the group, 3 columns, 2pt gap, square-cropped, tappable to full screen

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 6, 8, 12, 14, 16, 20, 24, 28, 32, 40
• Bubble vertical gap (different senders): 14pt
• Bubble vertical gap (same sender run): 3pt
• Thread horizontal inset: 12pt
• List row inset: 16pt leading / 16pt trailing

Grid & Container

• iPhone: chat thread full-bleed with 12pt horizontal inset; bubbles max 80% width
• iPad: thread max-width 680pt centered; split view shows Chats list (340pt) + thread
• Image gallery grid: 2 columns inside bubble; Gallery tab uses 3 columns full-width
• Bottom tab bar pinned; chat nav bar pinned

Whitespace Philosophy

• Conversational density: bubbles breathe with 14pt between speakers but tighten to 3pt within a run — the eye groups by sender
• The header is loud, the body is calm: a full-color blue nav bar up top, then a clean light/dark thread so messages and faces dominate
• Avatars anchor the left rail: inbound rows reserve a consistent 30pt avatar gutter so names and bubbles align
• Like pills overlap intentionally: the pill hangs ~10pt below the bubble corner so it reads as attached to that message, not a new row

Border Radius Scale

• Square (0pt): nav bar, full-width dividers, photo full-screen
• Subtle (5pt): the squared tail corner of a bubble; gallery image cells (8pt)
• Image cell (8pt): gallery grid cells
• Standard (12pt): cards (poll, event), modals
• Bubble (18pt): message bubbles, image-gallery container
• Comfortable (24pt): bottom sheets
• Pill (999pt): buttons, composer field, search field, unread/like pills
• Circle (50%): avatars, send button

6. Depth & Elevation

GroupMe is mostly flat with soft, low shadows; depth signals "this floats above the thread."

Shadow Philosophy: GroupMe keeps the thread flat so color does the work. Shadows are reserved for the like pill (a subtle 1px lift so it reads as attached but distinct) and floating UI (attachment sheet, GIF grid). On dark mode, shadows nearly vanish, so floating panels gain a 1pt #2C2C2E border as the elevation cue and the like pill switches to a #1C1C1E fill that separates it from the #121212 canvas.

Motion

• Like pop: heart scales 0.6 → 1.1 → 1.0 over 220ms spring (damping 0.7); count pill cross-fades the new number; soft haptic on like
• Message send: outbound bubble slides up + fades in from the composer over 200ms ease-out; subtle haptic tick on successful send
• New inbound message: bubble fades + 6pt slide-up in 180ms ease-out; thread auto-scrolls if pinned to bottom
• Attachment sheet: slides up from bottom 300ms ease-out with scrim fade
• Tab switch: instant content swap; active icon cross-fades fill in 120ms
• Typing indicator: three dots bounce in a 1.2s loop inside an inbound-style bubble
• Theme change: avatar gradients and accent colors cross-fade over 250ms across the visible thread
• Pull-to-refresh (Chats): GroupMe-blue spinner; 250ms settle
• Haptic feedback: soft impact on like, light tick on send, selection tick on tab change

7. Do's and Don'ts

Do

• Paint the chat nav bar solid GroupMe Blue (#00AFF0) — the colored header is the signature chrome
• Use GroupMe Blue for outbound bubbles, send button, active tab, and unread pills
• Dock the heart-like count in a small rounded pill below the bubble's trailing-bottom corner
• Show the sender's colored name (group accent) above the first bubble in a run
• Use circular generated-gradient avatars with the member's initial
• Collapse consecutive same-sender messages into a run (avatar + name once)
• Render multi-photo shares as a gap grid inside a bubble with a +N overflow tile
• Use a pill composer with a + attach button and a circular blue send button
• Respect per-group theme accents on avatars and sender names — keep blue chrome constant
• Use SF Pro (system) — no decorative brand typeface
• Keep the thread flat; reserve soft shadows for the like pill and floating sheets

Don't

• Don't make the chat nav bar white/gray — losing the blue header loses the brand
• Don't use a non-circular avatar shape — GroupMe avatars are always circles
• Don't render likes as inline emoji in the text — they are a docked count pill below the bubble
• Don't color outbound bubbles with the per-group accent — outbound stays GroupMe Blue
• Don't substitute a custom brand font — GroupMe is system-font on purpose
• Don't show the sender name/avatar on every bubble in a run — only the first
• Don't use heavy drop shadows on bubbles — the thread is flat
• Don't pure-black the dark canvas — use #121212 to keep it warm and friendly
• Don't squarify bubbles — they're 18pt rounded with only the tail corner clipped to ~5pt
• Don't hide the + attachment affordance — GIFs/polls/events/memes are core to GroupMe
• Don't animate the like aggressively beyond a quick spring pop — it should feel light and fun

8. Responsive Behavior

Device Sizes

Dynamic Type

• Scales: message body, list row title, list preview, screen titles
• Fixed: tab labels, like-count number, unread pill number, sender name (layout-sensitive in run grouping)
• Image gallery cells scale proportionally with thread width, not font scale

Orientation

• All screens rotate; iPad gains persistent split view (Chats + thread)
• Image full-screen viewer supports rotation and pinch-zoom
• Composer stays pinned above the keyboard in both orientations

Touch Targets

• Bubble (for double-tap like): full bubble area, min 44pt tall
• Like pill (tap to see who liked): 28pt hit area around the pill
• Tab bar icons: 22pt glyph, 44pt hit
• Send button: 38pt visual, 44pt hit
• + attach: 26pt glyph, 44pt hit
• List row: full 72pt row tappable

Safe Area Handling

• Top: blue chat nav bar extends to the top safe area and under the Dynamic Island (content within safe area)
• Bottom: tab bar + composer respect the home indicator
• Keyboard: thread scrolls above the keyboard; composer docks directly on the keyboard
• Sides: 12pt thread inset, 16pt list inset

9. Agent Prompt Guide

Quick Color Reference

• GroupMe Blue: #00AFF0
• Blue pressed: #0091C7
• Blue deep: #0077B5
• Canvas (light): #FFFFFF
• Canvas (dark): #121212
• Inbound bubble: #F0F0F0 light / #2A2A2C dark
• Outbound bubble: #00AFF0 (white text)
• Text primary: #1A1A1A light / #ECECEC dark
• Text secondary: #6A6A6A light / #A0A0A0 dark
• Like heart: #FF3B5C
• Like pill bg: #FFFFFF light / #1C1C1E dark
• Sender name: group accent (default #00AFF0)
• Theme coral / green / purple: #FF6B6B / #2ECC71 / #9B59B6
• Error red: #F15E6C

Example Component Prompts

• "Build the GroupMe chat nav bar in SwiftUI: 56pt tall + safe area, solid #00AFF0 background. Leading: back chevron 22pt #FFFFFF. Then a 34pt circular group avatar (two-stop diagonal gradient, group initials white weight 700). Then a VStack: group name SF Pro Display 22pt weight 700 #FFFFFF, sub-line ('8 members · Maya is typing…') 11pt rgba(255,255,255,0.82). Trailing: group-info circle-i icon 21pt #FFFFFF."

• "Create a GroupMe inbound message bubble: #F0F0F0 (light) / #2A2A2C (dark) fill, SF Pro Text 16pt weight 400 primary text, 18pt corner radius with the bottom-leading corner clipped to 5pt, 9pt vertical / 13pt horizontal padding, max-width 80% of thread. Above the first bubble in a run show the sender name SF Pro Text 12pt weight 600 in the group accent color (default #00AFF0), 4pt leading inset, with a 30pt circular gradient avatar aligned to the bottom of the run on the leading side."

• "Build the GroupMe like pill: a small rounded-pill badge docked at the trailing-bottom corner of a message bubble, overlapping ~10pt below it. Background #FFFFFF light / #1C1C1E dark, 1pt divider border, 999pt radius, 2pt vertical / 7pt trailing / 5pt leading padding. Content: a #FF3B5C heart glyph 11pt + the like count in SF Pro Text 10pt weight 700 #6A6A6A. On a new like, pop it scale 0.6 → 1.1 → 1.0 over 220ms spring and cross-fade the number; soft haptic."

• "Render a GroupMe image gallery block: a bubble-shaped container, 4pt padding, 18pt radius with squared tail corner, holding a 2-column grid with 3pt gaps. Each cell is square-cropped with an 8pt corner radius. For 5+ images, show a 2×2 grid where the 4th cell has a +N overlay: rgba(0,0,0,0.5) scrim with white SF Pro 16pt weight 700 centered."

• "Build the GroupMe composer: a bottom bar #FFFFFF light / #1C1C1E dark with a 0.5pt top divider. Layout: a + attach button (26pt glyph #00AFF0) on the left, a pill text field in the center (38pt tall, #F0F0F0 / #2A2A2C fill, 999pt radius, 16pt horizontal padding, placeholder 'Send a message' 14pt #9A9A9A), and a 38pt circular send button on the right (#00AFF0 when input has text, #C8C8CC when empty, white paper-plane glyph 18pt). Pressed send: #0091C7 + scale 0.94."

• "Create the GroupMe Chats list row: 72pt tall, leading 52pt circular group avatar (photo or generated gradient), title = group name SF Pro Text 15pt weight 600, subtitle = last-message preview 14pt weight 400 #6A6A6A (1 line ellipsized), trailing-top timestamp 12pt #9A9A9A, trailing-bottom unread count pill (#00AFF0 fill, white 12pt weight 700, min 20pt)."

• "Build the GroupMe per-group theme picker row in settings: a horizontal row of 44pt color-swatch circles (Default #00AFF0, Coral #FF6B6B, Green #2ECC71, Purple #9B59B6, Sunset gradient #FF6B6B→#9B59B6). Selecting one cross-fades all visible avatar gradients and sender-name colors over 250ms while keeping the blue nav bar / outbound bubbles / send button constant."

Iteration Guide

1. The chat nav bar is solid GroupMe Blue (#00AFF0) with white text — this colored header is the #1 brand signal
2. Outbound bubbles are GroupMe Blue; inbound are neutral gray (#F0F0F0 / #2A2A2C) — never the per-group accent
3. The heart-like docks as a count pill below the bubble's trailing-bottom corner — not inline emoji
4. Sender names appear once above the first bubble in a run, tinted in the group accent color
5. Avatars are always circular generated gradients with the member's initial in white
6. Canvas is white light / #121212 dark (warm, not pure black); the thread stays flat
7. Use SF Pro (system) — no custom brand typeface; color + avatars carry the brand
8. Bubbles are 18pt rounded with only the tail corner clipped to ~5pt
9. Multi-photo shares render as a 2-col gap grid in a bubble with a +N overflow tile
10. Per-group themes recolor avatars + sender names only; blue chrome and the like interaction stay constant