Design a dark-mode website section: quiet midnight fintech precision with jewel-toned badge accents and soft dark card containers.
LAYOUT
Asymmetric two-column split layout across a desktop canvas. The left column (approximately 42% width) stacks the section overline, dual-tone display headline, description, 4-column proof metrics card, and the small demo CTA strip. The right column (approximately 58% width) contains a vertically stacked sequence of 6 accordion cards separated by 12px gaps.
PALETTE (use these exact hex values)
- #0B0D13 — Canvas Background: Deepest dark navy-slate background covering the full viewport canvas.
- #121620 — Card Surface: Elevated card and accordion row background fill.
- #1E2535 — Card Border: Subtle 1px boundary stroke outlining cards and accordions.
- #FFFFFF — Primary Text: Primary display text, accordion trigger questions, and large stat numbers.
- #94A3B8 — Secondary Text: Body copy, answers in accordions, subtext, and metadata captions.
- #64748B — Muted Text: Disclaimers, small footers, and inactive chevron indicators.
- #A78BFA — Lilac Purple: Heading accent highlight, CTA pill button, and primary stat icon tint.
- #E06D63 — Salmon Coral: Metric badge background for growth and throughput stats.
- #4A6FA5 — Steel Blue: Metric badge background for reliability and uptime stats.
- #63479B — Deep Violet: Metric badge background for security and data compliance stats.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 16px subheading, 26px heading, 42px display. Tracking -0.02em at display, 0 at body, +0.06em at overline. Authoritative, modern fintech precision built on a neutral Swiss-inspired grotesque like Inter. The voice pairs crisp institutional clarity with subtle AI novelty communicated through the lilac-purple headline wrap and high numerical tracking contrast.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through surface color shifting (#0B0D13 canvas to #121620 container) combined with a delicate 1px border (#1E2535). Box shadows are practically imperceptible or completely omitted, favoring clean architectural layering over skeuomorphic blur.
IMAGERY
Iconography is geometric, minimal, and encapsulated inside soft-colored 36x36px rounded squares (clock, trend arrow, shield, lock, sparkles). No photographic assets or photorealistic 3D renders are used; vector clarity reinforces institutional trust.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone display headline ('Common questions.' in white, 'Clear answers.' in lilac) directly mirrored by the soft jewel-toned 4-column metric badge array on the companion card.
MUST
- Keep container backgrounds deeply dark (#121620) with 1px discrete borders (#1E2535) for separation.
- Use the lilac purple accent (#A78BFA) sparingly for key emphasis words and primary interactive buttons.
- Pair colored stat badge backgrounds with their respective icons to establish fast visual indexing.
- Give metric titles and KPI figures distinct size hierarchy (26px stat vs 11px caption).
AVOID
- Do not use high-contrast white borders or loud glows around dark surface cards.
- Never fill entire cards with saturated colors; restrict vibrancy to small badges and CTA buttons.
- Avoid centering text inside accordion items; question text must align strictly to the left.
- Do not mix multiple typeface families; rely solely on font weight and tracking variations.
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 中尝试 
