Design a dark-mode web interface screen: deep midnight hero fading into clean daylight cards, punctuated with soft cyan and lavender gradients.
LAYOUT
The page opens with an authoritative dark midnight hero container framed by a slim floating navigation bar, split 50/50 between text hierarchy and an overlapping media collage. A clean white transition follows immediately, hosting a single-row monochrome logo trust strip. Subsequent sections unfold in classic centered rhythms: a 3-column process sequence connected by dotted tracking arrows, flowing into an asymmetric split-screen teacher spotlight with a live-style dashboard mockup on the right.
PALETTE (use these exact hex values)
- #03091e — Midnight Base: Deep navy background anchoring the hero header and navigation context
- #ffffff — Daylight White: Primary background for lower content sections, card faces, and crisp text overlays
- #f8fafc — Subtle Surface Offwhite: Card container backgrounds and inactive state pills in dashboard widgets
- #199396 — Primary Teal: Primary interactive buttons, category highlights, step indicators, and active accents
- linear-gradient(90deg, #37cbb9 0%, #a78bfa 100%) — Education Gradient: Hero headline accent span and atmospheric glow under framing layers
- linear-gradient(135deg, #4ade80 0%, #38bdf8 45%, #6366f1 100%) — Frame Backdrop Gradient: Rounded photo portrait backdrop framing the hero image cutout
- #0f172a — Text Slate Heading: Primary headings and strong metrics on light canvas areas
- #64748b — Text Slate Muted: Secondary copy, descriptive body, and logo strip brand marks
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, Inter, Be Vietnam Pro), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 24px subheading, 36px heading, 52px display. Tracking -0.03em on headings, 0 on body. The geometric sans-serif (Plus Jakarta Sans match) communicates youthful competence, structured modernism, and clarity. Heavy headings (700 weight) with tight negative tracking (-0.03em) anchor the user's attention without appearing cold or institutional. Inter or Outfit serve as drop-in substitutes without sacrificing line height or legibility.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through dramatic layering rather than heavy ambient occlusion. Crisp, bright white cards with wide, low-opacity shadows (blur 30-40px, alpha ~0.12) float directly across dark photographic backdrops to establish physical separation. On light canvas areas, elevation flattens into subtle 1px gray borders (#f1f5f9) and pale background tinting.
IMAGERY
Photography features real humans isolated and silhouetted, overlaid on a large smooth rounded-corner container filled with a cyan-to-indigo gradient and halftone dot grid. Subjects are engaging, brightly lit, and dressed casually in contemporary apparel. Stock corporate photography with synthetic office backdrops or stiff poses would clash with this approachable EdTech aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the seamless intersection of a midnight hero canvas with an organic photo cutout, cradled by an internal vibrant gradient shield and overlapped by crisp, elevated daylight UI badges. To use it properly, place cut-out photography half inside a vibrant rounded container, anchored by offset white data cards that break the boundary. It is commonly misused by using rectangular unclipped photos or forgetting the floating white notification chips.
MUST
- Retain the dual-zone canvas transition from midnight (#03091e) hero to pure white daylight (#ffffff) content.
- Apply the gradient span (cyan #37cbb9 to lilac #a78bfa) strictly to the focal headline keyword.
- Ensure floating white cards cast a diffuse, low-opacity drop shadow (0 20px 40px rgba(0, 0, 0, 0.12)) across image seams.
- Use 24px rounded corners consistently for all major presentation cards and media containers.
AVOID
- Do not extend the midnight canvas below the hero; lower sections must remain crisp daylight white.
- Avoid harsh high-contrast black borders; keep light card borders restricted to #f1f5f9 or subtle shadows.
- Do not render buttons as sharp 0px rectangles; always maintain the signature 10px rounded edge.
- Avoid multicolored partner logos; they must strictly adhere to the monochrome muted palette.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1392:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
