Design a light-mode web interface screen: airy white studio canvas anchored by vivid cobalt accents and whimsical editorial vector graphics.
LAYOUT
Asymmetric two-column split hero resting inside a comfortable 1200px centered frame. The left 45% accommodates the typography stack, CTA button, and social proof counter, while the right 55% hosts the floating vector visual. Directly beneath the hero, three equally-spaced feature cards span the container width in a balanced 3-column row.
PALETTE (use these exact hex values)
- #FAFBFF — Canvas Ground: Background canvas tone across the whole landing viewport
- #FFFFFF — Surface Raised: Card backgrounds, circular button housings, and avatar borders
- #2D5BFF — Cobalt Primary: Primary interactive buttons, logo monogram, and hero illustration focal dress
- #14172C — Heading Obsidian: Display headlines, feature card titles, and active nav elements
- #6F768E — Muted Slate: Supporting descriptive copy, subtitle labels, and navigation links
- #EFF2F7 — Border Subtle: Delicate borders enclosing bottom feature cards and utility buttons
- #FF4F79 — Blush Pink: Turnaround badge icon background and energetic illustration flourishes
- #22C55E — Mint Green: Guarantee badge icon tint indicating trust and verification
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 20px heading, 52px display. Tracking -0.02em at display, 0.08em at eyebrow. The type choice (Plus Jakarta Sans or modern geometric grotesque) delivers a tech-forward yet distinctly human tone. Tight tracking on display sizes conveys contemporary editorial confidence, while open letter spacing on the uppercase eyebrow retains architectural clarity. If substituting, Inter or DM Sans retains the precise technical geometry without compromising friendliness.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through minimal, flat surface layering rather than intense drop shadows. White (#FFFFFF) feature cards rest directly against the #FAFBFF background, distinguished primarily by crisp 1px borders (#EFF2F7) and ultra-subtle, diffuse ambient glows (0 4px 16px rgba(20, 23, 44, 0.03)).
IMAGERY
Vector-based flat editorial character illustration with soft pastel accents and dynamic orbiting design motifs (pencils, cursors, foliage, tools). Realistic photographic imagery is reserved solely for tiny circular customer avatar proof points, never for hero visuals.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious tension between strict architectural SaaS typography on the left and a whimsical, orbit-styled vector artist illustration on the right. Misusing this means substituting the vector artwork with generic photographic stock, which completely drains the boutique design-agency personality.
MUST
- Keep the canvas background pale and luminous (#FAFBFF) to make white cards stand out naturally.
- Use solid cobalt blue (#2D5BFF) strictly for key focal interactions and hero brand presence.
- Round interactive button corners softly to exactly 10px rather than aggressive pills or sharp boxes.
- Maintain high contrast on headings with dark obsidian (#14172C) and soften paragraphs with #6F768E.
AVOID
- Do not use dark or heavily saturated full-bleed backgrounds that extinguish the airy light mood.
- Do not apply deep, muddy drop shadows; rely on crisp 1px borders (#EFF2F7) instead.
- Do not center-align the hero copy; maintain strict left-alignment against the right-side artwork.
- Do not introduce realistic corporate stock photography; use stylized, vibrant vector character art.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3456:2384. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
