Design a light-mode web interface screen: tactile enterprise precision wrapped in airy porcelain and luminous cobalt blue.
LAYOUT
The screen uses a distinct hybrid layout: an 80px fixed vertical navigation rail on the far left, an open top header carrying breadcrumbs and actions, and a 60/40 two-column hero composition. The left hero column holds the narrative stack (pill tag, display title, paragraph, button row, micro-features), while the right accommodates the sprawling 3D clay illustration. The bottom is anchored horizontally by an elevated four-column metric summary deck.
PALETTE (use these exact hex values)
- #F4F6FC — Porcelain Canvas: dominant background canvas across the full viewport and sidebar backing
- #FFFFFF — Pure White: elevated surface for metric container, button backgrounds, and active state highlights
- #2B66F6 — Electric Cobalt: primary call-to-action fills, key headline emphasis, and active navigation indicators
- #0F172A — Deep Slate: primary display typography, header brand label, and prominent stat numerals
- #64748B — Muted Ash: secondary body copy, inactive navigation labels, and metric descriptor text
- #EDF4FE — Soft Ice Blue: subtle background wash for pill tags, sidebar active tab, and metric icon tiles
- #E0F7F5 — Pastel Aqua: background for data-driven analytics feature and metric indicator badges
- #FDECEB — Blush Coral: background tint for conversion and success rate statistic icons
- #F1ECFE — Pastel Violet: background backing for velocity and time-to-value performance indicator tiles
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 32px heading, 52px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative yet approachable, driven by geometric clarity, circular bowls, and open counters. Plus Jakarta Sans balances technical precision with warmth, perfectly matching strategic digital consulting. For drop-in replacements, Inter provides similar clarity, while DM Sans or Outfit can match the slightly friendlier geometric display weights.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1440px container, comfortable density.
DEPTH
Depth is created using extremely diffuse ambient shadows (0 16px 36px rgba(43,102,246,0.04) and 0 8px 24px rgba(15,23,42,0.03)) rather than hard drop-shadows or borders. Surface hierarchy rises from the tinted porcelain base to pure white metric islands. The 3D scene elements cast gentle directional ground shadows that visually integrate them into the screen surface.
IMAGERY
Visual assets leverage tactile 3D claymorphic renders with soft, directional studio lighting and matte ceramic materials. The hero pairs a white laptop displaying clean vector workflow diagrams with a monumental cobalt blue chess knight piece and botanical desktop accents. Flat photography, generic vectors, or harsh metallic renders would completely break the organic high-craft tone.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline split ('What Is' in deep slate, 'Digital Strategy' in electric cobalt) floating immediately above a frosted 3D clay setup with a matte cobalt chess piece. Replicate it by pairing two-tone high-contrast display type with soft pastel-grounded stat pods and tactile non-glossy 3D metaphors. It fails if the 3D assets become hyper-realistic or glossy.
MUST
- Keep the primary background strictly tinted porcelain (#F4F6FC) rather than pure clinical #FFFFFF.
- Reserve solid electric cobalt (#2B66F6) strictly for interactive primary buttons, active states, and headline emphasis.
- Enclose descriptive icons inside square rounded containers with 20-30% pastel color fills.
- Use generous whitespace around 3D illustrations so shadows can fade without clipping.
AVOID
- Do not use dark high-contrast borders; boundaries should rely on surface color shifts and soft shadows.
- Never apply saturated primary blue to more than one word group in the main headline.
- Do not render flat stock photography; visual assets must be tactile, 3D clay/matte renders.
- Avoid harsh black typography; anchor all dark text to deep navy slate (#0F172A).
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 中尝试 
