Design a light-mode website section: side-by-side editorial dichotomy translating operational drag into automated clarity through warm terracotta and crisp azure tension.
LAYOUT
The rhythm flows vertically from an introductory centered editorial text block down into a wide 50/50 dual-card layout. Each card is structured identically: status badge at top, followed by serif headline, a two-column body dividing feature bullets from a workflow diagram, and an anchored 3-column quantitative metric footer. The overall grid is contained within a 1200px max-width boundary.
PALETTE (use these exact hex values)
- #ffffff — Base Canvas: Outer background surrounding the central comparison block and header stack
- #fcfaf6 — Warm Before Surface: Background fill of the left-hand friction card
- #f4f8ff — Cool After Surface: Background fill of the right-hand solution card
- #c94a29 — Terracotta Status: Indicator dot, badge text, icon outlines, and impact metrics for the before state
- #1d5bd8 — Electric Cobalt: Checkmark badges, active workflow icons, section tags, and affirmative metrics
- #dff6ed — Resolution Mint: Fill for the final achieved workflow node in the after state
- #0f765e — Resolution Mint Text: Text and icon color inside the completed mastery state badge
- #111827 — Midnight Ink: Primary serif display headings, column titles, and bold list item headers
- #64748b — Slate Body: Secondary descriptors, workflow process steps, and subheaders
- #e2e8f0 — Subtle Border: Structural outlines for container cards, inner workflow modules, and connectors
TYPOGRAPHY
Typeface Newsreader (or Tiempos Headline, Charter, Source Serif Pro), weights 400/500. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 22px subheading, 40px display. Tracking -0.02em at display. The typographic pairing embodies high-end educational credibility through an editorial serif (Newsreader) married with the technological precision of a geometric sans (Inter). The serif headline brings humanist pedagogy and intellectual seriousness, while the sans-serif creates clean, utilitarian flowcharts. For production, substitute Tiempos Headline for display and Plus Jakarta Sans for UI.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is completely non-skeuomorphic, achieved without blur shadows. Contrast is generated purely through flat surface nesting: Level 0 white canvas frames Level 1 tinted macro-cards (#fcfaf6 and #f4f8ff), which in turn house Level 2 pure white workflow containers (#ffffff). A subtle 1px border outlines each boundary to maintain crisp vector delineation.
IMAGERY
The design relies entirely on programmatic SVG iconography and typographic diagrams rather than photography or 3D art. Icons use a unified 1.5px stroke weight inside lightly tinted, rounded square modules. Graphic elements resemble clean schematic wireframes and structural workflow maps.
SIGNATURE DETAIL — the thing that makes this design itself
The thermal chromatic polarity: paired, identically proportioned 24px rounded comparison cards where the warm terracotta parchment side represents legacy chaos and the icy cobalt blue side represents automated order, bridged by a central circular vector arrow. Misuse typically occurs by saturating the background colors too heavily, destroying the delicate editorial tint.
MUST
- Use Newsreader or equivalent high-contrast serif exclusively for main headings and card subtitles.
- Maintain strict chromatic separation: warm terracotta for friction, cool azure for platform resolution.
- Enclose internal step-by-step workflows in pure white containers to build elevation against tinted card grounds.
- Position the directional transition arrow precisely on the central axis between the twin cards.
AVOID
- Never introduce heavy drop shadows; depth must come strictly from tinted surface layering.
- Do not interchange font roles—never set step items or microcopy in the serif face.
- Avoid using bright crimson or emergency red for 'Before'; keep the tone terracotta/brick to preserve sophistication.
- Do not break the 2-column internal symmetry between features and flowchart diagrams within each card.
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 
