Kinetic Diffusion

This hybrid light-to-dark interface pairs crisp, white rounded cards (#FFFFFF) set on an off-white field with a midnight-black monolithic footer (#0D0D11). Typography is powered by a humanist, geometric sans serif with high contrast between crisp uppercase tracking (e.g., 0.12em eyebrows) and bold display headlines around 40px. Distinctive stippled halftone gradients in cerulean blue (#2563EB) and jade green (#10B981) give the product cards a tactile, computational atmosphere. The upper grid features a 2-to-1 asymmetrical split layout flanked by 12px to 16px rounded corners and gossamer 1px borders (#E5E7EB). The footer introduces high-density navigational columns, social iconography, and a dark-mode newsletter input finished with a vivid coral-red accent CTA (#EF4444).

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: granular halftone rings and muted pastel washes anchored by a deep obsidian technical footer.

LAYOUT
The composition is structured in two primary bands: an upper asymmetrical grid and a monolithic edge-to-edge footer. The upper section balances a large 2/3 width primary hero card against a stacked right column of two secondary cards. The bottom band is an expansive 6-column dark footer divided by a thin horizontal rule above the legal baseline.

PALETTE (use these exact hex values)
- #FAFAFC — Canvas White: Background base for the upper hero and feature card cluster
- #FFFFFF — Pure Surface: Background for primary and secondary feature cards
- #0D0D11 — Obsidian Ground: Primary surface for the comprehensive multi-column footer block
- #1D4ED8 — Cobalt Blue: Primary action buttons, prominent icons, and stipple ring graphics
- #F43F5E — Coral Spark: High-contrast action icon button in the dark footer newsletter form
- #0F172A — Deep Ink: Headline typography, major card titles, and dark logo mark
- #64748B — Muted Slate: Supporting descriptions, subtexts, and metadata labels
- #94A3B8 — Footer Muted: Column links and secondary copyright copy inside the dark footer
- #E2E8F0 — Card Border: Subtle 1px perimeter stroke framing cards and internal dividing lines

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 38px display. Tracking -0.02em at headlines, 0.08em on uppercase eyebrows. Disciplined, computational, and authoritative. A modern geometric neo-grotesque sans (Inter match) balances heavy headline cuts with open-aperture body styles and tracked uppercase labels that evoke technical infrastructure.

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

DEPTH
Elevation is purely flat and graphic, avoiding ambient drop shadows. Visual depth is established through 1px crisp borders (#E2E8F0), clean surface-level color contrast between the #FAFAFC base and #FFFFFF cards, and atmospheric depth from stippled halftone particle art.

IMAGERY
Abstract mathematical halftone orbs and diffuse watercolor gradient vignettes. Elements feature fine dotted rings and stippled gradients in cobalt blue and emerald green. Photographic stock or glossy 3D renders would completely break the identity.

SIGNATURE DETAIL — the thing that makes this design itself
The procedural stipple/halftone ring texture overlaid on diffuse pastel gradients within a clean white container card. It converts cold technical infrastructure themes into organic, generative visual proof. Misusing it as a plain solid radial gradient or over-saturating it eliminates the tactile printing-press quality.

MUST
- Keep all card corner radii strictly uniform at 14px with crisp 1px borders.
- Pair halftone stipple textures with soft, diffuse watercolor gradient washes.
- Use uppercase tracking (0.08em) for all card eyebrows and category headers.
- Transition completely to dark surface (#0D0D11) for the footer without rounded margins.

AVOID
- Do not use sharp drop shadows; cards rely on hairline 1px borders for definition.
- Do not introduce photorealistic imagery; maintain abstract procedural stipple textures.
- Do not round the footer into a floating card; it must bleed full width edge-to-edge.
- Do not exceed 13px for link labels in the dark footer.

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.