Bento Fieldwork

The canvas rests on a cool off-white background (#F8F9FB) hosting an asymmetric layout: a dominant hero column on the left and a 2x3 grid of feature cards on the right. Surfaces utilize pure white (#FFFFFF) with ultra-subtle borders (#ECEEF2) and soft rounded corners (20px to 24px). Typography leads with bold, punchy display headings in deep charcoal (#111827) paired with muted slate body copy (#64748B). Saturated periwinkle-blue (#4F46E5 to #6366F1) acts as the primary brand driver, appearing in pill badges, primary CTA buttons, and interactive gantt bars, accompanied by soft pastel icon containers (#EEF2FF and #FEF2F2). Visual hierarchy is anchored by miniature, high-fidelity UI previews inside each card, simulating real mobile and web app interactions with meticulous micro-typography.

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	UI components & grids
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a light-mode website section: crisp construction bento grid pairing tactical micro-ui vignettes with serene periwinkle and soft stone cards.

LAYOUT
The section adopts a two-part layout: a wide left hero column (roughly 38% width) and a right 2x3 bento grid (roughly 62% width). The left column stacks metadata, headline, CTA, and visual product mockups vertically. The right grid organizes six discrete capability cards with uniform 16px gaps, each pairing header content on top with an interactive micro-widget docked below.

PALETTE (use these exact hex values)
- #F8F9FB — Canvas Background: Overall viewport background underpinning the section and card layout
- #FFFFFF — Card Surface: Background for left hero enclosure and each of the six bento cards
- #ECEEF2 — Card Border: Hairline 1px border around all primary cards and inner UI containers
- #4F46E5 — Primary Indigo: Primary CTA button, key Gantt chart bars, active icons, and badges
- #EEF2FF — Primary Soft Tint: Background fill for top pill badge and indigo utility icon badges
- #111827 — Text Primary: High-emphasis display titles, card headers, and primary data figures
- #64748B — Text Muted: Secondary card descriptions, table headers, and timestamp labels
- #FEE2E2 — Accent Coral Soft: Background fill for document and financial metric icon pills
- #EF4444 — Accent Coral Dark: Icon stroke color for daily logs and cost tracking icons
- #ECFDF5 — Accent Green Soft: Status pill background for approved states and completed tags

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 14px body-lg, 16px subheading, 18px heading, 38px display. Tracking -0.02em for display headings, 0 for body text. The typography is pragmatic, authoritative, and direct, powered by a clean grotesque neo-grotesque sans-serif (Inter). Bold headline weights (-0.03em tracking) give a punchy field-ready tone ('Run jobs. Not paperwork.'), while dense, structured micro-scales (10-12px) handle data tables and schedules with crisp precision.

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

DEPTH
Depth is communicated almost entirely through flat layering and delicate 1px borders (#ECEEF2) rather than elevation shadows. The phone mockup in the hero card introduces the only noticeable ambient blur shadow (rgba(0,0,0,0.08) with a 24px blur radius), creating a slight focal pop without disturbing the flat architectural rhythm.

IMAGERY
Imagery is functional and tactical rather than ornamental, strictly consisting of UI mockups, miniature floor plan schematics, and realistic construction jobsite photographs clipped to 8px rounded thumbnails. Stock human portraits and conceptual illustrations are explicitly omitted in favor of concrete software artifacts.

SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the hyper-detailed micro-UI vignette embedded at the base of every card, simulating live product states (Gantt charts, approval chips, chat bubbles, and cost tables) rather than relying on abstract icons or text alone. Misuse occurs when these widgets become overly dense or contain unreadable real-size interface elements.

MUST
- Use a generous 20px border radius on primary cards to maintain a friendly, modern SaaS aesthetic.
- Pair every bento card heading with a dedicated pastel-backed icon badge in the top right.
- Keep miniature UI previews accurate and proportional rather than abstract vector blobs.
- Utilize soft tinted backgrounds (#EEF2FF, #ECFDF5) for tags rather than stark saturated fills.

AVOID
- Do not use dark, heavy dropshadows; rely on 1px subtle borders (#ECEEF2) for card definition.
- Do not stretch the bento cards to disparate heights; align the 2x3 grid precisely.
- Never replace miniature UI vignettes with generic stock photography or illustrative line art.
- Avoid harsh high-contrast saturated reds or greens for status labels.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. 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

UI components & gridsDesign reference

Abyssal Defense Matrix

This design orchestrates a high-contrast defense tech showcase on a pure white (#FFFFFF) ground, pairing deeply saturated underwater hero media with ultra-pale tinted ancillary panels. The primary canvas divides into an asymmetric bento layout: a dominant deep-ocean card (#0A131F) occupying roughly 58% width, counterbalanced by a stack of three subtly tinted cards in lavender (#F9F8FD), arctic blue (#F4F9FD), and peach-blush (#FFF8F4). Typography relies on a neutral grotesque sans-serif with tight tracking and heavy display weights, accented by an uppercase tracking-widened purple eyebrow label (#6355D8). Micro-metrics are structured inside frosted glass capsules (rgba(255,255,255,0.08)) with fine borders on the dark hero, while stats in the bottom banner sit cleanly bordered by hair-thin dividers (#E2E8F0). The visual hierarchy commands attention instantly through the photorealistic submarine cutting through murky cerulean water with an illuminated frontal headlight beam.

UI components & gridsDesign reference

Aegis Airspace

Built on a muted light canvas of #f8fafc, this layout establishes hierarchy through an asymmetrical bento grid anchored by an ominous dark-slate spotlight card (#0c1527). Color is deployed almost entirely for information density rather than ornamentation, utilizing tactical cyan (#38bdf8) and safety alerts on the dark radar screen while keeping standard enterprise surfaces pristine white (#ffffff) with delicate #e2e8f0 borders. Typography is anchored by a high-contrast geometric sans display headline sized around 44px with tight tracking (-0.02em), flowing into disciplined 14px body and caption metrics. Cards share a consistent 20px corner radius, punctuated by pill-shaped taxonomy tags with a 999px radius and soft 12px squircle icon badges. What the viewer notices first is the high-contrast tension between the civilian enterprise white cards and the tactical military-grade radar visual inhabiting the primary card.

UI components & gridsDesign reference

Aegis Clinical

The canvas is an ethereal, faintly cool-tinted white (#f8fafd) with subtle blue undertones that instantly conveys clinical sterilization and enterprise reliability. Color functions as an instrument of authority: intense cobalt blue (#1e3a8a) commands attention across prominent numerical metrics, star ratings, and links, while high-contrast charcoal (#0f172a) grounds primary typography. Subtle pastels—specifically a soft lavender-blue (#eef2ff) and muted sage green (#ecfdf5)—delineate verification and categorization without visual clutter. Typography relies on a neutral grotesque sans-serif with tight negative tracking at display scale (42px) and crisp, readable 14px body text. The entire architecture sits on a rigorous grid of rounded rectangular surfaces (16px border-radius) floating with imperceptible, soft diffuse shadows. What a reader notices first is the overwhelming density of quantifiable credibility—large blue numerals paired cleanly with verified testimonial quotes.

UI components & gridsDesign reference

Aero Infra

The canvas is a sterile, clinical cool white gradient (#f4f7fc fading into #ffffff) that directly evokes refrigerated high-density server rooms. Color operates strictly as functional signal: deep navy-black (#0a0f1d) delivers typographic clarity, electric cobalt (#2f54eb) marks active infrastructure status, and eco-green (#22c55e) highlights carbon savings. Typography relies on a tight neo-grotesque sans-serif with aggressive negative tracking at display scales (-0.03em) down to crisp neutral utility at 13px. Spatial composition follows an asymmetric split layout: narrative evidence and metrics anchor the left 55%, while hardware server racks dominate the right with overlapping floating metric badges. Key observed values include generous 20px card corner radii, 12px pill badges, and razor-thin 1px dividers colored at #e2e8f0.