Design a dark-mode website section: military-grade precision engineered into an atmospheric cockpit of dark glass, razor borders, and tactical cobalt glows.
LAYOUT
The viewport follows a structured cockpit dashboard grid encased in a rounded outer bezel. The top tier splits 45/55 between an asymmetric left headline stack and a dominant right showcase module for flagship hardware. Beneath, a three-column equal-height card grid breaks down manufacturing, testing conditions, and platform software, followed by a hairline divider leading into partner credentials.
PALETTE (use these exact hex values)
- #06090f — Canvas Void: Deepest underlying background layer behind main viewport containers
- #0d131f — Cockpit Slate: Surface color for secondary feature cards and nested module backgrounds
- #1e293b — Tactical Border: One-pixel structural perimeter lines and telemetry dividers across cards
- #2563eb — Cobalt Strike: Solid primary action buttons, key headline highlights, and active telemetry glow
- #60a5fa — Electric Cyan: Text link hovers, active sub-bullets, and atmospheric lighting halos
- #ef4444 — Beacon Red: Small broadcast indicator dot inside the announcement chip
- #f8fafc — Pure White: Primary headings, brand logo glyph, and primary button labels
- #94a3b8 — Telemetry Grey: Body copy descriptions, secondary button labels, and passive navigation items
- #475569 — Subdued Muted: Monospaced technical labels, table headers, and divider line labels
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 20px heading, 24px heading-lg, 48px display. Tracking -0.03em at display, +0.06em at uppercase caption. Cold, mission-critical, and decisively institutional. The typography evokes defense contractors and bleeding-edge robotics firms where zero ambiguity is tolerated. Inter or Geist delivers the essential industrial neutrality, with tabular tracking on telemetry readouts enforcing technical rigor.
GEOMETRY & SPACING
Corner radii — cards 20px, links 9999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered through architectural surface enclosure rather than traditional drop shadows. Dark slate cards (#0e1526) sit inside a slightly deeper viewport shell (#0b101b), distinguished by razor-thin 1px borders (#1e293b) and selective atmospheric backlights emitting from 3D assets.
IMAGERY
Photorealistic aerospace defense technology: military UAVs in mid-flight over gradient twilight atmospheres, industrial robotic fabrication arms, and ruggedized terrestrial radar units. All visual assets share high physical fidelity, cinematic directional lighting, and integrated technical HUD overlays.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display headline where the final phrase shifts into vibrant cobalt blue ('Priced for reality.'), paired with the cockpit-style hardware card whose footer docks horizontal telemetry metrics via 1px hairline dividers.
MUST
- Reserve vibrant cobalt (#2563eb) strictly for primary CTA buttons, link hovers, and headline punchlines.
- Enforce precise 1px borders (#1e293b) around cards, pills, and telemetry divider tracks.
- Use uppercase tracking (0.06em to 0.08em) for micro metadata and category labels under 12px.
- Employ true aerospace hardware photography or photorealistic 3D renders with directional dusk/dawn lighting.
AVOID
- Never use generic cartoonish illustrations; imagery must look physically buildable and military-spec.
- Avoid bright saturated background panels; keep all surfaces between #06090f and #141c2e.
- Do not drop heavy, unfocused black drop-shadows; rely on border strokes and faint ambient cobalt glows for separation.
- Never let headline sentences run entirely in blue; highlight only the final decisive phrase.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试