Design a light-mode website section: clinical fintech precision buoyed by dynamic cobalt dot vortexes and crystalline step cards.
LAYOUT
The hero layout follows a 12-column responsive grid: the left 5 columns host the badge, H1, body description, and CTA pair; the right 7 columns house the 4-step card sequence floating over the generative vortex. A 4-column stat bar spans the full 1280px width immediately beneath. The layout cleanly transitions at the fold into a rounded midnight-navy dark mode shell for developer documentation.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary light canvas background hosting the hero header and step sequence
- #051124 — Midnight Base: Inverted contrast surface for developer code terminal and lower product infrastructure
- #e2e8f0 — Subtle Border: Delicate stroke for step cards, outline buttons, and the metrics ribbon container
- #1d4ed8 — Primary Blue: Accent text, primary CTA button fill, active step labels, and primary metric figures
- #38bdf8 — Halftone Cyan: Ambient glow and particle dispersion within the background mathematical spiral illustration
- #0f172a — Deep Charcoal: H1 headline text, primary navigation links, step card titles, and dark mode base text
- #64748b — Muted Slate: Body copy descriptions, badge subtext, card descriptions, and metric labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px subheading, 15px body, 17px body-lg, 18px heading, 36px heading-lg, 56px display. Tracking -0.025em for headings, -0.01em for body. The typographic tone is authoritative, analytical, and uncluttered. Crisp geometric sans forms in tight tracking (-0.025em on display) convey high-frequency engineering and algorithmic rigor. Inter or Plus Jakarta Sans are optimal substitutes due to their tall x-height and technical legibility.
GEOMETRY & SPACING
Corner radii — cards 12px, links 9999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is deliberately minimal and suppressed. Components rely on crisp 1px borders in #e2e8f0 against white and faint blue gradient backdrops. Card depth is achieved through slight z-index layering above the generative halftone cloud rather than heavy CSS box-shadows.
IMAGERY
Imagery consists of mathematically generated halftone point clouds, moiré dot rings, and schematic line graphs with circular nodes. Diagrams are abstract, precise, and algorithmic, strictly avoiding lifestyle photography, 3D clay figures, or organic hand-drawn shapes.
SIGNATURE DETAIL — the thing that makes this design itself
The defining visual hallmark is the 4-step modular horizontal stepper cards linked by dotted flow arrows and backdropped by a generative, cyan-to-royal-blue halftone spiral vortex. It transforms complex backend financial aggregation into an accessible, deterministic assembly line.
MUST
- Retain the split headline treatment with black text on line one and royal blue (#1d4ed8) on line two.
- Use 1px border (#e2e8f0) around step cards and metrics banner to maintain optical separation.
- Keep circular step numbers (1, 2, 3, 4) enclosed in light-blue-tinted pills above card headers.
- Render metrics in bold royal blue (#1d4ed8) with slate-500 labels directly below.
AVOID
- Do not use dark or heavy drop shadows; depth is defined by 1px borders and soft 4px ambient blurs.
- Do not color the entire headline in blue; only the active focal phrase should be colored.
- Avoid fully saturated multi-color illustrations; use blue and slate monochromatic schematics.
- Do not make the metric numbers dark slate or black; they must be royal blue (#1d4ed8).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
