Design a light-mode web interface screen: academic rigor wrapped in gentle cobalt pastels, airy geometry, and classical artistic motifs.
LAYOUT
The screen uses a fixed 240px left-hand sidebar containing branding, core navigation, a bottom promo banner, and a user profile snippet. The main viewport hosts a header with global search and a primary CTA button, transitioning immediately into a hero banner. Underneath, a responsive 4-column metric grid precedes an asymmetrical two-column analytics block, capped by a full-width upcoming assignments data table.
PALETTE (use these exact hex values)
- #F6F8FC — Canvas Ground: Global application viewport background behind cards and side navigation
- #FFFFFF — Card Surface: Background for elevated metric modules, content panels, and data tables
- #F0F4FF — Hero Tint: Subtle cool-toned pastel container background for the main greeting banner
- #2B59FF — Electric Indigo: Primary CTAs, progress bars, active navigation pills, and chart trendlines
- #EEF2FF — Soft Indigo Wash: Active navigation item background and primary icon badge surface
- #1E293B — Ink Slate: High-emphasis titles, stat values, and tabular headlines
- #64748B — Muted Slate: Secondary descriptors, unselected menu items, axis labels, and dates
- #10B981 — Success Emerald: Positive delta metrics, online activity pips, and submitted status tags
- #E2E8F0 — Border Subtle: Hairline card outlines, secondary button borders, and table dividers
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 36px display. Tracking -0.02em at display, 0 at body. Clean, highly legible geometric sans-serif (Plus Jakarta Sans match) conveying professional academic clarity and contemporary boutique design sensibility. The typeface communicates structural order with balanced x-heights and open counters, easily substituted with Inter or DM Sans under open licenses.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 24px between sections, 1440px container, airy density.
DEPTH
Depth is created almost entirely through soft planar contrast between the light gray-blue viewport canvas (#F6F8FC) and the crisp white card surfaces (#FFFFFF). Drop shadows are restrained to an imperceptible ambient blur (0px 2px 8px rgba(30, 41, 59, 0.04)). There is zero beveling, heavy stroke-work, or skeuomorphic layering.
IMAGERY
Vector illustrations blend modernist flat-character styling with surreal classical humanistic touches, notably classical marble busts and stylized butterflies. Shapes use smooth pastel shading, muted violet-blues, and mustard accents. Stock photography is strictly confined to circular 32px user avatar crops.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive synthesis of an ultra-clean, cobalt-accented SaaS dashboard layout juxtaposed with whimsical classical Roman bust and butterfly vector artwork in the hero card.
MUST
- Use generous 20px card radius consistently across all content blocks.
- Pair electric indigo (#2B59FF) CTAs strictly with high-contrast pure white text.
- Keep card inner padding strictly at 20px or 24px to preserve airiness.
- Rely on soft tinted background squares (36px, radius 10px) to house category icons.
AVOID
- Never apply harsh, heavy black box-shadows; keep elevation virtually flat or under 4px blur at 3% opacity.
- Do not use sharp 0px or small 4px corners on primary structural cards.
- Avoid saturated, dark borders; outlines must never exceed 1px solid #E2E8F0.
- Never use dark background themes in this workspace—luminosity must remain high.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2784:2960. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
