Design a dark-mode website section: surgical enterprise security anchored by deep petrol oceanic tones, crisp typography, and high-contrast statistical proof docks.
LAYOUT
The view progresses from a light, airy hero container centered on an eyebrow badge, a 2-line display headline, a 2-line paragraph, and dual buttons. A horizontal 6-segment metrics dock serves as a physical bridge pinned between sections. Beneath, the layout expands into a deep, 5-column grid footer where column one commands lead capture and the remaining four host vertical taxonomy separated by hairlines, ending in a three-part copyright bar.
PALETTE (use these exact hex values)
- #04161C — Midnight Petrol: Dominant dark foundation for the footer container and newsletter module.
- #F9FBFA — Clean Canvas: Light hero background base providing high contrast for the main heading and buttons.
- #FFFFFF — Floating Card: Pristine white backdrop for the prominent enterprise metrics dock.
- #0E6255 — Deep Sea Teal: Primary CTA fill, headline accent phrase highlight, and active icon badge background.
- #136F63 — Vibrant Viridian: Newsletter subscribe button fill and interactive interactive accents.
- #E8F4F0 — Pill Tint: Soft sage background fill for the top eyebrow pill badge.
- #0B1924 — Midnight Ink: High-contrast dark headline text in the upper light section.
- #829FA8 — Glacier Mist: Subordinate text, footer links, copyright info, and body captions.
- #132B33 — Abyssal Border: Subtle vertical column separators, input field stroke, and divider lines.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 28px heading, 48px display. Tracking -0.025em on headings, 0.05em on uppercase badges. The voice is analytical, calm, and institutional. Plus Jakarta Sans (or clean Inter) delivers geometric neutrality with contemporary technical authority. Headings feature tight negative tracking (-0.025em) to prevent large displays from feeling loose, while micro text in the badge and data labels retains open tracking for rapid scanning.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through hard material stratification rather than heavy blurred drop shadows. The pure white metrics dock (#FFFFFF) utilizes a subtle 0 8px 30px rgba(0,0,0,0.06) soft elevation to cleanly detach itself from the gradient landscape beneath. The footer remains completely flat and subterranean, relying on recessed borders (#132B33) for form elements.
IMAGERY
Abstract topological contour waves rendered in layered gradients of sage green, mint, and deep slate drift across the horizon behind the headline. They suggest network terrain, scanning planes, and defensive topography without showing literal hardware or screens. Avoid photorealistic stock photography, 3D glossy spheres, or chaotic hacker motifs.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal white enterprise outcomes stat dock floating exactly at the intersection of the organic light landscape and the dark monolithic footer. To implement it correctly, let the dock overlap the boundary by exactly 50% of its vertical height, ensuring it is grounded in bright #FFFFFF with uniform internal metric columns.
MUST
- Anchor the statistical card directly over the transition between the light hero and dark footer.
- Use deep teal (#0E6255) sparingly to spotlight active phrases within display typography.
- Maintain hairline vertical rules (#132B33) between footer columns for crisp architectural division.
- Set metrics figures at least 2.3x larger than their explanatory labels in the stat dock.
AVOID
- Do not use sharp 0px corners on interactive buttons; adhere strictly to the 8px radius.
- Avoid bright saturated neon accents; keep greens subdued, oceanic, and surgical.
- Never replace the white metrics dock with a transparent or dark container in this composition.
- Do not drop column vertical dividing lines when maintaining dense navigation links.
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 中尝试 
