Design a dark-mode website section: luminescent cyan metrics against obsidian depths calibrated for institutional investment conviction.
LAYOUT
The section is structured into three clear horizontal bands within a centered 1200px container. The upper band uses an asymmetric 5:7 column split: narrative positioning on the left, a 2x2 grid of metric cards on the right. The middle band resolves into a balanced 4-column row of capability cards. The lower band closes the section with a centered horizontal rule and typographic thesis statement.
PALETTE (use these exact hex values)
- #070b13 — Obsidian Ground: Global page backdrop providing high contrast foundation for illuminated text and borders
- #0c1524 — Card Trench: Background fill for all metric and feature cards
- #16243b — Subtle Boundary: 1px structural outline separating cards and icon badges from the canvas
- #10223d — Icon Bed: Rounded container background framing cyan glyph icons
- #38bdf8 — Cyan Luminescence: Key data metric readouts, title emphasis, and line icons
- #34d399 — Terminal Mint: Eyebrow status dot and closing phrase highlight signifying unfair advantage
- #ffffff — Signal White: Display headings, stat labels, and feature titles
- #94a3b8 — Cool Slate: Descriptive paragraphs, feature body copy, and secondary metrics
- #64748b — Muted Ash: Footer premise and lowest-tier metadata labels
TYPOGRAPHY
Typeface Inter (or SF Pro Text, Plus Jakarta Sans, Geist Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 17px subheading, 32px heading, 44px display. Tracking -0.025em on display, +0.06em on pills. The typographic tone is cool, algorithmic, and unapologetically institutional, executed through a tightly tracked neo-grotesque sans (Inter match). Tight display tracking (-0.035em) gives the 44px heading authoritative weight without feeling bulky, while the stark contrast between pure white and electric sky blue commands attention. For licensed alternatives, consider SF Pro Text or Geist Sans for similar terminal-like clarity.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated strictly through surface color contrast and 1px border outlines rather than diffuse drop shadows. The #0c1524 cards emerge subtly from the #070b13 page surface via their border stroke (#16243b), creating a crisp, technical instrument-panel feel. Icon containers recede slightly deeper into the card face using dark tonal nesting (#10223d).
IMAGERY
This interface avoids raster photography, stock illustrations, and organic 3D renders entirely. Visual iconography is strictly limited to 20px stroked geometric glyphs (crosshairs, stopwatch, upward trend, dollar shield, search lens) rendered in electric sky blue. Any human or realistic photography would instantly compromise the algorithmic, institutional aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone dual-sentence display headline ('Better decisions.' in pure white, stacked on 'Proven outcomes.' in electric cyan) mirrored immediately by the bright cyan metric percentages. Misusing this pattern by applying cyan to whole paragraphs or arbitrary nouns dilutes the instant perception of quantitative institutional proof.
MUST
- Reserve the vivid cyan (#38bdf8) exclusively for quantitative impact numbers and primary headline contrast.
- Maintain strict 16px gutter spacing between cards in both the 2x2 metric matrix and 4-column feature row.
- Use 1px border strokes (#16243b) without heavy box-shadows to preserve architectural austerity.
- Stack metric numerals directly above their short descriptor labels with an 8px vertical gap.
AVOID
- Never introduce colorful drop shadows or diffuse neon glow filters behind the cards.
- Do not use warm hues like orange, red, or yellow; strictly adhere to the cyan, blue, and mint spectrum.
- Never set paragraph body text in pure white (#ffffff), which induces high-contrast eye fatigue.
- Do not exceed 16px radius on container cards; larger curves destroy institutional credibility.
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 中尝试 
