Design a dark-mode website section: enterprise risk infrastructure cloaked in deep atmospheric blue-green gradients and refined editorial typography.
LAYOUT
The layout is strictly stacked and vertically disciplined. At the summit, a self-contained hero CTA card floats with generous horizontal padding, containing a centered two-tier headline and twin action buttons. Below this hero, the canvas drops into an expansive 6-column footer grid spanning brand narrative, four navigational stacks, and a right-aligned newsletter capture. The page concludes with a slim, horizontal baseline legal strip separated by a hairline divider.
PALETTE (use these exact hex values)
- #070b13 — Canvas Midnight: Foundational dark background for the page canvas and lower footer columns
- #0e2a6d — Atmospheric Indigo: Deep blue gradient stop anchoring the left flank of the floating CTA container
- #133e38 — Alpine Pine: Deep spruce-teal gradient stop anchoring the right flank of the floating CTA container
- #3b82f6 — Electric Cyan Glow: Primary action button background and localized ambient drop-shadow illumination
- #9ee5c5 — Mint Glint: High-contrast action fill for the newsletter submission arrow button
- #f8fafc — Text Crisp: Primary headings, brandmark text, column headers, and primary button labels
- #94a3b8 — Text Muted: Descriptive copy, input placeholders, social icon strokes, and CTA body text
- #475569 — Text Dimmed: Footer directory link list items, subtext disclaimers, and copyright text
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, Playfair Display, EB Garamond), weights 400. Sizes 12px caption, 13px body-sm, 14px body, 15px body-lg, 15px subheading, 18px heading, 40px display. Tracking -0.015em. The typographic voice blends institutional gravitas with hyper-modern venture tech. The editorial serif headline introduces academic rigor, actuarial precision, and board-level stability, while the geometric sans-serif delivers clean computational efficiency across all utility interfaces. The pairing signals that this is not a playful toy, but critical enterprise infrastructure.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through ambient atmospheric luminescence rather than physical drop shadows. The floating CTA card emits a soft, diffuse multi-colored underglow that blends into the deep background canvas, suggesting back-lit glass sitting above a dark nocturnal plane. Inputs and minor elements rely on subtle 1px translucent borders with inset tonal shifts.
IMAGERY
The imagery is abstract, atmospheric, and deeply organic, depicting faint, misty mountain silhouettes bathed in nocturnal duotone lighting. The textures are fine-grained and fog-drenched, evoking natural risk, scale, and resilience. Cartoon illustrations, bright flat vector art, or literal stock photography of executives would critically disrupt this aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the dual-tone atmospheric horizon card, which transitions from deep midnight blue to misty alpine teal across shadowy terrain contours and projects that exact color split as an ambient underglow onto the canvas below.
MUST
- Retain the horizontal gradient transition from deep royal blue to dark alpine teal inside the CTA card.
- Use a refined transitional serif typeface exclusively for the primary CTA headline text.
- Apply dual-color diffuse underglow to the CTA card matching the blue and teal gradient distribution.
- Keep all footer column category headers bright white (#f8fafc) and their child links muted (#475569).
AVOID
- Do not use the serif typeface for UI labels, navigation links, or body copy.
- Do not make footer directory links white; this destroys reading hierarchy and overwhelms the layout.
- Do not remove the ambient outer glow from beneath the floating CTA container.
- Do not convert the CTA button shapes into full pills; strictly preserve the 10px rounded rectangle radius.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试