Design a light-mode website section: haute-couture serif typography meeting translucent glassmorphism bathed in ethereal chromatic light refraction.
LAYOUT
The page follows a classic asymmetrical hero split. The left 55% contains typographic hierarchy (headline, explanation, paired CTA buttons, and 3 metric items), while the right 45% houses an interactive workflow visualization embedded in a radiant vertical aurora gradient.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Dominant background canvas providing maximum contrast and airy negative space
- #0F1728 — Obsidian Slate: Primary headline text, brand logo, and primary call-to-action button fills
- #525866 — Slate Muted: Body copy, supporting explanations, and inactive navigation anchor items
- linear-gradient(100deg, #6366F1 0%, #A855F7 35%, #EC4899 65%, #FB923C 100%) — Prismatic Spectrum: Accent gradient for hero italic headline text and right-hand aurora ambient lighting
- #E2E8F0 — Border Subtle: Hairline 1px border on secondary outline buttons and divider elements
- #10B981 — Success Emerald: Status indicator dot denoting completed operations inside the flow card
TYPOGRAPHY
Typeface Instrument Serif (or Editorial New, Canela, GT Super Display), weights 400. Sizes 11px caption, 13px body-sm, 14px body, 18px body-lg, 24px subheading, 72px display. Tracking -0.025em. The voice balances literary heritage with algorithmic precision. The high-contrast editorial serif evokes trusted financial institutions, while the clean Inter-like sans brings modern, technical clarity. Use Instrument Serif or Editorial New freely as primary display faces.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 32px gaps, 96px between sections, 1280px container, airy density.
DEPTH
Depth is achieved through optical glassmorphism rather than dark drop shadows. Translucent surface layers (rgba(255,255,255,0.65)) with backdrop-blur filters sit suspended above a luminous chromatic field, framed by delicate semi-transparent white specular border strokes.
IMAGERY
Visual assets consist of radiant, vertical iridescent light streams mimicking northern lights or sheer satin refraction. Photography is deliberately avoided in favor of clean mathematical light fields and pristine simulated software UI.
SIGNATURE DETAIL — the thing that makes this design itself
The singular design move is the italicized keyword rendered in an iridescent violet-to-coral linear gradient within an otherwise authoritative black serif headline, mirroring the chromatic light curtain in the graphic.
MUST
- Pair high-contrast editorial serif display headlines with functional neutral sans-serif body copy.
- Restrict prismatic gradient effects to specific italicized keywords and luminous atmospheric graphics.
- Use backdrop blur with subtle white borders (rgba(255,255,255,0.7)) on floating UI panels.
- Maintain substantial whitespace around the headline to let large serif forms breathe.
AVOID
- Never apply the rainbow gradient to standard body text or structural borders.
- Do not use heavy drop shadows on cards; rely on glass opacity and soft blur layers.
- Avoid sans-serif headlines; the editorial serif is essential to the brand prestige.
- Do not crowd the three metric proof points below the CTA buttons.
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 中尝试 
