Chiaroscuro Pipeline

The interface presents a stark split-canvas comparison built on a clean #FFFFFF page with a centered 1200px container. On the left, a light #F8F9FA card represents the manual legacy workflow using cautionary pale coral badges (#FEE2E2), stark black type (#111827), and messy dashed line diagrams. On the right, a deep obsidian #0B0D13 card embodies modern automation with deep navy sub-cards (#151923), neon purple radiance (#8B5CF6), and crisp, aligned pipeline flows. Typography relies on a clinical neo-grotesque sans, running from 11px uppercase metadata up to a 36px bold hero headline with tight tracking (-0.02em). Card containers share an identical 20px border-radius, while nested metric blocks and table lists use 12px corners. A floating 40px circular arrow button (#FFFFFF with 0 4px 12px rgba(0,0,0,0.08) shadow) bridges the two halves, visually reinforcing the irreversible transformation from left to right.

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	Pricing & calls to action
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a light-mode website section: side-by-side polarity contrasting chaotic manual fragmentation against luminous, automated intelligence.

LAYOUT
The view begins with a centered global badge ('BEFORE & AFTER') and a two-line display header with body summary. Below sits a balanced 2-column grid comparing two equal 20px-radius panels. Each panel mirrors the other: header block at top-left, process table at top-right, quantitative metrics at bottom-left, visual diagram at bottom-right, and a full-width banner grounding the base.

PALETTE (use these exact hex values)
- #FFFFFF — Page Canvas: Root page background providing neutral framing for the dual comparison cards
- #F8F9FA — Legacy Card Surface: Muted off-white container background for the manual workflow state
- #0B0D13 — Autonomous Card Surface: Deep near-black container background housing the automated workflow state
- #151923 — Dark Sub-Surface: Elevated slate card nested inside the dark autonomous container
- #8B5CF6 — Neon Violet Glow: Luminous core accent for the AI nexus node, laser beams, and active states
- #FEE2E2 — Warning Tint: Pale coral badge fill signaling friction and risk in manual tasks
- #DC2626 — Warning Text: High-contrast cautionary crimson text inside error and legacy badges
- #111827 — Primary Dark Text: Highest emphasis copy on light backgrounds and page title
- #F9FAFB — Primary Light Text: Highest emphasis copy on dark cards and metric values
- #6B7280 — Muted Secondary Text: Descriptions, durations, and inactive metric metadata

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 36px display. Tracking -0.02em at display, 0.05em at caps. The typographic tone is objective, technical, and executive. Inter provides neutral neo-grotesque precision where numbers line up cleanly in tabular formats, while bold headings (-0.02em letter-spacing) convey authoritative SaaS capability.

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

DEPTH
Depth is flattened in the legacy card, relying only on 1px borders (#E5E7EB) and flat white fills to evoke paperwork. The autonomous panel uses luminous depth: layered dark tones (#0B0D13 base, #151923 cards) accented by a glowing drop-shadow (0 0 24px rgba(139, 92, 246, 0.45)) behind the central AI engine node.

IMAGERY
No photographic imagery is present. Visual storytelling relies on technical iconography (16px feather-style line icons) and schematic vector diagrams contrasting chaotic dashed line mazes with ordered neon pipeline vectors.

SIGNATURE DETAIL — the thing that makes this design itself
The dual light-versus-dark side-by-side card structure bridged by a floating circular directional arrow at the junction. Misusing it by making both cards dark or breaking vertical symmetry ruins the immediate psychological contrast between manual drag and autonomous speed.

MUST
- Strictly mirror the vertical content hierarchy between both comparative halves.
- Use chaotic, dashed strokes for manual diagrams and clean, luminous gradients for automated ones.
- Keep nested sub-card corner radius at 12px against the parent 20px radius.
- Employ true neon violet (#8B5CF6) glow effects only inside the dark autonomous container.

AVOID
- Do not introduce dark theme sub-elements into the light legacy card.
- Never use solid or colorful wires in the manual diagram; maintain weak dashed grays.
- Avoid asymmetric padding between the left and right comparison panels.
- Do not use saturated warning reds in the dark panel; keep error states contained to the legacy side.

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

Pricing & calls to actionDesign reference

Abyssal Biofoundry

The canvas is anchored on an ultra-dark navy-black surface (#02050b) layered with a luminous horizon glow dividing the primary call-to-action from the structural site directory. Typography relies on a neutral neo-grotesque sans-serif rendered in pure white (#f8fafc) for high-impact display titles (48px) and a soft slate-blue (#94a3b8) for secondary narrative and navigational text. Vibrant electric blue (#1d6bf3) functions as the concentrated action color, isolated to high-intent pill tags, primary action triggers, and glowing vector iconography. Compact cards and inline code snippets utilize a slightly elevated surface (#070d18) with disciplined 1px borders (#162238) and subtle 8px to 12px border radii. A reader immediately registers the luminous horizontal seam at the fold, drawing the eye directly to high-trust credentials before descending into developer-grade utility.

Pricing & calls to actionDesign reference

Abyssal Defense

Built on an impenetrable canvas of deep void navy (#090d14), this interface uses darkness not as absence of light, but as an operational deep-sea medium. Color is deployed with surgical discipline: primary calls-to-action ignite in a radiant periwinkle-to-indigo gradient (#4f46e5 to #6366f1) while operational indicators flash a restrained coral-orange (#fb7185) against slate neutrals. The primary visual weight is anchored by an expansive 24px-radius CTA panel housing an autonomous submarine render sliced by a conical cyan spotlight. Typography balances a towering condensed grotesque wordmark in the footer with clinical, hyper-legible neo-grotesque sans-serif in the CTA lockup. Structural dividers and social pill buttons use faint 1px hairline borders (#1e293b) to define boundaries without interrupting the nocturnal continuity. Inline spacing is generous, keeping legal and navigational tiers legible and calm.

Pricing & calls to actionDesign reference

Abyssal Defense Matrix

The canvas is set on an ultra-dark navy surface (#030712 to #050b14) evocative of the deep ocean, establishing a high-stakes maritime defense atmosphere. Color is utilized strictly for status and strategic hierarchy: electric blue (#2563EB to #38BDF8) demarcates autonomous superiority, while muted red (#DC2626) badges identify legacy vulnerabilities against neutral slate typography. Primary typography is a clean, neo-grotesque sans-serif with tracked uppercase badges and sharp header contrast (44px display down to 11px micro-labels). Shapes rely on subtle rounded cards (radius: 16px) with hairline semi-transparent borders (#1E293B) and glassmorphic translucent fills. A reader immediately notices the highlighted autonomous column encased in a vibrant glowing blue frame beside an illuminated stealth submarine.

Pricing & calls to actionDesign reference

Aerospace Dark Spec

This interface pairs deep abyssal navy canvas (#040911) with electric cybernetic cyan accents (#19E0B2) to deliver a high-assurance defense and aerospace identity. The layout organizes a prominent enterprise conversion banner directly above a dense, multi-column navigation footer. A glowing 3D particle landscape wave acts as an atmospheric horizon separator between the CTA area and footer columns. Visual weight relies on bold, clean geometric display typography (around 44px) paired with sharp tabular figures (32px) and translucent glassmorphism cards framed by subtle semi-transparent borders (rgba(255,255,255,0.08)). Subtle cyan micro-accents highlight key conversion triggers like the primary booking button, monospaced eyebrow trackers, and inline trust indicators.