Civic Gradient

The interface sits on a luminous, ultra-subtle off-white background (#FAFAFC) that frames a high-trust policy technology narrative. Primary headings use an authoritative serif typeface in near-black (#0F172A), dramatically paired with an italicized, dual-stop gradient phrase transitioning from royal blue (#1E40AF) into vivid magenta (#D946EF). Below the headline and concise body copy, social proof is anchored inside a large, rounded container (#FFFFFF, 24px border radius) subtly elevated with an ethereal shadow and faint border (#F1F5F9). The logo matrix is arranged in a crisp 5x2 grid delineated by delicate interior hairline dividers (#F1F5F9). Supporting security guarantees sit quietly at the base with a teal badge (#0D9488) providing subtle institutional reassurance.

1 张设计参考图

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

完整提示词

Design a light-mode website section: stately institutional elegance brightened by an electric cobalt-to-magenta editorial italic flourish.

LAYOUT
The layout follows a centered vertical spine. It starts with a pill eyebrow badge, transitions to a two-line display headline and two-line explanatory paragraph, moves into an expansive 5x2 logo matrix enclosed in a single container, and finishes with an inline compliance reassurance line.

PALETTE (use these exact hex values)
- #FAFAFC — Canvas Background: Global page background providing soft, sterile warmth behind the white card
- #FFFFFF — Surface Card: Background for the main logo grid module and floating badge pill
- #0F172A — Ink Primary: Main serif headline text and high-contrast partner logo names
- #475569 — Ink Secondary: Subordinate body description and trust footer reassurance points
- #64748B — Ink Muted: Logo category subtitles, eyebrow text, and separator dots
- #2563EB — Brand Cobalt: Starting point for the headline italic gradient and primary brand accents
- #D946EF — Brand Magenta: Terminating hue for the signature display italic gradient
- #0D9488 — Security Teal: Verification badge background icon fill for compliance affirmation
- #F1F5F9 — Border Subtle: Card perimeter border and inner 5x2 grid column/row divider lines
- #EEF2FF — Eyebrow Tint: Soft pill fill behind the top category eyebrow badge

TYPOGRAPHY
Typeface Newsreader (or EB Garamond, Libre Baskerville, Times New Roman), weights 400/500. Sizes 10px caption, 11px body-sm, 14px body, 17px body-lg, 56px display. Tracking -0.02em. The voice is institutional, dignified, and contemporary. The serif headline brings governmental authority and intellectual weight, while the gradient italic accent introduces forward-looking tech dynamism. Newsreader or EB Garamond provide ideal public-service authority.

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

DEPTH
Depth is handled with exceptional restraint. The logo grid card is elevated using a soft, wide-dispersion shadow (0 20px 40px -15px rgba(15, 23, 42, 0.04)) combined with a 1px border in #F1F5F9. Everything else remains completely flat against the canvas.

IMAGERY
This interface avoids raster imagery and illustrative scenes completely. Visual interest is strictly derived from high-end typographic styling and abstract, geometric monochrome-to-duotone brand marks representing civic institutions.

SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the juxtaposition of an austere, institutional black serif headline with a sudden calligraphic italic phrase painted in a glowing cobalt-to-fuchsia gradient ('what's next.'). To execute properly, ensure the italic font has distinct calligraphic cursives and clip the gradient cleanly to the text fill.

MUST
- Retain the sharp contrast between solid near-black serif type and vibrant italic gradient script.
- Enclose client logos within a unified 2x5 grid separated only by hairline border rules.
- Render all logo typography strictly in tracked uppercase sans-serif with two distinct hierarchy sizes.
- Use soft drop shadows with large blur radius (30px+) and ultra-low opacity (3-4%).

AVOID
- Do not render the entire display headline in italic or gradient; reserve it solely for the trailing phrase.
- Never use dark borders or heavy outlines around logo grid cells.
- Avoid colorful, photographic backgrounds that undermine the sterile civic-tech authority.
- Do not show full-color illustrative brand logos; standardize them to geometric vector marks.

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.