Semiconductor Precision

This interface uses a deep void backdrop (#050914 to #070b19) framed by subtle, sinuous cyan particle fields traversing horizontally behind modular cards. Structure relies on a balanced dark palette where surface level 1 (#0b1220) is held in rounded cards (16px border-radius) with delicate stroke borders (#132138). Typography establishes clear authority: primary titles use clean off-white (#f1f5f9) while key emphasis shifts dynamically into vivid cyan-blue (#38bdf8 to #3b82f6) gradients. Metrics command attention with oversized 32px values in vibrant cyan or mint teal (#34d399), separated cleanly from their descriptions. Spacing adheres to an orderly 8px rhythm with generous 28px card padding and a structured 4-column metric grid above an expansive horizontal feature block.

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 tech dark mode with cyan neon glows, rigorous metrics, and micro-dot particle fields.

LAYOUT
The section is stacked vertically inside a max 1180px container with clear architectural cadence. At top: centered eyebrow badge, 44px display title with cyan accent second line, and a narrow 600px paragraph. Middle: an evenly balanced 4-column card grid (approx 270px width each) with 16px gutters. Bottom: an expansive horizontal summary card that unifies a primary copilot highlight on the left with a 4-column micro-feature checklist on the right.

PALETTE (use these exact hex values)
- #050914 — Void Canvas: deepest background surface across the section
- #0b1220 — Card Surface: container background for metric cards and horizontal feature panel
- #132138 — Card Border: 1px hairline outline defining card perimeters
- #131d2e — Divider Stroke: hairline separator dividing card qualitative content from quantitative metrics
- #38bdf8 — Glow Cyan: vibrant headline emphasis, metric data numbers, and icon backglows
- #2563eb — Electric Cobalt: gradient partner in headline text and badge backgrounds
- #34d399 — Emerald Mint: metric callout text for risk reduction metric and badge icon
- #f1f5f9 — Primary Text: main titles, primary metric titles, and card headers
- #64748b — Muted Text: descriptive card copy, subheadings, and context captions

TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 18px heading, 32px heading-lg, 44px display. Tracking -0.02em at display, 0.05em at badge caps. The typographic tone is calculating, institutional, and highly technical, leaning on a neutral neo-grotesque sans-serif (Inter). It projects scientific certainty through concise, measured headings and large data readouts. Clean tracking and strict vertical hierarchy ensure dense technical language reads effortlessly.

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

DEPTH
Depth is created entirely through optical layering and luminosity rather than diffuse drop shadows. The deep black-blue void (#050914) hosts faint organic particle waves, over which matte charcoal-navy surfaces (#0b1220) sit defined by precise 1px borders (#132138). Soft ambient back-glows (box-shadow or radial-gradient) emanate only from active technical icons and key metrics.

IMAGERY
No photographic imagery is present; visual texture is supplied purely by a fine, wavy constellation of cyan-tinted micro-dots that sweep laterally across the dark canvas. Icons are strictly schematic line vectors (lightning, shield, focus reticle, currency node, and microchip). Any high-saturation photos or 3D glassmorphic renders would severely dilute the precision-engineering atmosphere.

SIGNATURE DETAIL — the thing that makes this design itself
The two-tier card structure: top qualitative statement (icon + title + explanation) cleanly separated by a hairline rule from an oversized quantitative proof stat (32px colored number + label). It makes marketing claims feel like rigorous lab results.

MUST
- Use exact 1px crisp borders (#132138) to separate dark cards from the dark canvas.
- Restrict vibrant cyan (#38bdf8) and teal (#34d399) to metric figures, glowing icons, and key words.
- Maintain strict horizontal division between qualitative benefit text and quantitative metric stats.
- Keep card corners consistently at 16px radius across both vertical cards and bottom banner.

AVOID
- Never use heavy drop shadows; depth is achieved via 1px borders and soft radial glows.
- Do not style all four metrics in different rainbow colors—stick solely to cyan and mint.
- Avoid bright white borders or thick lines; borders must stay below 20% visual luminance.
- Never fill card backgrounds with bright gradients; keep them dark and matte (#0b1220).

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.