Design a dark-mode website section: deep celestial azure gradients meet frosted glass intelligence for high-conviction wealth management interfaces.
LAYOUT
The top edge features a slim, airy 80px navigation bar spanning full-width with logo on the far left and pill actions on the right. The core hero is arranged in an asymmetrical two-column layout: the left 50% stacks category badge, massive display typography, supporting copy, dual pill buttons, and micro-features. The right 50% is occupied by an oversized, slightly tilted glassmorphic interface card that bleeds towards the right edge, terminating downwards into a grand sweeping concave white arc.
PALETTE (use these exact hex values)
- #070d2b — Midnight Indigo Base: Deep foundational canvas background color anchoring the top-left navigation and hero typography.
- #1658d9 — Atmospheric Cerulean: Mid-tone ambient blue illumination lifting the center and backing the glass display dashboard.
- #38bdf8 — Cyan Halo: High-intensity atmospheric fringe lighting projecting depth behind the floating glass panel.
- linear-gradient(90deg, #f05a48 0%, #fa7e61 100%) — Coral Sunset: Single high-contrast primary call-to-action button surface directing the eye immediately to conversion.
- #ffffff — Pure White Text: Primary headings, dominant metrics, logo mark, and lower foundation canvas.
- #9cb3db — Muted Slate Blue: Supporting descriptive copy, inactive navigation items, and subordinate financial labels.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px heading, 56px display. Tracking -0.02em at display, 0.01em at body. The typographic tone is authoritative, institutional, and meticulously modern, leveraging Plus Jakarta Sans or Inter for maximum clarity. The tight negative tracking (-0.025em) on the bold 56px headline conveys stability and technological refinement suited for wealth managers. The font is universally licensed and can be seamlessly substituted with SF Pro Display or Inter without altering the aesthetic.
GEOMETRY & SPACING
Corner radii — cards 24px, links 9999px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, airy density.
DEPTH
Elevation is achieved through luminous chromatic depth and optical frosted glass physics rather than standard drop shadows. A multi-stop radial azure flare sits behind a translucent 3D-angled slate that exhibits backdrop-filter blur and a 1px white rim light. Secondary UI cards overlap the primary glass layer with higher opacity and faint soft ambient color casting.
IMAGERY
There are no photographic portraits or lifestyle images in the hero canvas; imagery is entirely abstract and software-centric. The visual centerpiece is an ethereal, isometric translucent glass dashboard containing smooth vector gradient area charts and clean data rows. Any photography introduced in lower sections should adhere to clean, high-fiduciary, institutional wealth management themes without casual tech clutter.
SIGNATURE DETAIL — the thing that makes this design itself
The defining hallmark is the fusion of a glowing deep-sapphire atmospheric backdrop, a floating 3D frosted glass telemetry card, and a bottom upward-convex white horizon arc that cleanly slices into daytime corporate proof. This system loses its identity if the glass card is replaced by an opaque screenshot or if the bottom horizon line is flattened into a conventional straight boundary.
MUST
- Reserve the warm coral gradient strictly for the solitary primary conversion button.
- Render all dashboard mockups as thick, luminous glassmorphism with 1px translucent specular borders.
- Use pill-shaped 9999px geometry consistently for badges, buttons, and navigation pills.
- Maintain high typography contrast with pure white headings paired with muted slate-blue paragraphs.
AVOID
- Never introduce harsh solid gray or white card backgrounds within the blue hero field.
- Do not use sharp 0px or small 4px border radii; curves must remain generous (16px to 9999px).
- Avoid multi-colored data graphs; adhere to monochromatic violet-to-cyan gradient fills.
- Never replace the frosted glass UI card with a literal browser frame or device mockup.
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 中尝试