Prismatic Ledger

The canvas is an ultra-clean, airy light surface (#F8FAFC) anchored by crisp white (#FFFFFF) feature cards enclosed in faint hairline borders (#E2E8F0) with generous 16px corner radii. Color functions strictly as semantic classification rather than surface decoration: each of the six investor stages is assigned a muted pastel hue paired to monochromatic icon badges and micro-pills (e.g., #2563EB blue, #DB2777 magenta, #0891B2 cyan, and #7C3AED violet). Typography relies on a geometric neo-grotesque sans-serif with a commanding 38px bold headline, balanced by 15px muted slate (#64748B) descriptions. Spacing adheres to a strict 24px grid system with consistent 28px interior card padding. The viewer immediately registers the disciplined 3x2 matrix layout and the harmonious pastel iconography anchoring each workflow step.

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: clinical fintech clarity tempered with pastel-coded categorical swimlanes.

LAYOUT
The section follows a disciplined top-down symmetrical flow: centered eyebrow badge and dual-line headline lead into a balanced 3-column by 2-row card grid. Below the grid, a 48px gap gives breathing room to a centered summary line with an accent spark icon. All card interiors enforce a left-aligned vertical stack: Icon -> Title -> Body -> Tag cluster.

PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ground: Outer page background providing low-contrast contrast against pure white cards
- #FFFFFF — Card Surface: Background fill for all six workflow category cards
- #E2E8F0 — Card Stroke: Hairline 1px border framing individual workflow cards
- #0F172A — Ink Primary: Headlines, section title, card headers, and bottom summary text
- #64748B — Ink Secondary: Body copy, subtitles, and explanatory workflow text
- #2563EB — Cobalt Accent: Sourcing and screening icon stroke, tag text, and sparkle mark
- #EFF6FF — Cobalt Soft Tint: Background for use cases badge, sourcing icon box, and blue tags
- #DB2777 — Fuchsia Accent: Due diligence icon stroke and pill badge text
- #FDF2F8 — Fuchsia Soft Tint: Background for due diligence icon container and tags
- #0891B2 — Cyan Accent: Investment committee icon stroke and pill badge text

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 14px body-sm, 15px body, 18px subheading, 38px heading-lg. Tracking -0.02em at display, 0.05em at tags. The typography relies on Inter (or equivalent neo-grotesques like Plus Jakarta Sans) to convey institutional reliability and modern software efficiency. Bold headline weights deliver direct authority, while generous line heights (1.55) in the slate body text ensure effortless readability. Crisp letter-spacing on tags creates functional micro-labels reminiscent of financial terminal interfaces.

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

DEPTH
This design deliberately avoids traditional shadow elevation. Depth is achieved via surface juxtaposition: pure white (#FFFFFF) cards sit atop a pale slate canvas (#F8FAFC), framed by subtle 1px border strokes (#E2E8F0). Light pastel fills inside icons and tags provide optical layering without Z-axis lift.

IMAGERY
No photographic imagery is present. Visual storytelling relies solely on clean 1.75px stroke-weight geometric line icons depicting tools (funnel, document, chart line, briefcase, speedometer, exit arrow). Solid-filled illustration styles or 3D iconography would compromise the crisp enterprise clarity.

SIGNATURE DETAIL — the thing that makes this design itself
The defining move is the strict monochromatic pairing between the top icon tile and the bottom taxonomy pills within each card, shifting through a muted pastel spectrum (blue, magenta, cyan, violet, cobalt, rose) across the grid. Misusing this by mixing colors within a single card or using saturated tag backgrounds destroys the disciplined categorization aesthetic.

MUST
- Keep icon container fills ultra-light (opacity 10-15% or designated tint hexes) so outlines pop cleanly.
- Maintain uniform 28px internal padding inside all six cards to preserve column alignment.
- Pair the color of the card's icon directly with its bottom metadata tag labels.
- Set tag typography to strict uppercase with wide letter-spacing (0.05em to 0.08em).

AVOID
- Do not introduce drop shadows; elevation is achieved entirely through border definition and white surface contrast.
- Do not use dark or saturated backgrounds for icon containers or category pills.
- Never mix multiple accent colors within a single card; one card belongs to one color family.
- Do not change card corner radii from 16px or use sharp rectangular corners.

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.