Precision Notification Banner

This component presents a hyper-focused, horizontally unified announcement and trust banner on an off-white #f8fafc canvas. Visual hierarchy is established through a crisp #2554d7 royal blue anchor for the primary version identifier, balanced by a vibrant #10b981 live indicator dot and muted #64748b descriptor copy. The container employs a gentle 16px corner radius encased in a hairline 1px solid #e2e8f0 border with no dramatic drop shadow. Typography relies on a precise, neutral neo-grotesque sans-serif with distinct weight tiers (400, 500, 600) scaled between 12px and 16px. The interface segregates product utility from social validation via an airy 40px vertical divider rule (#e2e8f0). A reader immediately notices the rhythmic shift from the left-hand sparkle badge into the overlapping 32px circular avatar cluster on the right.

1 张设计参考图

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

完整提示词

Design a light-mode website section: dual-purpose banner uniting product changelog broadcasts with micro social-proof metrics.

LAYOUT
The component is a single horizontal flex strip structured into three primary zones. The leftmost zone contains the 36px 'Update' chip followed immediately by the two-line release summary. The center is anchored by an airy 40px vertical divider rule. The rightmost zone houses the overlapping customer avatar group, followed by the two-line trust metrics, completed by a terminal right-facing chevron.

PALETTE (use these exact hex values)
- #f8fafc — Canvas Background: ambient matte background framing the floating notification bar
- #ffffff — Bar Surface: primary container background providing crisp contrast against the off-white page
- #e2e8f0 — Border Subtle: defines the container perimeter and the vertical divider separating content regions
- #2554d7 — Brand Blue: highlights changelog releases, interactive icons, and the dominant avatar bubble
- #eff4ff — Badge Tint: background fill for the leading update chip badge
- #10b981 — Live Indicator Mint: focal status pip separating version number from release highlights
- #0f172a — Text Primary: applied to primary headline text, feature bullet points, and social proof metrics
- #64748b — Text Muted: supporting subtexts, geographic coverage indicators, and sub-labels

TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto, Helvetica Neue), weights 400/500/600. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading. Tracking -0.01em at medium sizes, 0 at caption. The typographic tone is direct, modern, and pragmatic—characteristic of high-end B2B infrastructure software. Using Inter (or a clean system neo-grotesque) ensures legible rendering at 12px and 13px subtexts while keeping feature titles authoritative. Substituting with Roboto or San Francisco preserves the engineered, low-friction feel.

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

DEPTH
Elevation is achieved solely through surface-color variance and razor-thin boundary delineation. The pure white container sits flatly over the #f8fafc backdrop, framed by a 1px border (#e2e8f0) without blur, glow, or offset shadows. Visual depth within the bar occurs only through overlapping 2px white borders on the avatar discs.

IMAGERY
This interface avoids photographic or illustrative imagery, relying strictly on typographic iconography and abstract data representations. Graphic tokens are limited to a minimalist four-point sparkle vector, an emerald dot, avatar monogram disks, and a hairline chevron. Photorealistic headshots would disrupt the serene, abstract balance of the circular badges.

SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an active changelog notification with an integrated customer trust metric separated by a single vertical hairline. Most patterns isolate social proof to footers and updates to top banners; fusing both into one rounded container turns utility into persuasion. Over-styling with gradients or bold fills breaks the delicate engineering precision.

MUST
- Retain the clean 16px border-radius on the main container to match the soft-tech aesthetic.
- Use the vivid emerald dot (#10b981) specifically to bridge the blue release version and dark feature text.
- Keep the avatar overlap at exactly 8px with a 2px solid white outline separating each disc.
- Use hairline 1px dividers in #e2e8f0 to demarcate autonomous data blocks without fragmenting the container.

AVOID
- Do not introduce drop shadows; elevation relies entirely on 1px borders against the tinted canvas.
- Never substitute the vibrant status dot with an emoji or oversized icon.
- Avoid collapsing the avatar stack into a plain numerical counter; lettered discs create essential texture.
- Do not color the subtext in pure black; preserve #64748b to maintain optical hierarchy.

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.