Precision Release Ribbon

This interface presents a single, high-density utility announcement bar encapsulated inside an ultra-subtle rounded container. Set against a pure white #ffffff canvas, the component relies on a delicate 1px border in #e5e7eb with a radius of 8px to structure information rather than aggressive drop shadows. Color is strictly functional: an energetic #2563eb blue denotes both freshness in the pill badge and interactivity in the terminal text link; an emerald #10b981 outlines security compliance; and a warm amber #f59e0b dot anchors hardware authenticity. Typography is clean, set around 13px to 14px with varying weights—semibold for the release milestone and regular #4b5563 for secondary notes. A single 1px vertical hairline divider cleanly bifurcates technical compliance from agricultural social proof.

1 张设计参考图

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

完整提示词

Design a light-mode website section: a low-profile horizontal trust and release rail balancing micro-badges with enterprise compliance proof.

LAYOUT
The component functions as a three-zone linear rail across an expansive horizontal axis. The left anchor combines the 'NEW' pill, blue status beacon, and technical feature description in a continuous reading flow. The center-right cluster aggregates security credentials and domain-specific proof separated by a vertical divider. The right terminal terminates neatly with an action link and trailing directional arrow.

PALETTE (use these exact hex values)
- #ffffff — Canvas White: Background canvas and primary card container interior
- #e5e7eb — Card Border Gray: Structural 1px perimeter stroke and vertical metadata dividers
- #eff6ff — Badge Tint Blue: Soft tint background fill for the 'NEW' release badge
- #2563eb — Action Blue: Pill text, pulsing status beacon, and terminal navigation link
- #111827 — Text Primary: High-emphasis product name and version release milestone
- #4b5563 — Text Secondary: Feature descriptions, security credentials, and claim text
- #10b981 — Security Emerald: Stroke color for the SOC 2 compliance check-shield icon
- #f59e0b — Field Amber: Filled circle dot signifying operational deployment proof

TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body. Tracking -0.01em for body, +0.04em for caps badge. The typographic tone is understated, engineering-driven, and highly utilitarian, typical of developer and industrial telemetry platforms. The chosen sans-serif provides tall x-height and open apertures that keep 13px text razor-sharp. Inter or SF Pro Text perfectly maintains this crisp, legible authority without introducing display eccentricities.

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

DEPTH
Depth is purely flat and boundary-driven. The interface avoids box-shadows entirely, relying on a clean 1px border stroke (#e5e7eb) against the page surface to define its perimeter. Subtle layering appears only in the micro-badge, which uses a 5% blue tint fill (#eff6ff) to lift it gently off the white container.

IMAGERY
The design is non-photographic and relies on crisp vector iconography: an emerald outline shield with an embedded checkmark for compliance, and solid geometric circular color pips. Icons are line-weight matched at 1.5px to harmonize seamlessly with the 13px typography. Photo avatars or complex graphics would clutter the linear cadence.

SIGNATURE DETAIL — the thing that makes this design itself
The one-line synthesis of hardware metrics with enterprise compliance badges—bridging operational software release notes directly with a SOC 2 security icon and an amber hardware validation pip, all within a 52px floating pill-adjacent card.

MUST
- Keep container height strictly between 48px and 56px to preserve utility ribbon aesthetics.
- Use 1px border stroke #e5e7eb rather than heavy drop-shadows for container definition.
- Pair colored dots (amber, blue) strictly with neutral #4b5563 descriptor typography.
- Maintain a single horizontal row on desktop using flexbox with justify-content: space-between.

AVOID
- Do not add soft blurred drop shadows under the banner shell.
- Do not allow the text to wrap onto two lines within desktop viewports.
- Do not use dark background fills; the bar must breathe on clean white or near-white.
- Do not replace inline SVG icons with heavily colored solid badges.

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.