Split Horizon

This interface uses an unapologetic bipartite split canvas, anchoring technical infrastructure metrics in deep obsidian `#040711` before cutting sharply into an ultra-clean `#ffffff` testimonial basement. Color functions strictly as semantic status and hierarchy: an electric periwinkle `#5a7dfc` highlights high-conviction hero terms and quotation symbols, while a vivid emerald dot `#10b981` signals live production health. Typography is tuned for rapid developer scanning with tight negative tracking on display titles and wide numerical weights in metric headers. Component cards in both dark and light sections adhere to a shared 16px radius, unified by razor-thin 1px border lines. The immediate visual anchor is the horizontal metrics console floating over a subtle radial blue underglow `#1d4ed8` above the clean white horizon.

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 obsidian developer telemetry grounding an airy, crisp clinical testimonial surface directly below.

LAYOUT
The layout follows a strict top-down cadence spanning two opposing visual halves. It opens on dark mode: centered status pill, tight 2-line display title with accent word, centered paragraph, followed by a wide 4-column metric bar. It then cuts sharply to a light canvas hosting a 3-column grid of testimonial cards, concluding with a centered divider and wide sponsor logo strip.

PALETTE (use these exact hex values)
- #040711 — Void Canvas: Hero and metrics background canvas establishing technical gravity and focus
- #ffffff — Pure Basement: Lower half canvas providing high-legibility grounding for social proof and logos
- #090f1d — Console Surface: Background fill for the 4-column metric bar with 1px border
- #5a7dfc — Periwinkle Accent: Hero headline accent word and testimonial quote marks
- #10b981 — Live Emerald: Telemetry badge status dot indicating active system uptime
- #1e293b — Console Border: Hairline structural border on the dark metric console
- #f1f5f9 — Card Border Light: Soft perimeter definition for light testimonial cards and divider line
- #ffffff — Text Primary Dark: Display headlines and primary metric numbers on dark surface
- #94a3b8 — Text Muted Dark: Hero body paragraph and metric sublabels on dark background
- #334155 — Text Slate Light: Testimonial quote text and client brand logos

TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.03em at display, 0.05em at micro badges. The typographic tone is disciplined, engineering-first, and clinical. Neutral neo-grotesque forms (Inter or Geist) convey rigorous platform reliability, aided by tight -0.035em tracking on hero sizes that prevents airy casualness. If substituting, use Geist Sans or Plus Jakarta Sans to preserve the precise technical geometry.

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

DEPTH
Depth is delivered flatly and mechanically. The top hero relies on an atmospheric radial glow (#1d4ed8 at low opacity) bleeding behind the metric console, while cards themselves use no drop shadow, depending entirely on 1px borders (#1e293b in dark, #f1f5f9 in light) for structural separation.

IMAGERY
No photographic imagery is present. Visual representation is strictly schematic: developer icons (rocket, isometric cube, CLI prompt, users) encased in rounded squircle frames, alongside clean monochrome company logos and minimalist brand avatar glyphs.

SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the high-voltage horizon split: an engineering telemetry console glowing over deep obsidian immediately terminating into a bright, clinical white testimonial plain. Recreate it by placing a dark `#090f1d` bordered pill console with an ambient blue underglow directly above an unpadded `#ffffff` section cut. It is misused if blurred, graduated, or separated with decorative wavy divider SVGs.

MUST
- Maintain the razor-sharp transition between the dark obsidian canopy and the pure white testimonial canvas.
- Use periwinkle (#5a7dfc) strictly for highlighted headline nouns and typographic quotation marks.
- Keep all card containers at exactly 16px border-radius across both dark and light sections.
- Enforce uppercase 11px micro-copy with +0.08em letter spacing for metadata labels.

AVOID
- Do not blur or gradient-fade the seam between the dark and light canvas sections.
- Do not introduce filled solid background colors to buttons or testimonial quotation marks.
- Avoid heavy dark drop shadows on the light testimonial cards; rely solely on 1px borders.
- Never make the testimonial body text full black; use #334155 for reduced optical glare.

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.