Design a dark-mode website section: dark b2b comparison canvas contrasting tedious manual vertical churn with streamlined horizontal automation.
LAYOUT
The layout is strictly symmetrical and centered around a two-column comparison section anchored beneath a centered header stack. The hero block features a pill badge, a massive 42px heading with key phrase colorization, and a constrained 600px subtitle. Below, two equal-width 560px cards sit separated by a 24px gap with a centered arrow badge. Each card follows identical vertical anatomy: badge/title header, workflow visualization body, and a structured summary footer.
PALETTE (use these exact hex values)
- #06080e — Void Canvas: Deep background surface for the whole comparison section
- #0e131b — Muted Container: Background for the obsolete/manual state container and its sub-elements
- #0a111a — Active Card Canvas: Background for the agentic automated container with heightened blue presence
- #131a24 — Sub-Surface Row: Fill for nested list items, metric cards, and terminal surfaces
- #38bdf8 — Agentic Azure: Highlight text, active badges, horizontal workflow nodes, and metrics
- #f8fafc — Primary Text: Display headings, card titles, key metric values, and primary labels
- #8897aa — Muted Slate Text: Subheadings, secondary step descriptions, and metadata
- #60a5fa — Terminal Code Text: Syntax highlighting in JSON payloads and key API values
- #34d399 — Success Mint: Excel app icons and payroll run completed verification badge
- #f87171 — Warning Coral: Risk icon and text highlighting error-prone manual steps
TYPOGRAPHY
Typeface Inter (or system-ui, SF Pro Text, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 42px display. Tracking -0.02em at display, 0 at body, 0.05em at caps. The typography communicates precision, software engineering rigor, and modern institutional trust. Setting the main copy in Inter delivers crisp legibility at small dense UI sizes, while the tabular monospaced code snippet grounds the product in tangible engineering reality. If Inter is unavailable, system fonts like SF Pro Text or Plus Jakarta Sans maintain the crisp technical posture.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, tight density.
DEPTH
Depth is created without box-shadow blurs, relying entirely on layered tone stepping and luminous 1px boundary strokes. The base canvas sits at #06080e, the outer cards elevate to #0a111a, and interactive elements sit on #111823. The right-hand card gains perceptual elevation through an azure border tint (#173656) simulating a soft back-glow.
IMAGERY
There is no photographic imagery or illustrative artwork; iconography and code samples serve as the visual meat. App icons mimic real desktop tools (green spreadsheet sheets, mail icons, bank pillars) rendered as crisp vector glyphs in 14-24px squares. Off-brand imagery includes 3D renders, generic lifestyle stock photography, or playful hand-drawn illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-direction structural metaphor: stacking the manual process into a sluggish, vertical dashed timeline while laying out the agentic process as a sleek, horizontal pipeline culminating in code execution.
MUST
- Highlight the core value word in the main headline with glowing sky blue (#38bdf8).
- Keep manual steps oriented vertically to suggest tedious step-by-step dragging.
- Orient the agentic steps horizontally to visually communicate continuous rapid pipelining.
- Use distinct glowing status dots inside the state badges (gray for Before, blue for After).
AVOID
- Do not use heavy drop shadows; depth must rely on 1px borders and surface tone differences.
- Do not allow the 'Before' card to use vibrant blue or cyan highlights.
- Do not omit the dashed connector lines between vertical manual steps.
- Never make the comparison arrow between the cards colorful; keep it neutral slate (#1c2432).
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 中尝试 
