Design a light-mode website section: crisp developer instrumentation bathed in soft radiant vector waves and saturated cobalt accents.
LAYOUT
The page follows a classic top-level navigation bar (64px height) with links aligned center-right and split auth CTAs. Below, the hero section splits into a 50/50 two-column grid: the left column houses a vertically stacked sequence of announcement pill, three-line display headline, explanatory paragraph, dual CTA buttons, and a horizontal triple-proof metric strip. The right column holds a full-height interactive compression engine mockup.
PALETTE (use these exact hex values)
- #FBFBFE — Canvas Ice: dominant page background providing subtle cool luminosity
- #FFFFFF — Card Surface: elevated floating preview container and button pill backgrounds
- #F8FAFC — Log Box Fill: inset terminal log preview and input containers
- #3B59EC — Electric Cobalt: primary CTAs, highlighted headline phrase, and active interactive elements
- #0F172A — Deep Slate: primary heading copy, logo text, and primary card labels
- #5A6578 — Muted Slate: subheadings, paragraph explanations, and secondary nav links
- #64748B — Terminal Monospace Gray: raw log timestamps, debug tags, and line count indicators
- #EEF0FF — Lavender Tint: background fill for top status badge and circular icon chips
- #DCFCE7 — Teal Savings Pill: highlight badge indicating token reduction percentage
- #E2E8F0 — Border Subtle: perimeter outlines on inputs, cards, and secondary action buttons
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Segoe UI), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 58px display. Tracking -0.03em at display, 0em at body. The voice is confident, technical, and frictionless. The bold, tight-tracked Inter display headline cuts straight to developer value propositions, while the supporting monospace code font demonstrates authentic operational utility without feeling intimidating. For implementation, Inter and JetBrains Mono are open-source Google fonts that deliver identical fidelity.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through a multi-layered faint drop shadow on the central preview card (`box-shadow: 0 24px 48px -12px rgba(59, 89, 236, 0.08), 0 8px 24px -4px rgba(0, 0, 0, 0.04)`). The card sits elevated above a flat canvas that is etched with faint vector wire contours. Inset panels (such as the log viewer) create negative depth via 1px border outlines and a slightly darker tint (#F8FAFC).
IMAGERY
This design avoids abstract 3D shapes or stock photography entirely in favor of an hyper-authentic, interactive product mockup. The only decorative visual element is the concentric wireframe vector wave in the background, which communicates signal processing without cluttering.
SIGNATURE DETAIL — the thing that makes this design itself
The three-line period-delimited headline stack ('Compress logs. / Cut tokens. / Ship faster.') where the concluding line shifts to #3B59EC, paired with the faint vector wave radiating directly from beneath the live log-compression card.
MUST
- Reserve #3B59EC strictly for key conversion buttons and the final headline phrase.
- Use JetBrains Mono or similar coding monospace exclusively for logs and token numbers.
- Encase the right-hand hero graphic within a clean 20px radius card on white.
- Maintain generous 24px internal padding around interactive demo sections.
AVOID
- Never tint the primary background with dark or muddy colors; keep it #FBFBFE.
- Do not color the entire headline blue; only the final kicker line gets #3B59EC.
- Avoid sharp 0px card corners; all surfaces must maintain rounded 10px to 20px geometry.
- Do not use dark terminal black backgrounds for the code demo inside this light theme.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试