Design a dark-mode website section: precision nocturnal intelligence anchored by glowing cobalt linework and crisp modular proof blocks.
LAYOUT
The interface follows an asymmetrical two-column layout atop a unified horizontal foundation. The left column (roughly 38% width) holds the sticky-feel FAQ title, introductory description, feature checklist, and testimonial card. The right column (roughly 62% width) stacks five uniform expandable accordion modules separated by 12px gaps. Spanning the entire lower boundary is a 4-column metric bar anchored across the container width.
PALETTE (use these exact hex values)
- #030712 — Obsidian Deep: Root background canvas providing maximum contrast for glowing blue accents
- #08101e — Midnight Slate: Fill background for accordion tiles, quote card, and bottom metric bar
- #14243b — Subtle Marine Border: Fine 1px container perimeter stroke separating modules from background
- #ffffff — Optic White: Hero headline text, accordion query titles, and primary stat values
- #8b9bb4 — Muted Cobalt Slate: Secondary explainer body text, accordion answers, and metric labels
- #4ca8ff — Electric Cyan: Keyword emphasis in header, line-art stroke icons, and eyebrow label
- #0d2342 — Cyan Tint Glow: Backplate fill for small icon containers and highlighted badge elements
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 24px heading, 44px display. Tracking -0.03em at display, 0 at body. The typographic tone is ultra-engineered, surgical, and confident, speaking directly to enterprise developers and engineering leaders. Inter or Geist Sans provides neutral geometry with compact letter-spacing (-0.03em on display) that feels contemporary and clean. If replacing, prioritize tech-forward neo-grotesques with clean optical kerning like SF Pro or Plus Jakarta Sans over humanist typefaces.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 12px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered entirely through subtle luminosity stepping and hairline borders rather than cast drop shadows. Background canvas sits at #030712, modular surfaces lift to #08101e with crisp 1px strokes (#14243b), and actionable icon beds glow faintly at #0d2342.
IMAGERY
No photographic imagery is present; the visual language relies exclusively on clean 1.5px vector line icons enclosed in rounded rectangular blue-tinted vessels. Vector symbols represent security (shield, lock), integration (puzzle, plug), and efficiency (speedometer, lightning bolt). Photorealism or colorful illustrations would severely violate the technical tone.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive horizontal card accordion stack set alongside a two-tier proof system, where each row features a crisp cyan vector glyph balanced against quiet, high-contrast dark navy surfaces with hairline borders.
MUST
- Use 1px borders in #14243b to define card boundaries against the dark canvas.
- Limit electric cyan (#4ca8ff) strictly to key brand words, icons, and micro-labels.
- Pair line-weight icons with matching 1.5px stroke weight throughout the layout.
- Maintain uniform 16px corner rounding on all structural card panels.
AVOID
- Do not use solid bright fills behind icons; use soft radial blue glows or outline badges.
- Never use pure black (#000000) for cards; panels must sit at #08101e for elevation.
- Do not mix heavy filled iconography with delicate line art.
- Avoid multi-colored accents; remain strictly in the cobalt/cyan spectrum.
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 中尝试 
