Design a dark-mode website section: deep midnight canvas electrified by intense cyan ribbons and crisp modular telemetry.
LAYOUT
The header starts with a global announcement utility bar stacked above a clean pinned navigation bar. The hero section splits neatly into a 45/55 asymmetric grid: left-side editorial text, dual CTAs, and security credentials, counterbalanced on the right by overlapping desktop and mobile product mockups bathed in ambient light trails.
PALETTE (use these exact hex values)
- #03070d — Midnight Space: Deepest canvas background providing absolute contrast for glowing vectors
- #0a101d — Obsidian Slate: Background for dashboard frames, phone mockups, and pill badges
- #1e293b — Borders Slate: Subtle 1px perimeter outlines on UI cards, pills, and secondary buttons
- #1d78f2 — Electric Azure: Primary CTA fill, active line charts, and hero light glow effects
- #38bdf8 — Cyan Spark: Key headline accent word, badge sparkle, and high-emphasis indicators
- #22c55e — Terminal Emerald: Live system status dots and completion metrics
- #f8fafc — Pure Crisp: Display headings, primary numbers, button text, and high-visibility titles
- #94a3b8 — Muted Slate: Body copy, nav links, metadata metrics, and secondary labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 22px subheading, 32px heading, 60px display. Tracking -0.03em on display headers, 0 on body labels. The typography is technical, crisp, and authoritative, relying on a modern geometric grotesque like Inter. Its tight display tracking (-0.03em) makes massive claims look engineered and executive, easily substituted with Plus Jakarta Sans without losing its high-tech insurance ethos.
GEOMETRY & SPACING
Corner radii — cards 18px, links 9999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely via layering and luminosity rather than traditional drop shadows. Solid dark slate containers float above the deep background, separated by faint 1px hairline strokes (#1e293b) and backlit by ambient azure ray gradients that simulate glowing display panels.
IMAGERY
Visual imagery is restricted to realistic in-app telemetry screenshots and clean architectural interior thumbnails nested tightly within product cards. Abstract visuals consist entirely of luminous, dynamic neon blue fiber-optic wave structures traversing the dark canvas.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone split headline paired with an atmospheric glowing cobalt ribbon that runs beneath floating telemetry mockups. Misusing it involves oversaturating the glow until it overwhelms the metric readouts, or applying the cyan highlight to entire sentences instead of single operative words.
MUST
- Use pure bright cyan (#38bdf8) selectively on exactly one or two headline words for optical punch.
- Enclose secondary metrics in discrete, lightly bordered slate panels to maintain dense visual hierarchy.
- Ground floating UI elements with radiant blue curved back-glows to indicate modern cloud intelligence.
- Pair numeric metrics with micro status badges (e.g. green pulse dots and trend percentages).
AVOID
- Do not introduce warm hues like orange or red outside of explicit system failure states.
- Do not use sharp 0px corners; all interactive cards and frames require smooth 10px-18px radii.
- Do not allow background glow layers to bleed over high-density text, which destroys legibility.
- Do not make secondary action buttons filled; preserve the ghost outline style for balance.
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 中尝试 
