Design a dark-mode website section: editorial serifs and technical precision emerging from a fiery desert dusk into pitch carbon.
LAYOUT
The page flows vertically from an atmospheric, centered CTA banner directly into an expansive transition band featuring the oversized brand name on the left and a live API snippet on the right. Below, a full-width multi-column footer organizes navigation across five distinct vertical tracks alongside an email capture form. The page closes with a minimalist horizontal utility bar separated by a hairline border.
PALETTE (use these exact hex values)
- #0d1114 — Carbon Black: Solid primary background for the bottom footer section
- #d95338 — Ember Coral: Primary action button fill, key brand accents, and category eyebrow headers
- #f5c3a8 — Sunset Peach: Termination hue for large logo gradient and radiant sun glow highlights
- #f6ede4 — Parchment White: High-emphasis hero headings, primary text, and active interactive elements
- #939ba3 — Muted Slate: Secondary copy, supporting paragraphs, and passive link items
- #1f252b — Border Charcoal: Fine structural divider lines and input element outlines
- #13171b — Input Charcoal: Input container fill for newsletter signup
- #76c893 — Code Green: Syntax highlight token within API JSON preview blocks
TYPOGRAPHY
Typeface Instrument Serif (or Playfair Display, EB Garamond, Bodoni MT), weights 400. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 24px subheading, 48px heading, 56px heading-lg, 180px display. Tracking -0.02em at display, -0.01em at heading. The voice balances high-end financial gravitas with cutting-edge engineering rigor. The high-contrast editorial serif suggests established wealth management, heritage, and trust, while the sharp mono and modern sans-serif provide the speed and precision demanded by developer-focused tools. Instrument Serif or Playfair Display are ideal matches.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through atmospheric lighting, gradient blooms, and luminous contrast rather than layered card drops. The sunset photo acts as a volumetric back-light, while UI elements sit directly on the black plane with hairline borders providing structural separation.
IMAGERY
A vast, dramatic landscape photography treatment featuring mountain ridges bathed in a low, brilliant golden-hour sun. The sky subtly blends organic atmospheric fog with a digitized vertical matrix code texture, seamlessly bridging physical reality with algorithmic technology. No human photography or generic abstract 3D ribbons.
SIGNATURE DETAIL — the thing that makes this design itself
The monumental display serif wordmark bleeding directly out of a mountain horizon into the footer, juxtaposed against an active, raw JSON API payload on the opposing side. It defines the brand's hybrid identity of classical wealth and modern machine intelligence.
MUST
- Anchor high-impact display headlines with a classic editorial serif like Instrument Serif or Playfair.
- Use warm ember-coral (#d95338) sparingly to spotlight key calls-to-action and column headers.
- Pair rich photography seamlessly with absolute black by fading image bottoms into #0d1114.
- Maintain strict 1px hairline borders (#1f252b) for structural grid segmentation and form controls.
AVOID
- Do not use generic vivid corporate blues or neon purples; keep warm amber as the sole dominant hue.
- Never add heavy drop shadows or skeumorphic bevels to input containers or buttons.
- Do not shrink the watermark brand logo; its oversized scale (~180px) is vital to the transition.
- Avoid sans-serif typography for primary hero statements; the editorial serif carries the prestige.
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 中尝试 
