Canary Comparative

The canvas is pure white #FFFFFF with an airy 3-column comparison architecture anchored by a floating center card. Hierarchy is achieved through deliberate contrast: competitor features on the left and right sit within a muted, flat enclosure with a 1px border (#E2E8F0) and quiet slate typography (#64748B), while the central product column is elevated with an 8px vertical offset, crisp white surface, and an indigo-tinted border (#C7D2FE). Accent colors signify semantic status: mint green (#ECFDF5) containers with emerald (#10B981) glyphs denote proprietary advantages, while competitors use passive monochrome and muted lavender icons. Typography relies on a tight neo-grotesque sans-serif with a prominent display title at 44px where 'vs.' is highlighted in bright cobalt (#4361EE). Spacing between comparison rows is rigidly aligned at 24px across all three columns to maintain horizontal reading lines despite differing column elevations.

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: elevated central hero column floating over subdued competitor baselines with soft indigo illumination.

LAYOUT
The section employs a symmetrical, center-focused 3-column comparative grid capped at 1120px max-width. At the top sits a centered stack: eyebrow badge, 44px display heading with colored 'vs.', and a 2-line subdued subtitle. Below, the comparison grid spans three equal columns where left and right represent painful legacy workflows and the central column stands forward with positive solutions, concluding in an enterprise proof ribbon docked at the bottom.

PALETTE (use these exact hex values)
- #FFFFFF — Canvas Background: primary page background creating maximum clarity and contrast
- #FAFAFD — Card Surface Subdued: backdrop fill for outer legacy and manual competitor columns
- #D8DEFE — Hero Card Border: soft indigo border distinguishing the elevated center product card
- #E5E7EB — Base Border: outer table boundary and horizontal separator rules
- #0F172A — Text Primary: main heading, column titles, and bold row headlines
- #64748B — Text Muted: supporting row copy and section subtitle descriptions
- #4361EE — Accent Cobalt: title highlight for 'vs.', brand mark, and checkmark badges
- #EFFCF3 — Emerald Icon Fill: background surface for positive solution feature icons
- #16A34A — Emerald Icon Stroke: icon stroke color communicating automated intelligence and health
- #F4F6FD — Footer Banner Fill: soft tinted foundation bar summarizing enterprise capabilities

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px subheading, 20px heading, 44px display. Tracking -0.025em at display, -0.01em at body. The typographic tone is technical, disciplined, and calm. Utilizing a modern grotesque typeface like Inter or Plus Jakarta Sans with crisp geometric terminals and tight negative tracking in display headings gives an engineered SaaS feeling. Titles are high-contrast black (#0F172A) while explanatory details remain legible slate (#64748B) to prevent visual noise across dense rows.

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

DEPTH
Depth is created strictly through layering rather than aggressive dark drop shadows. The background sits at Level 0, the competitor outer hull sits flat at Level 1, and the central hero column projects into Level 2 using a soft, light-diffused indigo-tinted shadow (0 12px 36px -4px rgba(67, 97, 238, 0.09)) combined with a 16px vertical overextension.

IMAGERY
Iconography is strictly outline/vector based with consistent 1.75px stroke weights inside 40x40px square containers. Center icons utilize soft rounded squircle containers with light emerald tint, while competitor icons float in bare circular or rounded outlines without fill. No photography, 3D renders, or heavy decorative graphics are permitted.

SIGNATURE DETAIL — the thing that makes this design itself
The 'Overlapping Hero Spine': a central product card that breaks vertical containment by extending 16px beyond both top and bottom edges of the competitor frame, framed in subtle periwinkle (#D8DEFE) with a light indigo shadow. Misusing this pattern by elevating more than one column or failing to horizontally align row baselines destroys the visual anchor.

MUST
- Keep row heights strictly synchronized across all three columns so eyes can scan horizontally.
- Elevate the middle column using both negative margin (-16px vertical offset) and drop shadow.
- Highlight the 'vs.' token in the headline using accent cobalt #4361EE.
- Use pastel green rounded icon badges solely within the central proprietary column.

AVOID
- Do not add heavy shadows or saturated fills to the outer competitor columns.
- Never desynchronize row vertical spacing; misaligned items destroy the comparative narrative.
- Avoid colored pills or green accents in competitor columns.
- Do not remove the vertical overhang of the center card; it creates the focal depth hierarchy.

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.