Design a light-mode web interface screen: tactile clay 3d figures meet warm terracotta accents in an airy, structured enterprise loyalty canvas.
LAYOUT
The header spans the full container width with balanced logo-left, navigation-center, and dual-CTA-right distribution. Below, the hero splits into an asymmetrical 45/55 layout where typography and trust metrics dominate the left, and an expansive 3D scene claims the right. The page terminates cleanly in an integrated four-column value proposition banner spanning the base.
PALETTE (use these exact hex values)
- #C4452C — Terracotta Crimson: Primary action button background, active navigation indicator line, and brand focal highlights.
- #181D26 — Deep Ink: Primary headline typography, brand logo icon container, and bold metric values.
- #6E7582 — Muted Slate: Body paragraphs, unselected top navigation links, and tertiary metric descriptors.
- #FFFFFF — Pure Canvas: Primary elevated card surface, floating stat badges, and app body background.
- #F7EFE8 — Warm Spotlight: Soft circular backplate highlighting the hero 3D hardware composition.
- #EBE8E2 — Subtle Cream Border: Hairline perimeter borders on floating stat cards, pill tags, and feature bar container.
- #F9F8F6 — Outer Frame Neutral: Outer boundary background surrounding the main application container.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 16px subheading, 20px heading, 64px display. Tracking -0.02em at display, 0.01em at body. The typography is welcoming, modern, and confident. Plus Jakarta Sans offers geometric balance without appearing rigid, bringing humanistic curvature that harmonizes with the rounded 3D clay art. Free Google Fonts substitute Inter or Outfit will preserve this friendly clarity if licensed fonts are unavailable.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled through ambient, diffused drop shadows beneath elevated white cards (0px 8px 24px rgba(0,0,0,0.04)) rather than sharp directional lighting. The tactile 3D clay characters and laptop bring physical volume, casting soft contact shadows onto the central spotlight disk.
IMAGERY
Hero imagery relies on rendered matte clay 3D figures interacting playfully with isometric digital screens, stacked gold tokens, and gift packages. Realistic stock photos or flat corporate vectors would clash severely with this friendly, tactile aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of an oversized matte 3D clay interaction scene floating over a subtle warm beige oval backdrop, flanked by delicate white stat chips and warm terracotta interactive accents. Misusing it involves substituting the soft clay figures with flat vector clip-art or harsh hyper-saturated gradients.
MUST
- Use warm terracotta #C4452C strictly for primary actions, active indicators, and high-value conversion elements.
- Enclose secondary feature indicators in smooth 1px bordered cards with #EBE8E2 outlines.
- Preserve deep letter-spacing tightening (-0.02em) on the 64px display headline to maintain density.
- Ground 3D floating visual assets with soft tinted radial backdrops like #F7EFE8.
AVOID
- Do not introduce sharp 0px corners; every card and button requires between 10px and 999px curvature.
- Avoid high-contrast pitch-black text; keep base headlines around #181D26 to protect warmth.
- Do not clutter hero illustration space with multiple saturated colored backdrops.
- Never make secondary action buttons filled; use icon-backed ghost or text-only variants.
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 中尝试 
