Design a light-mode web interface screen: isometric playfulness anchored in an ultra-clean, clinical fintech dashboard canvas.
LAYOUT
The screen uses a master-detail split layout: a compact 88px left rail sidebar anchors global context, while the main viewport flows vertically from a dual-column hero (copy on left, isometric artwork on right) down to dense analytical dashboard modules. Beneath the hero, a multi-stat KPI strip and sparkline chart give immediate operational insight, closed out by a bottom row of four quick-action shortcuts.
PALETTE (use these exact hex values)
- #f8fafd — App Background: Full canvas background framing the left sidebar and main dashboard body
- #ffffff — Card Surface: Raised dashboard cards, widgets, and floating utility modules
- #1363df — Primary Cobalt: Main CTA buttons, active sidebar accents, key graph lines, and active badges
- linear-gradient(135deg, #1e293b 0%, #3b82f6 100%) — Hero Gradient: Dual-tone fill across the hero title 'Loyalty Program'
- #eef4ff — Active Nav Soft Blue: Background tint for active sidebar menu pill and chip containers
- #111827 — Text Primary: Main headlines, quantitative KPI metrics, and primary labels
- #6b7280 — Text Secondary: Body descriptions, axis labels, subtitle copy, and inactive navigation items
- #10b981 — Success Green: Growth indicators, percentage increases, and positive performance deltas
- #f59e0b — Warm Gold: Coins, star badge icons, and secondary visual highlight accents
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 48px display. Tracking -0.03em display, -0.01em body. The typographic tone is tech-forward, friendly, yet impeccably corporate fintech, driven by a modern geometric sans-serif (Plus Jakarta Sans or DM Sans). Tight letter-spacing on display sizes commands executive authority, while airy line heights in descriptive body copy ensure effortless legibility.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 48px between sections, 1440px container, comfortable density.
DEPTH
Depth is created using very soft, highly diffused ambient drop shadows (e.g. 0 8px 24px rgba(19, 99, 223, 0.04)) over the off-white canvas (#f8fafd). Interactive elements like the primary CTA boast a faint colored glow, while cards float effortlessly without harsh structural borders.
IMAGERY
Features clean, high-saturation 3D isometric vector illustrations with stylized human characters interacting with oversized fintech elements (credit card, coins, shopping cart, gift boxes). Real-world photos are strictly relegated to circular customer avatars; any photorealistic product imagery would clash with the UI language.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious blend of a high-energy, 3D isometric pastel illustration seamlessly sharing canvas space with a clinical, ultra-structured fintech KPI telemetry grid. Maintain this signature by pairing playful narrative illustrations with ultra-precise, whitespace-rich data cards.
MUST
- Use generous whitespace around the hero illustration to let the 3D isometric artwork breathe.
- Pair rich vibrant cobalt (#1363df) with very soft tinted background fills (#eef4ff).
- Maintain uniform 16px border-radii on all metric and action card containers.
- Show micro-trends with green upward arrows and tight percentage values (#10b981).
AVOID
- Never use dark borders or harsh drop shadows; rely on soft 12px blur ambient shadows.
- Avoid flat or monochrome hero artwork; the 3D isometric narrative is central.
- Do not crowd KPI modules; keep divider rules faint (#f1f5f9) and well-padded.
- Never use saturated background fills for entire dashboard cards; reserve saturation for buttons and charts.
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 中尝试 
