Design a light-mode web interface screen: tactile blue-spectrum learning space marrying soft isometric playfulness with disciplined modular enterprise telemetry.
LAYOUT
The viewport adopts a fixed-width left rail sidebar (approx. 240px) and a multi-column fluid workspace. The main view opens with a dual-pane hero banner pairing personalized greeting copy with a decorative 3D asset, directly followed by a 4-column quick-action row. Below, a 4-column course carousel commands primary focus, concluding with a bottom three-column data grid splitting progress history (50%), donut distribution (25%), and scheduled agenda (25%).
PALETTE (use these exact hex values)
- #F4F7FB — Canvas Background: Global application viewport background behind all content containers and cards
- #FFFFFF — Card Surface: Primary surface for modules, charts, lists, and navigation sidebars
- #1865F2 — Cobalt Primary: Active navigation items, primary buttons, major progress bars, and line chart fills
- #111827 — Midnight Ink: Greeting titles, card headers, critical metric figures, and primary values
- #64748B — Slate Muted: Subtitles, chart axes, inactive navigation labels, and metadata strings
- #EAEFF5 — Border Tint: Card outlines, divider strokes, and input field boundaries
- #F43F5E — Coral Accent: Notification counters, calendar date badges, and breakdown donut chart segments
- #06B6D4 — Cyan Vivid: Secondary skill categories in the donut breakdown chart and illustration tones
- #10B981 — Success Emerald: Positive delta badges, completion indicators, and verification tags
- #0B1938 — Abyssal Navy: Upsell promo banner background surface in lower sidebar
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 28px display. Tracking -0.02em at display, 0 at body. Plus Jakarta Sans delivers an immaculate, optimistic tech-forward personality with wide apertures and clean geometry. The clean weights reinforce data clarity without appearing clinical, seamlessly balancing punchy bold display statistics with legible 12px metadata strings. For production substitution, Google Fonts' Inter or DM Sans will preserve identical vertical proportions.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 8px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered primarily through surface contrast rather than harsh shadows. Pure white cards rest on a softly tinted #F4F7FB floor, delineated by micro-borders (#EAEFF5) and ultra-diffuse ambient drop shadows (box-shadow: 0 4px 20px -2px rgba(18, 38, 63, 0.03)). Hover tooltips and active menu items rely on crisp elevation jumps using slightly denser opacity (rgba(24, 101, 242, 0.12)).
IMAGERY
Visual assets employ high-finish isometric 3D claymorphic scenes bathed in studio rim lighting and cool blue-to-indigo tones. Subjects encompass abstract computational blocks, stylized server stacks, cloud shapes, and code brackets. Stock photography or flat corporate vector illustrations are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of cobalt-tinted 3D isometric cloud-and-code tiles embedded directly inside minimalist 16px rounded white cards, bridging friendly game-like progress metaphors with serious enterprise dashboard mechanics. Misusing this by introducing mismatched flat line drawings or harsh multi-colored photography breaks the system instantly.
MUST
- Anchor layout sections with consistent 24px vertical margins and 16px card radii.
- Use solid cobalt blue (#1865F2) as the single primary interactive signifier.
- Pair numeric percentages with visual circular or linear progress indicators.
- Render illustrations in a unified isometric 3D clay aesthetic dominated by blues and soft lavender.
AVOID
- Do not use sharp 0px corners; every container and interactive element must be rounded.
- Avoid multi-colored high-saturation gradients across large backgrounds or structural panels.
- Do not use dark backgrounds for main application cards; keep the canvas bright and airy.
- Never replace isometric clay 3D imagery with flat wireframe vector art or photorealistic stock images.
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 中尝试 
