Design a light-mode website section: editorial institutional finance colliding with alpine horizon vistas and luminous algorithmic wave overlays.
LAYOUT
The header spans 1280px with left logo, centered text navigation, and right utility actions. The hero adopts an asymmetric two-column composition: the left 55% hosts the editorial text stack, dual pill CTAs, and a 4-column metric grid; the right 45% opens into the alpine panorama with an elevated glassmorphic data card. Below the fold, a centered monochrome logo trust strip and security compliance row lead into subsequent feature sections.
PALETTE (use these exact hex values)
- #F9F9FB — Canvas Porcelain: dominant light page background providing contrast to text and metric cards
- #FFFFFF — Card Surface Pure: high-contrast container background for metric stat modules and base containers
- #111827 — Text Primary Obsidian: h1 display titles, primary metrics, logo mark, and critical headers
- #5B6476 — Text Secondary Slate: body description text, subheadings, nav items, and logo labels
- #5838E6 — Alpha Violet: eyebrow category text, primary button origin, and active metric accents
- #E96264 — Sunrise Coral: accent gradient endpoint applied to prominent verbs and visual data highlights
- linear-gradient(135deg, #5838E6 0%, #E96264 100%) — Alpha Horizon Gradient: signature gradient applied to primary CTAs and hero title emphasis word
TYPOGRAPHY
Typeface Canela (or Playfair Display, Instrument Serif, Fraunces), weights 400/500. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 28px heading, 56px display. Tracking -0.02em. The editorial serif evokes elite financial publications, academic quantitative rigor, and institutional capital trust. The clean modern sans-serif grounds the product in high-speed, contemporary autonomous execution. In production, Canela can be substituted with Fraunces or Instrument Serif without compromising the refined, intellectual tone.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created organically by the interplay between the crisp flat white cards in the foreground and the semi-transparent frosted HUD overlaying the deep 3D mountain landscape. Subtle ambient drop shadows (0 4px 20px rgba(0, 0, 0, 0.04)) separate light cards from the pale canvas, while the HUD uses 16px backdrop blur and a fine 1px white border stroke to sit over complex photo detail.
IMAGERY
A panoramic, sunlit alpine mountain range layered with luminous 3D light paths resembling fiber optics or quantum streamlines flowing through the valleys. The photo fades from high-detail rock faces on the right into clean white fog on the left. Grainy textures, generic stock trader imagery, or neon cyberpunk tropes are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal atmospheric fade from a clean, white quantitative dashboard layout directly into a majestic mountain peak traversed by ethereal computational energy lines. This bridges natural grandeur with computational intelligence, signaling monumental scale. Misusing it means hard-cropping the photo or removing the luminous alpha wave streams.
MUST
- Reserve the violet-to-coral gradient strictly for high-impact actions and key alpha terminology.
- Maintain high typographic contrast by pairing modern editorial serif headlines with ultra-clean sans-serif metrics.
- Blend the mountain scenic background seamlessly into the off-white canvas with a soft radial white-out gradient.
- Use pill radius (999px) for all action buttons to offset institutional stiffness.
AVOID
- Do not use dark mode across the primary canvas; preserve the crisp high-altitude morning aesthetic.
- Do not enclose the entire hero in a sharp-edged photograph box; always use feather blending.
- Never apply the gradient to body copy or standard secondary links.
- Do not use stark black (#000000) for text; use soft obsidian (#111827) to avoid harshness.
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 中尝试