Design a light-mode website section: crisp high-assurance intelligence interface balancing surgical typography with soft chromatic category accents.
LAYOUT
The section is structured in three descending vertical zones. The top zone features a split 50/50 header with a bold display headline on the left and three metric columns on the right. The center zone is a balanced 3-column, 2-row grid of feature cards. The bottom zone features a centered circular arrow action button over subtle topographical vector lines.
PALETTE (use these exact hex values)
- #FAFCFF — Canvas Ground: Global application backdrop providing subtle cool tone beneath bright white cards
- #FFFFFF — Card Surface: Primary surface for use-case feature cards and floating metric containers
- #0A0F29 — Midnight Ink: High-contrast headings, card titles, and high-priority stat labels
- #64748B — Muted Slate: Supporting descriptions, metric captions, and contextual microcopy
- #1D4ED8 — Tactical Blue: Primary action CTA circle, incident response icon tint, and eyebrow copy
- #E11D48 — Forensic Rose: Investigative category badge, case management icons, and risk rate stat
- #0D9488 — Guardian Teal: Critical infrastructure icon container, category pill, and resolution stat
- #7C3AED — Fusion Violet: Operations and command fusion badge and icon backdrop tint
- #EDF2F7 — Subtle Border: Hairline card boundaries and vertical stat divider rules
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px subheading, 24px heading, 32px heading-lg, 40px display. Tracking -0.02em at display, 0.05em at caps. Surgical, modern, and authoritative. Inter delivers a no-nonsense institutional clarity suited for defense, compliance, and enterprise telemetry without feeling rigid.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is minimal and clean. Surfaces rely on crisp 1px borders (#EDF2F7) and ultra-subtle diffuse drop shadows (0 4px 20px rgba(15, 23, 42, 0.04)) rather than dramatic tiered elevation.
IMAGERY
Iconography is purely stroke-based, minimal, and geometric, framed inside rounded pastel tinted squircles. Photographs and rich 3D graphics are excluded to preserve technical precision and legibility.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated card taxonomy anchor: a soft, color-tinted metadata strip placed across the bottom of each feature card that echoes the specific hue of the card's top-left icon badge.
MUST
- Pair every functional category icon with its corresponding bottom metadata strip color.
- Maintain strict 24px gutters between all 6 cards in the 3x2 feature grid.
- Keep icon containers at exactly 48x48px with a 12px corner radius.
- Use uppercase tracking (0.06em to 0.08em) only on category tags and section eyebrows.
AVOID
- Do not use dark or heavily saturated backgrounds for feature card bodies.
- Never mix multiple accent colors within a single feature card or metric column.
- Do not remove the bottom metadata pill strip from the feature cards.
- Avoid heavy drop shadows; elevation must remain soft, diffused, and low-opacity.
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 中尝试 
