IOS Chat And Messaging Design

iOS Chat & Messaging — Design Engineering Skill

A taste guide for building messaging apps that feel like they belong on iOS. Every value below is opinionated and specific — pulled from studying flows on Mobbin and shipping native chat apps.

Output format — required

When this skill is invoked to review chat/messaging code or recommend changes, always output recommendations as a markdown table with three columns:

Three rules:

1. Before quotes the user's actual code where possible.
2. After is specific. Exact pt values, exact corner radii, exact haptic styles, exact API calls.
3. What this changes is experiential or visual, not abstract.

Output ONE table with multiple rows for multi-recommendation reviews — not one table per row. Use — for Before if the user hasn't implemented that thing yet.

Examples drawn from this skill:

This format is required for every recommendation output by this skill.

Philosophy

A chat app is a feeling of being heard, fast.

Three things separate amazing chat from passable chat:

1. The composer is the only thing that matters. Everything else is supporting cast. Time-to-typing must be < 200ms from launch. Send must be instant — show the bubble before the network responds. If you can't get this right, nothing else matters.
2. Bubbles are a writing system. Spacing, grouping, tail placement, and timestamp rhythm communicate WHO said WHAT WHEN faster than reading the text itself. Get the visual language right and people skim conversations 3× faster.
3. Latency is the product. A message that sends in 80ms but arrives in 2000ms feels slower than one that sends in 800ms and arrives in 900ms. Optimistic UI is not optional.

The pixel-pushers' rules:

• Bubbles, not cards. A card has shadows and borders. A bubble has a tail. Chat is conversation, not content.
• The composer is permanent. It sits at the bottom always, even during search, even during the empty state. Never push the composer above the fold.
• Read receipts are intimate. Default them OFF for new users. Telegram and Signal got this right.
• Don't infantilize. No "Looks like there are no messages here yet!" cute illustrations in a serious chat app. Empty states should be quiet.

Reference apps to study

When in doubt, copy. These are the apps you should be benchmarking against, with the specific flows worth lifting:

Hero interactions — the moments that matter

1. The message bubble

The bubble is the writing system. Get it perfect:

Geometry:

• Corner radius: 18pt (continuous corner / squircle, NOT system circular). Use RoundedRectangle(cornerRadius: 18, style: .continuous) in SwiftUI or .layer.cornerCurve = .continuous in UIKit.
• Max width: 75% of screen width (UIScreen.main.bounds.width * 0.75). Wider than that, the rag-right edge becomes ugly and reading speed drops.
• Internal padding: 12pt horizontal, 8pt vertical (single-line bubbles). For multi-line, increase vertical to 10pt.
• Bubble-to-bubble spacing within a group: 2pt.
• Bubble-to-bubble spacing across senders: 14pt.
• Bubble-to-bubble spacing across time gaps: 24pt + an inline timestamp pill.

Colors:

• Sent (self) bubble: Color.accentColor (iMessage blue) at 100%, white text. For app brand variations, use the brand accent but ALWAYS check contrast (WCAG AA against the chosen text color).
• Received bubble: Color(.tertiarySystemGroupedBackground) for light mode, Color(.systemGray5) for dark mode. Text color: .label (auto-adapts).
• Failed-to-send bubble: same shape as sent, but with a 1pt red border and a red exclamation icon to the right.
• Pending/queued bubble: 60% opacity of the sent bubble. Settles to 100% on delivery confirmation.

Bubble grouping (THE critical detail):

Consecutive messages from the same sender within 60 seconds form a "burst". A burst has:

• The FIRST bubble: full radius on the outside corner (top-right for sent, top-left for received), 4pt small radius on the inside (touching) corner.
• The MIDDLE bubbles: 4pt small radius on the inside corners, full 18pt on the outside.
• The LAST bubble: full radius on the outside corners (top-right + bottom-right for sent), with the tail extending from the corner.

enum BubblePosition {
    case single, first, middle, last
}

func cornerRadii(for position: BubblePosition, isSent: Bool) -> RectangleCornerRadii {
    let small: CGFloat = 4
    let large: CGFloat = 18
    let outer = isSent ? "right" : "left"
    switch position {
    case .single: return .init(topLeading: large, bottomLeading: large, bottomTrailing: large, topTrailing: large)
    case .first:  return isSent
        ? .init(topLeading: large, bottomLeading: large, bottomTrailing: small, topTrailing: large)
        : .init(topLeading: large, bottomLeading: small, bottomTrailing: large, topTrailing: large)
    case .middle: return isSent
        ? .init(topLeading: large, bottomLeading: large, bottomTrailing: small, topTrailing: small)
        : .init(topLeading: small, bottomLeading: small, bottomTrailing: large, topTrailing: large)
    case .last:   return isSent
        ? .init(topLeading: large, bottomLeading: large, bottomTrailing: large, topTrailing: small)
        : .init(topLeading: small, bottomLeading: large, bottomTrailing: large, topTrailing: large)
    }
}

The tail (iMessage convention):

• Only render the tail on the LAST bubble of a burst.
• Tail is a small ~6 × 8pt curved triangle that emerges from the outside-bottom corner.
• Implement with a custom Path (a quadratic Bezier sweeping from the bubble's edge outward and back).
• For sent: tail on bottom-right, pointing right.
• For received: tail on bottom-left, pointing left.

Avatars (received messages only):

• Show only on the LAST bubble of a received burst (matches the tail).
• 28pt circle, 8pt to the left of the bubble.
• 1pt subtle border in Color(.separator) to give edge against light backgrounds.

Typography inside bubbles:

• Body text: SF Pro, regular, 17pt, line height 22pt.
• For shorter messages (≤ 3 emoji), AUTO-SCALE the emoji to 48pt and remove the bubble. iMessage does this. It makes single-emoji messages feel alive.

2. The composer

The composer is the most-used surface in your entire app. Treat it that way.

Geometry:

• Height (collapsed): 36pt for the input pill + 8pt vertical safe-area padding above + 8pt below.
• Pill background: Color(.tertiarySystemBackground) with cornerRadius: 18, style: .continuous (matching bubble radius).
• Pill horizontal padding: 12pt left, 12pt right (text content area).
• Pill grows as user types up to 5 lines. After 5 lines, scroll internally.
• + button (attachment): 28pt circle to the LEFT of the pill, 8pt spacing. Subtle gray fill.
• Mic / Send button: 28pt circle to the RIGHT of the pill, 8pt spacing.

Mic ↔ Send swap (THE detail):

• When the text field is empty: mic icon appears on the right.
• When user types ANY character: mic morphs into send arrow with scale 0 → 1 + opacity 0 → 1 (180ms .spring(response: 0.32, dampingFraction: 0.7)). Mic crossfades out simultaneously.
• When user deletes back to empty: reverse.
• Haptic .selectionChanged on each swap.

Keyboard handling:

• The composer MUST stick to the top of the keyboard. Use keyboardLayoutGuide (UIKit) or .ignoresSafeArea(.keyboard, edges: .bottom) with explicit padding (SwiftUI).
• When keyboard appears, the bubble list scrolls to the bottom with NO animation (or 80ms .linear). The keyboard's animation curve (UIView.AnimationCurve from the notification) is what you should match.
• Critical: don't let the bubble list jump. Compute the offset and apply it within UIView.animate(withDuration: keyboardAnimationDuration, delay: 0, options: .curveSetting) — this matches the keyboard's curve perfectly.

Return key polish (.submitLabel):

• Set .submitLabel(.send) on the text field so the keyboard's return key shows "send" — not a generic return arrow. Available labels: .done, .go, .next, .return, .search, .send, .join, .route, .continue. Match the verb to the action.
• Wire .onSubmit { send() } so the return key actually fires the send. iOS keyboards expect this.
• For multi-line composers where Return should insert a newline, don't override — let the system handle it. Pair with a dedicated send button.

TextField("Message", text: $draft, axis: .vertical)
    .lineLimit(1...5)
    .submitLabel(.send)
    .onSubmit { send() }

Send animation:

1. User taps send. IMMEDIATELY (within 16ms):
2. The bubble appears at the composer's text position with full opacity but at 70% scale.
3. The text field clears.
4. The bubble flies up to its slot in the list with matchedGeometryEffect (SwiftUI) or UIView.transitionWithView (UIKit), scaling 0.7 → 1.0 + slight overshoot to 1.04 → settle.
5. Spring: .spring(response: 0.42, dampingFraction: 0.78).
6. Haptic on send: UIImpactFeedbackGenerator(.light).impactOccurred() at the moment of release.
7. If the send eventually fails: bubble subtly desaturates (60% opacity) and a red ! appears beside it. Tap to retry. Haptic .error.

The signature detail: the loading indicator travels. If sending is slow enough to need a progress hint, DON'T show it at the send button — show it INSIDE the optimistically-rendered bubble in the conversation. The eye follows one focal point: the bubble. A 12pt circular ProgressView aligned to the bubble's trailing edge does the job. When delivery confirms, the indicator dissolves and the read receipt fades in beside it. This is the Family Values pattern — loading states travel to their destination.

3. Reactions / tapbacks

The long-press → bubble lifts → reaction picker appears flow.

Long-press detection:

• 0.45 second long-press triggers the menu (slightly faster than iOS default of 0.5).
• During the press, the bubble subtly scales to 1.02 (signaling "you're activating me").
• At the threshold: bubble lifts to 1.04, background blurs (UIBlurEffect(style: .systemUltraThinMaterialDark) or .glassEffect() on iOS 26+).
• Haptic on threshold cross: UIImpactFeedbackGenerator(.medium).impactOccurred().

Reaction picker:

• A horizontal pill containing 6 quick emojis + a "+" for the full picker. Positioned ABOVE the bubble (or below if the bubble is at the top of the screen).
• Animation:
  • Pill scales from 0 (origin at the bubble's nearest corner) to 1.0 with .spring(response: 0.36, dampingFraction: 0.72).
  • Emoji icons inside the pill stagger their entrance: each 0.04s after the previous, scale 0 → 1.0 with overshoot.
• Tapping an emoji:
  • Haptic .medium.
  • The emoji animates from the picker to its final position on the bubble (corner overlap), shrinking from 38pt to 16pt as it lands.
  • The picker dismisses with scale 1 → 0 (180ms .easeIn).
• Tapping outside dismisses with no haptic.

Reaction badges on bubbles:

• Position: overlapping the corner of the bubble (top-right for sent, top-left for received), 8pt × 8pt overlap into the bubble.
• Geometry: pill shape, 22pt tall, dynamic width. White background (system grouped background), 0.5pt subtle border.
• Multiple reactions: each emoji + count, e.g., "❤️ 3 😂 1".
• Tap a reaction to add your own (toggles). Long-press for the "who reacted" detail sheet.

Tapback context menu (additional actions besides reaction):

• Same long-press trigger. Below the reaction pill, a context menu appears with: Reply, Copy, Forward, Pin, Translate, Edit (if your own message, within 15min), Info, Delete.
• Style: UIMenu (UIKit) or .contextMenu (SwiftUI), but custom-positioned to appear right under the reaction pill. iMessage's choreography is the reference.

4. Reply with swipe (WhatsApp / iMessage)

The "swipe-right on a bubble to reply" gesture is essential. Implementation:

.gesture(
    DragGesture(minimumDistance: 16)
        .onChanged { value in
            let dx = max(0, value.translation.width)
            offset = min(dx, 80) // cap at 80pt
            // Show a reply arrow icon fading in as dx grows
            replyIndicatorOpacity = min(1.0, dx / 60)
            // Haptic when crossing threshold
            if dx > 60 && !hasFiredHaptic {
                UIImpactFeedbackGenerator(style: .soft).impactOccurred()
                hasFiredHaptic = true
            }
        }
        .onEnded { value in
            if value.translation.width > 60 {
                onReply()
            }
            withAnimation(.spring(response: 0.32, dampingFraction: 0.78)) {
                offset = 0; replyIndicatorOpacity = 0
            }
            hasFiredHaptic = false
        }
)

Reply chip in composer:

• Once user has tapped reply (or completed the swipe), a chip appears ABOVE the input pill:
  • Vertical accent-color bar (3pt × full height) on the left.
  • Original sender's name (semibold, 13pt, accent color).
  • Truncated original message text (regular, 13pt, secondary label, single line, with ... truncation).
  • "×" close button on the right.
• The chip animates IN with .spring(response: 0.32, dampingFraction: 0.85) + slide-up + opacity.
• When the reply is sent, the original message reference is preserved on the new bubble (inline at the top of the bubble), and TAPPING that inline reference scrolls to the original with a yellow flash highlight (0.6s, .easeOut).

5. Voice messages

This is where second-rate apps fail. Get the WhatsApp pattern right:

Recording:

• The mic icon (right of composer) is the trigger. Hold to record, release to send. NOT tap-toggle.
• On press-down:
  • Haptic .medium.
  • The composer transforms: the text pill is replaced with a recording indicator (red dot pulsing + timer "0:03"), and a "← slide to cancel" hint appears.
  • The mic icon grows to ~52pt and slides slightly left.
  • A live waveform builds along the bottom of the screen.
• During hold:
  • Slide LEFT past 80pt: cancel. Haptic .warning, recording discarded, UI restores.
  • Slide UP past 60pt: lock. The mic icon snaps into a "lock" position; user can release and continue recording hands-free. Haptic .success.
  • Release in place: send. Haptic .light.

Live waveform:

• Use AVAudioRecorder with metering enabled. Poll averagePower(forChannel: 0) every 50ms.
• Render 60–80 vertical bars, mirrored vertically (symmetric around the center). Bar width 2pt, gap 2pt.
• Each new sample shifts the bars left and appends a new bar at the right.
• Bar colors: accent color for "speech" (power > threshold), gray for "silence".

Playback bubble:

• 240pt × 56pt rounded bubble.
• Inside: 32pt play/pause button on the left (system play icon), waveform in the middle, duration text on the right.
• The waveform is a STATIC visualization of the recording (pre-computed from the audio samples, downsampled to fit the bubble width).
• Scrubbing: drag finger across the waveform to scrub through playback. Haptic .soft every 0.5s of audio crossed.
• Tap-to-play: UIImpactFeedbackGenerator(.light).impactOccurred() on tap.
• Speed control: small "1×" pill bottom-right; tap to cycle 1× → 1.5× → 2× → 1×.

Lift-to-ear playback (WhatsApp pattern):

• When a voice message is playing and the user lifts the phone to their ear, switch audio output from speaker to earpiece using AVAudioSession.
• Detect proximity with UIDevice.current.isProximityMonitoringEnabled = true and observe proximityStateDidChangeNotification.
• This is incredibly delightful when it works.

Transcription (on-device, iOS 13+):

• After recording, run SFSpeechRecognizer on-device (requiresOnDeviceRecognition = true).
• Show a small "Aa" button on the voice bubble; tap to reveal the transcription below the waveform.
• Cache transcriptions; don't re-run.
• For new messages: kick off transcription immediately when received so the "Aa" button reveals instantly.

6. Typing indicators

The three-dot animation is iconic but you have to do it right.

Visual:

• Three dots, 7pt diameter each, 4pt gap between them.
• Inside a mini bubble: same color/shape as a received bubble, smaller (height 22pt), positioned at the receiver's NEXT bubble location.
• Dots animate: each rises by 3pt, with staggered timing. Dot 1 starts at t=0, dot 2 at t=0.15s, dot 3 at t=0.3s. Each cycle is 0.9s (rise → fall).
• Easing: .easeInOut for the rise/fall.

Behavior:

• Show after 0.5s of detected typing (don't fire on every keystroke).
• Hide after 2.5s of no typing (or immediately when a message is received).
• Animate IN with .spring(response: 0.32, dampingFraction: 0.78) (scale 0 → 1.0 + opacity).
• Animate OUT with scale 1 → 0 (180ms .easeIn).
• Persistence: typing indicators should survive a brief network drop (cache the last "typing" event for 4s).

struct TypingDots: View {
    @State private var animating = false
    var body: some View {
        HStack(spacing: 4) {
            ForEach(0..<3) { i in
                Circle()
                    .frame(width: 7, height: 7)
                    .offset(y: animating ? -3 : 0)
                    .animation(
                        .easeInOut(duration: 0.45)
                        .repeatForever(autoreverses: true)
                        .delay(Double(i) * 0.15),
                        value: animating
                    )
            }
        }
        .onAppear { animating = true }
    }
}

7. Read receipts

This is sociologically loaded UI — design it carefully.

Visual options (pick one and commit):

1. iMessage: small "Delivered" or "Read 2:34 PM" beneath the LAST sent bubble.
2. WhatsApp: single check (sent) → double gray check (delivered) → double blue check (read), positioned inside the bubble at the bottom-right.
3. Telegram: single check (sent), double check (delivered/read combined).
4. Signal: outlined check (sent), filled check (delivered), double check (read).

Animation:

• Each state transition animates the check icon with a tiny .symbolEffect(.bounce) (iOS 17+) or a custom 200ms scale-up-and-back.
• Haptic on "read" transition (only for sent messages): UIImpactFeedbackGenerator(.soft).impactOccurred() ONCE per conversation per session — multiple reads should NOT haptic-spam.

Privacy settings (Telegram's gold standard):

• Default: read receipts OFF for new users (controversial but more humane).
• Three tiers: Everybody, My Contacts, Nobody.
• "Hide Read Time" toggle (subtle: read receipts work but timestamps are hidden).
• Exception list: "Always share with these people".

8. Presence / Online status

Online indicator:

• 8pt green dot, bottom-right corner of avatar, with 2pt white border.
• Inside chat header: "Online" in 13pt regular, secondary label color.

Last-seen text:

• "Last seen at 2:34 PM" (today)
• "Last seen yesterday at 9:12 PM"
• "Last seen recently" (vague, Telegram pattern for partial-privacy users)
• "Last seen within a week" (extremely vague)
• "Last seen a long time ago" (the polite "they ghosted")

Self-disclosed status (Discord pattern):

• Online (green)
• Idle (yellow, half-moon icon)
• Do Not Disturb (red, no-entry icon)
• Invisible (gray)
• Custom Status (any emoji + text, expiring after 1h / 4h / today / never)

Active now grouping: in the chat list, surface a horizontal scroll row of avatars with green dots showing "Active Now". Tap to start a chat.

9. Message effects (iMessage-inspired)

Visual effects on send: confetti, fireworks, slam, gentle, invisible ink, etc. Optional but DELIGHTFUL.

How to implement:

• Long-press the send button (instead of tapping) to open an effects picker.
• The picker shows: Slam, Loud, Gentle, Invisible Ink, plus full-screen effects (Confetti, Balloons, Fireworks, Lasers, Heart, Spotlight).
• After pick, tap the send arrow to actually send.
• Use CAEmitterLayer for particle effects (confetti, fireworks). For more sophisticated effects (lasers, spotlight), use SCNView or a custom Metal shader.
• Reduce Motion: respect UIAccessibility.isReduceMotionEnabled — when true, skip the particle effects but keep the bubble itself (e.g., "Slam" sends as a normal bubble).

Performance: limit emitter cells to ~120 particles. Cap effect duration at 3.5s. Always have an "skip" tap target.

10. Stickers, GIFs, Genmoji

Sticker drawer:

• Surfaced above the keyboard (replacing it) when user taps a sticker icon.
• Top: tab bar with recent stickers, then packs the user owns.
• Each sticker: 88pt × 88pt cell, 8pt gap.
• Tap to send (no preview confirm — fast).
• Long-press to peel the sticker (iOS 17+ peel effect) and drag it onto another part of the conversation (annotation pattern).

Genmoji (iOS 18.2+, on-device on Apple Intelligence devices):

• In the keyboard, surface a "Create Genmoji" button.
• User types a prompt; on-device model generates 4 candidate emoji.
• User picks; the Genmoji is sent as a custom sticker.
• Recipients without Apple Intelligence see a PNG fallback.

GIF picker (Giphy or Tenor):

• Tab in the sticker drawer or a dedicated icon.
• Search field at top; trending row below.
• Each GIF: tap to send, long-press for preview at full size.

Trays adopt the environment

When a sticker picker, GIF browser, emoji panel, or any modal is presented from a themed chat (dark theme, custom wallpaper, brand-tinted), it should INHERIT that environment's color scheme — not snap to the system default. A sticker drawer over a dark chat should be dark. A confirmation over a Telegram custom-themed chat should pick up the theme. The visual environment follows the user across modal layers; sudden theme switches are spatially disorienting.

.sheet(isPresented: $showStickers) {
    StickerPickerView()
        .preferredColorScheme(chatTheme.colorScheme)
        .tint(chatTheme.accent)
        .presentationBackground(chatTheme.surfaceColor)
}

This is the design-with-taste "trays adapt to context" rule applied natively.

11. Group chat creation

The 3-step flow (Luma / Beside / Instagram pattern):

Step 1 — Pick people:

• Top: search field with auto-suggest.
• Below: list of contacts, with a "Suggested" section at the top (frequency-based + recent).
• Selection: tap to add. Selected people appear as chips at the top of the search field (pill, 24pt tall, with avatar + name + × to remove).
• Limit and counter: "3 selected" tracker visible.

Step 2 — Customize:

• Group emoji avatar (huge, ~80pt, in a circle): tap to pick from emoji or generate a Genmoji.
• Theme color picker: 6–8 horizontal swatches (Apple style: red, orange, yellow, green, mint, teal, blue, indigo, purple, pink, brown).
• Group name field (optional — default to comma-list of members).
• Description (optional).

Step 3 — Create:

• "Create Group Chat" button — full-width pill, 56pt tall, accent color, semibold 17pt text.
• Haptic .success on creation.
• Animate the transition to the new chat with a smooth push from the right (standard navigation animation).

12. Ephemeral / disappearing messages

Auto-delete timer (Telegram pattern):

• Toggle in chat settings, OR a chat-wide setting "Auto-Delete Messages" with options: 24 hours, 7 days, 31 days, off.
• Once set, all messages in the chat get a small clock icon next to the timestamp.
• After the duration, messages fade out with opacity 1 → 0 over 600ms and are deleted both locally and remotely.

View-once messages (WhatsApp / Snapchat):

• Toggle a "view once" icon in the composer before sending an image.
• Recipient sees the message as a blurred placeholder; tap to view, opens full-screen.
• Once viewed, the message turns into "Opened" placeholder forever.
• Snapchat allows a 1–10 second view window (or infinity); WhatsApp allows ONE view, period.

Screenshot detection (Snapchat pattern):

• Observe UIApplication.userDidTakeScreenshotNotification.
• When detected during a view-once or ephemeral message, send a system message to the other party: "📸 [User] took a screenshot".
• Bonus: also detect screen recording with UIScreen.main.isCaptured (KVO).

13. End-to-end encryption indicators

Banner:

• At the start of any new conversation, a centered system message: "🔒 Messages are end-to-end encrypted. No one outside this chat can read or listen to them. Tap to learn more."
• Visual: light background pill, no avatar, no timestamp, center-aligned text (12pt regular, secondary label).
• Tap to open a sheet explaining the encryption + safety number / verification flow.

Verification:

• Safety number / verification code, displayed as a QR code + 60-digit number.
• Both parties can scan each other's QR to verify out-of-band. Animate the QR appearing with a Vision-framework subject-lifting style shimmer.

Lock icon in nav:

• Subtle 12pt lock icon next to the chat title, tinted secondary.
• For unverified contacts: tinted system orange. Tap to see "Verify safety number?" prompt.

14. Call experiences (audio & video)

Outgoing call:

• Full-screen native CallKit UI (use CXProvider + CXCallController). This is critical — your call appears in the system call log, on the lock screen, with Bluetooth controls.
• Custom in-app pre-call screen: avatar centered (120pt circle), name below (28pt semibold), "Calling..." subtitle, animated wave rings emanating from the avatar (CAReplicatorLayer for the rings).

Incoming call:

• Use CallKit's native incoming UI. Apple won't approve apps that try to override this.
• Pair with PushKit (VoIP push) for instant ring even when the app is suspended/killed.

In-call UI (when user enters the call screen):

• Top: tiny FaceTime/audio waveform indicator.
• Center: large avatar OR self-camera PiP.
• Bottom: mute / video / speaker / end call (large red circle) — standard 4-button row, with 64pt tap targets.

Live Activity for ongoing call:

• When the user backgrounds the app, surface a Live Activity (Dynamic Island on iPhone 14 Pro+):
  • Compact: speaker icon + call duration.
  • Expanded: avatar + name + duration + mute toggle + end call.

import ActivityKit

struct CallAttributes: ActivityAttributes {
    public struct ContentState: Codable, Hashable {
        var duration: TimeInterval
        var isMuted: Bool
    }
    var calleeName: String
    var calleeAvatarURL: URL
}

let activity = try Activity<CallAttributes>.request(
    attributes: CallAttributes(calleeName: "Sam", calleeAvatarURL: ...),
    content: .init(state: .init(duration: 0, isMuted: false), staleDate: nil),
    pushType: .token
)

15. Chat list (the conversation index)

Cell layout:

• 72pt tall (vertical).
• 56pt avatar on the left, 12pt right margin to content.
• Content area: vertically centered.
  • Top: chat title (17pt semibold) + timestamp (right-aligned, 13pt regular, secondary).
  • Bottom: last message preview (15pt regular, secondary label, 1 line truncation) + unread badge (right-aligned, blue circle with white count).
• Right-edge: chevron (Image(systemName: "chevron.right"), 12pt, tertiary tint).

Avatar:

• 56pt circle. For group chats: 4-grid mini-avatars OR custom emoji per the group's theme.
• Active-now indicator: 14pt green dot bottom-right with 2pt white border.

Sorting:

• Default: most-recently-active first.
• Pinned chats: pin icon to the right of the title; pinned chats are always at the top of the list with a subtle background tint.

Unread state:

• Bold text for title.
• Blue unread badge with count (system blue, 22pt height, dynamic width).
• For mention/reply: red @ badge instead of blue count.

Swipe actions:

• Swipe-left: Archive, Mute, Delete (red, terminal).
• Swipe-right: Pin, Mark as Read/Unread.
• Use swipeActions(edge:) in SwiftUI or UISwipeActionsConfiguration in UIKit.

Search:

• Pull down to reveal the search field.
• Recent searches above results.
• Search hits inline-highlight the matched substring in the preview.

Animation curves cheat sheet

Reduce Motion: replace springs with .easeInOut(duration: 0.18) crossfades, kill stagger, skip message effects.

Haptics cheat sheet

Custom haptic patterns for delight:

• Send a "slam" effect message: use CoreHaptics with a sharp transient + continuous decay (think: a small explosion).
• Bubble lands after a long send animation: a tiny "tick-tick" pattern (two .soft impacts 80ms apart).

let engine = try CHHapticEngine()
try engine.start()

let pattern = try CHHapticPattern(events: [
    CHHapticEvent(eventType: .hapticTransient, parameters: [
        .init(parameterID: .hapticIntensity, value: 1.0),
        .init(parameterID: .hapticSharpness, value: 0.8)
    ], relativeTime: 0),
    CHHapticEvent(eventType: .hapticContinuous, parameters: [
        .init(parameterID: .hapticIntensity, value: 0.4),
        .init(parameterID: .hapticSharpness, value: 0.2)
    ], relativeTime: 0.05, duration: 0.4)
], parameters: [])

try engine.makePlayer(with: pattern).start(atTime: 0)

Typography for chat UIs

Always support Dynamic Type via .body, .callout, .caption, etc. Test with extra-large accessibility sizes (AX5).

Color & material

• Sent bubble: app's accent color. For iMessage parity: Color(.displayP3, red: 0.0, green: 0.48, blue: 1.0) (iMessage blue). For green-bubble nostalgia: Color(.displayP3, red: 0.21, green: 0.78, blue: 0.35) (SMS green). Always ship hand-coded colors as Display P3 — see the-final-5-percent §5 for the OKLCH-pick / P3-ship workflow that applies to every color in this skill.
• Received bubble: Color(.tertiarySystemGroupedBackground) (light), Color(.systemGray5) (dark).
• Background of conversation: Color(.systemGroupedBackground) (light), Color(.systemBackground) (dark). Telegram and WhatsApp use a subtle pattern/wallpaper — if you do this, make it OFF by default.

Push notification copywriting — the Bier rules. The notification IS the user's first impression of your app, every day. Apps that nail push copy get re-engaged daily; apps that don't get muted, then deleted.

Every notification must make the user feel something POSITIVE. Dopamine delivered, not nagging delivered:

…(truncated)