Cognitive Pine

The canvas anchors on a luminous, warm organic beige (#fbf9f4) that bleeds into a deep oceanic twilight texture across the upper edge. Typographic hierarchy is driven by a stark, deep forest-pine ink (#081d1a) used at 56px bold for the hero title, preventing the warm canvas from feeling soft or decorative. Color is deployed with surgical restraint: subtle mint sage (#e7f1ec) encapsulates metadata badges, while vivid signal emerald (#10b981) flags positive deltas and live system status. Spacing follows a modular 4px grid where the left promotional column breathes at 32px vertical gaps, directly juxtaposed against a dense, sub-12px metric dashboard preview. Sharp 12px rounded cards and micro-pill indicators create an unmistakable enterprise infrastructure vernacular.

1 张设计参考图

提示词信息
分享者	@Devault
模型	GPT Image 2.5
分类	首屏与背景
数据集	stretchcloud · awesome-gpt-image-prompt-2.5

完整提示词

Design a light-mode website section: tactile parchment warmth grounding an intensely technical ml observability engine with clinical green clarity.

LAYOUT
The hero uses an asymmetric two-column composition spanning 1360px max-width. The left side (approx 42% width) prioritizes vertical typography, two CTA buttons, a 4-column metric strip, and compliance badges. The right side (approx 58% width) holds a high-fidelity product dashboard anchored by a terminal-inspired workflow footer dock.

PALETTE (use these exact hex values)
- #081d1a — Deep Forest Slate: Primary heading typography, dark fill buttons, and sidebar background of the application preview
- #fbf9f4 — Parchment Cream: Primary light canvas background grounding the hero layout
- #566661 — Muted Pine Text: Body copy, supporting captions, and secondary table column labels
- #10b981 — Signal Emerald: Status indicators, positive metric lift percentages, and live telemetry badges
- #e7f1ec — Sage Mint Pill: Background tint for category badge pills and highlighted tags
- #e5e1d7 — Warm Hairline: Dividers, metric card outlines, and dashboard interior panel borders
- #ffffff — Pure Panel White: Interior dashboard cards and active table surfaces
- #dc7258 — Coral Hazard: Failure mode donut chart slice and negative correlation markers

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px subheading, 28px heading, 56px display. Tracking -0.03em on display, -0.01em on body. Plus Jakarta Sans delivers an engineered, no-nonsense confidence. Its geometry is clean enough for minute 11px table cells yet humanist enough at 56px to feel intellectual rather than purely mechanical. Inter or DM Sans serve as functional drop-in replacements if web font loading must be minimized.

GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 32px gaps, 96px between sections, 1360px container, comfortable density.

DEPTH
Depth is handled predominantly through surface contrast rather than layered shadows. The crisp white application preview floats off the warm cream background via a wide, faint ambient diffusion (0 20px 48px -12px rgba(8, 29, 26, 0.08)), while secondary interior modules stay dead-flat and demarcated strictly by 1px borders.

IMAGERY
A smooth organic atmospheric texture looms in the top-right perimeter, suggesting cloud cover or ocean currents without competing with the interface. The central visual subject is an exacting, functional vector representation of the product UI, never abstract 3D shapes or whimsical human illustrations.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-canvas juxtaposition: an organic warm parchment foundation hosting an ultra-dense, slate-teal technical console backed by an integrated step-pipeline dock. This layout is broken if the background is normalized to standard cold white or if the product screenshot is simplified into an abstract illustration.

MUST
- Anchor the headline in deep forest slate #081d1a rather than pure #000000 to retain organic harmony with the cream background.
- Pair micro-level technical density (11px-13px data tables) against grand display typography (56px) for maximum authority.
- Keep card strokes feather-light at 1px using warm hairline #e5e1d7 to blend effortlessly with parchment.
- Render all stat labels and badge kickers in compact uppercase with relaxed letter-spacing.

AVOID
- Do not swap the warm parchment canvas (#fbf9f4) for harsh stark pure white (#ffffff).
- Do not use generic vivid blue or bright purple accent tones anywhere in this system.
- Do not apply heavy dropshadows; rely on 1px warm border outlines to differentiate panels.
- Do not allow display headlines to break into center-aligned text; maintain hard left-alignment.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks.

在 DraPub 中尝试

看看同一视觉方向里的其他提示词。

返回提示词画廊

首屏与背景设计参考

Accretion Core

Set against a vast cinematic deep-space panorama, this interface positions left-aligned typographic clarity against a radiant golden accretion vortex on the right. The canvas transitions from pitch void (#060f1e) through layered turquoise dust clouds (#1a7895) to an incandescent stellar core (#ffe89e). Text hierarchy relies on stark contrast: headers command attention with 56px white weights, punctuated by a kinetic peach-to-magenta linear-gradient on 'what matters.'. CTAs mirror this astral heat signature using pill-shaped (radius 999px) sunset gradients, while secondary actions use subtle frosted borders (rgba(255, 255, 255, 0.25)). Supporting metrics anchor the lower quadrant with compact 22px stat lockups paired with hairline line-art iconography. The entire composition balances the unrestrained organic luminance of interstellar nebulae with clean, grid-locked functional product chrome.

首屏与背景设计参考

Adaptive Athlete Bento

The canvas is anchored on an immaculate white base (#ffffff) paired with an ultra-light grey surface layer (#f7f8fa) that carves out crisp modular compartments. Color functions strictly as semantic guidance: a distinctive digital iris (#5e52d6) powers primary actions and key brand phrases, while soft pastel badge fills segregate distinct user personas without visual competition. Primary messaging commands attention through a 56px high-contrast sans-serif paired with an expressive, editorial italic serif contrast line that brings human emotion into software. Components conform to strict curvature hierarchies, featuring 16px radius bento tiles, 10px functional buttons, and 999px pills for floating metadata. Dense statistics sit directly beneath hero copy inside a dedicated low-elevation floating card. A reader first registers the high-contrast display hook before naturally sweeping across the 5-card multi-persona bento grid on the right, punctuated by the lone deep slate tile (#151c28).

首屏与背景设计参考

Aegis Command

The canvas executes a severe dual-world contrast: an ultra-clean clinical white (#FFFFFF) presentation plane hosts bold editorial typography, while a recessed, perspectival dark-mode (#090D16) mission console dominates the right viewport. Hierarchy relies strictly on stark luminosity contrast rather than decorative fills, using vibrant cobalt (#1D68F2) for direct actions and tactical red (#EF4444) strictly for threat telemetry. Display type reaches a confident 56px in bold weights, contrasted against 12px uppercase tracking labels and low-contrast 32px secondary leadings. The interface employs tight structural rounding, from 6px on primary button controls to 16px on the floating console bezel. Metrics and status indicators are grounded by a 3-column baseline card with 1px hairline dividers (#E2E8F0) and miniature system health pings. A spectator first notices the photorealistic earth-orbit visualization tilted inside the console before registering the stark three-word headline.

首屏与背景设计参考

Aerial Stealth Horizon

The canvas is anchored on an ultra-deep black (#03070b) accented by rounded containment cards filled with subtly lifted charcoal-tinted surfaces (#080d14). Accent energy flows strictly through a vivid turquoise-to-mint gradient (approx #17a9e2 to #63e69f) reserved for critical primary CTAs and punchy headline statements like 'Costs less.' Typography is set in a clinical, geometric grotesk like Inter or Geist, prioritizing stark white-to-slate contrast ratios and balanced letter tracking. Cards and pills use generous 16px to 20px radii paired with hairline borders (#16222f) that dissolve into shadows. A user immediately notices the large photographic viewport depicting an autonomous bio-drone against a digital point-cloud terrain before descending into structured, telemetry-style metric tiles.