Cobalt Sentinel

This design employs a high-clarity SaaS comparison layout set against an airy #F8FAFC canvas with delicate micro-grid circuit accents. Hierarchy is driven by an elevated primary column draped in vibrant cobalt blue (#3B82F6) that physically floats over a muted white comparison matrix (#FFFFFF). Typography is disciplined and neutral, using tight-tracked geometric sans-serif styling with bold headlines (#0F172A) and low-contrast secondary descriptors (#64748B). Subtle state iconography uses soft green rings (#10B981) for validation and pale amber warning triangles (#F59E0B) for competitor friction. A wide 16px radius on containers and 20px on the prominent center column gives an approachable, modern enterprise finish.

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: crisp tabular contrast where glowing brand blue elevates the superior path over cautionary legacy friction.

LAYOUT
The composition follows a centered, symmetric vertical stack. An eyebrow badge and two-line bold headline lead into an expansive 3-column table measuring ~1040px max-width, where the center column dominates the visual weight. Below the table sits a full-width secondary metric callout bar with balanced left-text and right-aligned CTA.

PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Outer background fill featuring soft ambient gradients and faint matrix point lines
- #FFFFFF — Surface White: Primary comparison table background and footer callout surface
- #3B82F6 — Brand Vibrant Blue: Header background of the highlighted feature column and accent icon fills
- #EFF6FF — Brand Light Tint: Background fill for the featured product column body and pill badges
- #0F172A — Text Slate Dominant: Main headline typography and row title labels
- #64748B — Text Slate Muted: Sub-captions, supporting row descriptions, and category metadata labels
- #10B981 — Success Mint: Circular affirmative checkmark icons inside the highlighted column
- #F59E0B — Warning Amber: Cautionary triangle icons denoting competitor drawbacks and manual friction
- #E2E8F0 — Border Subtle: Dividers between rows and stroke on standard background cards

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px subheading, 18px heading, 40px display. Tracking -0.025em for headlines, 0.05em for uppercase captions. The voice is confident, technical, and analytical without becoming sterile. A modern grotesque sans-serif like Inter or Plus Jakarta Sans provides crisp numeric clarity and legible small body text, keeping the tone authoritative and SaaS-native.

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

DEPTH
Depth is achieved through layering rather than aggressive dark drop shadows. The featured center column uses a subtle colored cast shadow (0 12px 30px -8px rgba(59, 130, 246, 0.25)) and a delicate 1px border stroke (#93C5FD) that lifts it distinctly off the 1px-bordered white table card.

IMAGERY
Iconography is strictly functional, line-based, and duotone, rendered at 20x20px with clean 1.5px strokes. No photographic imagery is used; visual interest is created solely through subtle background circuit nodes and glowing micro-dot grids.

SIGNATURE DETAIL — the thing that makes this design itself
The standout move is the 'floating sleeve' product column: a continuous 20px-radius card with an electric cobalt top header that punches vertically through the base comparison table, casting a faint blue halo to visually declare product dominance before a word is read.

MUST
- Keep the center featured column physically elevated above the surrounding comparison grid using border stroke and soft colored shadow.
- Use semantic icons: blue outlines for capabilities, green checkmarks for positive confirmations, and amber warnings for drawbacks.
- Maintain strict horizontal alignment across all three columns so comparison items stay on identical baselines.
- Format column headers with crisp uppercase tracking (0.08em) for secondary tools and high-contrast filled blue for own brand.

AVOID
- Do not use red 'X' icons for legacy competitors; use cautionary amber triangles to indicate friction rather than total failure.
- Do not allow the center elevated column to lose its contrast against the white base card.
- Never use dark background fills for standard rows; retain pure white and light blue tints.
- Do not drop horizontal row borders, as they anchor the readability between disparate columns.

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.