Design a dark-mode website section: algorithmic darkroom glowing with warm amber precision against an organic nocturnal horizon.
LAYOUT
The hero uses a balanced two-column asymmetric split within a 1240px container: the left 45% houses the kicker badge, 56px headline, copy, and dual CTAs; the right 55% houses the code console accompanied by a vertical stack of three micro telemetry cards. Directly below this pair sits a full-width horizontally segmented trust bar. At the base, the dark nocturnal composition terminates against a razor-sharp mountain silhouette that introduces an inverted light-sand canvas section.
PALETTE (use these exact hex values)
- #0b0c0e — Void Black: Deep nocturnal canvas background for the entire hero section
- #14161a — Console Slate: Background fill for floating code cards, telemetry widgets, and trust banner
- #0f1013 — Console Recess: Recessed editor background within the code sandbox window
- #242830 — Hairline Border: 1px structural borders dividing cards, navigation items, and code headers
- #f59e56 — Amber Flare: Primary conversion button fill, third headline line, and featured metrics
- #2a1c12 — Amber Glow Subdued: Background tint for pill badges and subtle ambient glow backdrops
- #34d399 — Telemetry Emerald: Live status indicators and HTTP 200 OK badges in code display
- #ffffff — Pure White: Primary display text, active tabs, and prominent headline words
- #8e95a2 — Slate Steel: Secondary description copy, inactive code tabs, and meta labels
- #ece5dc — Warm Parchment: Transition surface for the secondary daylight section beneath the hero
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.02em at display, 0.08em at kickers. The type architecture delivers institutional rigor and developer credibility through high-contrast sans-serif weights paired with authentic monospace code. Display headlines communicate weight and certainty with tight negative tracking, while code snippets feel engineered and production-ready. Inter or Plus Jakarta Sans serve as ideal freely available typefaces, with JetBrains Mono handling terminal logic seamlessly.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved through luminous surface layering rather than drop shadows. Surface 0 sits in dark void black (#0b0c0e), elevated cards utilize a lighter slate (#14161a) framed by crisp 1px borders (#242830), and interactive sub-elements recess inward (#0f1013). Depth is reinforced by an atmospheric warm amber radial glow bleeding from behind the terminal windows.
IMAGERY
A dark, low-exposure photographic silhouette of sharp mountain peaks anchors the lower third of the hero, suggesting permanence, real-world data, and scale. The mountains subtly fade upward into nocturnal blackness, completely devoid of daylight except for an ambient orange horizon bleed. Cartoon illustrations, saturated 3D renders, or generic tech mockups would entirely break the serious financial-algorithmic tone.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-tone headline resolution ('Real-world edge.' in vibrant amber beneath two white lines) mirroring the live interactive code console that glows beside it against dark mountain ridges. It visually links human language promise to actual machine execution. It is commonly misused by highlighting too many words in color, causing the punchline effect to dissolve into visual clutter.
MUST
- Highlight only the final punchline of the H1 headline in amber (#f59e56) to maintain typographic hierarchy.
- Use 1px borders (#242830) around all dark cards to ensure definition against the deep background.
- Keep code snippets authentic with realistic syntax coloring, line numbers, and JSON response payloads.
- Place the green status indicator (#34d399) exclusively beside runtime operational text like 'LIVE' or '200 OK'.
AVOID
- Never make the entire headline amber; reserve color contrast strictly for the final focal phrase.
- Do not use harsh neon blues or purples; keep secondary accents strictly within amber, green, and neutral slate.
- Avoid heavy drop shadows; cards rely strictly on 1px borders and slight elevation differences.
- Never make the dark hero cards pure opaque black; use #14161a to avoid losing depth against #0b0c0e.
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 中尝试 
