Design a light-mode website section: crisp enterprise security dashboard blending forensic log streams with high-trust metric cards and calming slate surfaces.
LAYOUT
The grid is arranged in a structured three-tier stack across a 1280px container. The top band divides into an introductory headline on the left and four uniform metric cards on the right. The core middle band balances three equal-height columns: a multi-quote testimonial stack, an operational live log console, and a global geo-deployment map. The layout concludes with an edge-to-edge horizontal bar showcasing architectural principles and formal security certifications.
PALETTE (use these exact hex values)
- #f8fafc — Canvas Background: Global application page background beneath cards and headers
- #ffffff — Card Surface: Base surface for high-level cards, metric containers, and trust ribbons
- #1e293b — Console Dark: Internal background for the live event stream terminal preview
- #e2e8f0 — Border Subtle: Single-pixel delineator on cards, dividers, and module contours
- #2563eb — Primary Blue: Headline emphasis, primary link text, and core telemetry nodes
- #10b981 — Active Green: Real-time indicators, ping statuses, and heartbeat telemetry dots
- #0f172a — Text Primary: Titles, metric values, log headers, and quote authors
- #64748b — Text Muted: Labels, descriptions, metadata timestamps, and card subtitles
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 32px heading, 40px display. Tracking -0.02em at display, 0 at body, 0.05em at caps. The typography conveys unflinching technical precision, enterprise diligence, and administrative calmness. Inter provides a clean, neutral voice that prioritizes rapid data scanning and readability across compact tables. JetBrains Mono lends clinical, forensic legitimacy to the real-time event monitor.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through planar containment and perimeter definition rather than spatial z-index shadows. Cards float gently above the #f8fafc backdrop relying on crisp 1px borders in #e2e8f0 and pure white surface contrast. The only inverted depth occurs in the live protection console, which uses a dark slate fill to create a visual recessed cavity.
IMAGERY
Photography is restricted to authentic, small circular avatar portraits (28-32px diameter) of real security leaders. Visual diagrams rely on minimalist dot-matrix coordinate maps in light grayish blue with cobalt circular beacons. Graphic illustrations or stock lifestyle photos are strictly avoided to preserve engineering credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The standout move is the embedded dark console card nestled directly between light editorial testimonial and map panels. This creates an immediate forensic anchor, convincing the viewer of deep live backend activity while the surrounding light UI maintains accessible enterprise credibility. Misusing it requires flooding the entire page with dark mode, which ruins the calculated balance.
MUST
- Anchor metric cards with distinct pastel icon backgrounds matched to the metric's functional domain.
- Maintain strict 16px border-radius across every standard card container on the screen.
- Use monospaced typography strictly inside the dark live-terminal log module.
- Format secondary microcopy at 12-13px with #64748b text-muted for high contrast readability.
AVOID
- Never apply high-blur or deeply saturated drop shadows underneath the white content cards.
- Do not use the cobalt accent color for entire card backgrounds; restrict it to accents.
- Never introduce informal, decorative, or serif typefaces into technical enterprise proof cards.
- Do not omit metric labels or leave quantitative figures without descriptive context.
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 中尝试 
