Design a dark-mode website section: deep midnight telemetry with crisp cobalt illuminations and disciplined modular bento grids.
LAYOUT
The layout uses an asymmetrical multi-tier bento grid. The top section splits 35/65 between an editorial intro + API card on the left and a dominant hero dashboard card on the right. The lower tier resolves into a balanced 4-column row of equal-height feature modules.
PALETTE (use these exact hex values)
- #06080e — Canvas Void: The master background surface framing all layout cards and page boundaries
- #0d131f — Card Surface: Primary fill for bento modules, code views, and metric containers
- #121929 — Elevated Cell: Inner pill tags, code container backdrop, and list row backgrounds
- #192436 — Structural Border: 1px hairline strokes separating cards, cells, and divider rules
- #2f80ed — Cobalt Primary: Brand hero glow, active pills, shield emblem highlights, and primary iconography
- #1d4ed8 — Radial Atmosphere: Diffused 120px blur behind phone mockup to generate dramatic ambient lighting
- #d97706 — Terminal Amber: Syntax highlighting accent for JSON keys and endpoints in the developer panel
- #ffffff — Text Crisp: High-emphasis titles, primary numerals, and selected status tags
- #8da0b8 — Text Secondary: Descriptive copy, unselected filters, and category indicators
- #53647b — Text Dim: Terminal line numbers, table labels, and tertiary metadata
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, 28px heading, 36px display. Tracking -0.02em at headlines, 0.05em at micro badges. Engineered, clinical, and reassuringly precise. Neutral geometric sans-serif (Inter style) balances technical fitness metrics with modern enterprise SaaS elegance, using tabular numbers for clean telemetry alignment.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Elevation is achieved through luminous radial back-lighting rather than traditional drop shadows. Cards float flat against the black canvas (#06080e), separated entirely by 1px cool borders (#192436) and localized blue glows that emulate backlit hardware panels.
IMAGERY
Imagery is hyper-focused on high-fidelity 3D hardware renders (angled smartphone mockup) and precision technical icons. Graphics avoid photographic human imagery, leaning entirely into polished physical glass, brushed titanium, and glowing telemetry visuals.
SIGNATURE DETAIL — the thing that makes this design itself
The combination of the glowing cobalt halo behind realistic dark hardware coupled with numbered micro-index badges across a rigid bento grid. Recreate it by placing a 120px blurred blue radial glow directly behind an angled device frame centered inside a 20px rounded dark card.
MUST
- Use precisely 1px solid hairline borders (#192436) to define card silhouettes against the black background.
- Restrict vibrant blue (#2f80ed) to functional triggers, verification checks, and targeted atmospheric glows.
- Keep metric labels (HRV, Strain, Sleep) smaller and lighter than their 20px bold numeric values.
- Include the small numbered pill badge at the top left of every bento component to preserve ordering hierarchy.
AVOID
- Do not introduce multi-color gradients for card backgrounds; keep them uniform and near-black.
- Avoid high-contrast borders or dropshadows that compete with the subtle hairline framing.
- Do not remove the numeric indexing from the card headers; it structures the product story.
- Never use pure white (#ffffff) for long explanatory copy; reserve it exclusively for titles and key metrics.
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 
