Reasoned Proof

The canvas operates on an ultra-light, neutral warm-gray foundation (#fbfbfc) that frames dense technical content without visual fatigue. Color is deployed with surgical discipline: brand crimson (#be1823) provides concentrated intentional focal points in the logo, the emphasized headline verb 'proves', and the central pipeline hexagon, while vibrant terminal green (#22c55e) denotes live system health and affirmative test verdicts. Typography pairs a modern geometric sans-serif for confident display titles with a calibrated monospace engine for executable code payloads and runtime logs. The card architecture balances an 8px radius on interactive buttons against a more generous 16px radius on compound UI modules, notably the dark code console (#0e131b) stacked over the white schema canvas (#ffffff). Observers immediately register the dual-density contrast: left-aligned editorial assurance coupled directly with a functional developer sandbox.

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 developer infrastructure anchored by deep crimson brand accents, crisp monospace terminals, and structured verification architecture.

LAYOUT
The hero employs a balanced two-column desktop arrangement within a 1280px max-width boundary. The left column stacks category pill, H1 headline, explanatory body, dual CTAs, and a combined metric/Product Hunt card. The right column showcases a vertical stack: dark code terminal above, white pipeline architecture diagram below. A 5-column horizontal feature strip spans the bottom edge to anchor the viewport.

PALETTE (use these exact hex values)
- #fbfbfc — Canvas Background: Root page background providing soft, sterile contrast against pure white cards.
- #0e131b — Terminal Canvas: Deep blue-black background for code execution panels and interactive terminal mocks.
- #ffffff — Card Surface: Elevated white background for metrics cards, schema boxes, and light buttons.
- #be1823 — Rubric Crimson: Primary brand accent used for logo mark, category badge borders, and headline keyword emphasis.
- #16a34a — Operational Green: Status indicators, execution pass alerts, live latency ticks, and verification check marks.
- #0f172a — Charcoal Primary: High-contrast text for H1 headlines, primary CTA buttons, and active tabs.
- #64748b — Muted Slate: Supporting descriptive copy, inactive code tabs, line numbers, and metric sublabels.
- #e2e8f0 — Subtle Border: Hairline borders enclosing white cards, structural dividers, and secondary controls.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 60px display. Tracking -0.03em at display, -0.01em at body. The typographical tone is rigorous, confident, and unapologetically technical. Plus Jakarta Sans lends an engineered neo-grotesque authority with clean letter terminals and tight letter spacing. If substituting, Inter or DM Sans retain the required infrastructural tone, provided weights are dialed to heavy bold for headlines and medium for UI elements.

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

DEPTH
Depth is created primarily through flat surface layering and precise hairline borders (#e2e8f0) rather than heavy drop shadows. The obsidian code terminal creates an intense dark-field contrast against the #fbfbfc canvas, acting as a visual anchor. Very soft, ambient diffuse shadows (blur: 24px, opacity: 0.04) are permitted strictly under elevated card containers.

IMAGERY
Avoid photographic assets or generic 3D abstract shapes entirely. The visual language consists exclusively of technical artifacts: real code samples, precise vector flowcharts, geometric iconography, and structured verification badges. Diagram elements must feel like authentic developer tool interfaces with crisp connectors and status pills.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-canvas preview stack: a deep obsidian terminal window displaying live cURL execution stacked directly atop a clean white architectural schema card. This instantly communicates that the platform bridges code-level implementation with high-level system reliability. Misusing it by turning both cards dark or removing the live response telemetry collapses its developer-grade authenticity.

MUST
- Highlight only the single most pivotal operational verb in the hero H1 with brand crimson (#be1823).
- Pair the dark terminal mockup directly with a light-mode architectural diagram to exhibit breadth.
- Use JetBrains Mono or equivalent monospace type exclusively for code blocks, parameters, and verdict text.
- Preserve 16px corner rounding on cards and 10px on interactive action buttons.

AVOID
- Never saturate entire hero backgrounds with brand red; crimson must remain strictly an accent.
- Do not omit line numbers or HTTP status codes in terminal previews.
- Avoid pill radiuses on major rectangular content cards; confine pills exclusively to badges.
- Never let code terminal text wrap arbitrarily; maintain structured indentation and fixed line height.

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

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).

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.