Design a light-mode website section: deep teal telemetry dashboard nested inside a calm, luminous off-white enterprise bento grid.
LAYOUT
The section opens with an asymmetric header lockup: an uppercase category tag in emerald, an impactful 38px title, and a compact subtitle. The core layout is a 2-tier bento grid: top tier contains a wide 8-column spotlight telemetry card alongside two stacked 4-column utility cards; bottom tier features four balanced 3-column cards covering workflows, industry targets, value propositions, and code snippets.
PALETTE (use these exact hex values)
- #FAFBFB — Canvas Background: Primary background tone creating soft contrast against white cards
- #FFFFFF — Card Surface Light: Background for secondary feature modules and bento blocks
- #062124 — Deep Teal Hero Card: Dominant deep emerald-slate container for the Spotlight hero panel
- #0B2B2F — Dark Hero Secondary Surface: Internal stat blocks and nested panels inside the spotlight card
- #0D141C — Terminal Canvas: Dark code editor block surface in the developer experience card
- #0F172A — Text Primary: Main headlines, bold title typography, and key values on light surfaces
- #64748B — Text Muted: Supporting descriptions, table headers, and inactive badge typography
- #00DC82 — Mint Neon Accent: Live chart lines, stat highlights, ping indicators, and metric figures
- #059669 — Emerald Brand Action: Primary CTA button surface and verification icon fills
- #E2E8F0 — Border Subtle: Hairline 1px border lines defining light bento cards and nested tiles
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 28px heading-lg, 38px display. Tracking -0.02em at display, 0 at body. The typographic tone is ultra-precise, technical, and institutional. By using Inter with tightened tracking (-0.02em) on bold headings and strictly structured hierarchy down to 11px uppercase labels, it evokes high-frequency financial trading systems. Geist or SF Pro Display make direct 1:1 drop-in alternatives without losing tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is communicated almost entirely without drop shadows. The design relies on surface contrast: the off-white canvas (#FAFBFB) establishes ground level, white cards (#FFFFFF) sit flat upon it separated by 1px slate borders (#E2E8F0), and the dark hero container (#062124) creates a deep visual recess that pulls the eye inward.
IMAGERY
There is no photographic imagery. Visual storytelling is driven entirely by live UI representations: SVG sparkline graphs, tabular model metrics, IDE syntax code blocks, and crisp geometric line icons. Any illustrative addition should be strictly schematic, vector-based, and monocled in slate or emerald.
SIGNATURE DETAIL — the thing that makes this design itself
The massive tonal contrast flip between the airy off-white page canvas and the nocturnal deep-teal (#062124) trading spotlight module containing luminous mint telemetry charts. It converts a standard feature list into a high-stakes mission-critical control center.
MUST
- Anchor the layout with a single dominant dark bento card while keeping secondary cards crisp white.
- Use high-saturation mint green (#00DC82) exclusively for live data, active status dots, and telemetry metrics.
- Maintain uniform 16px corner radius across all outer bento containers.
- Pair 1px subtle borders (#E2E8F0) with pure white backgrounds rather than heavy drop shadows.
AVOID
- Do not turn the entire page dark; the contrast relies on the deep teal hero floating in light space.
- Do not use warm yellow or red accents; keep all signals within the mint/emerald/slate spectrum.
- Never apply thick borders greater than 1px on the card perimeters.
- Do not use floating elevation shadows; cards rely on flat borders and tone shifts.
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. 在 DraPub 中尝试 
