Design a dark-mode website section: dual-state comparison pairing cold charcoal friction with luminous emerald clarity.
LAYOUT
The layout follows a centered vertical progression: top category badge, followed by a bold two-line display headline with brand keyword highlight, and a centered two-line intro paragraph. Below lies a 50/50 two-column comparison grid, each column containing four stacked benefit rows beside an explanatory interactive illustration.
PALETTE (use these exact hex values)
- #080C10 — Canvas Dark: Deepest background underpinning the entire view and surrounding containers
- #0D1117 — Card Muted Surface: Background fill for the negative/before state container and neutral elements
- #131920 — Card Elevated Surface: Fill for nested icon badges and UI mock panel surfaces
- #3DD68C — Emerald Brand Primary: Highlighted text, checkmark badges, active glows, and positive card stroke
- #F0883E — Warning Accent: Subtle amber/orange tones within the fragmented constellation network and warning icon
- #FFFFFF — Text Primary: High-contrast headings, main titles, and core value metrics
- #8B949E — Text Secondary: Supporting descriptions, subheadings, and contextual body copy
- #484F58 — Text Muted: Subordinate captions, inactive navigation links, and borders
TYPOGRAPHY
Typeface Inter (or Geist Sans,Plus Jakarta Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 40px display. Tracking -0.02em at display, -0.01em at body. The typography is technical, analytical, and authoritative. Using a precise grotesque sans-serif like Inter keeps technical terms readable at 12px while delivering punchy visual weight at 40px display sizes. Clean geometric proportions emphasize engineering rigor and automated security.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous optical borders rather than drop shadows. The positive card floats via a translucent 1px emerald boundary and a very soft, low-opacity radial ambient glow. The background recedes into a deep void (#080C10), giving the comparison cards sharp silhouette clarity.
IMAGERY
No photographic imagery is present. Visual storytelling relies on schematic vector diagrams: an unbundled, dashed-line orbital node graph representing technical debt on the left, counterbalanced by a crisp, high-fidelity micro-dashboard interface on the right.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric dual-card polarity: pairing an intentionally subdued, desaturated pain-point container with an illuminated emerald container that uses both border-stroke and inner glow to signify resolution.
MUST
- Keep the negative (left) card strictly desaturated to let the emerald positive state command the viewport.
- Use a high-contrast 1px emerald stroke (#3DD68C) exclusively on the recommended solution card.
- Pair 40px display titles with a single colored keyword to clarify the value proposition instantly.
- Set feature icon wrappers to 40x40px with a 10px border radius and muted slate fill.
AVOID
- Do not add vivid red alerts to the 'Before' state; keep it desaturated and cold with minimal amber.
- Avoid solid heavy fills on badges; rely on hairline borders and delicate dark alpha backgrounds.
- Do not allow the two comparison cards to touch; maintain a strict 24px horizontal gap.
- Never use pure white (#FFFFFF) for descriptive body text; reserve it strictly for headings.
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 中尝试 
