Design a light-mode web interface screen: tactile enterprise security interface merging clean telemetry widgets with soft isometric depth and decisive coral accents.
LAYOUT
The viewport is framed by a top navigation bar and a dedicated left-hand utility sidebar. The main viewport splits into two distinct vertical tiers: an upper hero module pairing left-aligned conversion copy with right-aligned isometric 3D artwork, and a lower four-column analytic dashboard row. The dashboard grid evenly segments overview charts, metric counters, threat categories, and a status gauge.
PALETTE (use these exact hex values)
- #f6f8fb — Canvas Ice: Foundational window and page backdrop surrounding all elevated application frames
- #ffffff — Pure White: Elevated card modules, telemetry containers, and navigation surfaces
- #111827 — Deep Onyx: Primary headings, major telemetry integers, and dominant high-contrast labels
- #64748b — Slate Steel: Secondary descriptors, navigation links, graph axis scales, and metadata
- #e85042 — Safety Coral: Primary action triggers, active brand shield logo, and high-priority download states
- #3b82f6 — Guardian Blue: Secondary headline accent, live data plot lines, and technological highlight indicators
- #10b981 — Vigilant Mint: Verification badge pills, positive delta indicators, and protection status confirmation rings
- #e2e8f0 — Subtle Border: Hairline dividers, perimeter container borders, and neutral input envelopes
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 46px display. Tracking -0.03em display, -0.01em body. Plus Jakarta Sans provides a clean, contemporary geometric feel with generous counters that ensure extreme legibility at small analytical sizes (11px-13px). The heavy 700 weight headline conveys institutional security and enterprise stability, while the soft terminals keep the brand approachable. If licensing is restricted, Inter or DM Sans serve as pixel-accurate functional substitutes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 48px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered through delicate, low-contrast ambient shadows (0 10px 25px -5px rgba(0, 0, 0, 0.04)) rather than sharp multi-tiered elevations. Cards appear to hover gently above the #f6f8fb base canvas, reinforced by crisp 1px borders (#e2e8f0). Elevated popovers and tooltips use slightly darker ambient blurs to sit cleanly above interactive charts.
IMAGERY
Features clean, isometric 3D illustrations depicting hardware and network security concepts rendered in soft pastels, cool greys, and glowing accents. Cylindrical servers, hovering shields, and diminutive stylized human characters establish scale and accessibility. Photographic realism or dark cyberpunk imagery would violate the crisp, approachable enterprise aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone headline ('Enterprise-Grade' in deep onyx beside 'Internet Security' in bright royal blue) matched directly below with a warm coral primary CTA button. This specific blue-coral chromatic anchor prevents the interface from feeling like a generic SaaS utility. Misusing it by coloring entire phrases in coral destroys the visual restraint that makes the layout feel enterprise-ready.
MUST
- Retain the split headline style using onyx for initial clauses and vibrant royal blue (#3b82f6) for security keywords.
- Enforce consistent 16px border radii on all data cards across the lower dashboard grid.
- Use Safety Coral (#e85042) strictly for high-priority user actions and alert thresholds.
- Pad telemetry cards evenly with 20px interior spacing to maintain analytical breathing room.
AVOID
- Never introduce harsh pitch-black backgrounds; preserve the clean daylight palette.
- Do not style secondary or tertiary CTA buttons with solid coral fills.
- Never omit the subtle hairline border (#e2e8f0) surrounding floating white cards.
- Avoid sharp 0px corners on interactive cards, badges, or input elements.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3520:2336. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
