Design a light-mode web interface screen: crisp sapphire accents on luminous white surfaces framing a modular career-launching curriculum grid.
LAYOUT
The layout is constructed around an aligned 1200px centered grid with vertical section flow: a lean sticky navigation bar, followed by an asymmetrical two-column hero (copy and CTAs left, vector scene right). A prominent full-width feature container with embedded stats and device photography grounds the mid-page, flowing downward into a centered category tab control and a rigorous 3x3 uniform curriculum card grid.
PALETTE (use these exact hex values)
- #F4F7FB — Atmospheric Canvas: Outer background wash providing soft contrast against pure white cards and containers
- #FFFFFF — Pure Card Surface: Background for all elevated cards, containers, and interactive resting states
- #1677FF — Sapphire Brand: Primary action triggers, active pill indicators, brand iconography, and high-priority links
- #0F172A — Deep Slate Text: Headings, titles, high-emphasis metrics, and active menu labels
- #64748B — Muted Slate Text: Body copy, descriptions, lesson metadata, and passive navigational items
- #EBF3FF — Periwinkle Accent Tint: Eyebrow tag pills, blue icon badge backgrounds, and subtle container fills
- #DCFCE7 — Soft Emerald Tint: Icon container background for discovery and growth-themed curriculum items
- #E2E8F0 — Subtle Border Line: Dividers, secondary button strokes, and card perimeters
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 28px heading, 44px display. Tracking -0.02em on headings, 0.05em on badges. Plus Jakarta Sans provides an authoritative, contemporary tech vernacular that balances friendly rounded terminal curves with geometric clarity. Its heavy display weights create punchy, high-impact titles that feel decisive, while regular weights maintain razor-sharp legibility at small sizes (11px-13px) for dense curriculum syllabi. Substitutions like Inter or Manrope easily preserve this crisp product-oriented atmosphere.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated through extremely flat, crisp layers rather than heavy blurred drop shadows. Base elevation relies on a pale blue-grey background (#F4F7FB) over which pure white cards (#FFFFFF) sit with crisp 1px borders (#E2E8F0). In rare interactive or floating instances, an imperceptible ambient shadow (0 4px 12px rgba(15, 23, 42, 0.04)) preserves separation without muddying the interface.
IMAGERY
Visual assets are divided strictly into two functional formats: clean, stylized 2D/3D-vector product illustrations with flat blue characters in the hero, and crisp real-world hardware photography (MacBook on a clean desk displaying the web app) in the explanatory showcase panel. Vector illustrations must maintain a clinical, friendly tech tone; stock photography featuring generic people must be avoided in favor of focused device mockups.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the 3x3 curriculum card layout featuring pastel-hued badge containers paired with bottom-right floating circular action pills. This module treats course progression as clean, digestible software UI rather than static text. Misuse occurs when removing the 1px subtle card borders, saturating the badge backgrounds, or failing to terminate the matrix with an integrated light-blue lead capture card.
MUST
- Use solid sapphire blue (#1677FF) strictly for primary interactions and active state feedback.
- Enclose distinct curriculum topics in uniform 16px rounded white cards with subtle grey borders.
- Pair every lesson card with a 40px rounded icon badge in a corresponding thematic pastel tint.
- Maintain generous 80px to 96px vertical margins between macro content sections.
AVOID
- Do not introduce sharp 0px corners; all cards, tags, and inputs must use intentional radii.
- Never saturate background containers; canvas backgrounds must remain pale slate (#F4F7FB).
- Do not use dark backgrounds for body cards; reserve dark tones strictly for headline typography.
- Avoid high-contrast heavy drop shadows; rely on 1px borders (#E2E8F0) for card separation.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1952:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
