Design a light-mode website section: delicate pointillist marine biology suspended behind stark, frosted glass automation widgets on an ethereal light canvas.
LAYOUT
The hero uses an asymmetric two-column structure within a standard 1280px grid. The left column stacks metadata vertically: announcement pill, followed by a three-line 64px display headline, dual-sentence explanatory subtext, primary CTA pair, and a dual-metric proof tile at the bottom. The right column is entirely open for generative art, over which a self-contained 360px agent workflow card hovers near the lower-right baseline to create depth overlap.
PALETTE (use these exact hex values)
- #FAFCFF — Canvas Background: Base canvas underlay behind all content and generative pointillist artwork
- #0B0F19 — Deep Midnight: Hero headline, logo wordmark, and primary card labels
- #475467 — Muted Slate: Body copy, navigation links, and step-item descriptions
- #2B59FF — Royal Cobalt: Primary CTA fill, active step indicators, and accent badges
- #6497F8 — Marine Cyan: Mid-tone stippling and secondary illustration gradients
- #12B76A — Emerald Active: Live system status indicator dot on the agent card
- #E4E7EC — Subtle Border: Hairline 1px perimeter outlines on cards, pills, and secondary buttons
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,DM Sans), weights 400/500/600/700/800. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 64px display. Tracking -0.035em at display, -0.01em at body. The typography conveys authoritative modern engineering combined with approachable product simplicity. A geometric-grotesque like Plus Jakarta Sans or Inter provides sharp architectural legibility in the display weights, where negative tracking compresses whitespace to give 'The agentic hiring marketplace' immense physical presence. Body text is set at generous line heights (1.5) in medium slate to preserve calm readability against the active background.
GEOMETRY & SPACING
Corner radii — cards 18px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, airy density.
DEPTH
Depth is rendered organically via material translucency rather than traditional shadow stacking. Floating UI cards use an 82% opaque white layer backed by a heavy 16px backdrop-blur, accompanied by a whisper-light ambient occlusion shadow (0 12px 32px -8px rgba(16, 24, 40, 0.06)) and a 1px white-to-light-gray boundary line. This creates the illusion of polished glass planes suspended millimeters above an aqueous, particle-filled canvas.
IMAGERY
The imagery consists exclusively of an ethereal, highly detailed scientific stippling illustration of a pelagic jellyfish. Its anatomy is built from thousands of granular dots transitioning smoothly from pale ice blue to deep indigo. Stock photos, photorealistic corporate faces, flat cartoon vectors, or neon cybernetic visuals are strictly off-brand and would destroy the delicate, research-grade biological atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast between cold, precise enterprise software widgets and a hyper-detailed, pointillist marine biological illustration. The jellyfish artwork represents an organic, autonomous entity floating through deep water, mirroring the 'agentic' theme without resorting to cliché robot or brain motifs. Misusing this design entails swapping the stippled marine artwork for generic abstract gradient blobs or 3D icons, which destroys its serene, calculated elegance.
MUST
- Render the organic illustration with an ink-stipple or generative halftone dot pattern in graduated cyan to deep cobalt.
- Apply backdrop-filter: blur(16px) with an 80-85% opaque white fill to floating cards so background stippling subtly bleeds through.
- Use tight letter-spacing (-0.035em) on display sizes above 48px to keep the heavy title compact and punchy.
- Keep CTA buttons softly rounded (10px radius) rather than fully pill-shaped to differentiate them from announcement tags.
AVOID
- Never replace the granular stippling illustration with solid vector shapes, 3D clay renders, or flat corporate photography.
- Do not use harsh black drop shadows; elevation must rely strictly on translucent white backdrops and thin #E4E7EC borders.
- Avoid fully saturated pure black (#000000) for text; always use midnight navy (#0B0F19) to match the oceanic cool undertones.
- Do not give the primary CTA a gradient fill; maintain a pure, flat, vibrant royal blue (#2B59FF).
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 中尝试 
