Design a dark-mode website section: binary problem-to-solution narrative framed in cold obsidian slate and electric azure luminescence.
LAYOUT
The layout is vertically staged with a centered header block (pill badge, display headline, supporting paragraph) occupying the top 35%. Below sits an exact 2-column comparative grid split 50/50, flanked by equal negative margins. The left card outlines operational debt, while the right card outlines automated capabilities and terminates with a 3-column metric shelf.
PALETTE (use these exact hex values)
- #060911 — Obsidian Deep: Global backdrop canvas absorbing all ambient reflections.
- #0b111e — Problem Slate: Recessed background fill for the inactive problem comparison card.
- #091322 — Solution Azure Trench: Elevated base surface for the activated solution card.
- #38bdf8 — Electric Cyan: High-priority hero typography highlight, directional arrow, and solution eyebrow tag.
- #0284c7 — Neon Core Blue: Luminous outer border and ambient drop-shadow surrounding the solution card.
- #182438 — Dormant Border: Structural stroke for problem card, inactive badge, and internal dividers.
- #ffffff — Primary White: Main headlines, card titles, and row heading labels.
- #94a3b8 — Muted Slate: Explanatory subtext, body copy, and secondary metrics metadata.
- #34d399 — Success Mint: Small confirmation checkmark glyphs on solution rows and footer.
TYPOGRAPHY
Typeface Inter (or Geist Sans,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 22px heading, 44px display. Tracking -0.02em at display, 0.08em at uppercase tags. The typography is clinical, confident, and developer-adjacent, utilizing Inter's tight geometric apertures and precise tabular figures. The voice relies heavily on dual-tone syntax highlighting in the display headline to cue the automated transition before body copy is even read. Substitutions must adhere strictly to modern neo-grotesque typefaces like Geist Sans or SF Pro.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 999px. Spacing on a 8px unit, 28px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through contrasting luminance rather than standard drop shadows. The background is a black void (#060911), the problem card is a flat recessed plate (#0b111e), and the solution card is brought forward via an active 1.5px cyan stroke and an atmospheric outer blur of cyan light (box-shadow: 0 0 40px rgba(56,189,248,0.12)).
IMAGERY
No photographic or illustrative imagery is present; the interface relies exclusively on linear vector iconography (stroke width 1.5px) framed inside rounded square backplates. Any photographic assets or 3D skeuomorphic renders would severely break the technical, software-native aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric luminance contrast: pairing an intentionally starved, border-muted problem container directly against an azure-haloed solution container connected by a floating center-axis arrow node. Misusing it by brightening the left card or muting the right border collapses the visual metaphor of automated transformation.
MUST
- Retain the split headline color convention to mirror the problem-to-solution narrative.
- Encase the solution card in a vibrant azure border while leaving the problem card completely matte.
- Use 11px uppercase typography tracked at 0.08em for eyebrows like 'THE PROBLEM' and 'THE SOLUTION'.
- Keep card corner radii consistent at exactly 20px.
AVOID
- Do not add glowing borders or saturated blue highlights to the problem card.
- Do not use colorful or solid filled badge pills for row status indicators; keep them faint outlines.
- Do not center-align the internal text of the comparison cards; body rows must remain left-aligned.
- Do not introduce warm hues (red, yellow, orange) for problem states; use low-contrast slate.
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 中尝试 
