Design a light-mode web interface screen: crisp daylight cockpit for organic search intelligence with polychromatic telemetry on snow-white cards.
LAYOUT
The layout features an asymmetrical two-zone architecture: a fixed 240px navigation sidebar anchored to the left, and a scrolling modular canvas to the right. The main canvas stacks logically from top utility search bar to dashboard title and filter controls, followed by a 4-column metric grid. Beneath the metrics sits a 2:1 split between the performance graph and top pages table, terminating in a 3-column breakdown of rankings, site health, and competitor visibility.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global application backdrop providing slight cool contrast against floating card surfaces
- #FFFFFF — Card Surface: Background for dashboard widgets, search input, top navigation elements, and side menu
- #E2E8F0 — Subtle Border: Divider lines, card perimeters, input field outlines, and table row separators
- #1E6BFF — Electric Blue: Primary buttons, active sidebar pill highlights, clicks metric icon, and primary line graph
- #7C3AED — Violet Purple: Impressions metric icon, secondary area chart spline, and keyword ranking stack segment
- #06B6D4 — Cyan Teal: CTR icon background, CTR sparkline, and the site health gauge ring
- #F97316 — Tangerine Orange: Average position icon container, ranking distribution segment, and warning states
- #10B981 — Emerald Success: Positive trend indicators, top-ranking keyword indicators, and delta percentage badges
- #0F172A — Heading Slate: Top page titles, primary KPI numbers, card headers, and table row titles
- #64748B — Muted Slate: Navigation item labels, column headers, axis intervals, and comparison subtitles
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 28px display. Tracking -0.02em at titles, 0em at body. The typographic tone is ultra-clean, analytical, and structured, driven by a modern geometric sans-serif with tall x-height and tight numerals. It projects authority through strong weight jumps—leaping from light 12px slate metadata directly to 28px bold totals. Inter or Plus Jakarta Sans serve as flawless, freely available drop-in substitutions.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is communicated almost exclusively through boundary definition: flat white cards placed over an off-white canvas with 1px #E2E8F0 borders. Drop shadows are virtually absent or dialed to an ambient blur radius under 4px with less than 4% opacity. Hover states should subtly darken borders rather than lift surfaces off the screen.
IMAGERY
Iconography consists of monoline vector glyphs within 36x36px soft-toned rounded squares matching the thematic color of the metric. The only illustrative element is a whimsical 3D isometric rocket in the sidebar upgrade widget. Photography is strictly avoided except for the circular 32px user avatar.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the four-up KPI header cards where each card embeds a colored squircle icon in the upper-left, bold oversized value in the center, and an uninterrupted edge-to-edge decorative trendline flowing across the lower boundary. Recreate it by pairing a 36px tinted icon container with a 40px tall wave spline bleeding into the bottom edge. Misuse typically occurs when borders clip the wave or when the wave is over-rendered with jagged, non-smoothed vertices.
MUST
- Use pure #FFFFFF surfaces over #F8FAFC canvas with hairline 1px #E2E8F0 borders for all data modules.
- Pair every primary 24-28px statistic with an inline colored delta arrow and a muted period subtext.
- Assign a unique distinct accent color (cyan, violet, blue, orange) to each high-level metric domain.
- Round corners uniformly to 14px on cards and 10px on interactive inputs and buttons.
AVOID
- Do not use dark or heavy drop shadows; rely solely on subtle border strokes for card depth.
- Never apply saturated accent colors to large background surfaces; reserve them strictly for telemetry and icons.
- Avoid sharp 0px corners or pill-shaped buttons for operational actions like 'Add Widget'.
- Do not hide chart legends or delta metrics; always explicitly state the temporal comparison baseline.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3520:2336. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
