Design a light-mode website section: editorial tension of warm friction resolving into calm, mint-tinted clarity anchored by a deep slate foundation.
LAYOUT
The vertical composition moves through three calibrated phases: a centered editorial header stack with an overline pill badge; a horizontal comparative duality where a 35% width problem card transitions via a circular focal arrow into a 65% width solution card; and a heavy, dark-slate metric banner spanning the full grid base to anchor the argument.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Ground: Global background providing high key headroom for the comparative cards
- #FAF5F2 — Problem Surface: Subtle warm blush container for highlighting friction points and legacy friction
- #F0F7F4 — Solution Surface: Soft mint container denoting systemic relief, resolution, and future state
- #062E35 — Marine Slate Anchor: Deep grounding navy-teal for the metrics band and bridging transition button
- #D96B43 — Terracotta Warning: Muted orange for warning badge dot, problem icons, and category status indicators
- #228B58 — Emerald Resolution: Primary success green for checkmarks, feature stroke icons, and data metrics
- #111827 — Text Primary: Headings, titles, and high-emphasis metric typography
- #5A6578 — Text Secondary: Descriptive copy across problem descriptions and feature body paragraphs
- #94B5BC — Slate Text Muted: Secondary metric labels and captions inside the dark anchor footer
TYPOGRAPHY
Typeface Instrument Serif (or Playfair Display, Canela, Newsreader), weights 400. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 32px heading-lg, 44px display. Tracking -0.015em at display. The typographic character pairs intellectual high-craft editorialism with sharp modern SaaS utility. The display serif gives the impression of a thoughtful long-form essay or strategic memorandum, while the neutral sans-serif ensures technical density and dashboard metrics feel precise and effortless.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is restrained to a single critical instance: the mini-dashboard mockup inside the solution card, which carries a diffuse 0 12px 32px rgba(0,0,0,0.06) shadow to detach from its mint substrate. All other primary surfaces remain entirely flat, communicating structure through background hue changes and crisp rounded geometries.
IMAGERY
Photography is absent. Visual communication relies entirely on clean, line-based glyphs and a synthetic vector UI snapshot that serves as concrete evidence of platform capability. Avoid illustrative cartoons, 3D clay objects, or stock corporate headshots.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal 'Problem-to-Solution' polarity bridge: a warm peach friction card tethered to a mint relief card by a solitary, dark navy circle button straddling the dividing seam.
MUST
- Reserve the editorial serif font strictly for macro titles and main card headers.
- Maintain strict color temperature polarity: warm tints on the left, cool mint on the right.
- Center the dark #062E35 pivot arrow circle directly over the horizontal gutter between cards.
- Use hairline (1px or 1.5px) stroke weight for all category and feature icons.
AVOID
- Do not use high-saturation red for problem cards; only utilize muted warm peach (#FAF5F2).
- Do not apply drop shadows to the main problem and solution macro containers.
- Do not mix serif typography into UI elements, dashboard labels, or microcopy.
- Never replace the deep slate footer (#062E35) with a white container; the contrast anchor is essential.
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 中尝试 
