Design a light-mode website section: academic rigor meets modern saas through deep botanical green, subtle graphing paper grids, and editorial italic serif contrast.
LAYOUT
The header block splits the canvas: left holds the tag and two-line contrast headline, while right holds descriptive body copy and paired CTA buttons. Below sits a balanced two-column grid pitting 'Before' against 'After'. Beneath the primary comparison rests a full-width horizontal trust anchor bar dividing four key architectural guarantees.
PALETTE (use these exact hex values)
- #FAFAF9 — Background Off-White: Main canvas background texture featuring a faint graph grid overlay
- #FFFFFF — Card Surface: Background fill for the comparison cards and floating elements
- #0F3D2E — Botanical Primary: Primary button fill, italicized header text, and positive confirmation glyphs
- #EBF4F0 — Botanical Mint Tint: Success icon background badges and decorative illustration layers
- #D96B43 — Terracotta Orange: Negative cross icons, warning badges, and before-state accent graphics
- #FDF1ED — Terracotta Pale Wash: Circular background badge for error/negative list markers
- #111827 — Slate Ink Primary: Primary titles, display lead-ins, and high-emphasis labels
- #5F6B7A — Slate Muted Secondary: Paragraph descriptions, list item copy, and secondary meta labels
- #E5E7EB — Subtle Border Line: Card borders, divider lines, and button outlines
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 22px heading, 38px display. Tracking -0.02em at display, 0 at body, 0.08em on tags. The typographic tone balances computational exactness with editorial credibility. The geometric sans provides clinical utility and speed, while the dark green literary serif italic injects academic pedigree and scientific validity. Google Fonts combinations like Inter + Newsreader or Plus Jakarta Sans + Instrument Serif replicate this tone accurately.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1180px container, comfortable density.
DEPTH
Depth is flattened and structural rather than elevated. No heavy blurred drop shadows exist; separation is established via 1px border lines (#E5E7EB) against the off-white grid canvas. Subtle floating graphic cards inside illustrations use soft multi-layered offset geometry rather than shadows.
IMAGERY
Illustrations are vector-based, clean, and diagrammatic. The left side uses fragmented pastel terracotta outlines and dotted paths; the right side uses stacked, mint-hued isometric cards with smooth motion trails and sharp four-point sparkle stars. Photorealistic or hyper-saturated 3D renders are entirely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone, dual-font hero headline: combining standard dark sans-serif text on line one with an italicized, botanical green serif on line two. This visual hinge directly manifests the transition from problem to polished scientific solution before the user reads a single bullet point.
MUST
- Always set the resolution line of display headlines in serif italic (#0F3D2E).
- Keep comparison cards balanced with equal height and matching 36px internal padding.
- Use pastel-tinted circular badges (#FDF1ED and #EBF4F0) behind list item status icons.
- Apply a fine mathematical grid pattern (opacity ~0.04) across the canvas background.
AVOID
- Do not use high-saturation red for negative items; stay strictly with warm terracotta (#D96B43).
- Do not apply drop shadows to comparison cards; rely entirely on 1px borders for separation.
- Never italicize the sans-serif primary headline; only the serif resolution line is italicized.
- Do not use sharp 0px corners; all surfaces must have smooth 8px to 16px radii.
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 中尝试 
