Design a light-mode website section: crisp clinical precision floating over misty alpine landscapes and translucent glass surfaces.
LAYOUT
The header sits at the very top on pure white with logo left, navigation centered, and action buttons right. The hero divides into an asymmetrical two-column layout: left column contains the kicker, two-line display headline, explanatory paragraph, CTA button pair, a four-item horizontal grid of stat cards, and security compliance badges. The right column showcases the scenic mountain imagery overlaid with the floating glass chart card connected vertically via dashed lines to a cascading series of process step pills.
PALETTE (use these exact hex values)
- #FFFFFF — Pure Canvas: Background base for the header and top hero canvas
- #F4F7FC — Atmosphere Wash: Pale blue-gray tint on card backgrounds and base hero overlay
- #4353FF — Electric Cobalt: Primary CTAs, accent headline text, active step fill, and sparkline stroke
- #3442E5 — Cobalt Hover: Interactive state for primary action buttons
- #101426 — Midnight Ink: Headlines, logo typography, and high-emphasis metric numbers
- #5E657D — Slate Steel: Subheadlines, card descriptions, navigation links, and badge text
- #8A92A6 — Muted Ash: Compliance badge icons, stat labels, and secondary footers
- #16A34A — Positive Green: Growth percentage badges (+23%) and positive metrics
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 36px heading-lg, 56px display. Tracking -0.025em for display, 0 for body, 0.05em for uppercase labels. The type choice is clean, surgical, and authoritative—a contemporary sans-serif like Inter or Plus Jakarta Sans. Its neutral geometry conveys engineering accuracy and clinical reliability, while the tight negative letter-spacing on display sizes ensures headlines feel punchy and impactful. The font can be seamlessly substituted with SF Pro Display or modern geometric sans typefaces without losing character.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using optical translucency rather than dense shadows. Cards float over the misty mountain photo using a combination of backdrop-filter blur (16px to 20px), a subtle white top-edge border shine (1px solid rgba(255, 255, 255, 0.8)), and a soft atmospheric shadow (0 16px 36px rgba(16, 20, 38, 0.06)). Elements closer to the user, like the active 'Payment posted' badge, feature richer gradients and sharper boundaries.
IMAGERY
A photorealistic panoramic alpine vista featuring snow-dusted, craggy mountain ridges, pine tree silhouettes, and atmospheric morning fog tinted in violet and pale blue. Digital matrix/code rain patterns faintly blend into the upper mountain mist to signal automation and software infrastructure. Imagery of clinical desks, sterile hospital corridors, or generic handshakes is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious integration of clinical fintech glass cards and a stepper path directly floating above an atmospheric alpine landscape. The dashed guide line linking the glass chart smoothly down to the gradient-filled 'Payment posted' milestone visually grounds complex automated billing into an effortless journey.
MUST
- Use semi-transparent white frosted glass (backdrop-blur: 16px) when placing cards over background imagery.
- Pair dark primary headlines with an electric cobalt (#4353FF) second sentence for branded emphasis.
- Keep card outlines subtle with crisp 1px luminous white borders against scenic imagery.
- Include dedicated micro-badges (+23%) with light green backgrounds to reinforce positive financial outcomes.
AVOID
- Never let the background scenic image extend with high opacity behind headline text.
- Do not use dark or opaque solid backgrounds on floating step pills or the chart card.
- Avoid warm colors like yellow, orange, or crimson; stick strictly to cobalt, cool whites, and slate.
- Do not use heavy drop shadows; depth must come from gentle diffused light (blur 24px, opacity 0.08).
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 中尝试 
