Kage Design logo kage
flow.google.com
Google Flow for iOS & Android feature grid component

Design analysis

A large centered promise is followed by a single framed product preview with ample black space. The minimal composition makes the interface screenshot feel like the proof point.

Prompt preview
## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/google-flow-for-ios-android/998b1c85-b331-490a-bec1-b2413c6fadd0-1790056895-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/google-flow-for-ios-android/998b1c85-b331-490a-bec1-b2413c6fadd0-1790056849877-full.webp
- Component on Kage: https://kage.design/component/google-flow-for-ios-android-feature-grid

## Before you start
Ask what outcome the user's product unlocks and what interface or artifact best demonstrates it. Apply these principles to that product and brand.

Build a centered showcase section on a pure black canvas (#000). Use generous vertical whitespace, a two-line white heading in the upper half, and a restrained supporting line if needed. Under it, place one wide rounded product preview or media frame, centered and slightly elevated from the background using a subtle #202020 border and soft shadow. Keep the preview width around 60–72% of the desktop container and make it fluid on mobile. Use 28–40px section padding, 56–72px heading size, and rounded corners around 10–14px. A small play indicator may sit on the preview when the media is interactive.

Never: use logos, product names, copy, illustrations, or imagery from the reference.

More components