Adaptive Athlete Bento

The canvas is anchored on an immaculate white base (#ffffff) paired with an ultra-light grey surface layer (#f7f8fa) that carves out crisp modular compartments. Color functions strictly as semantic guidance: a distinctive digital iris (#5e52d6) powers primary actions and key brand phrases, while soft pastel badge fills segregate distinct user personas without visual competition. Primary messaging commands attention through a 56px high-contrast sans-serif paired with an expressive, editorial italic serif contrast line that brings human emotion into software. Components conform to strict curvature hierarchies, featuring 16px radius bento tiles, 10px functional buttons, and 999px pills for floating metadata. Dense statistics sit directly beneath hero copy inside a dedicated low-elevation floating card. A reader first registers the high-contrast display hook before naturally sweeping across the 5-card multi-persona bento grid on the right, punctuated by the lone deep slate tile (#151c28).

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	Hero sections & backgrounds
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a light-mode website section: clinical human performance software refined through modular pastel bento tiles, crisp typography, and an italic serif flourish.

LAYOUT
The viewport is organized as an asymmetrical split hero within a 1280px locked container. The left side (approx 45% width) holds the narrative conversion column: announcement pill, dual-typeface headline, paragraph text, dual CTAs, and a social proof metric bar. The right side (approx 55% width) forms a dense 5-part bento grid arranged into two vertical columns that balance interactive phone UI, candid athletic photography, anatomical wireframes, and enterprise coaching UI.

PALETTE (use these exact hex values)
- #5e52d6 — Digital Iris: Primary interactive fill, display headline accent, active step badges, and focal icon buttons.
- #ffffff — Pure White: Global application canvas background and primary pill button fill.
- #f7f8fa — Soft Frost: Container backgrounds for interactive product previews and metrics summary cards.
- #151c28 — Deep Slate: Background surface for the multi-coach bento tile to create focal anchor weight.
- #111625 — Carbon Obsidian: Primary text color for headlines, brand logotype, and emphasized metric numbers.
- #5e6573 — Graphite Muted: Body copy descriptions, meta labels, navigation links, and inactive icons.
- #f0edfc — Lavender Tint: Surface tint for AI product badges and announcement pill tags.
- #e5e7eb — Border Subtle: Outlines around cards, input wrappers, secondary buttons, and divider tracks.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 26px heading, 56px display. Tracking -0.03em at display, 0 at body. The typography strikes a precise balance between silicon-valley engineering rigor and traditional editorial prestige. Plus Jakarta Sans handles transactional clarity across microcopy, UI stats, and navigation, while the sudden intrusion of an editorial italic serif injects human aspiration and emotional empathy. For open-source parity, Inter paired with Newsreader Italic accurately reproduces this technical-yet-artistic duality.

GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.

DEPTH
Depth is handled with clinical restraint. Bento cards sit flush on the background defined by 1px borders (#e5e7eb) or subtle value contrast, avoiding heavy drop shadows entirely. The only floating dimension comes from the angled smartphone mockup inside the central tile, which casts a soft diffuse ambient blur (0 12px 32px rgba(17,22,37,0.08)) onto its parent container.

IMAGERY
Imagery strictly captures candid, unglamorous athletic preparation: an athlete meal-prepping over plastic containers and a road cyclist grinding uphill into the elements. Visuals also integrate translucent 3D blue-tinted anatomical medical wireframes to communicate biomechanics. Cheesy smiling gym-goers or generic stock fitness models would immediately shatter the credible, performance-driven tone.

SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-personality headline where an authoritative geometric sans punchily resolves into a literary, italic serif phrase ('Built for epic goals.') dyed in Digital Iris. It humanizes algorithmic AI coaching into something poetic and deeply personal. It is misused when designers apply the serif treatment to entire sentences or fail to tint the serif in the primary brand hue.

MUST
- Pair geometric sans bold text with an italic serif flourish for signature emotional headlines.
- Enclose all bento tiles in a strict 16px border radius to maintain structural harmony.
- Use pill tags (999px radius) for categorization chips within preview cards.
- Anchor primary CTA buttons with Digital Iris (#5e52d6) and 10px rounded corners.

AVOID
- Never make the entire headline serif; the serif is reserved strictly for the closing italic phrase.
- Do not use sharp 0px corners anywhere in the interface.
- Avoid high-saturation neon badges; maintain soft, tinted pastel surfaces for category labels.
- Never stack buttons vertically when horizontal pairing fits within the container.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks.

Try in DraPub

More prompts from the same visual neighborhood.

Back to prompt gallery

Hero sections & backgroundsDesign reference

Accretion Core

Set against a vast cinematic deep-space panorama, this interface positions left-aligned typographic clarity against a radiant golden accretion vortex on the right. The canvas transitions from pitch void (#060f1e) through layered turquoise dust clouds (#1a7895) to an incandescent stellar core (#ffe89e). Text hierarchy relies on stark contrast: headers command attention with 56px white weights, punctuated by a kinetic peach-to-magenta linear-gradient on 'what matters.'. CTAs mirror this astral heat signature using pill-shaped (radius 999px) sunset gradients, while secondary actions use subtle frosted borders (rgba(255, 255, 255, 0.25)). Supporting metrics anchor the lower quadrant with compact 22px stat lockups paired with hairline line-art iconography. The entire composition balances the unrestrained organic luminance of interstellar nebulae with clean, grid-locked functional product chrome.

Hero sections & backgroundsDesign reference

Aegis Command

The canvas executes a severe dual-world contrast: an ultra-clean clinical white (#FFFFFF) presentation plane hosts bold editorial typography, while a recessed, perspectival dark-mode (#090D16) mission console dominates the right viewport. Hierarchy relies strictly on stark luminosity contrast rather than decorative fills, using vibrant cobalt (#1D68F2) for direct actions and tactical red (#EF4444) strictly for threat telemetry. Display type reaches a confident 56px in bold weights, contrasted against 12px uppercase tracking labels and low-contrast 32px secondary leadings. The interface employs tight structural rounding, from 6px on primary button controls to 16px on the floating console bezel. Metrics and status indicators are grounded by a 3-column baseline card with 1px hairline dividers (#E2E8F0) and miniature system health pings. A spectator first notices the photorealistic earth-orbit visualization tilted inside the console before registering the stark three-word headline.

Hero sections & backgroundsDesign reference

Aerial Stealth Horizon

The canvas is anchored on an ultra-deep black (#03070b) accented by rounded containment cards filled with subtly lifted charcoal-tinted surfaces (#080d14). Accent energy flows strictly through a vivid turquoise-to-mint gradient (approx #17a9e2 to #63e69f) reserved for critical primary CTAs and punchy headline statements like 'Costs less.' Typography is set in a clinical, geometric grotesk like Inter or Geist, prioritizing stark white-to-slate contrast ratios and balanced letter tracking. Cards and pills use generous 16px to 20px radii paired with hairline borders (#16222f) that dissolve into shadows. A user immediately notices the large photographic viewport depicting an autonomous bio-drone against a digital point-cloud terrain before descending into structured, telemetry-style metric tiles.

Hero sections & backgroundsDesign reference

Aether Horizon

The canvas is anchored in a vast, atmospheric deep-space black (#06070c) overlaid with a colossal swirling vortex of cosmic ember dust. Warm radiant amber (#e65c19) functions strictly as an interactive beacon and energetic focal point, while text relies on a muted parchment tone (#ece5dd) to ensure effortless legibility against nebular noise. Display typography is set in an airy, human-centered geometric sans at 58px with loose letter spacing and generous leading. Pill-shaped geometries (border-radius 999px) govern all interactive buttons, contrasting sharply with the organic turbulence of the background rendering. A left-aligned content column creates expansive asymmetrical breathing room, balancing the silhouetted figure on the right. Inline feature badges sit low on the page at 12px font size with subtle orange iconography, grounding the user interface into the cinematic sci-fi tableau.