Design a light-mode website section: measured institutional serenity balancing stark diagnostic friction against automated algorithmic clarity on warm paper.
LAYOUT
The page flows from an ultra-restrained, centered hero statement (eyebrow, massive two-line serif headline, two-line muted subtext) directly into an asymmetric comparison grid. The grid allocates roughly one-third width to the Problem column (single-column stack of 4 items) and two-thirds to the Solution column (bifurcated into a 4-item capability list and an interactive live-dashboard preview).
PALETTE (use these exact hex values)
- #FAFBF9 — Off White Base: page canvas background providing warm, low-glare paper-like foundation
- #FFFFFF — Card White: card and nested widget background providing crisp surface contrast
- #133326 — Forest Slate: primary headlines, serif titles, and high-emphasis brand typography
- #2E6953 — Sage Pine: solution eyebrow, progress dots, sparkline graph, and status indicators
- #C8694B — Terracotta Ochre: problem eyebrow, alert icon badge, and friction iconography
- #FDF3EE — Peach Well: background fill for problem-state icon rounded square containers
- #EDF5F1 — Mint Well: background fill for solution-state icon rounded square containers
- #667073 — Slate Muted: subheadings, list item descriptions, and neutral structural labels
- #E5EAE6 — Subtle Stroke: card borders, horizontal dividing rules, and widget boundaries
TYPOGRAPHY
Typeface Newsreader (or Lora, Freight Text Pro, Canela Text), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 24px subheading, 30px heading, 48px display. Tracking -0.025em at display, -0.015em at titles. The type choice blends the intellectual authority of a vintage financial broadsheet with the crisp precision of a terminal. Newsreader provides literary gravity and institutional legitimacy in the headlines, while Inter guarantees uncompromised legibility for quantitative data points, steppers, and metrics. If substituting, choose Newsreader and Inter, or Lora paired with Plus Jakarta Sans.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly flattened and restrained. The primary containers sit planar on the #FAFBF9 ground with only a 1px border (#E5EAE6) establishing distinction. The lone elevated element is the nested quant preview card on the right, which casts a soft ambient diffusion (0 8px 30px rgba(19, 51, 38, 0.04)) to emulate a physical sheet resting atop paper.
IMAGERY
Avoid photographic stock or abstract 3D shapes. Imagery is strictly programmatic: high-fidelity miniature SaaS UI components, precise vector line icons (stroke width 1.5px), step-by-step pipeline indicators, and mathematical sparklines rendered in matching sage green palette.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric two-column comparison card pairing warm terracotta friction diagnostics against a deep forest green quant dashboard cockpit. Its strength relies on the stark emotional difference created purely through subtle pastel icon backdrops (#FDF3EE vs #EDF5F1) and literary serif headers without resorting to alarmist UI patterns. It fails if the column split is forced into an equal 50/50 ratio.
MUST
- Maintain strict 38% to 62% asymmetry between problem and solution cards to visually prioritize the resolution.
- Use Newsreader or similar literary serifs for display headlines, keeping them strictly in deep forest slate #133326.
- Render all icon containers as 42px soft rounded squares with exactly 10px corner radius.
- Separate card titles from row items with an ultra-light 1px horizontal rule in #E5EAE6.
AVOID
- Never use harsh primary reds for error states; rely exclusively on warm terracotta #C8694B.
- Do not introduce dark theme containers or saturated neon green accents into the quant cockpit preview.
- Avoid pill-shaped containers for feature icons; keep them strictly rounded squares.
- Do not set long-form body descriptions in serif type.
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. Try in DraPub 
