Design a light-mode web interface screen: sunlit edtech clarity powered by energetic cobalt accents and tactile floating micro-surfaces.
LAYOUT
The page follows an asymmetric top hero layout where the left column houses display typography, lead text, dual CTAs, and value propositions, while the right column balances with photographic and badge media. Below the hero, an organized 3-column grid introduces trending courses, anchored at the bottom by an enclosed horizontal social proof logo ticker.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global application page background providing clean high-key canvas contrast
- #FFFFFF — Card Surface: Background for course tiles, floating credential badges, and social bar
- #1D61F2 — Brand Cobalt: Primary CTA backgrounds, active navigation indicator, brand logo icon, and links
- #101828 — Text Heading: Display headlines, course titles, bold labels, and high-emphasis icons
- #667085 — Text Body: Hero lead paragraph, course descriptions, metadata strings, and input placeholders
- #FF4D6D — Subject Coral: UI/UX course graphic canvas and video play button accent
- #12B76A — Subject Emerald: Branding design card graphic canvas and lifetime access checkmark badge
- #E0ECFF — Subject Sky Soft: Hero background organic aura and web development category tag pill
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, Inter, Manrope), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.03em at display, 0em at body. Plus Jakarta Sans conveys youthful tech optimism, combining clean geometric structure with soft rounded terminals that eliminate academic sterility. The heavy display weight (700-800) provides confident authority, while the lighter body weights ensure effortless scanability for dense metadata.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through ultra-soft, low-opacity ambient drop shadows (rgba(16, 24, 40, 0.06) with 20px-30px blur and 6px-10px Y-offset) that make white badges float effortlessly over photographic cutouts and background canvases. Structural cards use thin 1px borders (#EAECF0) alongside minimal elevation to maintain crisp layout discipline without visual heaviness.
IMAGERY
Photography consists of expressive, high-energy cutouts of diverse students interacting with mobile devices, stripped of studio backdrops and paired with soft geometric vector shapes. Course thumbnails utilize clean 2D vector interfaces and wireframe diagrams rendered in flat pastel tints rather than realistic stock photos.
SIGNATURE DETAIL — the thing that makes this design itself
The floating contextual sticker motif: crisp white credential badges (Google, YouTube) and directional hand-drawn vector arrows orbiting around the human subject cutout. This immediately communicates accredited, self-paced, modern online education without requiring paragraphs of explanatory copy.
MUST
- Use generous whitespace around text blocks to preserve the light, breathable academic feel.
- Keep card outlines subtle (#EAECF0) and let soft diffuse drop shadows define elevation.
- Limit bold saturated color strictly to illustrations, active CTAs, and tiny category pills.
- Pair photographic cutouts with organic soft-tinted backing shapes to ground them in space.
AVOID
- Do not use harsh dark borders or stark black shadows under any floating card.
- Never use generic square corners; all surfaces must have at least 8px to 16px radius.
- Do not overload the palette; stick to cobalt primary with strictly categorized accent tints.
- Avoid solid dark backgrounds; the layout is fundamentally reliant on high-key airy canvas.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
