Design a light-mode web interface screen: tactile claymorphic warmth balances crisp enterprise security in muted terracotta and porcelain planes.
LAYOUT
The page follows a classic asymmetric hero grid, featuring a 50/50 split between a left-aligned typography column and a right-aligned 3D hero showcase. Below the hero fold sits a 5-column sectional feature row: one summary anchor block on the left and four modular capability cards on the right. The section anchors at the base with a full-width horizontal ribbon housing four key performance statistics.
PALETTE (use these exact hex values)
- #FBFBFC — Canvas Porcelain: dominant background canvas providing high contrast for white surface cards
- #FFFFFF — Surface Pure White: elevated card surfaces, navigation container, and interactive input elements
- #BF513E — Terracotta Red: primary call-to-action buttons, key hero brand text, and focal icon fills
- #A74130 — Deep Terracotta Hover: hover and pressed states for primary brand interactive elements
- #1E242E — Slate Ink: primary headings, metric numbers, and dominant navigation text labels
- #606873 — Muted Ash: secondary descriptions, subheaders, and informational metadata copy
- #E8F5E9 — Mint Shield Tint: background pill tint for verification badges and threat detection icon fills
- #EFF6FF — Sky Tint: background fill for filtration and search category iconography
- #EAECF0 — Border Hairline: subtle perimeter framing for cards, pills, and secondary outlines
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700/800. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 32px heading-lg, 52px display. Tracking -0.03em display, -0.01em body. Plus Jakarta Sans conveys engineered precision softened by humanist curves, perfectly reflecting cybersecurity that is approachable rather than intimidating. The tight letter tracking (-0.03em on display headers) gives the company an authoritative presence, while tall x-heights maintain crisp readability at 13px. If substituting, Inter or DM Sans retains the structural cleanliness without compromising tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using extremely soft, ambient occlusion shadows paired with subtle white-to-porcelain surface layering. Cards float just above the canvas with '0 4px 20px rgba(30, 36, 46, 0.03)' and hairline borders rather than heavy elevation. The 3D illustration supplies the tactile spatial realism, allowing UI elements to remain flat and legible.
IMAGERY
Hero graphics rely on tactile 3D claymorphic renderings featuring smooth matte finishes, rounded bevels, and warm natural lighting. Metaphors center on physical correspondence—such as an open envelope containing an insulated document shielded against stylized insect pests. Photorealistic imagery, dark matrix aesthetics, and flat technical wireframes are completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of a warm, matte-terracotta red (#BF513E) focal point against crisp porcelain card surfaces, anchored by friendly 3D clay security metaphors. This warm, ceramic aesthetic strips away traditional cyber-paranoia in favor of calm, physical defense. It is commonly misused by oversaturating surrounding badges, which dilutes the singular authority of the primary terracotta anchor.
MUST
- Render the primary envelope and hero visuals in soft, matte 3D clay textures without glossy specular reflections.
- Reserve the terracotta red (#BF513E) strictly for the primary CTA, brand highlights, and key focus text.
- Maintain uniform 16px corner radius across all feature, statistical, and content cards.
- Keep icon backdrops pale and desaturated, using distinct pastel tints to categorize functional areas.
AVOID
- Do not use dark, harsh dropshadows; stick strictly to ambient diffusion below 4% opacity.
- Do not saturate secondary badge backgrounds; keep them under 15% opacity to avoid competing with terracotta CTAs.
- Do not mix sharp 0px corners with rounded elements; rounded cards and buttons are mandatory.
- Do not use hyper-realistic photography or neon cyber vectors; stick to tactile, stylized 3D objects.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3456:2384. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
