Design a light-mode website section: side-by-side dichotomy pairing pale warning sheets with a glowing deep-navy command center.
LAYOUT
The layout follows a top-down narrative hierarchy. A centered header stack leads with an overline pill badge, an oversized 44px statement headline, and an explanatory intro paragraph. Below sits an asymmetrical two-column comparative section: a compact 35% 'The Problem' container on the left, counterbalanced by a sprawling 65% 'The Solution' container on the right enclosing both feature bullets and interactive mock instrumentation.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Background: Outer page background framing the header and split comparison cards
- #FAFAFA — Problem Card Surface: Pale neutral base for the problem column with subtle warm undertone
- #080E1E — Solution Shell Navy: Deep rich navy backdrop establishing the premium tech atmosphere for solution
- #0F172A — Dark Console Surface: Internal nested dashboard card inside the solution panel
- #D94A38 — Warning Coral: Problem tag text, warning icons, and negative state highlights
- #FDECE8 — Warning Wash: Soft circular backdrops framing problem-oriented feature icons
- #34D399 — Success Emerald: Solution pill indicator, checkmark icon, and positive telemetry percentage
- #3B82F6 — Electric Indigo: Active step borders, icon glow tiles, and telemetry chart line gradient
- #0F172A — Text Slate Black: Main headlines and primary titles on light surfaces
- #FFFFFF — Text White: Primary typography, metrics, and labels inside dark solution container
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 28px heading-lg, 44px display. Tracking -0.02em at display, 0 at body. The voice is analytical, confident, and direct, characteristic of modern high-performance infrastructure products. A clean geometric sans like Inter or Geist provides ultra-legible numerals for KPI monitoring and crisp punchy headers. Heavy tracking reduction on large display headlines (-0.03em) lends authority without clutter.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created primarily through surface value juxtaposition rather than cast shadows. The light canvas (#FFFFFF) hosts an off-white tray (#FAFAFA) and a void-like dark navy capsule (#080E1E), which in turn nests a slightly lighter slate console (#0F172A). Internal borders with 1px hairline opacity (around 10-15% white or slate) deliver surgical separation between data zones.
IMAGERY
No photographic imagery is used. Graphic language is entirely synthetic, composed of clean outline pictograms (40px circular and rounded-square badges) and simulated software telemetry (node DAGs, sparkline graphs, tabular status chips). The UI illustration mimics a real-world observability console with high fidelity.
SIGNATURE DETAIL — the thing that makes this design itself
The split-atmosphere 'Problem vs Solution' card dichotomy, pairing a muted off-white warning list on the left directly against an expansive, neon-accented dark observability console on the right within a single comparison viewport.
MUST
- Keep the problem column visually narrower (approx 35%) than the expansive solution column (approx 65%).
- Pair salmon-tinted warning washes strictly with problem statements, never inside the solution side.
- Use dark mode exclusively inside the solution module to evoke precision developer tooling.
- Apply subtle 1px translucent borders (#FFFFFF14) on dark nested surfaces to create crisp definition.
AVOID
- Do not balance column widths 50/50; the solution requires expansive space for telemetry visualization.
- Do not use saturated yellow warning icons; stick exclusively to salmon/coral reds.
- Do not drop heavy multi-layered drop shadows on cards; depth is achieved via surface contrast and 1px borders.
- Do not allow dark surfaces to leak into the main canvas outside the solution container.
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 中尝试 
