Design a dark-mode website section: a deep space terminal contrasting disjointed developer friction with bioluminescent cyan velocity.
LAYOUT
The hero uses an asymmetric 50/50 split on desktop within a 1380px maximum container. The left side stacks release badge, display title, subtitle, dual CTAs, a 3-column micro-feature grid, and proof metrics. The right side features a dual-card comparison module connected by a central directional arrow node, anchored below by an integrations bar.
PALETTE (use these exact hex values)
- #06090e — Canvas Void: deepest background surface behind all hero content
- #0b101c — Panel Slate: background fill for comparison cards and bottom feature blocks
- #1a2538 — Border Subtle: structural 1px strokes enclosing panels and buttons
- linear-gradient(90deg, #38bdf8 0%, #4eedb8 100%) — Flow Gradient: headline highlight, primary CTA fill, and unified workspace accents
- #f43f5e — Chaos Magenta: subtle header tracking, timeline node rings, and particle spray for the fragmented card
- #10b981 — Success Emerald: live status indicators, checkmarks, and uptime dots
- #f8fafc — Text Primary: display headings, active navigation links, and primary card titles
- #94a3b8 — Text Muted: body copy, inactive nav links, and metadata descriptions
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, Geist Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 24px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, modern, and deeply technical, reminiscent of next-generation IDEs like Linear or Cursor. Clean geometric neo-grotesk letterforms give the marketing copy clarity, while JetBrains Mono injects strict engineering credibility into the mock workflows. If Inter Display is unavailable, Plus Jakarta Sans preserves the contemporary punch.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through luminosity and layered glass-like opacity rather than ambient shadows. Cards sit slightly elevated above the canvas using faint 1px borders (#1a2538) and internal linear gradient backdrops. Bioluminescent particle clouds cast soft radial glows behind panels to imply z-axis depth.
IMAGERY
Visual assets consist entirely of synthetic particle vortexes and precise vector wireframe iconography. The particle streams resemble bioluminescent fluid dynamics, rendered in crimson noise on the left and cyan-mint laminar flow on the right. Photographic imagery is banned except for circular 24px developer avatar proof stamps.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-stream comparison architecture: two vertical dossier cards positioned side by side, bound together by a directional transition pill, enveloped in opposing crimson friction particles and cyan velocity dust. Use it exclusively to visualize a paradigm shift from fragmented tooling to unified automation.
MUST
- Use semantic neon accents (rose for pain/latency, cyan/mint for speed/flow) strictly to convey state.
- Maintain high contrast by anchoring glowing ribbons against an unbroken deep-navy void (#06090e).
- Pair monospace 11-13px metadata with clean geometric sans display copy to sustain dev-tool authenticity.
- Keep hairline borders at exactly 1px with low opacity (#1a2538) to define spatial boundaries delicately.
AVOID
- Do not use broad flat drop shadows; use directional colored glow bursts and dark alpha scrims instead.
- Never apply high-saturation background fills to full cards; keep dark surfaces below 12% lightness.
- Do not mix rounded corners haphazardly; standardize on 16px for cards and 10px for interactive elements.
- Avoid generic lifestyle imagery; limit visuals to code syntax, flow diagrams, and particle streams.
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 中尝试 
