Design a light-mode web interface screen: structured corporate modernism energized by hyper-saturated cobalt fields, playful 3d clayware, and razor-sharp typographic discipline.
LAYOUT
The page proceeds down a strict single-column 1240px container with calculated rhythm. It opens with an asymmetric split hero (text left, floating 3D cluster right), shifts into a symmetrical 4-column feature row centered under an accent pill, enters a large contained split card combining stats and photography, and culminates in a solid cobalt blue skill card.
PALETTE (use these exact hex values)
- #fbfcff — Canvas Ice: Primary background canvas creating expansive breathing room across all major page sections
- #ffffff — Card White: Contained modules, floating status badges, and secondary action button background
- #0b4de0 — Electric Cobalt: Hero CTA buttons, main interactive navigation badges, and the full-bleed skills section background
- #0e131f — Charcoal Black: Dominant text color for display headings, card titles, and navigation labels
- #58627a — Slate Neutral: Body copy, subtext descriptions, and secondary metadata iconography
- #f43f85 — Fuchsia Accent: Section indicator dashes, headline period accents, and interactive toggle highlights
- #e2e8f0 — Border Hairline: Delicate 1px borders surrounding structured programmatic cards and feature column dividers
- #10b981 — Success Mint: Application deadline checkmark icon and affirmative status messaging
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700/800. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 32px heading, 44px heading-lg, 60px display. Tracking -0.03em at display, 0.08em at uppercase labels. The typographic identity relies on a bold, high-clarity neo-grotesque that communicates confident institutional authority without feeling bureaucratic. Display headings are heavy and compact with punctuation treated as graphic accents, while body copy remains open, neutral, and highly legible. If Plus Jakarta Sans is unavailable, Inter or General Sans provide exact structural parity.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, airy density.
DEPTH
Depth is predominantly planar and optical rather than shadow-driven. The interface remains flat with hairline borders (1px #e2e8f0) defining containers, while depth is reserved for the tactile 3D isometric hero illustration and subtle floating badges with diffused 0 12px 32px rgba(14,19,31,0.06) shadows.
IMAGERY
The visual language splits cleanly into two tiers: whimsical, semi-matte 3D studio objects in the hero (deep blue ceramic bowls, clay typography, digital stylus) representing creative tools, contrasted by naturalistic documentary photography of diverse designers collaborating around tables in bright, authentic studio light.
SIGNATURE DETAIL — the thing that makes this design itself
The signature visual flourish is the colored punctuation dot terminating high-impact display titles (e.g., the bright fuchsia period in 'Get schooled.'), echoed by the horizontal micro-accent dash above section headers. This tiny typographic detail bridges the corporate cobalt framework with an energetic, irreverent creative attitude; using it on body copy or in multiple colors within one title destroys its punctuation value.
MUST
- Anchor section headings with an accent-colored period or miniature colored dash.
- Use generous vertical section gaps of at least 80px to 96px between major content blocks.
- Pair rich cobalt blue containers with pure white typography and high-contrast outline icons.
- Keep outline icons strictly monochrome and drawn with consistent 1.5px stroke weights.
AVOID
- Do not use dark muddy shadows; depth must rely on clean borders and claymorphic 3D rendering.
- Do not make the entire canvas dark; inverted cobalt is strictly reserved for high-impact feature blocks.
- Do not apply the fuchsia accent to large surfaces; it belongs exclusively on dots, rules, and small pills.
- Do not mix photo styles; use candid, warmly-lit collaborative imagery without synthetic studio backdrops.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
