Design a dark-mode website section: deep obsidian comparison decks illuminated by tactical cobalt glow and structured telemetry nodes.
LAYOUT
The page follows a strict symmetrical vertical hierarchy: centered section tag and headline on top, followed by an equally split two-column comparison arena in the middle, anchored by an edge-to-edge floating CTA banner below. Inside each comparison card, textual points sit on the left, funneling visually into mock application previews on the right.
PALETTE (use these exact hex values)
- #080a0f — Pitch Canvas: Root page background providing maximum cinematic darkness and contrast
- #0e131b — Panel Slate: Background fill for the primary comparison cards and CTA bar
- #151b26 — Inner Well: Nested cards, icon container fills, and mock UI inner elements
- #1c2331 — Border Subtle: De-emphasized card strokes and internal dividers on legacy side
- #2563eb — Cobalt Active: High-intent CTAs, positive status ticks, and active UI bounding outlines
- #1d4ed8 — Electric Border Glow: Prominent outline surrounding the 'After' showcase card
- #10b981 — Success Emerald: Indicator of high-impact metrics and positive outcome icons
- #f1f5f9 — Text Primary: Main titles, active headers, and prominent button labels
- #94a3b8 — Text Secondary: Subtitle paragraphs and section body descriptions
- #64748b — Text Muted: Sub-captions, legacy failure points, and inactive labels
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto, sans-serif), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 40px display. Tracking -0.02em on headings, 0 on body. The typography is clinical, authoritative, and enterprise-grade, evocative of aerospace or modern cybersecurity software. Inter or SF Pro delivers neutral legibility at small sizes for simulated telemetry, allowing the messaging to project efficiency and technical superiority.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through layered luminance rather than standard drop shadows. Elevated elements feature subtle top-down border gradients, inner ambient fills (#151b26) resting on dark deck surfaces (#0e131b), and a faint diffuse electric blue back-glow highlighting the winning side.
IMAGERY
Imagery consists exclusively of dark-mode UI previews, monochromatic CCTV camera feeds, and tactical vision overlays (blue bounding boxes, target reticles). Photography is strictly security/surveillance themed, rendered in low-contrast grayscale with digital metadata.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-state comparative framing where the right-hand card is bound in an electrified cobalt outline (#2563eb) with blue HUD overlays, directly outshining the muted, dotted legacy diagram on the left.
MUST
- Use a stark contrast between monochromatic muted greys for legacy and vibrant electric blues for modern tech.
- Frame complex UI previews in rounded 12px dark containers resembling hardware monitors or dashboard widgets.
- Give the active side a prominent outer stroke (#2563eb) while keeping the inactive side stroke dark and understated (#1c2331).
- Keep icon containers consistently sized (36px to 40px) with subtle rounded corners (8px to 10px).
AVOID
- Do not introduce light backgrounds or stark white panels anywhere in the layout.
- Avoid using saturated warm colors like bright red or yellow; use blue and green accents exclusively.
- Do not drop the 1px perimeter border on surface containers, as surfaces will blur into the base background.
- Never make the 'Before' legacy side visually brighter or more colorful than the 'After' section.
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 中尝试 
