Design a light-mode website section: editorial hedge fund sophistication meeting organic maritime fluidity and precision financial data.
LAYOUT
The header sits pinned at the top with a tri-part distribution: logo left, center-aligned navigational list, and auth CTAs right. The hero divides the viewport diagonally: the upper-left holds the typography stack (eyebrow, massive two-sentence display headline, explanatory paragraph, dual CTA buttons, and bottom-left metric proof). The entire right and lower canvas is surrendered to the surging ocean wave image with interactive or annotated trendlines rising toward the top-right corner.
PALETTE (use these exact hex values)
- #f9f8f4 — Canvas Alabaster: Dominant background tint bleeding into the sky above the ocean wave
- #0d2629 — Deep Petrol Slate: Primary brand color used for display text, logotype, and primary CTA fill
- #307a82 — Foam Aqua: Mid-tone oceanic teal found in the wave body and diagrammatic icons
- #f6a147 — Alpha Ray Amber: Luminescent vector streak tracking the crest, indicating financial yield and outperformance
- #5e6966 — Muted Olive Grey: Subordinate body copy, navigation links, and small metric disclaimers
- #ded9cf — Subtle Border Stone: Borders on secondary button, metric circular badge, and subtle line dividers
- #ffffff — Pure White: Text inside primary dark CTA buttons
TYPOGRAPHY
Typeface Newsreader (or Iowan Old Style, Garamond, Frank Ruhl Hofshi), weights 400. Sizes 10px caption, 12px body-sm, 15px body, 28px subheading, 64px display. Tracking -0.03em. The voice is that of an elite sovereign wealth fund or high-frequency quant boutique communicating with academic clarity. Newsreader or a similar high-bracket serif gives the impression of prestige financial literature, while the crisp Inter body prevents it from feeling archaic. For reproduction, ensure the serif uses optical sizing if available to preserve razor-thin serifs at 64px.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1360px container, airy density.
DEPTH
Elevation is entirely planar and atmospheric, completely eschewing traditional drop shadows. Depth is generated organically through the contrast between the pale cream canvas and the deep photographic oceanic foreground. Controls sit directly on the background with razor-thin hairline borders (#ded9cf) or high-contrast flat fills.
IMAGERY
Imagery consists of hyper-detailed, slow-motion ocean spray and wave crest photography transitioning into luminous abstract data lines. Waves evoke momentum, liquidity, and power rather than tropical leisure. Clean vector trajectories with glowing apexes merge with sea foam; any generic 3D shapes, abstract glass balls, or standard stock office photography would violently break the motif.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious union of wild natural turbulence (the cresting ocean wave) and mathematical precision (the glowing golden yield line with pinpoint typographic flags 'Signal', 'Allocate', 'Outperform'). It works only when the data vector looks like it is naturally riding the physics of the wave crest. It is ruined if the chart line feels like an arbitrary overlay or if standard rectangular card frames trap the image.
MUST
- Use a serene, organic off-white (#f9f8f4) instead of stark #ffffff for the canvas.
- Pair a high-contrast literary serif display font with utilitarian, small-scale sans-serif UI elements.
- Anchor data visualisations directly into the photography to metaphorically represent market mechanics.
- Restrict button corner radiuses to a subtle 6px; never use full pill shapes for CTAs.
AVOID
- Do not use harsh geometric sans-serif fonts for primary headlines.
- Avoid bright generic SaaS blues; stay within deep petrol green and oceanic teal.
- Do not enclose the hero in dark mode boxes; keep the atmosphere luminous and open.
- Do not use sharp 0px corners or exaggerated >16px bubble radiuses.
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 中尝试 
