Design a light-mode web interface screen: structured daylight saas layout balanced by soft teal-blue tints and layered floating glass cards.
LAYOUT
The page uses an asymmetric split layout: a wide primary content column on the left (approx. 72% width) and an auxiliary sticky-style dashboard sidebar on the right (approx. 28% width). The primary column flows from an illustrative hero into a 4-column feature grid, a single full-span achievement alert, and a 4-column course catalog. The layout terminates with a full-width dark navy counter bar spanning the entire container base.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pure White: Primary background for the document and top-level card containers
- #f8fafc — Subtle Sky Tint: Secondary surface for hero backdrops, sidebar paneling, and subtle card fills
- #fffaf0 — Soft Warm Tint: Banner background highlighting student achievement callout
- #1c55b8 — Cobalt Primary: Main CTA buttons, primary category filters, and active tab states
- #0a2558 — Midnight Navy: Footer banner background and darkest high-emphasis text headlines
- #1a2434 — Text Primary Slate: Main body headers and primary card titles
- #5f708a — Text Muted Cool: Secondary copy, supporting descriptions, and subtitle text
- #10b981 — Emerald Mint: Checkmark icons, pill badges for CEFR levels, and completion bars
- #e5eef7 — Border Frost: Delicate stroke around cards, divider lines, and outline buttons
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700/800. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 24px heading, 44px display. Tracking -0.02em on headings, 0 on body. The typography is crystalline, functional, and friendly, led by a neo-grotesque sans like Inter. Its tight display tracking and generous x-height convey modern edtech professionalism without feeling cold or overly bureaucratic. For licensing alternatives, Plus Jakarta Sans or Roboto Flex replicate the balance of structural clarity and rounded warmth.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 72px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through delicate, atmospheric separation rather than heavy skeuomorphism. Cards use 1px solid hairline borders in #e5eef7 paired with soft ambient shadows of rgba(10, 37, 88, 0.05) with high blur (16px to 24px). The layered hero illustration places floating glass-like stat cards partly overlapping the cut-out photographic subject to imply multi-plane dimension.
IMAGERY
Photography features approachable, relatable learners and professionals in well-lit, authentic environments looking directly or pleasantly toward the camera. Cut-out silhouettes are overlaid against geometric soft sky-blue arched backdrops. Stock imagery that feels staged, corporate-stiff, or moody/dark is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric 'Productivity Sidebar' alongside a standard marketing feed, combined with floating micro-UI badges that overlap the hero photography. This blends SaaS product UI realism directly into top-of-funnel marketing, giving visitors a preview of the learning experience immediately. Misusing this by cramming unorganized links or marketing banners into the sidebar destroys the impression of an active dashboard.
MUST
- Use soft mint green (#10b981) exclusively for positive progress states, verified checks, and level indicators.
- Maintain high contrast headlines with #0a2558 or #1a2434 over clean white surfaces.
- Enclose secondary feature blocks in 1px subtle borders (#e5eef7) with rounded 16px corners.
- Pair photographic subjects with subtle geometric cutout backdrops in pale sky tint (#e8f2fc).
AVOID
- Do not introduce harsh drop shadows; rely on 1px pale borders and ambient alpha shadows.
- Do not use saturated yellow or red accents; keep warm colors confined to muted gold and peach.
- Do not crowd photographic cards; provide at least 20px padding between media and text content.
- Never use dark background cards within the main white canvas area.
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 中尝试 
