Design a light-mode web interface screen: tactile 3d claymorphism meets structured enterprise precision on a crisp dual-canvas split.
LAYOUT
The screen uses a persistent two-column structural skeleton: an 88px static dark vertical rail docked on the left, beside an expansive, scrollable primary viewport. The viewport begins with an open utility bar followed by an expansive hero presentation that blends editorial typography with large illustrative art. Below the hero sits an evenly distributed 4-column metrics rack, directly succeeded by a 2:1 asymmetrical layout pairing a comprehensive project table with a radial benchmark widget.
PALETTE (use these exact hex values)
- #131b2e — Midnight Sidebar: Anchors primary left-hand navigation dock and user profile surface
- #f4f6fb — Canvas Ice: Underlying background tone across all main stage layout sections
- #ffffff — Surface White: Elevated metric tiles, data tables, and interactive input elements
- #3461e2 — Cobalt Primary: Primary CTAs, active navigation states, and dominant focal elements
- #111827 — Obsidian Text: High-emphasis display typography, card metric values, and primary labels
- #7b879c — Slate Neutral: Secondary copy, passive navigation links, breadcrumbs, and metadata captions
- #f7556a — Coral Pulse: Metric badge background and upward trend trajectory indicator for ideation
- #19b2df — Cyan Spark: Metric icon circle and visual velocity chart line for deployed solutions
- #f58e2a — Amber Forge: Team capacity icon container and collaborative metric highlights
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 48px display. Tracking -0.03em at display, 0 at body. The typographic tone is commanding yet welcoming, powered by a contemporary geometric neo-grotesk with open counters and tall x-height. Display headlines project institutional authority through heavy weights and tightened letter-tracking, while small data points remain crisp and readable via tabular lining numbers. System fallbacks like Inter or Manrope easily sustain the interface's corporate lucidity.
GEOMETRY & SPACING
Corner radii — cards 18px, links 8px, inputs 24px, buttons 12px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered gently using wide-radius, low-opacity ambient shadows (0 12px 32px rgba(19, 27, 46, 0.04)) underneath white cards rather than harsh outlines. Elevated interactive elements like the primary CTA button and metric icon circles feature matching colored cast shadows with 20-30% opacity to suggest luminosity. The background rests flat, allowing layered cards to float with tactile separation.
IMAGERY
Features stylized, matte-finish 3D isometric figures rendered in a friendly claymation aesthetic with smooth surfaces and gentle lighting. Objects like the incandescent bulb and interlocking cogs use warm pastel yellows and oranges contrasted against soft blue foundational blocks. Traditional flat vector icons, aggressive hyper-realistic renders, or photographic collages are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-contrast signature: an impenetrable midnight-navy navigation pillar framing an ethereal, pillowy-soft light canvas inhabited by tactile 3D clay figures and luminous neon-tinted metric badges. It balances playful creativity with rigorous SaaS efficiency; misuse occurs when substituting the 3D art with stock photography or flattening the dark sidebar into light gray.
MUST
- Retain the strict visual balance between the solid #131b2e sidebar and the airy #f4f6fb workspace canvas.
- Enclose distinct analytical metrics in self-contained #ffffff cards with 18px border radius.
- Pair every primary metric value with an inline directional percentage indicator and sparkline.
- Render icons inside colorful 48px rounded circles with soft, matching ambient glow shadows.
AVOID
- Do not apply heavy dark borders around cards; rely exclusively on soft 0 10px 30px rgba(0,0,0,0.03) shadows.
- Never replace the deep navy navigation rail with a white sidebar, destroying layout grounding.
- Avoid using flat stock photography or harsh vector clip-art instead of soft 3D clay compositions.
- Do not compress card padding below 20px; breathable spacing is fundamental to this enterprise aesthetic.
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 中尝试 
