Design a light-mode web interface screen: playful boutique creative agency design pairing saturated commercial photography with dreamy pastel gradients and crisp cobalt accents.
LAYOUT
The page opens with a dark 36px utility strip atop a crisp white 72px navbar. Next is a 50/50 split hero container: photograph on left, pastel-backed text on right. Below sits a centered agency manifesto section leading directly into a text-only client logo row. Finally, a wide-margin portfolio showcase features a single large-format rounded carousel slide with flanking circular navigation arrows and bottom pagination dots.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary surface background across body, navbar, and manifesto sections.
- #0b1726 — Night Navy: Top announcement utility strip background providing grounded brand contrast.
- linear-gradient(135deg, #dcf0ef 0%, #f7fcb5 100%) — Pastel Hero Gradient: Background for the right half of the hero container displaying headline and doodles.
- #135ceb — Electric Cobalt: Primary action color for CTA buttons, section kickers, and active slider pagination.
- #0d1527 — Charcoal Black: Primary headings, display titles, and high-emphasis interface elements.
- #525b6a — Slate Body: Descriptive paragraphs, body copy, and secondary nav items.
- #94a3b8 — Muted Silver: Client logo text strip and inactive carousel pagination dots.
- #e2e8f0 — Soft Border: Outlined secondary buttons, input borders, and decorative outlines.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or DM Sans, Inter, Circular Std), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 38px heading, 58px display. Tracking -0.03em at display, 0.08em at uppercase kickers. Plus Jakarta Sans delivers an energetic, modern editorial voice that balances corporate authority with youthful, social-first optimism. Display sizes (-0.03em tracking) feel punchy and compact, while tracked-out uppercase micro-kickers provide rhythmic punctuation. Inter or DM Sans serve as flawless drop-in open-source substitutes.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is nearly flat throughout, relying on clean structural borders (#e2e8f0) and pure color blocking rather than drop shadows. The only physical elevation appears on circular carousel arrow buttons, which feature a very soft, diffuse shadow (0 4px 12px rgba(0,0,0,0.08)) to float cleanly over photographic content.
IMAGERY
Imagery is hyper-real, bright commercial product photography featuring high-speed liquid splashes, crisp studio lighting, and dynamic angles. Off-brand imagery includes desaturated lifestyle photos, generic corporate stock setups, dark mood photography, or heavily filtered warm vintage snapshots.
SIGNATURE DETAIL — the thing that makes this design itself
The split-screen hero that marries a tactile, hyper-saturated beverage splash photograph on one side with a soft mint-to-lemon diagonal gradient and hand-drawn line doodles on the other. It immediately conveys that the studio is half tactical commercial execution and half playful creative alchemy; removing either side turns it into either a generic beverage shop or a bland software agency.
MUST
- Use uppercase 11px cobalt blue kickers (#135ceb) with 0.08em tracking to introduce every major content block.
- Pair commercial studio photography strictly with bright, cheerful pastel gradient backdrops.
- Keep secondary buttons outlined with subtle 1px gray borders and gentle 8px corner radii.
- Limit hand-drawn black line doodles strictly to pastel gradient surfaces to preserve playfulness.
AVOID
- Do not apply heavy multi-layered drop shadows; keep elevation nearly flat and clean.
- Do not use the vibrant pastel gradient as a full-page background; keep it confined to hero cards.
- Do not mix serif fonts into headlines; maintain the crisp geometric grotesque typeface throughout.
- Do not color body copy solid black; retain charcoal #525b6a for comfortable reading contrast.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1344:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
