Screenspo
AppsPatternsColorsGuidesMCP
ScreenspoยทApp Store design, organized

built by starterlyst ๐Ÿ’š

  1. Home
  2. Health & Fitness
  3. Calm
Calm app icon
Health & Fitness

Calm

Calm

View on App Store
4.8
2M ratings

Screenshot story

The story begins with high-level social proof and a broad lifestyle promise before systematically demonstrating the specific tools-meditation, stories, music, and expert classes-used to achieve that wellness.

iPhone gallery

The complete screenshot set

Select any frame to study its layout, content, and palette.

Observed in the listing

Frame-by-frame listing evidence

Across 6 frames, Calm most often uses floating device composition and device treatment with gradient backgrounds. 6 frames include visible caption copy.

  1. Frame 1

    Apple App of the Year 2017

    Composition / device
    device in hand
    Content
    social proof
    Background
    gradient
    Copy treatment
    none, prestigious, authoritative
  2. Frame 2

    Sleep more. Stress less. Live better.

    Composition / device
    device in hand
    Content
    ui screenshot
    Background
    gradient
    Copy treatment
    top, aspirational, minimalist
  3. Frame 3

    Learn the life-changing skill of meditation

    Composition / device
    floating device
    Content
    ui screenshot
    Background
    gradient
    Copy treatment
    top, educational, benefit led
  4. Frame 4

    Sleep Stories to help you fall asleep

    Composition / device
    floating device
    Content
    ui screenshot
    Background
    gradient
    Copy treatment
    top, soothing, solution oriented
  5. Frame 5

    Music to help you focus, relax and sleep

    Composition / device
    floating device
    Content
    ui screenshot
    Background
    gradient
    Copy treatment
    top, versatile, benefit led
  6. Frame 6

    Masterclasses taught by world-renowned experts

    Composition / device
    floating device
    Content
    ui screenshot
    Background
    gradient
    Copy treatment
    top, professional, high value

Explore by detail

Study the system behind the set

ColorsPalette and exact hex values
device in handfloating device

Design analysis

What makes this set work

calm blue gradient#5ba3ecmidnight navy#101c3dpure white#ffffffsoft purple#8c82ff

Calm's screenshot strategy is a masterclass in brand consistency and cognitive ease. By using a uniform blue-to-purple gradient background across all six frames, they reinforce a feeling of tranquility before the user even reads the text. The layout transitions from a dynamic, angled 'hero' perspective in the first two slides to a stable, centered 'utility' perspective for the features, signaling a shift from marketing hook to functional demonstration. The copywriting is lean and benefit-focused, using 'Action Verb + Desired Outcome' structures that minimize friction. Designers should emulate how Calm uses photography within the UI frames to provide human warmth and color contrast against the cool, monochromatic background system.

Source and method. Screenshots come from the US App Store listing and are preserved in Screenspo's curated corpus. Layout, caption, content, background, and palette observations are derived from the visible listing artwork. Typeface names are not inferred; transcribed copy, tone, and position are the supported typography evidence, while layout tags record composition and device treatment. View the source listing.

Keep exploring

More in Health & Fitness

Numo App Store screenshot: floating device composition with ui screenshot content
Numo iconNumo

Health & Fitness

Centr App Store screenshot: lifestyle photo composition with social proof content
Centr iconCentr

Health & Fitness

Future Pro App Store screenshot: panoramic composition with social proof content
Future Pro iconFuture Pro

Health & Fitness

Runna App Store screenshot: floating device composition with social proof content
Runna iconRunna

Health & Fitness