Design a dark-mode website section: deep obsidian backdrop with ethereal violet glow, precision pill indicators, and high-trust monolithic logo grid.
LAYOUT
The layout follows a centered vertical cascade: an eye-level kicker badge opens the flow, followed by a 44px display headline and a restrained two-line subheader. A horizontal flex row of four pill badges introduces key capabilities before settling into the massive central logo matrix. The composition closes symmetrically with a micro-link compliance bar at the bottom center.
PALETTE (use these exact hex values)
- #06080F — Space Black Canvas: Primary background color across the full viewport canvas
- #0C1120 — Frosted Card Surface: Base tone for the logo container card overlaid with radial ambient light
- radial-gradient(ellipse at 80% 50%, rgba(30, 58, 138, 0.45) 0%, rgba(6, 8, 15, 0) 70%) — Ambient Cyan Blue Glow: Background radial lighting effect behind the right side of the card
- linear-gradient(135deg, #A78BFA 0%, #60A5FA 100%) — Electric Iris Gradient: High-contrast focal gradient applied to primary heading kicker text
- #FFFFFF — Pure White Text: Primary headings, active logo marks, and prominent body copy
- #94A3B8 — Muted Slate Text: Supporting descriptions, sub-headings, and uppercase section labels
- #10B981 — Emerald Status: Status indicator dot and security verification checkmark icon
- #1E293B — Subtle Surface Border: Hairline outlines on pill chips, container card, and row dividers
TYPOGRAPHY
Typeface Inter Display (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 44px display. Tracking -0.025em for display, 0.08em for uppercase tracking. The typographic tone is authoritative, hyper-clean, and enterprise-ready, powered by a modern geometric grotesque sans like Inter or Geist. The high x-height and tight tracking (-0.025em) on display sizes give it an assertive, tech-forward confidence, while generous letter spacing on captions enforces architectural precision.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 9999px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1080px container, comfortable density.
DEPTH
Elevation is achieved through luminous radial light pooling behind frosted panels rather than dropped cast shadows. The card container acts as a semi-translucent scrim (rgba(10, 15, 29, 0.8)) with a 1px border (#1E293B) that lets background ambient blue bleed through softly.
IMAGERY
No photographic imagery is present; the visual authority is driven by clean vector logos normalized to uniform optical weights and bright vector micro-icons. Introducing photographic headshots or illustrated mascots would dilute the sleek, developer-grade security posture.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive violet-to-periwinkle gradient headline ('the future with AI') paired with the monolithic, hairline-divided logo card floating above an ethereal blue radial nebula.
MUST
- Use pure white (#FFFFFF) for the primary headline text and contrast with a violet/blue gradient kicker line.
- Enclose social proof logos in an organized multi-row grid with delicate 1px dividers.
- Keep all customer brand logos strictly monochrome white (#FFFFFF) for aesthetic cohesion.
- Surround status chips with a generous pill radius (9999px) and fine 1px slate borders.
AVOID
- Do not display customer brand logos in their original multicolor format; it destroys the dark aesthetic.
- Never use sharp, 0px-radius borders on cards or pill chips in this system.
- Avoid solid, harsh drop shadows; use low-opacity inner glow or diffuse radial backlights instead.
- Do not allow body text to drop below 13px or exceed 65ch line length.
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 中尝试 
