Design a light-mode website section: an editorial split-screen confronting legacy chaos with crisp modern clarity through rigorous typography and dual-tinted states.
LAYOUT
The page opens with a centered editorial stack: pill tag, dual-line display headline with colored terminal clause, and explanatory paragraph. Below, the page splits into a bilateral comparison container (roughly 45/55 ratio) connected by a central directional arrow disc. Each panel positions descriptive feature rows alongside a concrete artifact (dark terminal vs. live workspace UI), concluding the solution side with a 4-column metric validation band.
PALETTE (use these exact hex values)
- #FAFAFC — Canvas Background: Global application page background providing a luminous, clean foundation
- #FFFFFF — Card Surface: Primary surface for problem and solution comparison panels and interactive previews
- #161B22 — Terminal Dark: Legacy code editor background representing obsolete manual workflows
- #2563EB — Brand Blue: Display headline highlight, primary transition anchor, and solution accents
- #D93856 — Problem Crimson: Eyebrow tag, icon glyphs, and failure outcome indicators for legacy pain points
- #FDF2F4 — Problem Crimson Tint: Background fill for problem icon chips and outcome warning banner
- #E6F7F5 — Solution Teal Tint: Background fill for feature benefit icon enclosures on the solution card
- #111827 — Text Primary: High-contrast headings, card titles, and primary numerical data points
- #525866 — Text Muted: Body copy, feature descriptions, and secondary metadata descriptions
- #E5E7EB — Card Border Neutral: Delicate 1px outer bounds separating structural cards from canvas
TYPOGRAPHY
Typeface Instrument Serif (or Newsreader, Tiempos Headline, Georgia), weights 400. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 20px subheading, 26px heading, 48px display. Tracking -0.015em at display. The typographical pairing creates an intellectual, high-end SaaS feel that balances editorial authority with technical rigor. The sharp serifs of Instrument Serif inject human craft, dignity, and confidence into what could otherwise be dry B2B messaging. Clean Inter typography handles technical dense data without causing visual fatigue or illegibility.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved primarily through layered structural borders (1px solid #E5E7EB) and slight atmospheric shadows rather than heavy drop shadows. The active UI cards inside the solution panel use an extremely delicate offset: 0 4px 12px -2px rgba(0, 0, 0, 0.05). The central blue transition arrow floats prominently above the gap with a soft 0 4px 10px rgba(37, 99, 235, 0.3) blur.
IMAGERY
Imagery avoids generic stock photography or abstract 3D shapes entirely. It speaks directly through functional software artifacts: a stylized code editor terminal showcasing brittle manual configs on the left, and hyper-detailed component mockups (kanban stage bar, deal drawer, AI suggestion chip, integrations stack) on the right.
SIGNATURE DETAIL — the thing that makes this design itself
The floating cobalt arrow disc (#2563EB) suspended at the precise intersection of the problem and solution containers. It functions as both a visual pivot and a narrative bridge, signaling immediate operational transformation from leftward manual friction to rightward automated elegance.
MUST
- Reserve the transitional serif solely for main hero headlines and primary card titles.
- Enforce strict 1px borders with softened neutral or pale-tinted colors on all floating cards.
- Maintain strict color polarity: crimson for problem definitions, cobalt and cyan for solutions.
- Use pill-shaped containers (999px radius) for metadata chips, badges, and category headers.
AVOID
- Never apply the serif typeface to button labels, navigation, or data tables.
- Avoid harsh high-contrast drop shadows; rely on hairline borders and soft ambient blur.
- Do not mix crimson warning tones into the solution card hierarchy.
- Never allow the comparison cards to merge into a single undivided monolithic 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 
