Design a dark-mode website section: precision fintech dark mode with electric blue focal accents and architectural card rhythm.
LAYOUT
The layout uses an asymmetrical split-view top section (roughly 38% narrative left, 62% 2x3 grid right) followed by a full-width horizontally distributed metrics bar below. The left side delivers value proposition, eyebrow tag, and micro-trust anchors, while the right side organizes six modular cards with uniform 20px gaps.
PALETTE (use these exact hex values)
- #06090F — Obsidian Canvas: Deepest background tone covering the entire page section viewport.
- #0B1220 — Card Surface: Solid background fill for feature grid containers and bottom stat block.
- #1E293B — Border Subtle: Single-pixel boundary line defining card edges, badge outlines, and divider bounds.
- #38BDF8 — Electric Azure: Emphasized headline typography highlight, key metric numbers, and active indicator dot.
- #2563EB — Cobalt Accent: Icon glyph stroke color and interactive 'Learn more' link styling.
- #0F1E36 — Icon Enclosure: Subtle circular container background behind card icons.
- #F8FAFC — Text Primary: High-contrast headings, feature card titles, and primary metric figures.
- #94A3B8 — Text Secondary: Supporting descriptions, subcopy, and metric category labels.
- #064E3B — Emerald Tag Background: Low-opacity pill fill for the top category status indicator.
- #34D399 — Emerald Tag Text: Foreground label text and status diamond inside the primary eyebrow tag.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,System Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 20px heading, 40px display. Tracking -0.025em on titles, 0em on body. The type voice is calculated, institutional, and engineered, projecting banking-grade reliability and low latency. Utilizing a clean, neutral neo-grotesque sans-serif with tight apertures and slight negative tracking keeps headline hierarchy sharp and technical.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 9999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminance stepping rather than blur shadows. Ground level sits at deep navy (#06090F), card containers step upward to #0B1220 defined by a hairline outline (#1E293B), and nested icon badges sit at #0F1E36 to establish clear structural tiers.
IMAGERY
Avoid photographic assets or human imagery entirely. Imagery is restricted to abstract vector geography (such as a dotted world map silhouette) and minimalist line-art tech glyphs illuminated by subtle radial focal points.
SIGNATURE DETAIL — the thing that makes this design itself
The standout move is the two-tone headline where the primary hook ('smarter credit decisions, at scale') switches abruptly from clean white to electric cyan-blue, paired seamlessly with a 2x3 feature card array housing circular icon pads. Misuse typically occurs when too many phrases are colored blue, diluting focal velocity.
MUST
- Use solid dark navy-slate (#0B1220) for card backgrounds with strict 1px subtle strokes (#1E293B).
- Highlight only 3-5 crucial words in primary display headlines using azure blue (#38BDF8).
- Anchor feature cards with a circular icon enclosure (#0F1E36) to give thin line icons weight.
- Keep typography strictly sans-serif (Inter style) with negative tracking on displays above 32px.
AVOID
- Do not introduce pure pitch-black (#000000); maintain deep navy-tinted canvas tonality.
- Avoid heavy drop shadows or diffused colored glows under cards; rely on border separation.
- Do not allow card link text to wrap; keep 'Learn more →' single-line and flush left.
- Never use filled or multi-color icons; use mono-stroke outline icons in electric blue.
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 中尝试 
