Cyan Synapse

A high-density developer platform CTA and footer section anchored on an obsidian-teal canvas (#050B0B). Visual hierarchy relies on luminescent color temperature: pure white (#FFFFFF) commands hero titles, transitioning into a muted sage tint (#9BB59D) for emphasis, while technical metadata uses vibrant mint (#52C876) and desaturated slate (#8B9E9B). The split-hero layout juxtaposes high-level agent deployment messaging against a real-time API code execution card with a 12px border radius and discrete execution step telemetry. Spacing adheres to a strict 8px rhythm with generous 64px component gaps and a 1200px container width. Readers immediately register the bioluminescent point-cloud particle wave separating the marketing narrative from the code terminal.

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 dark-mode website section: hyper-technical dark canvas ignited by bioluminescent particle waves and restrained emerald developer ergonomics.

LAYOUT
The upper section splits evenly into a 50/50 two-column hero layout with left-aligned marketing copy and a right-aligned code terminal window. Below a 96px vertical breather sits a comprehensive multi-column footer comprising brand identity, four navigation categories, and an inline newsletter subscription card. The page terminates in a single-row copyright and legal metadata bar separated by generous negative space.

PALETTE (use these exact hex values)
- #050B0B — Obsidian Canvas: Deepest background layer across hero and footer zones
- #091212 — Terminal Surface: Background fill for the terminal preview container and newsletter field
- #152424 — Teal Wireframe Stroke: Fine 1px border stroke around cards, tabs, and input containers
- #236548 — Emerald Base: Background fill for the primary CTA button
- #52C876 — Electric Mint: Newsletter submission button, success badges, and brand icon bars
- #FFFFFF — Optic White: Dominant headlines, primary button label, and active tab headers
- #9BB59D — Sage Whisper: Accented headline suffix ('in minutes.') creating soft focal shift
- #8B9E9B — Slate Sage: Body copy, inactive terminal tabs, and footer navigation links
- #4E6360 — Deep Muted Pine: Copyright text, disclaimer notes, and terminal line numbers

TYPOGRAPHY
Typeface Geist Sans (or Inter, system-ui, sans-serif), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 52px display. Tracking -0.03em at display, 0 at body. Geist Sans paired with Geist Mono communicates low-latency engineering excellence and production readiness. The tight negative tracking on the display headline conveys precision, while the monospace accents lend credibility to code examples and metadata tags. Inter and JetBrains Mono serve as direct open-source alternatives.

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

DEPTH
Elevation is achieved through light emission rather than cast shadows. Cards sit slightly brighter than the canvas (#091212 against #050B0B) bounded by a 1px stroke (#152424), illuminated from behind by a soft cyan-to-emerald radial particle diffusion.

IMAGERY
Abstract mathematical particle mesh rendered as an organic point-cloud wave transitioning from emerald green into cyan. No stock photography or figurative illustrations; visuals represent data flow, vector embeddings, and agent orchestration.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-zone terminal preview card showing real-time execution logs (spinners, checkmarks, millisecond latencies) positioned immediately over a bioluminescent cyan wave. Recreate this by docking a secondary telemetry list inside the bottom of the code container with faint horizontal rules.

MUST
- Use pure white solely for primary titles and active interface triggers.
- Split long headlines into white and sage (#9BB59D) to control reading cadence.
- Apply subtle 1px teal strokes (#152424) around cards to separate them from the void.
- Keep code snippets authentic with realistic payload latency telemetry.

AVOID
- Do not use generic drop shadows; rely on background glows and fine border strokes.
- Never set secondary text or footer links in pure white.
- Do not let the particle background obscure code card readability or headline contrast.
- Avoid bright saturated primary greens on large surface areas—keep them restrained.

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.