Amber Embers

The canvas is a profound near-black (#080d14) punctuated by an expansive, fiery orange-amber glow rising from the lower background behind floating bento CTA cards. Foreground containers are layered dark glassmorphic slabs (#0c131a) with 20px to 24px rounded corners and subtle 1px translucent borders (#1f2937). High-contrast crisp white typography (#f8fafc) leads the visual hierarchy, paired with muted slate-blue secondary copy (#94a3b8) and hot orange accent buttons (#f95721). The layout splits neatly into an asymmetric CTA bento grid (wide primary conversion card on the left, stacked secondary proof cards on the right) anchored over a multi-column enterprise footer. Key observed values include a bright orange primary button (#f95721), 10px button radii, 20px card corner radii, and 12px pill badges.

1 张设计参考图

提示词信息
分享者	@Devault
模型	GPT Image 2.5
分类	定价与转化模块
数据集	stretchcloud · awesome-gpt-image-prompt-2.5

完整提示词

Design a dark-mode website section: deep obsidian surfaces warmed by low-horizon ember glows and precise cyan-teal diagnostics.

LAYOUT
The section is structured in two primary vertical bands: an upper CTA bento cluster and a lower enterprise footer. The bento grid splits approximately 58% to 42%, placing the large narrative CTA on the left and two vertically stacked feature teasers on the right. Below, separated by the glow horizon, sits a classic six-column footer containing brand identity, four navigation stacks, and a newsletter form.

PALETTE (use these exact hex values)
- #080d14 — Canvas Void: Deepest background base for entire viewport and footer canvas
- #0b1219 — Card Surface: Primary surface fill for floating bento CTA cards with slight internal teal-to-dark gradient
- #f95721 — Ember Flame: Primary CTA fill, brand logo accent, and luminous peripheral background gradient tint
- #0d3b3f — Teal Glow: Atmospheric wash in the top-right and bottom-right edges of the main hero card
- #1e293b — Card Border: 1px hairline stroke defining card edges against the illuminated background
- #f8fafc — Text Primary: Headlines, prominent card titles, and high-emphasis labels
- #94a3b8 — Text Secondary: Supporting paragraph text, footer links, and secondary CTA borders
- #64748b — Text Dimmed: Footer column overlines, copyright notices, and input placeholders
- #1d5353 — Teal Submit Button: Newsletter subscribe button fill in the footer

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px heading. Tracking -0.02em at display, 0.05em at caps overline. The typography relies on Inter (or equivalent clean grotesque) to evoke disciplined reliability and enterprise engineering rigor. The tight tracking on the 36px bold display heading creates authority, while high-contrast white text against the obsidian cards delivers effortless readability. Monospaced or uppercase micro-labels reinforce an infrastructure/observability tooling context.

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

DEPTH
Depth is created purely through ambient backlighting and hairline borders rather than drop shadows. Floating cards exist on level 1 (#0b1219) above a deep abyss, backlit by broad, soft radial orange gradients that bleed past the lower card boundaries. Subtle inner teal gradients in the card corners provide an illusory frosted volume.

IMAGERY
No photographic imagery is present; the visual drama is supplied entirely by abstract atmospheric light gradients (amber-orange and dark cyan). Monoline vector glyphs inside rounded hexagonal badges serve as the primary visual anchors for secondary cards. Any photorealistic imagery would clash with the hyper-clean synthetic SRE aesthetic.

SIGNATURE DETAIL — the thing that makes this design itself
The dramatic 'ember horizon' — an intense warm-orange light bleed emerging from behind the lower threshold of dark slate cards, counterbalanced by internal oceanic teal corner blooms. Misusing it means making the orange background solid or overly harsh, which destroys the cinematic glowing edge effect.

MUST
- Use a vibrant hot-orange (#f95721) strictly for the single primary conversion action and brand logo.
- Contain cards in 20px rounded corners with a discrete 1px border (#1e293b).
- Pair deep atmospheric background ember glows with rich teal interior card lighting for high-end contrast.
- Set kicker headers in uppercase 11px bold with generous letter-spacing (0.08em).

AVOID
- Do not use sharp 0px or 4px corners on bento cards; maintain a soft 20px radius.
- Do not flood large surface backgrounds with orange; use it strictly as light leak glows and CTA accents.
- Do not omit the 1px subtle hairline border around dark bento cards; without it they bleed into the void.
- Do not set footer links in pure white (#ffffff); reserve white for headings and interactive focus states.

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 Biofoundry

The canvas is anchored on an ultra-dark navy-black surface (#02050b) layered with a luminous horizon glow dividing the primary call-to-action from the structural site directory. Typography relies on a neutral neo-grotesque sans-serif rendered in pure white (#f8fafc) for high-impact display titles (48px) and a soft slate-blue (#94a3b8) for secondary narrative and navigational text. Vibrant electric blue (#1d6bf3) functions as the concentrated action color, isolated to high-intent pill tags, primary action triggers, and glowing vector iconography. Compact cards and inline code snippets utilize a slightly elevated surface (#070d18) with disciplined 1px borders (#162238) and subtle 8px to 12px border radii. A reader immediately registers the luminous horizontal seam at the fold, drawing the eye directly to high-trust credentials before descending into developer-grade utility.

定价与转化模块设计参考

Abyssal Defense

Built on an impenetrable canvas of deep void navy (#090d14), this interface uses darkness not as absence of light, but as an operational deep-sea medium. Color is deployed with surgical discipline: primary calls-to-action ignite in a radiant periwinkle-to-indigo gradient (#4f46e5 to #6366f1) while operational indicators flash a restrained coral-orange (#fb7185) against slate neutrals. The primary visual weight is anchored by an expansive 24px-radius CTA panel housing an autonomous submarine render sliced by a conical cyan spotlight. Typography balances a towering condensed grotesque wordmark in the footer with clinical, hyper-legible neo-grotesque sans-serif in the CTA lockup. Structural dividers and social pill buttons use faint 1px hairline borders (#1e293b) to define boundaries without interrupting the nocturnal continuity. Inline spacing is generous, keeping legal and navigational tiers legible and calm.

定价与转化模块设计参考

Abyssal Defense Matrix

The canvas is set on an ultra-dark navy surface (#030712 to #050b14) evocative of the deep ocean, establishing a high-stakes maritime defense atmosphere. Color is utilized strictly for status and strategic hierarchy: electric blue (#2563EB to #38BDF8) demarcates autonomous superiority, while muted red (#DC2626) badges identify legacy vulnerabilities against neutral slate typography. Primary typography is a clean, neo-grotesque sans-serif with tracked uppercase badges and sharp header contrast (44px display down to 11px micro-labels). Shapes rely on subtle rounded cards (radius: 16px) with hairline semi-transparent borders (#1E293B) and glassmorphic translucent fills. A reader immediately notices the highlighted autonomous column encased in a vibrant glowing blue frame beside an illuminated stealth submarine.

定价与转化模块设计参考

Aerospace Dark Spec

This interface pairs deep abyssal navy canvas (#040911) with electric cybernetic cyan accents (#19E0B2) to deliver a high-assurance defense and aerospace identity. The layout organizes a prominent enterprise conversion banner directly above a dense, multi-column navigation footer. A glowing 3D particle landscape wave acts as an atmospheric horizon separator between the CTA area and footer columns. Visual weight relies on bold, clean geometric display typography (around 44px) paired with sharp tabular figures (32px) and translucent glassmorphism cards framed by subtle semi-transparent borders (rgba(255,255,255,0.08)). Subtle cyan micro-accents highlight key conversion triggers like the primary booking button, monospaced eyebrow trackers, and inline trust indicators.