Design a light-mode web interface screen: disciplined boutique minimalism softened by warm terracotta accents and playful isometric 3d vignettes.
LAYOUT
The header sits flush at the top with left-aligned monogram branding and right-aligned navigation terminating in a primary button. The hero uses an asymmetric two-column split: left-aligned headline block with avatar endorsement, counterbalanced by a sprawling isometric illustration occupying the entire right half. Below an inline logo ticker, the services section opens with an asymmetric split header (title left, blurb right) driving into an orderly 4-column card grid, concluded by a 4-column value proposition bar.
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Background: Global page background providing a warm, clean foundation without stark clinical white glare.
- #FFFFFF — Surface Card: Background for service cards and floating UI panels, elevated by faint shadows.
- #AC4C3A — Terracotta Primary: Key accent for primary action buttons, key headline emphasis, and pill tag text.
- #FBEFEA — Terracotta Tint: Soft pill badge background backing the eyebrow greeting text.
- #2B5BE8 — Cobalt Focus: Secondary accent isolated inside 3D illustrations, wireframe highlights, and text links.
- #76A890 — Sage Assurance: Circular badge fill for trust checkmarks across the bottom value propositions.
- #14171A — Charcoal Headings: High-contrast headings, navigation labels, and prominent card titles.
- #666F7B — Muted Slate: Descriptive body copy, partner logos, and secondary meta labels.
- #E6E9EC — Subtle Border: Dividers, hairline card borders, and logo strip separation lines.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Work Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 36px heading, 52px display. Tracking -0.02em at display, 0.05em on badges. The typography relies on Plus Jakarta Sans (or Inter), projecting precision, high-order craft, and contemporary engineering discipline. Tight letter-spacing on large display sizes lends headlines an authoritative editorial presence, while open tracking on uppercase captions ensures micro-legibility. The combination of clinical geometry and warm rust-colored text highlights keeps the brand approachable rather than austere.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, airy density.
DEPTH
Depth is created through low-contrast, highly diffuse ambient occlusion rather than layered z-index strata. Floating isometric components and service cards cast broad, subtle drop shadows (0 12px 36px rgba(20, 23, 26, 0.05)) over the pale gray ground. No harsh borders or layered glassmorphic blurs are used.
IMAGERY
Visual imagery centers on bespoke 3D isometric scenes rendered in matte clay and soft plastic textures featuring a stylized panda mascot interacting with UI frames, code sheets, and hardware. Realistic photographic cutouts are strictly restricted to small circular social-proof avatar portraits. Stock photography or flat vector clip-art would break the tactile studio aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The studio's hallmark is the deliberate juxtaposition of an ultra-clean, architectural agency layout against a warm terracotta highlight and a tactile 3D isometric mascot navigating physical UI components. It signals premium technical capability without taking itself too seriously. Common misuse is overpopulating the canvas with too many colored elements, which destroys the calculated restraint.
MUST
- Reserve the terracotta hue (#AC4C3A) strictly for focal emphasis and primary conversion buttons.
- Maintain generous 96px vertical section spacing to preserve the airy, high-end studio feel.
- Pair isometric 3D visuals with clean, minimal 2D flat typography to balance playfulness and rigor.
- Render all client and partner brand logos in uniform slate gray (#8E95A0).
AVOID
- Do not introduce harsh pure black (#000000); use refined charcoal (#14171A) instead.
- Do not saturate entire section backgrounds in terracotta or blue; keep the canvas predominantly off-white.
- Avoid fully rounded pill buttons for primary actions; keep button corners sharp at 6px.
- Never mix photography inside the card headers where isometric 3D character art belongs.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2496:3312. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
