Ivory Control Plane

This interface relies on a warm, organic off-white canvas (#F8F7F4) that distances itself from generic cold-blue developer tools. Visual hierarchy is achieved through high-contrast deep charcoal text (#121A17) grounded against pure white container tiles (#FFFFFF) with faint borders (#ECEAE3). Color is deliberately throttled: a muted forest green (#204A3E) designates platform iconography and sage badges (#EBF1ED), while a single terracotta quotation mark (#DF5E37) provides the lone warm accent puncture. Spacing follows an orderly 8px base rhythm with generous 24px internal card padding and 12px border radii. A viewer first registers the high-density 12-partner logo array before moving to the precise tabular telemetry numbers in the upper right. The overall impression is clinical yet tactile, conveying security and architectural maturity.

1 张设计参考图

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

完整提示词

Design a light-mode website section: quiet infrastructural confidence expressed through warm alabaster surfaces, sage data pills, and calibrated enterprise monochrome.

LAYOUT
The page is structured as an asymmetric stack: an upper split-screen pairing header text on the left with a 3-metric row on the right; a 6x2 uniform grid of 12 boxed client logos; a centered inline quote flanked by dotted divider rules; and a 5-item horizontal bottom feature bar.

PALETTE (use these exact hex values)
- #F8F7F4 — Canvas Warm Alabaster: dominant page background providing organic warmth behind crisp white components
- #FFFFFF — Elevated White Surface: background fill for metric cards, logo tiles, and isolated modules
- #ECEAE3 — Subtle Cream Border: fine 1px perimeter outlines on cards, tiles, and faint dividers
- #121A17 — Charcoal Obsidian: high-contrast display headlines, metric numerals, and primary partner logos
- #646A67 — Muted Slate Olive: secondary descriptions, sublabels, telemetry captions, and attribution strings
- #204A3E — Deep Forest Slate: logo icon fill, section telemetry icons, and primary glyph accents
- #EBF1ED — Pale Sage Wash: low-contrast rounded square backdrops enclosing functional telemetry icons
- #DF5E37 — Terracotta Quote: singular high-warmth accent used exclusively for testimonial quotation mark glyphs

TYPOGRAPHY
Typeface Geist (or Inter,SF Pro Display,Plus Jakarta Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 20px subheading, 24px heading, 36px display. Tracking -0.02em at display, 0.08em at kicker. The typographic tone is authoritative, analytical, and modern enterprise-grade. Using a neo-grotesque like Geist or Inter provides geometric clarity in uppercase kickers and dense quantitative values, reinforcing platform stability.

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

DEPTH
Elevation is achieved entirely without drop shadows. Contrast relies on boundary lines (1px solid #ECEAE3) separating crisp #FFFFFF surfaces from the tinted #F8F7F4 canvas, maintaining a clean planar paper feel.

IMAGERY
No photographic imagery is present. Visual assets are strictly limited to vector-based monochrome client logos, geometric outline iconography, and clean tabular numeric glyphs.

SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of a warm alabaster background (#F8F7F4) with clinical 6x2 boxed monochrome logo tiles, punctuated by a solitary terracotta quotation mark centered on a dotted axis line.

MUST
- Keep canvas tone slightly warm (#F8F7F4) rather than using pure synthetic white or cool grays.
- Render all partner logos in uniform monochrome charcoal (#121A17) to maintain visual hierarchy.
- Use 1px subtle borders (#ECEAE3) rather than drop shadows for depth separation.
- Enclose operational utility icons in pale sage squircle containers (#EBF1ED).

AVOID
- Never introduce colorful partner logos; all company marks must be neutralized.
- Do not apply heavy blurred drop shadows; elevations must remain flat and border-defined.
- Never replace the warm ivory background with cool blue-tinted grays like #F1F5F9.
- Do not allow metric numbers to wrap or break onto secondary lines.

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.