Design a light-mode web interface screen: crisp product education conveyed through deep navy section breaks, pastel squircle glyphs, and luminous floating telemetry.
LAYOUT
The interface follows a top-down single-column narrative constrained to 1200px max width. The hero pairs left-aligned value propositions with a tilted right-hand interface mock, resolving into a balanced 3-step sequence connected by directional arrows. Below, a massive full-width dark-indigo block anchors product features before gracefully transitioning back to a dual-column benefit and metric data visualization section.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pure: Primary surface for page canvas, form controls, and nested feature cards.
- #f8fafc — Canvas Muted: Subtle background wash across outer page gutters and secondary data cards.
- #0b1329 — Midnight Feature: High-contrast background block enclosing the four-column features section.
- #1b64f2 — Cobalt Primary: Primary action buttons, active navigation, link arrows, and primary chart telemetry.
- #0e1726 — Ink Primary: Primary headings, titles, metrics, and high-emphasis display type.
- #64748b — Slate Neutral: Body copy, input placeholder text, axis lines, and secondary navigation labels.
- #eff6ff — Pastel Cobalt Tint: Background container for primary process and curriculum icon tiles.
- #ffe4e6 — Rose Blush Tint: Background surface for practice cards and streak badge accents.
- #dcfce7 — Emerald Sage Tint: Background surface for growth stages and learner feedback markers.
- #e2e8f0 — Border Subtle: Outlines on form wrappers, card edges, horizontal rules, and chart grids.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Public Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 32px heading-lg, 44px display. Tracking -0.03em for headlines, 0.05em for uppercase tags. The typographic tone is authoritative, highly structured, and academic yet accessible, powered by Plus Jakarta Sans. Its circular counters and clean vertical stems provide the crisp utility required for technical EdTech without feeling cold. Inter or DM Sans serve as flawless drop-in open-source substitutes.
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 achieved through selective perspective layering rather than global heavy shadows. The primary hero mockup uses a slight 3D rotation with multi-tier diffuse drop shadows (rgba(14, 23, 38, 0.08) at 24px blur) combined with floating satellite badges to convey product sophistication without clutter.
IMAGERY
Imagery strictly favors synthetic vector UI dashboards, perspective product mockups, and minimal SVG metric charts over lifestyle photography. Floating accent chips with high-contrast icon tokens (users, metrics, rockets) float adjacent to UI windows to suggest dynamic real-time utility.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the contrast-inversion island: placing four rounded white cards with colorful pastel squircles inside a commanding midnight-navy (#0b1329) section frame, separating the airy light hero from the analytical metric sections below.
MUST
- Maintain strict 96px vertical whitespace gaps between disparate landing page content sections.
- Use solid white surfaces for feature cards when nesting them directly inside the #0b1329 dark wrapper.
- Keep icon glyph backgrounds strictly within the 10-15% pastel saturation range to prevent harsh contrast.
- Apply negative letter spacing (-0.02em to -0.03em) exclusively to headline typography above 24px.
AVOID
- Never substitute the dark navy section background (#0b1329) with neutral pure black (#000000).
- Do not omit the directional arrow icon from bottom text links inside card components.
- Never use sharp, 0px squared corners on icons, cards, inputs, or interactive controls.
- Avoid high-contrast saturated fills behind mini-feature icons; always preserve the pastel squircle aesthetic.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2080:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
