Website on mobile, three screens

Sample-application slide with three phone mockups showing the Arts Midwest mobile site: a dark state map with stat tiles, a bright article list, and a story page.

Styleeditorial, photographic, light-mode

Colorlight, dark, vibrant, high-contrast

Typeserif, sans-serif, mixed-serif-sans

Moodbold, energetic, professional

Elementsimage, map, stat-counter, card, nav-menu, search, badge

Tagssample-application, mobile-mockup, three-phones, responsive, state-map, stat-tiles, article-list, lime-nav, running-header

Palette

#1B1B2E

#D4F500

#7C7CF0

#FF7A5C

Summary

A sample-application slide showing the mobile version of the Arts Midwest site across three phone mockups: a regional state-map selector with colored stat tiles, a bright "Popular" article feed, and an editorial story page.

Visual description

Light page with the "SAMPLE APPLICATIONS / Website on Mobile" running header and page number 38; the horizontal logo sits in the footer. Three identical dark-bezel smartphones stand on a pale grey panel. Left phone: a dark navy screen with the lime angled nav at top, an interactive map of the Midwestern states (Indiana highlighted in periwinkle), a two-column list of state names, then four rounded stat tiles in lime, periwinkle, coral, and white showing figures like "$401,772 Invested", "66,346 Participants", "27 Grants Awarded", and "14 Communities Reached". Middle phone: a white "Popular" feed led by a lime-green photo of a marching band with flags, a serif headline and byline, then a second stacked article. Right phone: a story page headed "Joyful, loud, and Midwest proud" in periwinkle, a portrait photo, a dated award headline, body copy, and a "Press Releases" pill. All three keep the lime nav bar and small mark.

Key takeaway

The colored stat-tile grid (lime/periwinkle/coral/white) as a lively way to surface impact numbers on mobile, and using the brand's accent color as a full-bleed background behind a single hero photo (the lime band image). Showing three connected screens in one row tells the responsive story economically.

Reuse notes

Good reference for presenting a responsive or mobile design system inside brand guidelines or a capabilities deck. The three-phone row scales to show distinct page types at a glance. The accent palette and angled nav are brand-specific; the stat-tile and feed patterns transfer cleanly to any content-driven app.