Design a light-mode website section: airy cognitive architecture grounding focused micro-learning cards over an undulating cobalt halftone wave.
LAYOUT
Symmetric, single-column central marketing funnel flanked by floating asymmetrical interface modules. The rhythm descends vertically: Pill Kicker -> Two-tier Display Heading -> 2-line Body Statement -> 4-column Trust Row -> Dual CTA Row -> Value Verification Points. The lower 40% of the viewport is anchored by the halftone wave hosting the tilted UI cards that bleed out of the lower boundary.
PALETTE (use these exact hex values)
- #FAF9F6 — Porcelain Canvas: Global background providing a warm, glare-free reading surface
- #FFFFFF — Card Elevated Surface: Background for floating interface pods, dashboard cards, and navigation items
- #191F2D — Ink Charcoal: High-contrast headings, primary logo lettering, and critical telemetry values
- #2E53C8 — Cobalt Learning: Secondary hero headline clause, progress gauges, and key learning indicators
- #A8382B — Terracotta Flame: Primary conversion button fill, brand mark glyph, and streak highlights
- #4668D8 — Halftone Wave Indigo: Dot-matrix particle illustration sweeping across the lower canvas
- #58627A — Slate Neutral: Explanatory subtext, subheadings, micro-copy, and trust badges
- #E6EAF2 — Border Subtle: Hairline 1px bounding stroke for cards, pills, and secondary buttons
- #2E9E5B — Growth Green: Circular progress track on the dashboard and validation checkmarks
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Epilogue, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 24px heading, 64px display. Tracking -0.03em at display, -0.01em at body, 0.02em at micro. Plus Jakarta Sans delivers an engineered, purposeful tone with humanist openness. Its crisp geometric circles and tall x-height make micro-data (metrics, percentages, vocabulary tags) exceptionally legible while maintaining editorial authority at 64px display scale. Inter or DM Sans serve as flawless drop-in substitutes.
GEOMETRY & SPACING
Corner radii — cards 18px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through layered soft planes rather than harsh bevels. The lowest layer is the warm paper ground, followed by the mid-ground halftone dot field, topped by floating cards using `box-shadow: 0 16px 36px -8px rgba(25, 31, 45, 0.07), 0 0 0 1px rgba(230, 234, 242, 0.8)`. The cards feel physically suspended 12px to 24px above the dynamic surface.
IMAGERY
Abstract generative particle wave comprised of halftone dots rendered in isometric cobalt curves. Floating vector UI cards surround the central viewport displaying crisp typography, SVG flags, and clean circular data viz gauges. Photography, photorealistic mockups, and chaotic gradients are completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The undulating blue halftone stipple ribbon woven beneath elevated, clinical white UI widgets. To implement correctly, generate a procedural 3D dot mesh rendered with varying particle sizes and indigo opacity, keeping it strictly behind the interactive white cards with zero text overlap.
MUST
- Retain the warm porcelain background (#FAF9F6) to avoid the sterile glare of pure #FFFFFF.
- Split the primary hero heading strictly into charcoal problem and cobalt solution lines.
- Confine the terracotta red (#A8382B) exclusively to action triggers, streaks, and logo marks.
- Use 10px corner radius on interaction controls and 18px to 24px on floating content cards.
AVOID
- Do not render the particle stipple wave in bright multi-color gradients; stick strictly to cobalt monochrome.
- Never replace the terracotta primary button with blue; cobalt is strictly informative, not transactional.
- Avoid harsh black borders or heavy divider lines; delineate surfaces only with #E6EAF2 or soft shadows.
- Do not scale floating cards so large that they obscure the dot particle flow beneath.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
