Design a light-mode website section: surgical fintech rails presented through contrasted problem-solution containers with architectural clarity.
LAYOUT
The top-to-bottom rhythm begins with a centered typographic header (eyebrow, high-contrast headline, and descriptive subtitle). The core section splits horizontally into a 35/65 asymmetric comparison: a compact problem list on the left pointing via a dotted transition arrow to an expansive, interactive architecture sandbox on the right. The page terminates in a unified, multi-column metric ribbon spanning the exact container width.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Pure: Primary surface background and solution card base
- #F8FAFC — Muted Well: Background fill for the problem container and tab tracks
- #0B1528 — Terminal Slate: Dark code editor background inside the architecture demo
- #2563EB — Rail Blue: Primary accent, brand title highlight, active badges, and Gravy node fill
- #0F172A — Text Primary: Headings, titles, metric values, and primary labels
- #64748B — Text Muted: Body copy, captions, and secondary status text
- #E2E8F0 — Border Subtle: Card borders, architectural connectors, and divider lines
- #10B981 — Success Emerald: Status confirmation badges and verified connector dots
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 24px heading, 32px heading-lg, 44px display. Tracking -0.025em on display, 0 on body, 0.08em on uppercase eyebrows. The typographic tone is authoritative, concise, and unapologetically technical. Inter (or Geist) provides neutral, neo-grotesque structural clarity, allowing dense financial-infrastructure data to be consumed effortlessly without stylistic distraction.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is strictly planar and boundary-driven. The interface avoids diffused drop shadows entirely, relying instead on 1px #E2E8F0 stroke borders, surface contrast (e.g., #F8FAFC recessed panels versus #FFFFFF active cards), and the stark, deep inset of the #0B1528 terminal box.
IMAGERY
Iconography is purely vector and mono-line (1.5px stroke weight), rendered in neutral dark slate or brand cobalt blue. There is zero photographic imagery; the visual weight is carried by architectural schematics, code payloads, and precise UI representations.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric 'Problem vs. Solution' split-card paradigm, where a muted passive card points directly through a horizontal dotted ASCII-like arrow into an expansive white architectural canvas with an embedded code editor and service node tree.
MUST
- Use uppercase, widely tracked (+0.08em) 11px eyebrows directly above major card headings.
- Style the left 'problem' container in a muted grey background to visually downgrade it against the solution.
- Anchor key solution phrases and hero names using the high-voltage cobalt blue #2563EB.
- Maintain a 1px solid #E2E8F0 stroke on all white interactive cards and architectural nodes.
AVOID
- Do not use heavy drop shadows; rely entirely on 1px borders and surface fill contrast.
- Do not make the 'problem' card visually dominant over the 'solution' card.
- Avoid colorful background gradients; keep the background stark white and technical.
- Do not mix rounded pill tabs with sharp rectangular cards—maintain cohesive 8px to 20px 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. Try in DraPub 
