Design a light-mode web interface screen: bright collegiate ambition anchored by playful claymorphic depth and disciplined architectural typography.
LAYOUT
The top tier presents a balanced three-part header with logo, centered nav, and right-aligned CTA. Below, the hero section splits 50/50: a disciplined left stack (pill tag, 56px headline, body copy, dual buttons, trust checklist) and an unconstrained right canvas featuring the organic blue splash and 3D figure. Beneath the hero sits a full-width 4-column metric bar, leading immediately into a bottom split featuring a 1-column section heading alongside a 3-column service card layout.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: primary page background and high-elevation surface layer
- #FAFCFF — Card Surface Soft: background fill for lower section cards and metric bar
- #2563EB — Primary Royal Blue: primary interactive CTA fill, brand logos, and large organic hero splash
- #EBF2FE — Primary Tint Pale: badge surface fill and primary icon circular backing
- #182238 — Deep Slate Navy: display headlines, card titles, and bold stat figures
- #64748B — Muted Slate Gray: body copy, subtitle narrative, and secondary micro-labels
- #EEF2F6 — Subtle Border Stroke: delicate 1px boundary lines for stat bars and feature cards
- #10B981 — Mint Emerald: project metrics and delivery indicators
- #F59E0B — Honey Amber: client satisfaction icon and warm accent detail
- #8B5CF6 — Royal Purple: support rating and expert service icon indicator
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700/800. Sizes 12px caption, 14px body-sm, 15px body, 16px body-lg, 20px subheading, 24px heading, 32px heading-lg, 56px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers an immaculate, crisp geometric cadence that balances institutional authority with collegiate friendliness. Large display weights (-0.03em tracking, heavy ink traps) communicate modern execution and optimism. For open-source implementation, Inter or DM Sans serve as drop-in alternates while preserving metric proportions.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered natively through dimensional claymorphic 3D rendering rather than stacked box-shadows. Flat UI surfaces rely almost entirely on micro-borders (#EEF2F6) and high-contrast color bounding. When subtle elevation is applied to floating metric bars, it uses an extremely diffused, light ambient shadow (0 12px 32px -8px rgba(37, 99, 235, 0.05)).
IMAGERY
The imagery features clean, whimsical 3D clay-render characters paired with scholastic artifacts (backpacks, spiral notebooks, pencils, paper airplanes) rendered with soft tactile specular highlights. Assets sit atop an asymmetrical, organic royal blue splash shape (#2563EB) that bleeds into the right canvas margin. Photorealistic human photography or flat editorial line art would completely contradict the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric organic royal-blue canvas splash (#2563EB) anchoring a 3D claymorphic student running forward into the layout. It serves as both background architecture and narrative motion, breaking rigid UI grids. Misuse occurs when replacing the flowing vector shape with a standard rectangular photo container or reducing its scale so it detaches from the right edge.
MUST
- Use generous whitespace around the headline; display typography requires breathing room against the right hero art.
- Round cards and interactive panels consistently to 20px with faint 1px border strokes (#EEF2F6).
- Keep icon backdrops circular and color-coded to their metric category in pale 10% opacity tints.
- Maintain strict optical alignment between the left text column and the lower floating metric bar.
AVOID
- Never use sharp 0px or 4px corners on UI cards; it violates the approachable academic tone.
- Avoid heavy dark drop shadows; depth is created via soft tints, fine outlines, and 3D artwork.
- Do not saturate card surfaces; keep card backdrops white or near-white (#FAFCFF).
- Never crowd the display headline; allow at least 24px gap between text and button groups.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
