Ethereal Clinical Trust

The canvas is a luminous, high-key ambient light surface (#FAFAFE) with imperceptible soft lavender atmospheric blooming at the margins. Color is deployed with surgical restraint: deep ink slate (#0F172A) commands primary typographic attention, while vibrant periwinkle-violet (#5E5CE6) isolates the brand focal points, including key title glyphs, badge icons, and verification pips. Typography deliberately pairs a literary high-contrast serif for the primary title with an ultra-neutral geometric grotesque for body clarity and logo monikers. The layout centers on a monolithic 2x5 logo proof grid framed in a 16px radius card bordered by a razor-thin 1px line (#ECEEF2). A disciplined vertical rhythm drops from pill badge to headline, to descriptive subtitle, through the proof matrix, and anchors with a four-node inline verification checklist spaced by delicate hairlines.

1 张设计参考图

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

完整提示词

Design a light-mode website section: calm editorial authority wrapped in soft periwinkle gradients and disciplined clinical grid structure.

LAYOUT
The rhythm is strictly vertical and centered within a 1080px max-width boundary. The eye flows from the floating 30px pill badge, to the 48px serif title, to the 2-line subtitle, landing squarely on the 2x5 symmetric logo matrix before resolving on the horizontal 4-point trust checklist.

PALETTE (use these exact hex values)
- #FAFAFE — Canvas Bloom: Outer background featuring faint cool-lavender atmospheric dissipation
- #FFFFFF — Card Pure White: Background fill for the central logo grid matrix
- #5E5CE6 — Brand Iris: Accent text on hero brand name, badge sparkle, and checklist checkmarks
- #F2EEFC — Badge Lilac Tint: Subtle low-saturation lilac fill behind the top pill badge
- #0F172A — Text Primary Slate: Primary headline text and main brand lockup typography
- #475467 — Text Secondary Muted: Supporting descriptive body paragraph beneath the main title
- #64748B — Text Subtitle Micro: Logo category descriptors and bottom check-list text
- #ECEEF2 — Grid Border Hairline: Delicate 1px outer frame and interior grid lines separating client logos

TYPOGRAPHY
Typeface Instrument Serif (or Newsreader, Tiempos Headline, Georgia), weights 400. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px heading, 48px display. Tracking -0.015em. The typographic pairing bridges classical medical authority and cutting-edge software intelligence. Instrument Serif invokes academic, established clinical prestige, while Inter delivers the cold, ultra-clean precision demanded by modern healthcare AI infrastructure.

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

DEPTH
Elevation is achieved through absolute flatness and border clarity rather than shadows. The white logo card relies on a crisp 1px stroke (#ECEEF2) against the faintly tinted #FAFAFE background to declare spatial separation, avoiding muddying drop shadows.

IMAGERY
There are no photographic assets; visual interest stems entirely from bespoke, geometric logo glyphs. Every logo icon is redrawn in a minimalist line or glyph style with unified stroke weights (1.5-2px) and a coordinated pastel-to-iris color vocabulary.

SIGNATURE DETAIL — the thing that makes this design itself
The harmonious recoloring and equal-weight normalization of 10 disparate institutional logos inside a single razor-thin bordered 2x5 white cell grid. Losing this disciplined homogenization would revert the interface to a cluttered, noisy generic partner bar.

MUST
- Recolor all client partner marks to share identical hue weights in soft coral, periwinkle, and slate.
- Keep internal logo grid boundaries to exactly 1px hairline border in #ECEEF2 without drop shadows.
- Maintain strict center alignment for the entire column stack from pill to footer checklist.
- Limit the serif typeface strictly to display titles, keeping UI and descriptors in crisp sans-serif.

AVOID
- Never display client logos in their native conflicting corporate brand palettes.
- Do not apply heavy drop shadows or glow effects beneath the logo container card.
- Avoid using serif font for body descriptions, badges, or client logo company names.
- Do not break the 2-row by 5-column grid into unequal cell widths or uneven padding.

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.