Design a light-mode website section: crystalline enterprise bento grid floating above a midnight command deck, bridging airy analytics with institutional depth.
LAYOUT
The composition flows from an airy bento module structure into an institutional command-tier footer. The top module spans a 12-column layout split into a ~7-column primary hero card on the left and a stacked 5-column pair on the right (metrics card above, gradient telemetry card below). Below the 48px section boundary, the full-width midnight footer introduces a 6-part arrangement: company bio with social chips on the left, four concise navigation columns in the center, and a dedicated newsletter capture module on the right.
PALETTE (use these exact hex values)
- #E7EDF4 — Atmospheric Base: Outer canvas background behind upper bento cards providing subtle cool-tinted contrast
- #FFFFFF — Elevated Panel White: Primary surface for interactive value-prop and metrics bento modules
- #0B121E — Abyssal Midnight: Deep slate navy canvas supporting global footer navigation and inputs
- #255BE3 — Dynamic Cobalt: Primary call-to-action fills, headline focus spans, and accent indicators
- linear-gradient(135deg, #255BE3 0%, #5E58F6 50%, #9878FC 100%) — Cosmic Gradient: Background fill for the global scale telemetry showcase card
- #0F172A — Graphite Primary: High-contrast headings and active metrics on white cards
- #536479 — Slate Secondary: Descriptive body copy and explanatory labels on light panels
- #7B8C9E — Footer Muted: Navigation links, copyright line, and helper text on dark footer
- #F1F5F9 — Footer Ice White: Column headers and title copy within the dark footer section
- #1B2433 — Border Dark Subdued: Structural borders for input fields and social icons in the footer
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 24px heading, 28px heading-lg, 44px display. Tracking -0.03em at display, 0.05em at caps. The typography conveys authoritative precision, modern infrastructure engineering, and crisp executive clarity. A contemporary neo-grotesque sans like Inter Display is leveraged with tight negative letter-spacing on bold headings to feel architectural and dense. Body copy stays open and neutral at 14-15px with relaxed line heights, ensuring data readability across dense multi-column sections.
GEOMETRY & SPACING
Corner radii — cards 24px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 18px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is communicated almost exclusively through flat surface stratification and contrasting values rather than diffuse drop shadows. White elevated cards float cleanly over the desaturated #E7EDF4 canvas, relying on microscopic 1px translucent borders or pure tonal contrast to define edges. In the gradient telemetry card and footer, depth is generated via glowing vector nodes and layered geometric line-work.
IMAGERY
Imagery follows an abstract high-tech logistics vernacular consisting of continuous 3D digital wireframe terrains, vector topography lines, and luminous orbital route networks. Visual assets are tinted in cyan, sky blue, and white, emerging seamlessly from card backgrounds without distinct image bounding boxes. Realistic lifestyle photography or literal transport vehicles are strictly excluded in favor of mathematical superintelligence representations.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the seamless organic emergence of 3D digital terrain meshes and orbital network wireframes directly from the edges of clean, functional UI cards. The mountain mesh softly anchors the lower right of the primary white card, while the glowing spherical network emerges from the cobalt card below it. A common misuse is pasting bounded bitmap graphics into cards rather than letting gradient-blended vectors bleed organically into container boundaries.
MUST
- Use 24px corner radius consistently across all hero bento panels.
- Restrict the vibrant cobalt (#255BE3) strictly to primary buttons and headline key-phrase emphasis.
- Maintain high negative space within white cards with minimum 36px internal padding.
- Ensure dark footer links use low-contrast grey (#7B8C9E) to avoid competing with column titles.
AVOID
- Do not apply heavy drop shadows; cards rely on crisp boundaries against the #E7EDF4 canvas.
- Do not use full pill (999px) border radii on primary buttons; strictly use 10px rounding.
- Do not place stark black text within the dark footer canvas; use #F1F5F9 and #7B8C9E.
- Do not crowd the bento grid with borders; separate panels purely through 18px grid gaps.
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 
