Design a light-mode web interface screen: crisp airy layouts anchored by cobalt highlights and precise modular cards designed for rapid clarity.
LAYOUT
The page uses an asymmetrical three-zone layout framed within a 1360px bounding container. The hero split places high-impact copy and conversion triggers on the left, an interactive browser mockup carousel in the center, and a dedicated right-hand column containing step-by-step onboarding and social proof. Below the hero, the layout transitions to a centered feature title followed by a balanced three-column card grid.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global application backdrop providing clean contrast for floating cards and hero elements.
- #FFFFFF — Surface White: Primary surface fill for all floating cards, mockups, and structured step containers.
- #3361FF — Cobalt Primary: Brand focal point used for primary buttons, highlighted headline spans, active step indicators, and primary links.
- #0F172A — Text Slate Dark: High-contrast headings, card titles, and bold emphasis phrases throughout the interface.
- #64748B — Text Slate Muted: Secondary copy, descriptive labels, step annotations, and navigation menu links.
- #E2E8F0 — Subtle Border: Hairline structural borders around secondary cards, browser chrome, and active carousel thumbnails.
- #EFF6FF — Accent Blue Soft: Background fill for the top eyebrow pill and the founder-highlight callout container.
- #FFE4E6 — Accent Rose Soft: Background circular wash for editing step icons and creative customization cues.
- #DCFCE7 — Accent Green Soft: Circular icon backing for publication actions and affirmative capability badges.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 48px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is direct, modern, and technical without feeling cold, driven by the tight geometry of Plus Jakarta Sans. Its wide apertures and crisp legibility at small sizes support intricate UI step labels, while its bold weights bring authoritative heft to the primary display headings. Inter or SF Pro Display serve as direct drop-in alternatives with minimal kerning adjustments.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is created strictly through very soft, diffuse ambient drop shadows (0 12px 32px rgba(15, 23, 42, 0.05)) cast by white surfaces onto the slightly cooler canvas. Borders are secondary, relying on subtle 1px slate hairlines (#E2E8F0) to softly bound preview chrome and cards. No layered z-index stacking or heavy skeuomorphic bevels are used.
IMAGERY
Visual assets focus on crisp architectural photography and cleanly rendered high-fidelity UI templates within miniature frames. Photos feature bright, clean architectural facades and geometric structures with strong daylight and blue skies. Stock photos of generic handshakes or overly stylized 3D clay illustrations would severely undermine the design's crisp professionalism.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive move is the asymmetric three-zone hero containing a live browser mockup paired directly with an explicit, vertically dashed 'How it works' step-tracker card on the right rail. This transforms standard marketing copy into an intuitive demonstration of platform ease before the user ever scrolls. Misuse involves overloading the right-hand column with extraneous text or breaking the vertical step alignment.
MUST
- Highlight only one single key noun or concept in display headings using cobalt (#3361FF).
- Keep all card containers rounded to exactly 16px for consistency across panels.
- Use pastel icon backdrops to color-code logical categories without overwhelming the primary blue.
- Provide at least 24px padding inside all white module cards.
AVOID
- Do not introduce dark saturated background sections; keep the canvas predominantly airy and luminous.
- Never use hard black (#000000) for body text; rely on slate shades (#0F172A, #64748B).
- Avoid sharp 0px or 4px corners on UI cards and primary interactive buttons.
- Do not tint more than two consecutive words in a headline with the accent blue.
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 中尝试 
