Design a dark-mode website section: deep midnight canvas punctuated by electric cyan data radar and precision instrumentation tiles.
LAYOUT
The layout is divided into a structured bento grid under an asymmetric header (left-aligned bold display title with uppercase cyan tag, right-aligned summary paragraph). The top grid tier combines a large 2-column benchmark radar card with stacked trend and metric tiles, while the bottom tier organizes into four audience segments alongside a wide consolidated outcomes block.
PALETTE (use these exact hex values)
- #040810 — Canvas Midnight: deepest root viewport background surrounding all bento modules
- #080f1a — Card Surface: fill color for all bento cards and informational tiles
- #162338 — Card Stroke: subtle hairline border separating tiles from the midnight canvas
- #0d3b66 — Cyan Spotlight: radial background gradient bloom centered behind the radar chart
- #38bdf8 — Electric Cyan: primary interactive accent, chart line graphs, and link text with arrows
- #22c55e — Mint Green: operational status pill icon, positive telemetry dots, and readiness indicators
- #f8fafc — Text Primary: primary headings, metric numbers, and hero copy
- #94a3b8 — Text Secondary: supporting body paragraphs, chart axis labels, and descriptions
- #475569 — Text Tertiary: disclaimer text, chart gridlines, and inactive metadata
- #0d2238 — Badge Fill: background for category pills, chart dimension nodes, and icon enclosures
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 36px heading-lg, 48px display. Tracking -0.03em at display, -0.01em at body, 0.08em at uppercase tags. The typographic tone is analytical, modern, and engineering-focused, utilizing a geometric grotesque (similar to Inter or Geist) with high optical clarity at small sizes. Crisp tabular figures and tight tracking on large display headings convey precision and computational authority.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 72px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through luminosity contrast and subtle radial glows rather than drop shadows. Surface cards have a 1px border stroke (#162338) over an ultra-dark canvas (#040810), with localized radial lighting effects accentuating focal areas like the radar chart.
IMAGERY
No photographic imagery is present. Visuals are strictly data-driven vector graphics including radar charts, line graphs with point markers, and geometric line-art iconography enclosed in dark squircle frames.
MUST
- Anchor each card with consistent 24px internal padding and 18px corner radius.
- Pair a 1px border (#162338) with dark surface fill (#080f1a) on every container.
- Use Electric Cyan (#38bdf8) strictly for interactive links, active data points, and primary highlights.
- Keep text hierarchy stark: pure white (#f8fafc) for headings, slate (#94a3b8) for body.
AVOID
- Never use pure white (#ffffff) card backgrounds or heavy box-shadow drop shadows.
- Do not omit the 1px hairline border around tiles against the midnight canvas.
- Never use warm colors like orange or red unless representing system failure states.
- Avoid mixed corner radii across adjacent bento tiles; standardize on 18px.
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 
