Spruce App Store screenshots

The set in one screen

Framing

Portrait, 9:19.5 ratio across all eight frames. The gallery alternates between three distinct modes: tilted black-bezel devices on cream, flat lime-outline devices on cream, and pure vector illustration with or without a device.

Captions

Centered or near-centered all-caps sans-serif headlines in dark green, paired with lighter-weight centered subheads. Category pills such as “Budgeting” and “Fee-free ATMs” act as chapter labels.

Backdrop

Warm cream approximating #F3F4E6 is the default ground. Organic electric-lime blobs bleed from the margins in several frames. Frame six breaks the pattern with a solid dark-green background near #0B4D26.

Type

Outside the device, headlines are set in a bold, geometric sans-serif with tight tracking. Inside the app, the brand uses a high-contrast serif italic for greetings and the Spruce wordmark, while data is rendered in a neutral sans with monospace-adjacent numerals.

UI / copy split

The copy layer is dominant in every frame; UI inside the phone rarely exceeds sixty percent of the vertical space. This prioritizes readability of the marketing promise over pixel-perfect interface exposition.

Frame 1 job

Establish brand hierarchy and primary utility in under three seconds. The opening frame must teach the viewer that Spruce is a personal spending tracker wrapped in an editorial visual language, while introducing the H&R Block parent brand via the lockup.

What this screenshot set had to solve

The central compositional challenge visible across all eight frames is how to compress complex financial data—transaction histories, savings goals, ATM maps, credit-score gauges, fee schedules—into thumbnail-sized legibility while retaining an emotional hook. Banking apps inherently suffer from visual sameness: lists of numbers, monochrome maps, and stock chart graphics. The Spruce set attempts to solve this by anchoring each frame with a single oversized caption in dark green, supported by a one-line subhead that states a concrete value proposition verbatim, such as “Deposits are FDIC insured up to $250,000.²” or “Opt in to earn interest on your Savings Account at 3.50% APY*.” A secondary challenge, visible in the dual branding, is negotiating the relationship between Spruce’s editorial, consumer-friendly identity and H&R Block’s established corporate authority. This tension manifests in the wordmark lockup: “Spruce” appears in a refined serif italic, while “built by H&R BLOCK” is rendered in small, utilitarian sans-serif caps tucked beneath it. The screenshots must also communicate trust without resorting to the navy-and-silver clichés of traditional banking, forcing the team to use an unconventional lime-and-forest palette to signal freshness while still displaying sober financial data like FICO scores and overdraft limits. Finally, the carousel must teach the viewer the app’s information architecture—home, category detail, savings, map, credit—in only eight swipes, a sequencing puzzle that requires each frame to be immediately scannable and spatially distinct from its neighbors.

How the set argues its case

Every screenshot, and the job it does

01

Dashboard Greeting and First Impression

On-frame caption: “EASY BUDGET TRACKING”

No pill label; the Spruce wordmark and H&R Block lockup occupy the peak. The black-bezel phone is rotated roughly ten degrees counter-clockwise, overlapping a second phone that peeks in from the lower left showing only a photographic fragment and a back chevron. The in-app header is a near-black green—approximating #0A2F1D—carrying the white serif italic greeting “Morning, Sarah! Take a peek at your recent money movement.” A small info-circle icon precedes “Your Spending Account Balance,” followed by “$1,344.80” in large electric-lime numerals. Below, the “Money Out” list shows “Mindset Records -$120.30 Pending,” “Everlong Coffee Co. -$11.99 April 8, 2024,” and a truncated “New Era Café -$18.5…” with the final digits clipped by the screen edge. The status bar, tab bar, and any navigation chrome are entirely cropped, forcing attention onto the transaction list and the oversized balance figure. The rear device adds depth but no readable content, functioning as a compositional shadow rather than a feature preview.

02

Category Spending and the Watchlist

On-frame caption: “TRACK YOUR SPENDING”

The cream ground persists, but the phone now tilts clockwise. Two decorative dollar-sign coins—lime rings with dark green centers and white glyphs—float at the upper left and lower right, introducing an ornamental vernacular that departs from the clean linework elsewhere. The on-screen UI shows a sub-navigation drill-down: a back chevron at top left, a green square with a white paw icon, and the category title “Pets.” Beneath it reads “Spending Apr '24 $180.63.” A five-month bar chart follows, with January through March rendered in desaturated warm gray near #C4C4B0 and April highlighted in solid forest green. A “+ Add to Watchlist” text button sits below the chart, followed by a disabled “Spending level” row in muted gray with the note “Add to watchlist first.” A single transaction appears: “Encore Pets -$45.23” with a paw icon and the date “Apr 2, 2024.” Below the device, a green pill reads “Budgeting,” and the subhead states: “Choose which areas to focus on by building a budget Watchlist.” The composition is bottom-heavy; the phone occupies the upper two-thirds while the headline and subhead lock to the baseline, grounding the viewer after the overlapping depth of frame one.

03

Security as Brand Collage

On-frame caption: “KEEP YOUR MONEY SAFE”

This frame abandons device mockups entirely. Centered on the cream ground is a vertical Spruce debit card rendered in deep forest green near #0B3D2E. The word “Spruce” is set in oversized lime serif typography across the midsection. At bottom left sits the word “debit” in small white lowercase sans-serif; at bottom right, the Mastercard interlocking circles in red and orange. A small padlock illustration—white body, lime shackle, with horizontal green stripes—overlaps the card’s lower right corner. Behind the card, large lime organic curves sweep across the background, and thin black vector sparkles—a four-pointed star and a plus sign—float in the negative space. Below, the headline “KEEP YOUR MONEY SAFE” appears in heavy dark green sans, followed by the exact subhead: “Deposits are FDIC insured up to $250,000.²” The absence of any app interface is conspicuous; the viewer sees a physical card artifact rather than a screen state. While the color discipline remains tight, the frame breaks the established rhythm of “device plus caption,” functioning as a brand interlude that offers no proof of where the security promise lives inside the product.

Captions, colour and the mechanics of the sell

What we would change

How to apply this to your own app

1. 1

   Lock your chassis before you design frame one. Decide whether your phones will be flat, rotated, outlined, or shadowed, and apply that rule to every single frame. The shopper’s eye detects edge variance faster than it detects content.

   Spruce loses cohesion because it alternates between tilted black bezels and flat lime strokes. Choose one device treatment and treat it as immutable as your logo.

2. 2

   Write your caption grammar first. If every frame requires a pill, a headline, and a subhead, document that structure in a spreadsheet and stress-test it for variety so the cadence does not become monotonous.

   Spruce’s rigid pill-headline-subhead formula aids scanning but feels robotic by frame eight. Vary the pill color or position, or occasionally merge the pill into the headline to create rhythmic relief.

3. 3

   Audit your mock data across the entire sequence. Account balances, transaction dates, and user names must follow a logical continuity or the set will feel careless.

   Inconsistent balances between frame one and frame seven break the illusion of a live account. Maintain a running ledger so that every debit shown has a mathematical consequence.

4. 4

   Use illustration as an amplification of UI, not a substitute for it.

   Frames three and six are attractive but fail to prove product functionality. If you include an illustration frame, ensure it is grounded in a recognizable screen state—such as a card-management view or a fee-disclosure settings page—rather than a pure brand poster.

What the set actually achieves

Frequently asked

Build your own screenshot set

About the app

“Spruce is the leading platform for HIPAA-compliant communication and care outside of the exam room. Call, text, fax, secure message, video chat, and more—all from one secure app,…” — Spruce Health, via the App Store listing.

Screenshots and store metadata belong to Spruce Health. They are shown here for design commentary and criticism. The analysis on this page is original work by floow.design. View the original listing.