Design a dark-mode website section: a stark passage from dark diagnostic friction to bright structured clarity.
LAYOUT
The layout is top-centered and horizontally anchored. A compact header cluster (pill, H1, two-line subhead) is centered at the top within a 720px column. Below, an asymmetrical split card occupies 1200px max width: approximately 40% dark problem panel on the left, 60% white solution panel on the right, linked by an overlapping center-point arrow token.
PALETTE (use these exact hex values)
- #050811 — Canvas Void: Global background canvas providing deep contrast for foreground comparison containers.
- #0b1220 — Problem Dark Surface: Background fill for the negative state container on the left.
- #0f192c — Problem Tile Surface: Individual pain-point card background inside the problem panel.
- #ffffff — Solution Bright Surface: Solid white primary card representing the resolved, clean product experience.
- #f8fafc — Solution Nested Surface: Nested telemetry dashboard background inside the light solution card.
- #1e293b — Problem Border: Subtle low-contrast framing around the dark comparison panel.
- #f43f5e — Friction Crimson: Icon glyphs, badge outlines, and warning labels for unmonitored failure states.
- #2563eb — Resolution Cobalt: Icon glyphs, checkmark badge, and positive telemetry chart accents.
- #f8fafc — White Primary Text: Display headings and primary body copy on the dark canvas.
- #94a3b8 — Muted Slate Text: Subtitle paragraphs and secondary pain-point descriptions.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 20px heading, 44px display. Tracking -0.025em at display, -0.01em at body. The typographic tone is architectural, rational, and authoritative. Using a tight neo-grotesque like Inter or Geist Sans with negative letter tracking (-0.02em) on headings delivers an engineering-grade tone suitable for developer tooling. Free substitutions like Plus Jakarta Sans preserve the clean legibility.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled via luminance contrast rather than traditional dropshadows. The dark canvas (#050811) recedes infinitely, the left card sits slightly forward with subtle borders (#1e293b), and the white solution card projects forward decisively via high luminance and an expansive outer neon glow in violet (#a855f7) and indigo.
IMAGERY
There are no photographic assets; visual storytelling relies entirely on synthetic UI artifacts. The solution card contains a high-fidelity micro-dashboard featuring a sparkline chart, tabular run logs, and percentage tags. Replacing this with photography or abstract 3D shapes would violate the product observability identity.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the radical polarity split: placing a dark-mode failure state directly beside an illuminated light-mode success state, conjoined by a directional connector circle. Misusing this pattern by making both cards light or both cards dark completely breaks the visual metaphor of emerging from operational darkness into total observability.
MUST
- Keep the left problem card distinctly darker than the white solution card to honor the polarity metaphor.
- Apply an ambient magenta-purple backlight strictly behind the white container, never behind the dark one.
- Ensure the rightward transition circle sits precisely on the overlapping boundary of both containers.
- Use identical 20px corner radii on both main comparison cards to maintain compositional parity.
AVOID
- Do not invert the colors by making the problem panel white and the solution panel dark.
- Do not omit the glowing rim on the transition circle, which prevents it from vanishing into the dark card.
- Do not use saturated yellow or green warnings inside the dark card; stick to muted crimson (#f43f5e).
- Do not add heavy drop shadows inside the white card; rely on flat nested surfaces and subtle borders.
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 中尝试 
