Design a light-mode web interface screen: crisp modular dashboard workspace bathed in daylight, cobalt accents, and porcelain container cards.
LAYOUT
The workspace uses a fixed 240px left-hand sidebar containing workspace toggles, navigation links, and a bottom upsell banner. The main content zone features a fixed header with global search and user avatar, descending into a title bar with count chips, a horizontal filter/search toolbar, an elevated 5-item category carousel, and a symmetrical 3-column catalog grid.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Outer application canvas and page background surrounding cards and controls
- #FFFFFF — Card Surface White: Primary surfaces including sidebar, content cards, inputs, and search bars
- #F1F5F9 — Subtle Surface Fill: Thumbnail backdrop frames, category card wells, and hover states
- #2563EB — Cobalt Blue: Main branding, active state tint, key button fills, and logo icon
- #EFF6FF — Ice Blue Active Tint: Active sidebar pill background, count badges, and focus rings
- #F43F5E — Badge Magenta: Prominent 'NEW' tag pills on card previews
- #0F172A — Text Primary: Page headings, card titles, active links, and prominent labels
- #64748B — Text Muted: Body descriptions, metadata labels, counts, and search placeholder text
- #E2E8F0 — Border Subtle: 1px hairline borders dividing cards, filters, and sidebar sections
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 28px display. Tracking -0.02em at headings, 0 at body. The typographic tone is objective, contemporary, and engineered for high data-density without feeling cramped. Inter or Plus Jakarta Sans provides crisp legibility at small sizes (11px-13px) with a disciplined vertical rhythm, keeping display headers confident yet restrained at 28px semi-bold.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved predominantly through high-luminance layering: pure white cards resting on an off-white #F8FAFC canvas framed by hair-thin #E2E8F0 borders. Subtle, diffuse drop shadows (0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02)) separate interactive cards without muddying the interface.
IMAGERY
Thumbnail imagery consists of clean, high-fidelity UI previews and soft 3D/flat isometric isometric marketing graphics enclosed in rounded grey/pastel frames. Graphics utilize cool cyan, soft purple, and royal blue accents, keeping background artwork strictly contained within framing windows.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-layered card preview architecture: an outer 16px curved white envelope hosting an inset light grey canvas mockup zone with a top-left micro magenta badge and bottom device icon switcher. Misuse commonly occurs when engineers bleed thumbnail images edge-to-edge or remove the inner card padding, destroying the refined gallery aesthetic.
MUST
- Use clean 1px borders (#E2E8F0) on white cards with minimal, high-blur shadows.
- Pair #2563EB royal blue with ultra-light #EFF6FF backgrounds for active elements.
- Maintain uniform 16px border radii on all content card containers.
- Ensure preview graphics inside cards have clean, neutral inset background paddings.
AVOID
- Do not introduce dark theme panels or heavy black structural dividers.
- Never apply high-contrast borders thicker than 1px to standard cards.
- Avoid colorful background gradients behind the main page layout canvas.
- Do not clutter template cards with multi-colored tags; use monochromatic secondary text.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
