A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
23tokens
10type steps
1radius steps
2pxspacing base
Groupme, in one page
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
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
+Noverflow 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
#121212to 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
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Groupme design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- GroupMe Blue: #00aff0
- GroupMe Blue Pressed: #0091c7
- GroupMe Blue Deep: #0077b5
- Canvas White: #ffffff
- Surface Gray: #f7f7f8
- Inbound Bubble Light: #f0f0f0
- Divider Light: #e4e4e6
- Row Pressed Light: #ececee
- Dark Canvas: #121212
- Dark Surface 1: #1c1c1e
Type:
- families: SF Pro Text, SF Pro Display, Fallback Stack, Emoji
- scale: 10, 12, 14, 15, 16, 18, 22, 26, 32
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 18
Spacing: 2, 4, 9, 10, 12, 14
Rules:
- 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)
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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.
| Theme | Color | Gradient Pair |
|---|---|---|
| Default (Blue) | #00AFF0 | #00AFF0 → #0077B5 |
| Coral | #FF6B6B | #FF6B6B → #FF8E53 |
| Green | #2ECC71 | #2ECC71 → #16A085 |
| Purple | #9B59B6 | #9B59B6 → #6C5CE7 |
| Sunset | #FF8E53 | #FF6B6B → #9B59B6 |
| Teal | #1ABC9C | #1ABC9C → #16A085 |
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).
Type scaleRead the full spec
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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Nav Title | SF Pro Display | 32pt | 800 | 1.15 | -0.4pt | "Chats" large title at top of list |
| Screen Title | SF Pro Display | 26pt | 700 | 1.2 | -0.3pt | "New group chat", modal titles |
| Group Name (nav) | SF Pro Display | 22pt | 700 | 1.2 | -0.2pt | Group name in the blue chat nav bar (white) |
| Section Header | SF Pro Text | 18pt | 700 | 1.3 | -0.1pt | "Members & settings" headers |
| Message Body | SF Pro Text | 16pt | 400 | 1.35 | 0pt | The message text inside bubbles |
| List Row Title | SF Pro Text | 15pt | 600 | 1.3 | 0pt | Group name in a Chats-list row |
| List Preview | SF Pro Text | 14pt | 400 | 1.3 | 0pt | One-line last-message preview |
| Sender / Meta | SF Pro Text | 14pt | 400 | 1.3 | 0pt | Timestamps, "Maya · 9:38 AM" |
| Sender Name | SF Pro Text | 12pt | 600 | 1.2 | 0.1pt | Name above first bubble in a run — group accent color |
| Like Count | SF Pro Text | 10pt | 700 | 1.0 | 0.2pt | Number inside the like pill |
| Tab Label | SF Pro Text | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Unread Count | SF Pro Text | 12pt | 700 | 1.0 | 0pt | White number in the blue unread pill |
| Button | SF Pro Text | 16pt | 700 | 1.0 | 0pt | Primary button label |
| Emoji-only Message | — | 40pt | — | 1.0 | — | A message that is only emoji renders enlarged |
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.
Components and layoutRead the full spec
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:
#00AFF0at 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:
#F0F0F0light /#2A2A2Cdark - 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:
#F0F0F0light /#2A2A2Cdark - 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
#9A9A9Abelow 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:
#FFFFFFlight /#1C1C1Edark - 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
+Noverlay (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) 11ptrgba(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 —
#00AFF0fill, 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
#F0F0F0light /#2A2A2Cdark, 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:
#FFFFFFlight /#1C1C1Edark, 0.5pt top divider
Search Field (Chats / People)
- Height: 38pt
- Background:
#F0F0F0light /#2A2A2Cdark - 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
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Bubble max-width 82%; avatar 28pt; gallery grid stays 2-col |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; blue nav bar extends under island |
| iPhone 15/16 Pro Max | 430pt | Bubble max-width 78%; avatar 32pt; larger gallery cells |
| iPad (portrait) | 768pt | Split: Chats list (340pt) + thread (centered max 680pt) |
| iPad (landscape) | 1024pt+ | Persistent Chats list + thread; gallery tab 4 columns |
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-groupme {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #121212;
--heading-color: #121212;
--link-color: #0073a0;
--link-hover-color: #004e6d;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(18,18,18,0.06);
--card-hover-shadow: 0 6px 18px rgba(18,18,18,0.12);
--header-bg: #121212;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #656565;
--button-bg: #00aff0;
--button-text-color: #000000;
--button-hover-bg: #008abd;
--button-border: none;
--button-border-radius: 18px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #121212;
--button-secondary-hover-bg: #e3e3e3;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #121212;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 18px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 75.6%
- spiral 75.4%
- tidal 75.1%
- skype 70.4%
- bear 70.0%
Where this came from
- Source document
ios/design-md/messaging/groupme/DESIGN.md· 26.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.