Design a dark-mode website section: side-by-side dichotomy mapping manual friction to glowing automated calm through deep dark telemetry.
LAYOUT
The composition is structured symmetrically around a strong central vertical axis. A centered header stack (eyebrow, massive display headline, explanatory paragraph) introduces the premise. Below, a balanced two-column grid pits the 'BEFORE' paradigm directly against the 'AFTER' paradigm, matching step-for-step across headers, tag clouds, workflow pipelines, and telemetry evidence.
PALETTE (use these exact hex values)
- #08090e — Obsidian Void: Deepest structural canvas background behind all sections and cards.
- #0e111a — Graphite Elevation: Primary fill for comparison panels and nested sub-surfaces.
- #090b12 — Terminal Abyss: Recessed background for the code audit logs and terminal telemetry blocks.
- #1d2233 — Slate Perimeter: Dividers, outer card outlines, node strokes, and inactive connectors.
- #6366f1 — Violet Neon: The automated agent glow, primary success badges, and section eyebrow kicker.
- linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) — Electric Indigo Gradient: Highlighted central node card representing autonomous AI orchestration.
- #f87171 — Friction Coral: Before kicker tag, manual error chips, and warning alert icons.
- #ffffff — Pure Luminescence: Primary headings, step titles, metric values, and high-emphasis labels.
- #94a3b8 — Muted Mercury: Body copy, process descriptions, line numbers, and metric qualifiers.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Geist Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, rigorous, and technical. Plus Jakarta Sans provides clean, confident architectural modernism for enterprise credibility, while JetBrains Mono injects cold, machine-level precision into the accounting logs. System font fallbacks like Inter and Fira Code preserve this exact analytical voice.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through luminance hierarchy rather than traditional blurry drop shadows. The background sits at absolute void (#08090e), elevated cards sit at #0e111a with faint 1px borders, and telemetry blocks recess at #090b12. The only true lighting effect is the atmospheric violet glow radiating from the central AI agent card to draw focus.
IMAGERY
Iconography is strictly vector and line-based, rendered at 1.5px stroke weight inside squircle nodes. Visual glyphs represent precise software workflows: envelopes, down-arrows, grids, calculators, documents, sparkles, and shields. Photorealistic imagery, heavy illustrations, or 3D skeuomorphic assets are strictly excluded.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal squircle pipeline that juxtaposes interrupted, alert-ridden manual steps against a smooth, interconnected sequence centered around a glowing violet AI agent node. Misusing it involves making both rows equally glowing or omitting the connecting telemetry wires.
MUST
- Always preserve strict vertical alignment between parallel elements across the two comparative panels.
- Use semantic crimson #f87171 exclusively for manual friction, warnings, and error-state copy.
- Enclose terminal logs in sunken #090b12 surfaces with precise line-number gutters.
- Emphasize the autonomous AI node with an electric violet gradient and ambient blur shadow.
AVOID
- Do not introduce bright saturated backgrounds; keep the canvas grounded in deep obsidian #08090e.
- Never use green for positive states when indigo/violet #6366f1 carries the system's success semantic.
- Do not omit the connecting lines between the sequential pipeline workflow nodes.
- Never display the 'Before' card with higher visual luminescence than the 'After' card.
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 中尝试 
