Design a light-mode web interface screen: precision hardware telemetry anchored by deep-navy spotlighting against sterile architectural alabaster surfaces.
LAYOUT
The viewport adopts a fixed left rail (240px wide) coupled with a fluid responsive main stage capped at 1560px. The header contains global search and utility actions, leading immediately into a prominent full-width hero feature spotlight. Below the hero sits a 4-column metric sparkline row, followed by an asymmetric 2-column analytics split (60% line chart, 40% donut breakdown), concluding with an exhaustive full-width tabular catalog.
PALETTE (use these exact hex values)
- #f8f9fd — Canvas Background: Global application viewport backdrop beneath all cards and navigation.
- #ffffff — Card Surface: Primary elevated card and container background across all dashboard modules.
- linear-gradient(135deg, #0b1528 0%, #172a5a 100%) — Hero Navy Gradient: High-contrast spotlight container background showcasing primary hardware releases.
- #1b59f8 — Electric Blue: Primary brand CTA fills, active sidebar indicators, and primary sparkline curves.
- #06b6d4 — Turquoise Teal: Secondary metric sparklines, channel distribution segments, and volume badges.
- #f43f5e — Vibrant Rose: Order value sparklines, donut distribution rings, and out-of-stock indicators.
- #0f172a — Slate Text Primary: Primary headings, summary stats, product titles, and high-emphasis labels.
- #8c95a6 — Muted Slate Text: Secondary labels, inactive navigation links, table headers, and axis legends.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Text, Outfit), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 30px display. Tracking -0.02em on headings, 0 on body labels. The typographic tone is architectural, rational, and modern, using Plus Jakarta Sans or a similar geometric neo-grotesque. It conveys premium consumer hardware authority by pairing wide-aperture display headings with high-legibility tabular figures for commercial readouts. For open-source parity, Inter or SF Pro Display serve as direct zero-cost drop-in substitutes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Elevation is handled primarily through planar contrast: crisp white cards sit on an ultra-pale cool-blue canvas (#f8f9fd) separated by subtle 1px hairline borders (#edf2f7). Shadows are kept near-imperceptible (0 1px 3px rgba(16,24,40,0.04), 0 1px 2px rgba(16,24,40,0.02)). Tooltip bubbles and modals use medium-range soft blur (0 4px 16px rgba(16,24,40,0.08)) to float visibly above chart lines.
IMAGERY
Hardware imagery features hyper-clean, studio-lit 3D renders of audio products (earbuds, over-ear cans) isolated against transparent or smoothly graded dark backgrounds. The hero hardware floats above an electric neon circular pedestal with ambient caustic rings. Photography must be pristine, sterile, and minimal; lifestyle photography with busy human backgrounds is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of the deep-navy hardware spotlight deck (#0b1528) with glowing concentric pedestal rings directly above ultra-sterile, high-key white telemetry cards. This instantly transforms an otherwise utilitarian SaaS inventory tool into a luxury brand flagship dashboard. It is misused if secondary utility cards are also colored dark, ruining the spotlight dynamic.
MUST
- Retain the strict 16px border-radius across all major dashboard card surfaces.
- Use deep midnight navy (#0b1528) exclusively on deliberate spotlight banners, never on utilitarian chart cards.
- Pair numeric metrics ($1.24M, 8,432) with a bold weight and subtle tabular sizing for instant scanning.
- Maintain hairline 1px border strokes (#edf2f7) paired with faint ambient drop shadows on white cards.
AVOID
- Do not introduce pure black (#000000) for text; always employ slate deep navy (#0f172a).
- Do not apply drop shadows to the navigation sidebar; keep it planar against the #f8f9fd canvas.
- Avoid solid fill backgrounds on table status pills; use 10% opacity tints with saturated text.
- Do not mix rounded pill buttons with sharp right-angle inputs; constrain components to 8px or 999px.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2784:2960. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
