Astral Telemetry

The layout is grounded on a deep pitch-black canvas (#030712) hosting an intelligence-layer feature grid. Colour is strictly functional and restrained: each feature card possesses an ultra-subtle radial/conical ambient gradient glow in its top right or header area (electric blue, emerald green, warm amber) bounded by razor-thin borders (#1E293B). Typography leverages an ultra-clean geometric neo-grotesque sans-serif with distinct weight jumps from 400 body to 600 headings. Rounded rectangles (16px border-radius) encapsulate feature cells arranged in a balanced 3x2 grid with a spanning full-width banner docked beneath. Visual focus is drawn instantly to the top right ethereal luminescence wave and the dual-toned headline with its radiant blue highlight (#3B82F6).

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	UI components & grids
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a dark-mode website section: deep void glass panels illuminated by ambient spectral gradients and precise cybernetic micro-typography.

LAYOUT
Asymmetric hero split at top: left column anchors category badge, two-line display headline, and brief summary paragraph, balanced on the right by an organic ambient wave graphic. Below sits a rigid 3x2 grid of equal-height feature cards separated by 20px gaps. The layout terminates with a single full-width horizontal ribbon uniting hardware compatibility with the primary action.

PALETTE (use these exact hex values)
- #030712 — Pitch Black: Absolute background canvas behind cards, headers, and atmospheric glows
- #080D1A — Card Surface Base: Deep navy-black solid background base for cards before gradient overlay
- #1E293B — Border Subtle: Subtle 1px perimeter border on dark feature cards and footer pill
- #3B82F6 — Electric Blue: Key header emphasis, icon backgrounds, and badge borders
- #10B981 — Emerald Aurora: Ambient glow, taglines, and icon styling for autonomy engine card
- #F59E0B — Amber Luminescence: Ambient back-light and action micro-copy for analytics card
- #FFFFFF — Pure White: Primary hero heading, card titles, and high-contrast labels
- #94A3B8 — Muted Slate: Paragraph descriptions and secondary body copy

TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 20px heading, 48px display. Tracking -0.02em at display, 0.05em at caps badge. Disciplined, aerospace-grade precision driven by a modern grotesque typeface (Inter match). The high contrast between large, heavy display titles and crisp, low-contrast body text communicates mission-critical software reliability. Free drop-in alternatives include Geist and SF Pro Display.

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

DEPTH
Elevation is expressed strictly through subtle 1px border delineations (#1E293B) and varying degrees of internal atmospheric luminescence. No drop shadows are cast onto the base canvas. Depth originates from light sources trapped beneath the card surfaces.

IMAGERY
Abstract digital luminescence and ethereal particle light waves in cyan and electric blue sweep across the dark background. Visuals evoke high-speed telemetry and algorithmic flow rather than literal drone hardware photographs. Pure vector line-art icons housed in soft glowing squircles provide functional iconography.

SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of a monochromatic deep-navy card with a faint, localized spectral back-glow in one corner, capped by a punctuated three-word philosophy link ('Ingest. Stream. Monitor.'). It turns utilitarian API feature cards into an elegant command console.

MUST
- Keep card backgrounds predominantly black with only faint top-right atmospheric gradients.
- Use 16px corner radius consistently on all feature cards and bottom banner.
- Format tertiary card footers as punctuated three-word action chains (e.g. 'Plan. Adapt. Execute.').
- Restrain colored text strictly to the specific accent assigned to that card's domain.

AVOID
- Do not use high-opacity solid gradients; the card surface must remain deep void black.
- Never mix multiple accent colors within a single feature card.
- Do not drop default box-shadows or glow halos outside card border boundaries.
- Never make card borders thicker than 1px.

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

UI components & gridsDesign reference

Abyssal Defense Matrix

This design orchestrates a high-contrast defense tech showcase on a pure white (#FFFFFF) ground, pairing deeply saturated underwater hero media with ultra-pale tinted ancillary panels. The primary canvas divides into an asymmetric bento layout: a dominant deep-ocean card (#0A131F) occupying roughly 58% width, counterbalanced by a stack of three subtly tinted cards in lavender (#F9F8FD), arctic blue (#F4F9FD), and peach-blush (#FFF8F4). Typography relies on a neutral grotesque sans-serif with tight tracking and heavy display weights, accented by an uppercase tracking-widened purple eyebrow label (#6355D8). Micro-metrics are structured inside frosted glass capsules (rgba(255,255,255,0.08)) with fine borders on the dark hero, while stats in the bottom banner sit cleanly bordered by hair-thin dividers (#E2E8F0). The visual hierarchy commands attention instantly through the photorealistic submarine cutting through murky cerulean water with an illuminated frontal headlight beam.

UI components & gridsDesign reference

Aegis Airspace

Built on a muted light canvas of #f8fafc, this layout establishes hierarchy through an asymmetrical bento grid anchored by an ominous dark-slate spotlight card (#0c1527). Color is deployed almost entirely for information density rather than ornamentation, utilizing tactical cyan (#38bdf8) and safety alerts on the dark radar screen while keeping standard enterprise surfaces pristine white (#ffffff) with delicate #e2e8f0 borders. Typography is anchored by a high-contrast geometric sans display headline sized around 44px with tight tracking (-0.02em), flowing into disciplined 14px body and caption metrics. Cards share a consistent 20px corner radius, punctuated by pill-shaped taxonomy tags with a 999px radius and soft 12px squircle icon badges. What the viewer notices first is the high-contrast tension between the civilian enterprise white cards and the tactical military-grade radar visual inhabiting the primary card.

UI components & gridsDesign reference

Aegis Clinical

The canvas is an ethereal, faintly cool-tinted white (#f8fafd) with subtle blue undertones that instantly conveys clinical sterilization and enterprise reliability. Color functions as an instrument of authority: intense cobalt blue (#1e3a8a) commands attention across prominent numerical metrics, star ratings, and links, while high-contrast charcoal (#0f172a) grounds primary typography. Subtle pastels—specifically a soft lavender-blue (#eef2ff) and muted sage green (#ecfdf5)—delineate verification and categorization without visual clutter. Typography relies on a neutral grotesque sans-serif with tight negative tracking at display scale (42px) and crisp, readable 14px body text. The entire architecture sits on a rigorous grid of rounded rectangular surfaces (16px border-radius) floating with imperceptible, soft diffuse shadows. What a reader notices first is the overwhelming density of quantifiable credibility—large blue numerals paired cleanly with verified testimonial quotes.

UI components & gridsDesign reference

Aero Infra

The canvas is a sterile, clinical cool white gradient (#f4f7fc fading into #ffffff) that directly evokes refrigerated high-density server rooms. Color operates strictly as functional signal: deep navy-black (#0a0f1d) delivers typographic clarity, electric cobalt (#2f54eb) marks active infrastructure status, and eco-green (#22c55e) highlights carbon savings. Typography relies on a tight neo-grotesque sans-serif with aggressive negative tracking at display scales (-0.03em) down to crisp neutral utility at 13px. Spatial composition follows an asymmetric split layout: narrative evidence and metrics anchor the left 55%, while hardware server racks dominate the right with overlapping floating metric badges. Key observed values include generous 20px card corner radii, 12px pill badges, and razor-thin 1px dividers colored at #e2e8f0.