Design a dark-mode website section: fiery dusk gradients meet ultra-clean developer terminal cards with high-contrast jet black precision.
LAYOUT
Two-column 50/50 hero grid within a 1280px max-width container. Left column contains eyebrow, two-tone display headline, descriptive paragraph, pill CTAs, and a horizontal triple feature-pill row. Right column stacks a massive interactive terminal sandbox above a three-part node pipeline architecture diagram.
PALETTE (use these exact hex values)
- #F97316 — Molten Orange Canvas: Dominant warm backdrop hue radiating through the center and right hero space
- #4F46E5 — Twilight Violet: Top-left atmospheric gradient origin establishing depth and color temperature tension
- #080C14 — Obsidian Base: Primary terminal card fill, primary CTA pill background, and stark headline contrast anchor
- #FF4500 — Active Node Glow: Outer focus ring and high-energy border glow around the central infrastructure node
- #22C55E — Neon Status Green: Live indicator dot and method protocol accents within the API terminal header
- #FFFFFF — Solid White: Hero headline top line, logo mark, primary CTA text, and high-emphasis labels
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, 0.08em at uppercase micro. Engineered, authoritative, and frictionless. Inter Display provides clean, geometric legibility that feels modern yet non-frivolous, while JetBrains Mono reinforces strict programmatic discipline and API robustness.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through atmospheric lighting rather than heavy drop shadows. UI elements float like frosted lens layers above a vibrant solar heat map, with only terminal cards and highlighted active nodes carrying subtle, focused neon glows (0 0 24px rgba(255, 69, 0, 0.35)).
IMAGERY
Abstract, vertical chromatic heat streaks resembling silk or laser curtain refractions. Photography, realistic humans, and generic 3D illustrations are strictly excluded in favor of high-fidelity code artifacts and crisp schematic system diagrams.
SIGNATURE DETAIL — the thing that makes this design itself
The stark headline color split (white text directly shifting into deep obsidian) set against an ultra-saturated sunset light-curtain gradient. This instantly bridges the gap between high-energy creative brand presence and serious, rock-solid developer tooling.
MUST
- Use pure obsidian (#0B0F17) for terminal containers and the terminal half of the headline to anchor the vivid background.
- Maintain high-contrast white text against the orange-violet radiant canvas for optimal legibility.
- Apply 999px border radii to all primary interactive button components.
- Utilize 1px subtle white borders (rgba(255,255,255,0.15)) on all frosted glass elements.
AVOID
- Never replace the dark terminal surface with a light background; it degrades developer trust and syntax clarity.
- Do not use sharp 0px corners on interactive buttons or structural architecture nodes.
- Avoid flat, single-color orange backgrounds; the atmospheric gradient from purple to crimson is critical.
- Do not drop the headline text color to medium grey—only white and pure deep obsidian are permitted.
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 中尝试 
