Ethereal Indigo Horizon

The canvas is anchored on an ultra-pale cool grey (#FBFBFE) field with an ambient radial blue-lavender wash emerging gently from the bottom-right corner. Typography establishes immediate punch: the primary display line 'Resolve incidents.' is crisp near-black (#0F172A), contrasted directly against a gradient-tinted lilac-periwinkle line 'Keep your users happy.' at roughly 64px with tight tracking. Action items are paired in high-contrast harmony: an ink-black primary button (#18181B) featuring 12px pill-style rounded corners alongside an airy white elevated secondary button. A semi-translucent glass dock (16px radius, border #E2E8F0/60) pins four miniature capability pillars across the lower quadrant. Reassurance cues use subtle sea-green checkmarks (#10B981) and fine muted metadata to diffuse conversion friction.

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: crystalline SaaS hero with soft periwinkle ambient haze and meticulous trust-building micro-details.

LAYOUT
Strictly centered vertical flow orchestrating downward momentum. Top eyebrow badge leads into tight two-line display header, immediately supported by a 2-line centered subhead at 18px. Twin CTAs align horizontally followed directly by micro reassurance checks. The composition anchors on a horizontal 4-column glass dock card, terminating with a centered compliance footnote.

PALETTE (use these exact hex values)
- #FAFAFD — Canvas Ground: Primary light canvas background setting the soft modern foundation
- #0F172A — Deep Slate Title: High-contrast heading text and primary brand accent statements
- #475569 — Muted Body Slate: Body descriptions, explanatory subheadings, and dock details
- #6366F1 — Periwinkle Glow: Hero headline accent gradient, pill badges, and icon highlights
- #818CF8 — Soft Lilac: Secondary stop for the hero headline text gradient
- #10B981 — Trust Emerald: Checkmark icons in friction-reducing microcopy below buttons
- #18181B — Obsidian Surface: Primary call-to-action button fill
- #FFFFFF — Glass White: Secondary action button background and capability dock card fill
- #E2E8F0 — Subtle Border: Hairline outlines on badge, secondary button, and dock card

TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 14px subheading, 18px body-lg, 64px display. Tracking -0.03em display, -0.01em body. Inter Display delivers a sterile, highly engineered developer-tool demeanor without feeling clinical. Its negative letter spacing on display weights anchors authority, while medium weights at body sizes ensure maximum legibility. Geist or Plus Jakarta Sans serve as natural replacements maintaining technical polish.

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

DEPTH
Depth is handled via feather-light ambient drops rather than hard outlines. Secondary buttons carry a minimal 0 1px 3px rgba(0,0,0,0.06) lift, while the glass dock relies on backdrop blur combined with faint edge light. Atmospheric depth relies entirely on the soft chromatic radial bloom blooming from the bottom-right corner.

IMAGERY
No photographic elements are used. Imagery is strictly vector-symbolic, consisting of refined line-and-fill micro-icons (sparkles, lightning, users, telemetry charts) enclosed in tinted pastel squircles. Photography or complex 3D renders would violate the crisp clarity.

SIGNATURE DETAIL — the thing that makes this design itself
The two-tone headline execution where solid midnight slate immediately yields to a dreamy indigo-to-periwinkle gradient on line two, hovered over a frosted four-pillar capability dock. Misuse occurs when gradients are splashed over both lines or rendered with oversaturated neon stops.

MUST
- Keep the primary headline split across two lines with the second line bathed in gradient.
- Use exact 10px border radius on both CTA buttons to maintain balanced squircle proportions.
- Ensure the bottom right indigo gradient haze remains diffuse and does not exceed 25% opacity.
- Place trust assurance checks in direct vertical proximity under the CTA pair (within 20px).

AVOID
- Do not introduce sharp rectangular borders; all shapes must observe 10px to 16px corner roundings.
- Never fill the primary CTA with bright colors; it must stay deep obsidian black (#18181B).
- Avoid multi-colored icon glyphs in the feature dock; keep all icons monochromatic indigo.
- Do not make the ambient background gradient fully cover the canvas; keep top-left pure and clean.

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.