Design a dark-mode website section: precision dark engineering dashboard where glowing cyan stats anchor functional team-based cards.
LAYOUT
The section follows an asymmetric top block over a symmetric 3x2 grid, anchored by a bottom horizontal banner. Top left holds the pill badge, two-tone display header, and deck copy, balanced on the top right by three horizontally arrayed KPI pillars. The core body is a 3-column, 2-row matrix of equal-dimension cards, finished with a full-span single-row CTA bar.
PALETTE (use these exact hex values)
- #05080f — Canvas Midnight: Root background canvas providing maximum contrast for dark card modules.
- #0b111e — Card Surface: Background fill for grid cards, bottom banner, and container elements.
- #0f172a — Icon Tile Fill: Squircle background for floating feature icons inside cards.
- #1e293b — Subtle Border: Structural 1px borders on cards, icon holders, and pill badges.
- #38bdf8 — Electric Cyan: Hero headline accent, header stat numerals, and interactive button fill.
- #86efac — Metric Mint: Stat figures and directional growth arrows inside feature cards.
- #ffffff — Primary Text: Display headings, card titles, and primary emphasis text.
- #94a3b8 — Muted Text: Paragraph descriptions, stat labels, and secondary supporting text.
- #04131f — Button Dark Text: High-contrast dark typography inside the solid cyan CTA button.
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 30px heading, 44px display. Tracking -0.03em at display, 0 at body. Clean, authoritative, and developer-adjacent. The tightly tracked Inter neo-grotesque feels highly functional and product-focused, striking an enterprise-grade balance between marketing clarity and SaaS analytics. Geist Sans or SF Pro serves as an exact zero-friction drop-in.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 6px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely flat-technical without gaussian drop shadows. Card surfaces at #0b111e sit slightly above the #05080f base canvas, delineated by crisp 1px borders in #1e293b. Inner icon wells (#0f172a) create a slight inset sensation through microscopic tonal layering.
IMAGERY
No photographic or raster illustration is present; the interface relies exclusively on minimalist line-art iconography. Icons use uniform 1.75px cyan strokes inside slate squares. Adding photorealistic lifestyle imagery or 3D renders would destroy the clean developer-tool aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline paired with the mini footer metric row inside each dark card (mint percentage + arrow on left, muted text middle, navigation arrow right). To replicate, ensure the metric bar is visually distinct from card body copy yet stays on a single line.
MUST
- Use a solid dark navy-slate background (#05080f) to maintain deep contrast without harsh true-black clipping.
- Highlight key headline clauses with electric cyan (#38bdf8) while keeping lead phrases crisp white.
- Keep card metric values in light mint green (#86efac) paired with unicode/icon directional arrows.
- Maintain uniform 16px gutters between grid cards both horizontally and vertically.
AVOID
- Do not introduce colorful saturated background cards; surfaces must remain strictly dark navy-slate.
- Do not use fuzzy, elevated drop shadows; depth is strictly defined by surface fills and 1px borders.
- Do not color the card titles cyan; reserve white for titles and cyan for hero accents.
- Do not make the bottom CTA banner taller than the compact single-line toolbar layout (~56px).
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 中尝试 
