Kinetic Obsidian

This high-performance SaaS feature overview sits on an ultra-dark navy canvas (#020914) subtly energized by a distant radial cyan backlight in the top-right corner. The layout splits into an asymmetric two-column architecture: a dominant narrative column on the left containing an oversized title (#ffffff), secondary bulleted benefits with rounded-rect icon anchors, and an expansive 3x2 grid of modular persona cards on the right. Hierarchy relies strictly on high-contrast white headers against low-contrast slate-blue body text (#8493a8) rather than garish fills. Cards are encapsulated in translucent dark panels (#051121) framed by 1px borders (#10253f) and generous 12px rounded corners, capped with subtle hairline horizontal dividers. A secondary bottom band grounds the section with key social proof metrics tinted in crisp electric blue (#38bdf8) and light spring green (#4ade80).

1 张设计参考图

提示词信息
分享者	@Devault
模型	GPT Image 2.5
分类	界面组件与网格
数据集	stretchcloud · awesome-gpt-image-prompt-2.5

完整提示词

Design a dark-mode website section: deep navy cockpit engineered for precision sports science, framed with sharp geometric cards and subtle electric glows.

LAYOUT
The layout features an asymmetrical split section with a 1:2 column ratio. The left column (spanning ~35% width) holds the section badge, display title, intro summary, and three micro-feature items terminating in a link. The right side spans the remaining 65% with a uniform 3-column, 2-row grid of cards. A horizontal metrics ribbon runs full-width below the grid, anchored by vertical divider ticks.

PALETTE (use these exact hex values)
- #020914 — Deep Space Void: Global dark base canvas underpinning all page content and layouts.
- #051121 — Panel Slate: Background fill for persona cards and icon backing containers.
- #10253f — Subtle Border Blue: 1px stroke defining cards, dividers, pill badges, and icon buttons.
- #ffffff — Pure White: Main feature display title and bolded card headings.
- #8493a8 — Muted Slate Blue: Descriptive body copy, subtext, and index tags.
- #38bdf8 — Electric Cyan: Interactive text links, prominent metrics, and technical line icons.
- #4ade80 — Bio Green: Secondary accent for metrics and select system icons.

TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 44px display. Tracking -0.02em at display, 0.05em on badges. The typography is technical, analytical, and authoritative. Using a tight, geometric neo-grotesque like Inter provides clinical readability suitable for biomechanics and enterprise performance monitoring, avoiding decorative flourishes.

GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.

DEPTH
Depth is created entirely through border strokes (1px #10253f) against faint surface elevations (#051121 vs #020914) rather than diffuse blur shadows. A wide-radius radial glow behind the top-right corner adds atmospheric perspective without compromising readability.

IMAGERY
This design contains no photography or photorealistic graphics. It relies purely on minimalist, dual-tone vector wireframe icons (dumbbells, shields, building outlines, stacked layers) drawn with 1.5px strokes in electric blue and soft green.

SIGNATURE DETAIL — the thing that makes this design itself
The card header format: a numbered rounded-corner badge ('01') on the far left mirrored by an electric cyan hairline line-icon on the far right, separated from body copy by a thin horizontal stroke.

MUST
- Use 1px borders (#10253f) to define interactive containers instead of dropshadows.
- Keep card background slightly elevated (#051121) relative to dark canvas (#020914).
- Maintain strict left alignment across headers, descriptions, and inline CTA links.
- Utilize crisp numeric index badges (e.g. '01') to establish scan order in grid cells.

AVOID
- Do not use saturated or bright solid fills for card surfaces.
- Avoid heavy drop shadows; depth is strictly outlined with dark metallic strokes.
- Do not mix rounded icon styles; preserve sharp hairline geometry (1.5px stroke).
- Never center text inside the use-case cards.

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.

在 DraPub 中尝试

看看同一视觉方向里的其他提示词。

返回提示词画廊

界面组件与网格设计参考

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.

界面组件与网格设计参考

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.

界面组件与网格设计参考

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.

界面组件与网格设计参考

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.