Design a light-mode web interface screen: warm human security balancing soft 3d tactile isometric hardware with crisp terracotta editorial accents.
LAYOUT
Structured around a strict two-column hero balanced over a four-column grid footer. Left hero contains status pill, multi-line display headline with brand punchline, lead paragraph, dual CTA row, and linear trust tokens. The right hero showcases the 3D isometric centerpiece surrounded by orbiting HUD metrics, anchored below by four equal-width feature cards.
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Background: Global application backdrop providing clean, low-fatigue contrast.
- #FFFFFF — Card Surface White: Background for bottom feature cards, floating metric tags, and top navigation bar.
- #C24333 — Brand Terracotta: Primary hero CTA, active nav indicator, logo icon, and headline emphasis phrase.
- #181E28 — Deep Charcoal Navy: Primary headings, brand wordmark, and strong card titles.
- #616C7D — Muted Slate Gray: Supporting descriptive body copy, nav links, and tertiary meta labels.
- #EAEFF4 — Soft Hairline Border: Structural outlines on cards, floating badges, and vertical divider strokes.
- #22C55E — Status Green: Pill indicator dot showing real-time active system protection.
- #4361EE — Shield Slate Blue: Isometric screen illustration accents and secondary metric graph shading.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700/800. Sizes 12px caption, 14px body-sm, 15px body, 18px subheading, 24px heading, 52px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers an assertive, highly engineered yet welcoming authority. Its wide counters and geometric stability prevent the security topic from feeling cold or intimidating. If substituting, Inter or Manrope preserves the clarity, but ensure bold weights carry tight letter-spacing.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth relies primarily on physical modeling inside the isometric render rather than multiple CSS shadow tiers. UI surfaces leverage delicate 1px borders (#EAEFF4) and faint, diffuse ambient drop shadows (rgba(24, 30, 40, 0.04) 0px 8px 24px) for subtle separation. Floating data tags cast soft realistic occlusion directly onto the 3D planes.
IMAGERY
Soft matte 3D claymorphism rendered from an isometric top-right vantage point, depicting physical computer hardware, a padlock, and wireless nodes. Graphics must feel solid, rounded, and tactile rather than virtual or holographic. Avoid stock photography, abstract vector nodes, or aggressive cybersecurity tropes.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an authoritative charcoal display title highlighted with a single warm terracotta clause ('what matters.') echoed by matte clay 3D security hardware. To implement properly, keep the accent color strictly isolated to the emotional core phrase and primary interactive targets, never allowing it to bleed into secondary decorative UI strokes.
MUST
- Reserve #C24333 for actionable buttons, high-impact verbs, and active state indicators.
- Use exactly 16px border-radius on all standard feature and information cards.
- Pair heavy display typography with -0.035em tracking to retain tight editorial punch.
- Use soft pastel tinted circular backgrounds (44px) to cradle category icons.
AVOID
- Never introduce neon blues, dark matrix terminals, or harsh glowing sci-fi graphics.
- Do not use sharp 0px or 4px corners on UI cards; it breaks the friendly tactile cadence.
- Never apply gradients to the terracotta primary button; keep it matte and solid.
- Avoid heavy dark borders; outline strokes must remain subtle at 1px solid #EAEFF4.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
