Design a dark-mode website section: an iridescent high-key cloud cta docked over a deep obsidian enterprise foundation.
LAYOUT
The composition follows a two-tier architectural stack: a floating hero-scale callout card nested within margins, followed immediately by an expansive six-column enterprise footer. The CTA uses strict center alignment for its badge, 2-line display title, summary paragraph, dual-button group, and trust row. Below, the footer shifts to an asymmetrical left-aligned layout: brand block (left), 4 structured link columns (middle), and an email subscription module (right), terminating in a split legal bottom bar.
PALETTE (use these exact hex values)
- #0B131D — Obsidian Deep: Primary dark background for the comprehensive footer section and primary text color in light CTA.
- #FFFFFF — Pure White: Background base for the prominent floating CTA banner card and white text highlights.
- #0B63F6 — Electric Cobalt: Primary action button background, secondary display headline line, and active badge icon strokes.
- #6366F1 — Periwinkle Accent: Subscribe button fill in dark footer and lower-left ambient CTA mesh tone.
- #38BDF8 — Cyan Glow: Hexagonal logo outer edge, right-side CTA mesh glow, and subtle ambient particle lighting.
- #94A3B8 — Muted Slate: Navigation link labels, copyright notice, secondary body copy in dark footer context.
- #1E293B — Dark Surface Border: Footer input field borders, social button outlines, and horizontal rule separators.
- #EEF4FF — CTA Pill Surface: Subtle light tint fill for top category pill badge in the CTA block.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 36px heading, 44px display. Tracking -0.02em at display, 0.05em at caps metadata. The typographic character is authoritative, technical, and frictionless neo-grotesque. By employing Inter or a similar high-x-height geometric sans, it balances enterprise credibility with modern developer-tool clarity. Display scale relies on heavy weights and negative letter tracking (-0.025em) to enforce punchy headlines, counterbalanced by spaced uppercase captions that convey architectural rigor.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely via tonal juxtaposition rather than heavy dropped box-shadows. The stark transition between the luminous, light-washed CTA container and the deep obsidian footer gives the CTA a perceived floating elevation over an enterprise void. Inside the CTA card, depth is augmented by multi-layered semi-transparent dot-grid waves that fade behind the crisp vector typography.
IMAGERY
The visual asset language consists of precision-engineered mathematical wave fields and fiber-optic ray lines. The left side blooms in a soft lavender-cyan diffuse glow, while the right side emits vertical glowing light rods rising from dot-matrix contours. Photography, organic hand-drawn shapes, or 3D skeuomorphic objects would severely violate this clean infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone headline execution ('Close risk at runtime.' in deep charcoal, immediately resolved by 'Ship with confidence.' in electric cobalt) floating inside a white ambient-lit capsule card right above a deep night-sky footer. This specific high-contrast hero-to-footer handshake forms the indelible visual signature.
MUST
- Keep the CTA card distinctly isolated with generous margin above the footer dark zone.
- Split the display headline into two contrasting lines: obsidian black followed by electric blue.
- Use uppercase tracking (0.08em) strictly on footer column headings and badge labels.
- Maintain high contrast by keeping form inputs sunken dark (#0F1A26) within the obsidian footer.
AVOID
- Never invert the CTA to a dark theme card; the high-key light contrast is structurally vital.
- Do not use saturated warm hues (red, orange, yellow); stick strictly to cyan, cobalt, and indigo.
- Avoid sharp 0px card corners; CTA card requires 20px to 28px outer rounding.
- Never eliminate the horizontal rule separating the footer navigation from the bottom legal bar.
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 中尝试 
