Design a dark-mode website section: deep charcoal control rooms illuminated by electric violet telemetry and refined editorial photography.
LAYOUT
The hero operates as a dual-column asymmetrical composition within a 1360px max-width container. The left column (roughly 42% width) anchors the narrative with an eyebrow badge, two-line display headline, explanatory paragraph, dual CTA row, and horizontal trust guarantees. The right column (58% width) organizes an asymmetrical 3-column bento grid interleaving real-time analytical panels with imagery cards. The section terminates in a striking full-width contrast shift to an off-white technical grid band.
PALETTE (use these exact hex values)
- #090A0E — Void Black: Deepest background layer across the entire hero section.
- #14161C — Bento Slate: Background fill for bento dashboard cards and floating panels.
- #1E222A — Subtle Charcoal: Secondary metric pill backgrounds and interior divider borders.
- #4F46E5 — Electric Indigo: Primary CTA fill, navigation action button, and primary telemetry curve.
- #6366F1 — Telemetry Glow: Hover states, icon glows, and line chart gradient apex.
- #10B981 — Positive Metric: Upward trajectory deltas and live status indicator dots.
- #FFFFFF — Text Primary: Headings, metric figures, and primary button labels.
- #94A3B8 — Text Muted: Body descriptions, table headers, sub-labels, and axis marks.
- #F3F4F6 — Technical Canvas: Base tone for the stark contrast social proof band at page bottom.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 32px heading-lg, 56px display. Tracking -0.03em for headlines, 0.08em for technical badges. The voice is analytical, precise, and authoritative. Using a clean neo-grotesque sans like Inter with tightened negative tracking on large scales gives the product an enterprise-grade maturity, while the monospaced and wide-tracked uppercase utility captions evoke developer tools and precision hardware. Substitution should prioritize system fonts with robust tabular figures and crisp geometric terminals like SF Pro or Plus Jakarta Sans.
GEOMETRY & SPACING
Corner radii — cards 14px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 96px between sections, 1360px container, tight density.
DEPTH
Depth is flattened and architectural, relying entirely on subtle tonal shifts (#090A0E to #14161C) bounded by 1px translucent borders rather than diffuse drop shadows. Visual pop is achieved through contrast hierarchy, where bright foreground data and crisp photography detach naturally from the dark matte surface.
IMAGERY
Photography leans toward editorial, minimalist still life and thoughtful, natural-light studio portraits rather than generic corporate stock. Compositions feature physical consumer goods, automated robotics, or focused human faces bathed in warm or neutral ambient light. Stylized 3D renders or generic vector illustrations are strictly absent.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the tight, multi-scale bento grid pairing lived-in editorial photography directly beside ultra-dense telemetry cards under a single electric violet halo. It is commonly misused by turning cards into generic neon gradient glassmorphism instead of crisp, matte charcoal panels with restrained hairline borders.
MUST
- Keep card outlines strictly hair-thin (1px) using low-opacity white (rgba(255,255,255,0.08)).
- Limit the electric violet (#4F46E5) to primary action buttons and single-focus data lines.
- Ensure photo tiles feature rich, muted editorial portraits and physical product stills.
- Pair heavy headline weights (-0.03em tracking) with technical spaced uppercase utility labels.
AVOID
- Never introduce colorful background gradients or neon glowing borders across bento cards.
- Do not use high-saturation imagery; keep photography filmic, desaturated, and architectural.
- Avoid pill-shaped buttons for the secondary action; reserve full pills only for badges.
- Do not clutter cards with drop shadows; rely on surface value shifts and hairline strokes.
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. Try in DraPub 
