Orchestrator Pulse

The interface presents a floating dual-tier telemetry dock anchored on a light canvas (#f8fafc), combining an announcement banner with a high-density KPI proof strip. Hierarchy relies on high-contrast dark typography (#0f172a) against a stark white container (#ffffff) bound by a 1px border (#e2e8f0) and rounded at 16px. Functional pastels (such as #f5f3ff lavender, #eff6ff blue, and #ecfdf5 mint) isolate icon containers without visual clutter. Typography leverages a technical neo-grotesque sans, scaling from 12px subdued labels (#64748b) up to 26px stat displays. A crisp 1px horizontal rule cleanly bisects the top announcement tier from the bottom quantitative metric stack.

1 张设计参考图

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

完整提示词

Design a light-mode website section: clean precision metrics docked beneath real-time release signals, engineered for institutional clarity and enterprise trust.

LAYOUT
The component uses a stacked horizontal split-tier layout. The upper band holds news badges, update copy, external links, and the system operational status badge spaced with flex justify-between. The lower tier presents an evenly spaced four-column grid of KPI metrics terminated by a primary action button on the far right.

PALETTE (use these exact hex values)
- #f8fafc — Canvas Background: Outer canvas background providing low-contrast contrast for the elevated card
- #ffffff — Card Surface: Primary surface for the floating composite dock and metric card
- #e2e8f0 — Border Subtle: Card outline and horizontal dividing line between announcement and metrics
- #0f172a — Text Primary: Dominant text for headline news, metric numerals, and strong labels
- #64748b — Text Secondary: Supporting descriptions, metric captions, and peripheral metadata
- #2563eb — Brand Accent Blue: Primary action button background and text link interactive color
- #f5f3ff — Badge Violet Surface: Background fill for the 'What's new' announcement pill and task icon
- #6366f1 — Badge Violet Text: Text and icon tint for product release updates and task telemetry
- #16a34a — Operational Green: System status heartbeat indicator and cycle-time badge icon

TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, system-ui), weights 400/500/600. Sizes 12px caption, 13px body-sm, 14px body, 14px subheading, 26px heading. Tracking -0.02em for stats, 0 for body. The voice is analytical, confident, and enterprise-grade. Clean grotesque shapes from Inter provide legible numerals for figures like '1.2M+' and '< 2 min', while medium weights in secondary sizes prevent dense metadata from feeling overwhelming.

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

DEPTH
Depth is kept strictly minimal and utilitarian. The card hovers above the neutral canvas with an ultra-soft drop shadow (0 10px 25px -5px rgba(15, 23, 42, 0.04)) combined with a distinct 1px border (#e2e8f0) to maintain crisp boundary definition.

IMAGERY
No photographic imagery is present. Visual rhythm is generated exclusively via line icons housed within 44x44px rounded squares with light 10% opacity color fills.

SIGNATURE DETAIL — the thing that makes this design itself
The integrated dual-tier capsule: combining a top-line operational status and release alert with an immediate four-pillar KPI proof bar in a single 16px rounded white slab.

MUST
- Keep the top announcement row visually subordinate to the bottom KPI statistics.
- Use pastel fills (#eff6ff, #f5f3ff, #ecfdf5) strictly for icon squircle backgrounds.
- Align the bottom CTA button horizontally with the KPI metric units.
- Keep the card border minimal at 1px solid #e2e8f0 with 16px corner radius.

AVOID
- Do not use dark card backgrounds or aggressive dark borders on this dock.
- Never make the top announcement text larger than the 26px metric numbers.
- Do not drop the 1px interior divider line separating the two tiers.
- Avoid heavy drop shadows; keep elevation gentle and diffuse.

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.