Design a light-mode website section: clinical defense engineering meets high-precision aerospace telemetry in stark monochrome and tactical cobalt.
LAYOUT
The header is split into an asymmetrical 2-column lockup: high-impact display title on the left and a dense narrative paragraph on the right. Directly below sits an expansive 5-column card grid where each vertical card presents an icon, number, title, body, and terminal display in identical stack order. The section concludes with a full-width integrated card combining an engineering slider scale on the left with three metric callouts on the right.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary surface for cards, lower panel, and inner document background.
- #F8FAFC — Frame Tint: Surrounding container surface providing quiet structural separation.
- #090D16 — Tactical Night: Background fill for the terminal and telemetry simulation screens in cards.
- #2563EB — Defense Blue: Eyebrow text, active icons, numerical step counts, and the double slash display mark.
- #0F172A — Deep Charcoal: Main headline, card titles, and primary stat values.
- #64748B — Subtle Slate: Paragraph summaries, card body copy, and secondary stat labels.
- #22C55E — HUD Phosphor Green: Status readouts, graph trendlines, and tactical markers within HUD micro-screens.
- #E2E8F0 — Precision Border: Card borders, divider lines, and range slider axis track.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px subheading, 18px heading, 22px heading-lg, 38px display. Tracking -0.02em at display, 0.05em at caps. The typographic character is authoritative, clinical, and uncompromisingly technical. Inter or Geist delivers cold corporate clarity, while JetBrains Mono provides the embedded sensor telemetry feel. The voice suggests classified aerospace specifications rather than civilian consumer software.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Elevation is essentially flat and structural. Depth is established through recessed surfaces—placing pitch-black terminal screens inside border-delineated white cards—rather than floating layers with drop shadows. The boundary contrast relies entirely on precise 1px borders (#E2E8F0).
IMAGERY
Visual assets are strictly schematic and diagrammatic: vector line icons (reticle, chip, shield, factory, lock), monochrome military vehicle silhouettes (tank, drone, jet), and green telemetry graphs. High-resolution photos or human imagery would destroy the clinical autonomous-defense aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an immaculate white hardware spec sheet with inset pitch-black CRT/HUD sensor simulations at the base of every card. Misusing it involves making the cards fully dark or swapping the HUD screens for standard photographs, losing the cockpit telemetry flavor.
MUST
- Use strict 1px light gray borders (#E2E8F0) without dropshadows to define card perimeters.
- Restrict tactical bright colors (green, cobalt) to purposeful telemetry data points and indices.
- Maintain monospace code styling strictly inside the dark HUD simulation blocks.
- Pair the trailing cobalt double slash '//' directly with the main display headline.
AVOID
- Never introduce playful rounded organic shapes; keep radii crisp at 8px to 12px.
- Do not use dark backgrounds for the overall section; retain clinical white daylight clarity.
- Never omit the step count (01-05) from the top-right corner of each feature card.
- Avoid blurry shadows or colored glows outside the terminal CRT-style screens.
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 中尝试 
