Design a light-mode website section: aerospace rigor meets high-tech maritime defense on crisp porcelain cards with soft tinted atmospheric glows.
LAYOUT
The layout uses a two-tier bento architecture. The top tier features a 7:5 split between an expansive dark hero container and a vertical stack of three light feature cards. The bottom tier spans the full grid width with a unified proof-point banner grouping corporate assurance text on the left and four telemetry metrics on the right.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Background: Global outer canvas supporting all floating container cards
- #0D1826 — Abyssal Hero Deep: Background base for the main submarine platform showcase card
- #F9F8FD — Lavender Mist Surface: Soft ambient background fill for the top right AI feature card
- #F4F9FD — Arctic Mist Surface: Soft cyan background fill for the middle right payload card
- #FFF8F4 — Blush Mist Surface: Subtle warm peach background fill for command and control card
- #0F172A — Primary Text Ink: Headings, titles, metric numbers, and high-emphasis textual elements
- #64748B — Secondary Text Slate: Body copy, subtitles, descriptive captions, and stat descriptors
- #6355D8 — Electric Iris: Eyebrow text, circular badge backgrounds, and primary pill chips
- #3B82F6 — Cerulean Blue: Icon container fill for modular payloads feature highlight
- #F9735B — Coral Signal: Icon container fill for secure communication telemetry highlight
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 26px heading, 32px display. Tracking -0.03em on display headings, +0.08em on uppercase labels. The typographic tone is authoritative, austere, and defense-grade, evoking advanced robotics and naval aerospace documentation. Inter or similar clean geometric grotesques provide absolute legibility with disciplined proportions. Tight tracking on display headlines delivers muscular conviction, while generous tracking on uppercase metadata suggests telemetry readouts.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through layered structural containment rather than dramatic drop shadows. Dark cards appear recessed or grounded via volumetric underwater lighting and high-contrast ink boundaries. Light cards float on the white canvas with virtually imperceptible 0 4px 20px rgba(0, 0, 0, 0.02) blurs and crisp 1px borders.
IMAGERY
Imagery features photorealistic 3D CGI military-grade underwater robotics, dramatic ambient volumetric water lighting, and precision CAD/technical hardware components. Isolated assets sit transparently against card backgrounds without clumsy rectangular clipping masks. Visualizations include delicate grid vectors, coordinate paths, and telemetry rings in pale violet and blueprint blue.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast collision between a dense, dark oceanographic submarine card on the left and ultra-pale, faintly chromatic feature cards on the right, tied together by translucent HUD metric capsules.
MUST
- Keep the primary canvas white (#FFFFFF) to let the dark hero card carry visual gravity.
- Use pastel tinted card backgrounds (#F9F8FD, #F4F9FD, #FFF8F4) corresponding to their icon color accents.
- Place floating metrics inside translucent glass containers (rgba(255,255,255,0.08)) over photographic hero textures.
- Use precise, compact hairline borders (#E8EDF5, 1px) to delimit all outer containers.
AVOID
- Do not invert the entire layout to dark mode; the contrast relies on a pristine white page canvas.
- Avoid heavy drop shadows; rely on hairline borders and delicate 1-2% alpha ambient blur.
- Never use generic photography; stick strictly to isolated 3D hardware and deep-sea submarine renders.
- Do not saturate card backgrounds; maintain tints at or above 97% lightness.
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. Try in DraPub 
