Teal Immersion

This interface pairs an airy, pale-canvas call-to-action block with an authoritative, deep-slate footer anchored at #071E22. Ambient peripheral gradients in soft mint (#E6F5EE) and pale peach glow behind an assertive 48px heading, creating atmospheric depth without visual clutter. Colour functions strictly as navigational orientation and brand hierarchy: vibrant forest teal (#0B6E57) isolates primary actions and key brand tokens, while pale green (#38D499) serves as the primary accent for footer category headers. Shapes alternate between high-radius 999px pills for metadata badges and structured 8px rounded rectangles for interactive buttons and input fields. Readers immediately register the high-contrast dual-line heading before dropping into the dual CTA cluster and descending into the balanced six-column footer architecture.

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: luminous corporate clarity anchored by deep marine depths and focused emerald accents.

LAYOUT
The composition follows a strict top-down conversion cascade: centered micro-badge, oversized display title with dual-tone color, explanatory paragraph, dual-button action cluster, and a triad of checkmark assurances. Directly beneath this light zone sits the full-width deep-marine footer, organized in a 6-column grid featuring brand identity, four navigation stacks, and a newsletter capture box. A 1px horizontal rule (#13333A) separates the main footer from the bottom legal and copyright row.

PALETTE (use these exact hex values)
- #FAFCFB — Canvas Light: Main light background for the primary CTA section with subtle ambient glow
- #071E22 — Marine Footer Surface: Deep blue-green ground for the footer container and copyright divider area
- #0B6E57 — Forest Teal: Primary action button fill, input submit button fill, and heading brand highlight
- #34D399 — Mint Accent: Footer column headings, brand icon fill, and active footer link accents
- #EBF7F2 — Badge Mint Tint: Surface tint for the pre-header pill container
- #A7E8CD — Badge Mint Border: Delicate border stroke on the metadata pill badge
- #0F172A — Charcoal Slate: Dominant text colour for CTA headline and secondary button label
- #52656A — Subtle Slate: Explanatory CTA paragraph text and guarantee subtext labels
- #8EA3A6 — Footer Muted Sage: Navigation link labels, description paragraph, and legal disclaimer text in footer
- #0C292E — Footer Input Dark: Background fill for the newsletter email text field

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 14px subheading, 15px body, 18px body-lg, 20px heading, 48px display. Tracking -0.03em on display headings, -0.01em on body. The typography is clean, confident, and tech-forward, matching contemporary SaaS paradigms through geometric sans-serif shapes with circular counters and low stroke contrast. Plus Jakarta Sans or Inter balances authority with approachability, keeping the tone professional yet consumer-friendly. Display weights feel punchy due to tight negative tracking (-0.03em).

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

DEPTH
Depth is handled entirely without drop shadows. The system uses flat, crisp surface changes, contrasting the light CTA background directly against the deeply saturated #071E22 marine footer. Ambient radial color bleeds in the light section create an illusion of backlight without physical layering.

IMAGERY
This interface avoids raster photographic assets entirely, relying instead on clean vector glyphs, minimal geometric icons, and faint aurora-like ambient colour fields. Vector elements like the angled chevron brandmark and four-point sparkle badge icon are sharp and monolithic. Any illustrative asset must be geometric, clean, and restrained.

SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the crisp transition from a luminous, pale CTA canvas accented with subtle peach-mint aurora blooms directly into an immersive, ink-deep marine footer (#071E22) accented with bright mint category headers (#34D399). Replicating this requires retaining the precise contrast ratio between the two planes while keeping the shared teal accent tying both zones together.

MUST
- Keep the primary headline tightly tracked at -0.03em with Doomersion rendered in #0B6E57.
- Pair the primary teal button strictly with a solid white stroked secondary button on light backgrounds.
- Maintain the distinct two-tone horizontal divide between the light CTA area and #071E22 footer.
- Style all footer column category headers in #34D399 at 14px medium weight.

AVOID
- Do not use sharp 0px corners or exaggerated 24px+ roundings on actionable buttons.
- Do not set footer column headings in plain white or muted gray; they must use mint accent #34D399.
- Do not omit the arrow glyph from the primary demo button.
- Do not use dark backgrounds for the top CTA block; it must remain on #FAFCFB.

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.